joker/szerencse kartyak kezelese

SerpentRace_Frontend/src/pages/Decks/Card_display.jsx

@@ -145,6 +145,8 @@ const Card_display = () => {
     "QUESTION": "Kérdés",
     "LUCK": "Szerencse",
     "JOKER": "Joker",
+    "joker": "Joker",
+    "luck": "Szerencse",
     // If backend converts to different numbers, map them:
     "0": "Igaz/Hamis",       // truefalse = 0
     "1": "Feleletválasztós", // multiplechoice = 1  
@@ -352,7 +354,7 @@ const Card_display = () => {
               )}
               {paginatedCards.map((card, idx) => {
                 const cardIndex = startIndex + idx + 1
-                const questionText = card.question || card.statement || 'Kérdés hiányzik'
+                const questionText = card.text || card.question || card.statement || 'Kérdés hiányzik'
                 
                 // Get answers based on card type
                 let answerOptions = []
@@ -364,13 +366,30 @@ const Card_display = () => {
                 // Detect card type by fields if subType is missing
                 let detectedType = subType
                 if (subType === 'undefined' || subType === 'null') {
-                  // Check by numeric type field first
+                  // First check deck type - if deck is JOKER or LUCK type, cards inherit that
-                  if (card.type === 3) {
+                  if (deck.type === 1) {
-                    // type 3 = True/False
+                    // Deck type 1 = Joker deck
-                    detectedType = 'truefalse'
+                    detectedType = 'joker'
-                  } else if (card.type === 2) {
+                  } else if (deck.type === 0) {
-                    // type 2 = Text answer
+                    // Deck type 0 = Luck deck
-                    detectedType = 'text'
+                    detectedType = 'luck'
+                  } else if (card.type !== undefined) {
+                    // Check by card.type field (string or numeric)
+                    const cardType = typeof card.type === 'string' ? card.type.toLowerCase() : card.type
+                    
+                    if (cardType === 'joker' || card.type === 'JOKER') {
+                      // Joker card
+                      detectedType = 'joker'
+                    } else if (cardType === 'luck' || card.type === 'LUCK') {
+                      // Luck card
+                      detectedType = 'luck'
+                    } else if (card.type === 3) {
+                      // type 3 = True/False
+                      detectedType = 'truefalse'
+                    } else if (card.type === 2) {
+                      // type 2 = Text answer
+                      detectedType = 'text'
+                    }
                   } else if (card.leftItems && card.rightItems && card.correctPairs) {
                     // Has leftItems, rightItems AND correctPairs = matching
                     detectedType = 'matching'
@@ -385,6 +404,28 @@ const Card_display = () => {
                   }
                 }
                 
+                // Extract consequence info for JOKER and LUCK cards
+                let consequenceText = null
+                if ((detectedType === 'joker' || detectedType === 'luck') && card.consequence) {
+                  const consequenceLabels = {
+                    0: 'Lépj előre',
+                    1: 'Lépj hátra',
+                    2: 'Kör kihagyás',
+                    3: 'Extra kör',
+                    5: 'Vissza a starthoz'
+                  }
+                  const consequenceType = consequenceLabels[card.consequence.type] || 'Ismeretlen hatás'
+                  const consequenceValue = card.consequence.value
+                  
+                  if (consequenceValue && [0, 1].includes(card.consequence.type)) {
+                    consequenceText = `${consequenceType} ${consequenceValue} mezőt`
+                  } else if (consequenceValue && [2, 3].includes(card.consequence.type)) {
+                    consequenceText = `${consequenceType} (${consequenceValue} kör)`
+                  } else {
+                    consequenceText = consequenceType
+                  }
+                }
+                
                 if (detectedType === 'truefalse' || detectedType === '0') {
                   // True/False cards
                   answerOptions = ['Igaz', 'Hamis']
@@ -432,16 +473,92 @@ const Card_display = () => {
                 return (
                   <div
                     key={cardId}
-                    className="relative h-80 cursor-pointer"
+                    className="relative h-80"
                     style={{ perspective: "1000px" }}
-                    onClick={() => toggleCardFlip(cardId)}
                   >
+                    {detectedType === 'joker' ? (
+                      // Joker card - no flip, just show the task
+                      <div
+                        className="w-full h-full bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-l-4 flex flex-col"
+                        style={{
+                          borderLeftColor: "var(--color-fun)",
+                        }}
+                      >
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-[color:var(--color-text-muted)] text-sm font-medium">
+                            Kártya #{cardIndex}
+                          </span>
+                          <span
+                            className="inline-block px-2 py-1 rounded-full text-xs font-bold"
+                            style={{
+                              background: "var(--color-fun)",
+                              color: "var(--color-text-inverse)",
+                            }}
+                          >
+                            🃏 JOKER
+                          </span>
+                        </div>
+                        
+                        <div className="flex-1 flex flex-col items-center justify-center">
+                          <div className="text-6xl mb-4">🃏</div>
+                          <div className="text-[color:var(--color-text)] text-center text-lg font-medium bg-[color:var(--color-fun)]/20 rounded-lg px-6 py-4 border-2 border-[color:var(--color-fun)]">
+                            {questionText}
+                          </div>
+                        </div>
+
+                        <div className="pt-3 border-t border-[color:var(--color-surface-selected)] text-xs text-[color:var(--color-text-muted)] text-center">
+                          <div>Típus: <span className="font-semibold">Joker</span></div>
+                        </div>
+                      </div>
+                    ) : detectedType === 'luck' ? (
+                      // Luck card - no flip, show text and consequence
+                      <div
+                        className="w-full h-full bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-l-4 flex flex-col"
+                        style={{
+                          borderLeftColor: "var(--color-luck)",
+                        }}
+                      >
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-[color:var(--color-text-muted)] text-sm font-medium">
+                            Kártya #{cardIndex}
+                          </span>
+                          <span
+                            className="inline-block px-2 py-1 rounded-full text-xs font-bold"
+                            style={{
+                              background: "var(--color-luck)",
+                              color: "var(--color-text-inverse)",
+                            }}
+                          >
+                            🎲 SZERENCSE
+                          </span>
+                        </div>
+                        
+                        <div className="flex-1 flex flex-col items-center justify-center">
+                          <div className="text-6xl mb-4">🎲</div>
+                          <div className="text-[color:var(--color-text)] text-center text-lg font-medium bg-[color:var(--color-luck)]/20 rounded-lg px-6 py-4 border-2 border-[color:var(--color-luck)] mb-4">
+                            {questionText}
+                          </div>
+                          {consequenceText && (
+                            <div className="text-[color:var(--color-text)] text-center">
+                              <div className="text-xl font-bold bg-[color:var(--color-luck)]/30 rounded-lg px-6 py-3 border-2 border-[color:var(--color-luck)]">
+                                {consequenceText}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="pt-3 border-t border-[color:var(--color-surface-selected)] text-xs text-[color:var(--color-text-muted)] text-center">
+                          <div>Típus: <span className="font-semibold">Szerencse</span></div>
+                        </div>
+                      </div>
+                    ) : (
                     <div
-                      className={`relative w-full h-full transition-transform duration-500`}
+                      className={`relative w-full h-full transition-transform duration-500 ${detectedType !== 'joker' && detectedType !== 'luck' ? 'cursor-pointer' : ''}`}
                       style={{
                         transformStyle: "preserve-3d",
                         transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
                       }}
+                      onClick={detectedType !== 'joker' && detectedType !== 'luck' ? () => toggleCardFlip(cardId) : undefined}
                     >
                       {/* Front side - Question */}
                       <div
@@ -455,15 +572,39 @@ const Card_display = () => {
                           <span className="text-[color:var(--color-text-muted)] text-sm font-medium">
                             Kártya #{cardIndex}
                           </span>
-                          <span
+                          {detectedType !== 'joker' && detectedType !== 'luck' && (
-                            className="inline-block px-2 py-1 rounded-full text-xs font-bold"
+                            <span
-                            style={{
+                              className="inline-block px-2 py-1 rounded-full text-xs font-bold"
-                              background: currentDeckType?.color || "var(--color-success)",
+                              style={{
-                              color: "var(--color-text-inverse)",
+                                background: currentDeckType?.color || "var(--color-success)",
-                            }}
+                                color: "var(--color-text-inverse)",
-                          >
+                              }}
-                            {answerCount} válasz
+                            >
-                          </span>
+                              {answerCount} válasz
+                            </span>
+                          )}
+                          {detectedType === 'joker' && (
+                            <span
+                              className="inline-block px-2 py-1 rounded-full text-xs font-bold"
+                              style={{
+                                background: "var(--color-fun)",
+                                color: "var(--color-text-inverse)",
+                              }}
+                            >
+                              🃏 JOKER
+                            </span>
+                          )}
+                          {detectedType === 'luck' && (
+                            <span
+                              className="inline-block px-2 py-1 rounded-full text-xs font-bold"
+                              style={{
+                                background: "var(--color-luck)",
+                                color: "var(--color-text-inverse)",
+                              }}
+                            >
+                              🎲 SZERENCSE
+                            </span>
+                          )}
                         </div>
                         
                         <h3 className="text-lg font-bold text-[color:var(--color-text)] mb-3">
@@ -492,7 +633,7 @@ const Card_display = () => {
                       >
                         <div className="flex items-center justify-between mb-3">
                           <span className="text-[color:var(--color-text-muted)] text-sm font-medium">
-                            Megoldás
+                            {detectedType === 'joker' || detectedType === 'luck' ? 'Kártya hatás' : 'Megoldás'}
                           </span>
                           <span
                             className="inline-block px-2 py-1 rounded-full text-xs font-bold"
@@ -501,11 +642,37 @@ const Card_display = () => {
                               color: "var(--color-text-inverse)",
                             }}
                           >
-                            {answerCount} válasz
+                            {detectedType === 'joker' || detectedType === 'luck' ? (detectedType === 'joker' ? '🃏 JOKER' : '🎲 SZERENCSE') : `${answerCount} válasz`}
                           </span>
                         </div>
                         
-                        {answerCount > 0 ? (
+                        {detectedType === 'joker' ? (
+                          // Joker card - just show the task/challenge
+                          <div className="flex flex-col items-center justify-center h-full py-8">
+                            <div className="text-6xl mb-4">🃏</div>
+                            <div className="text-[color:var(--color-text)] text-center text-lg font-medium bg-[color:var(--color-fun)]/20 rounded-lg px-6 py-4 border-2 border-[color:var(--color-fun)]">
+                              {questionText}
+                            </div>
+                            <div className="text-[color:var(--color-text-muted)] text-sm mt-4 text-center italic">
+                              A játékmester dönti el a teljesítést
+                            </div>
+                          </div>
+                        ) : detectedType === 'luck' ? (
+                          // Luck card - show consequence
+                          <div className="flex flex-col items-center justify-center h-full py-8">
+                            <div className="text-6xl mb-4">🎲</div>
+                            {consequenceText && (
+                              <div className="text-[color:var(--color-text)] text-center">
+                                <div className="text-2xl font-bold mb-4 bg-[color:var(--color-luck)]/20 rounded-lg px-6 py-3 border-2 border-[color:var(--color-luck)]">
+                                  {consequenceText}
+                                </div>
+                              </div>
+                            )}
+                            <div className="text-[color:var(--color-text-muted)] text-sm mt-2 text-center italic">
+                              Azonnal végrehajt
+                            </div>
+                          </div>
+                        ) : answerCount > 0 ? (
                           <div className="space-y-2">
                             <div className="text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
                               Helyes válasz:
@@ -563,6 +730,7 @@ const Card_display = () => {
                         </div>
                       </div>
                     </div>
+                    )}
                   </div>
                 )
               })}