Refactor: DeckCreator komponensek típus kezelésének egységesítése

- Frissítve a DeckHeader típusai a backend formátumra (QUESTION, LUCK, JOKER)
- Frissítve a CardsList és Editor komponensek típus kezelése
- Egyszerűsítve a kártya létrehozás és mentés logika
- Az új kártya gomb mindig a pakli típusának megfelelő kártyát hozza létre

SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx

@@ -22,7 +22,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
     }
 
     switch (type) {
-      case 'task':
+      case 'QUESTION':
         return {
           ...baseData,
           subType: 'quiz',
@@ -31,7 +31,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
           correctAnswer: 0,
           explanation: ''
         }
-      case 'joker':
+      case 'JOKER':
         return {
           ...baseData,
           title: '',
@@ -40,7 +40,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
           actionType: 'skip',
           usage: 'once'
         }
-      case 'luck':
+      case 'LUCK':
         return {
           ...baseData,
           event: '',
@@ -75,7 +75,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
   }
 
   const validateCard = (data) => {
-    if (data.type === 'task') {
+    if (data.type === 'QUESTION') {
       if (!data.question && !data.statement) {
         alert("❌ Kérdés vagy állítás megadása kötelező!")
         return false
@@ -84,12 +84,12 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
         alert("❌ Minden válaszlehetőséget ki kell tölteni!")
         return false
       }
-    } else if (data.type === 'joker') {
+    } else if (data.type === 'JOKER') {
       if (!data.text || !data.text.trim()) {
         alert("❌ Joker kártya szövege nem lehet üres!")
         return false
       }
-    } else if (data.type === 'luck') {
+    } else if (data.type === 'LUCK') {
       if (!data.text || !data.text.trim()) {
         alert("❌ Szerencse kártya szövege nem lehet üres!")
         return false
@@ -128,19 +128,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="text-2xl">
-              {cardData.type === 'task' && '📋'}
-              {cardData.type === 'joker' && '🃏'}
-              {cardData.type === 'luck' && '🎲'}
+              {cardData.type === 'QUESTION' && '📋'}
+              {cardData.type === 'JOKER' && '🃏'}
+              {cardData.type === 'LUCK' && '🎲'}
             </div>
             <div>
               <h2 className="text-xl font-bold text-[color:var(--color-text)]">
                 {isCreating ? 'Új' : 'Szerkesztés'} {' '}
-                {cardData.type === 'task' && 'Feladat kártya'}
-                {cardData.type === 'joker' && 'Joker kártya'}
-                {cardData.type === 'luck' && 'Szerencse kártya'}
+                {cardData.type === 'QUESTION' && 'Feladat kártya'}
+                {cardData.type === 'JOKER' && 'Joker kártya'}
+                {cardData.type === 'LUCK' && 'Szerencse kártya'}
               </h2>
               <div className="text-[color:var(--color-text-muted)] text-sm">
-                {cardData.type === 'task' && cardData.subType && (
+                {cardData.type === 'QUESTION' && cardData.subType && (
                   <>
                     {cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
                     {cardData.subType === 'truefalse' && 'Igaz/Hamis'}
@@ -196,21 +196,21 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
         ) : (
           /* Edit Mode */
           <div className="h-full overflow-y-auto p-6">
-            {cardData.type === 'task' && (
+            {cardData.type === 'QUESTION' && (
               <TaskCardEditor 
                 card={cardData} 
                 onChange={updateCardData} 
               />
             )}
             
-            {cardData.type === 'joker' && (
+            {cardData.type === 'JOKER' && (
               <JokerCardEditor 
                 card={cardData} 
                 onChange={updateCardData} 
               />
             )}
             
-            {cardData.type === 'luck' && (
+            {cardData.type === 'LUCK' && (
               <LuckCardEditor 
                 card={cardData} 
                 onChange={updateCardData} 

SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx

@@ -5,9 +5,9 @@ import React from "react"
 import { FaPlus, FaEdit, FaTrash, FaQuestionCircle, FaCheck, FaTimes, FaDice, FaTheaterMasks } from "react-icons/fa"
 
 const cardTypeIcons = {
-  task: { icon: FaQuestionCircle, color: "var(--color-question)" },
-  joker: { icon: FaTheaterMasks, color: "var(--color-fun)" },
-  luck: { icon: FaDice, color: "var(--color-luck)" }
+  QUESTION: { icon: FaQuestionCircle, color: "var(--color-question)" },
+  JOKER: { icon: FaTheaterMasks, color: "var(--color-fun)" },
+  LUCK: { icon: FaDice, color: "var(--color-luck)" }
 }
 
 const cardSubTypeLabels = {
@@ -19,7 +19,8 @@ const cardSubTypeLabels = {
 
 export default function CardsList({ 
   cards, 
-  selectedCard, 
+  selectedCard,
+  deckType, 
   onSelectCard, 
   onCreateCard, 
   onDeleteCard,
@@ -28,29 +29,29 @@ export default function CardsList({
 }) {
 
   const getCardPreview = (card) => {
-    if (card.type === 'task') {
+    if (card.type === 'QUESTION') {
       return card.question || card.statement || 'Új feladat kártya'
     }
-    if (card.type === 'joker') {
+    if (card.type === 'JOKER') {
       return card.text || 'Új joker kártya'
     }
-    if (card.type === 'luck') {
+    if (card.type === 'LUCK') {
       return card.text || 'Új szerencse kártya'
     }
     return 'Ismeretlen kártya'
   }
 
   const getCardTypeLabel = (card) => {
-    if (card.type === 'task') {
+    if (card.type === 'QUESTION') {
       if (card.subType) {
         return cardSubTypeLabels[card.subType] || 'Feladat'
       }
       return 'Feladat'
     }
-    if (card.type === 'joker') {
+    if (card.type === 'JOKER') {
       return 'Joker'
     }
-    if (card.type === 'luck') {
+    if (card.type === 'LUCK') {
       return 'Szerencse'
     }
     return 'Ismeretlen'
@@ -64,40 +65,18 @@ export default function CardsList({
           🃏 Kártyák
         </h2>
 
-        {/* New Card Dropdown */}
-        <div className="relative group">
-          <button className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg">
-            <FaPlus />
-            Új kártya
-          </button>
-          
-          {/* Dropdown Menu */}
-          <div className="absolute top-full left-0 right-0 mt-2 bg-[color:var(--color-card)] rounded-xl shadow-lg border border-[color:var(--color-surface-selected)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
-            <button
-              onClick={() => onCreateCard('task')}
-              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-t-xl"
-            >
-              <FaQuestionCircle className="text-[color:var(--color-question)]" />
-              📋 Feladat kártya
-            </button>
-            
-            <button
-              onClick={() => onCreateCard('joker')}
-              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200"
-            >
-              <FaTheaterMasks className="text-[color:var(--color-fun)]" />
-              🃏 Joker kártya
-            </button>
-            
-            <button
-              onClick={() => onCreateCard('luck')}
-              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-b-xl"
-            >
-              <FaDice className="text-[color:var(--color-luck)]" />
-              🎲 Szerencse kártya
-            </button>
-          </div>
-        </div>
+        {/* New Card Button */}
+        <button 
+          onClick={() => onCreateCard(deckType)}
+          className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
+        >
+          <FaPlus />
+          <span>
+            {deckType === 'QUESTION' && '📋 Új feladat kártya'}
+            {deckType === 'JOKER' && '🃏 Új joker kártya'}
+            {deckType === 'LUCK' && '🎲 Új szerencse kártya'}
+          </span>
+        </button>
       </div>
 
       {/* Cards List */}
@@ -218,9 +197,9 @@ export default function CardsList({
           
           {cards.length > 0 && (
             <div className="flex justify-center gap-4 mt-2 text-xs text-[color:var(--color-text-muted)]">
-              <span>📋 {cards.filter(c => c.type === 'task').length}</span>
-              <span>🃏 {cards.filter(c => c.type === 'joker').length}</span>
-              <span>🎲 {cards.filter(c => c.type === 'luck').length}</span>
+              <span>📋 {cards.filter(c => c.type === 'QUESTION').length}</span>
+              <span>🃏 {cards.filter(c => c.type === 'JOKER').length}</span>
+              <span>🎲 {cards.filter(c => c.type === 'LUCK').length}</span>
             </div>
           )}
         </div>

SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx

@@ -5,9 +5,9 @@ import React, { useState, useRef, useEffect } from "react"
 import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
 
 const deckTypes = [
-  { value: "Question", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
-  { value: "Luck", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
-  { value: "Fun", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" }
+  { value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
+  { value: "LUCK", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
+  { value: "JOKER", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" }
 ]
 
 const privacyOptions = [

SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx

@@ -6,14 +6,14 @@ import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa'
 
 export default function JokerCardEditor({ card, onChange }) {
   const [cardData, setCardData] = useState({
-    type: 'joker',
+    type: 'JOKER',
     text: ''
   })
 
   useEffect(() => {
     if (card) {
       setCardData({
-        type: 'joker',
+        type: 'JOKER',
         text: card.text || ''
       })
     }

SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx

@@ -6,14 +6,14 @@ import { FaDice, FaInfoCircle } from 'react-icons/fa'
 
 export default function LuckCardEditor({ card, onChange }) {
   const [cardData, setCardData] = useState({
-    type: 'luck',
+    type: 'LUCK',
     text: ''
   })
 
   useEffect(() => {
     if (card) {
       setCardData({
-        type: 'luck',
+        type: 'LUCK',
         text: card.text || ''
       })
     }