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 === 'QUESTION' && '📋'}
-              {cardData.type === 'joker' && '🃏'}
+              {cardData.type === 'JOKER' && '🃏'}
-              {cardData.type === 'luck' && '🎲'}
+              {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 === 'QUESTION' && 'Feladat kártya'}
-                {cardData.type === 'joker' && 'Joker kártya'}
+                {cardData.type === 'JOKER' && 'Joker kártya'}
-                {cardData.type === 'luck' && 'Szerencse 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)" },
+  QUESTION: { icon: FaQuestionCircle, color: "var(--color-question)" },
-  joker: { icon: FaTheaterMasks, color: "var(--color-fun)" },
+  JOKER: { icon: FaTheaterMasks, color: "var(--color-fun)" },
-  luck: { icon: FaDice, color: "var(--color-luck)" }
+  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 */}
+        {/* New Card Button */}
-        <div className="relative group">
+        <button 
-          <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">
+          onClick={() => onCreateCard(deckType)}
-            <FaPlus />
+          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"
-            Új kártya
+        >
-          </button>
+          <FaPlus />
-          
+          <span>
-          {/* Dropdown Menu */}
+            {deckType === 'QUESTION' && '📋 Új feladat kártya'}
-          <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">
+            {deckType === 'JOKER' && '🃏 Új joker kártya'}
-            <button
+            {deckType === 'LUCK' && '🎲 Új szerencse kártya'}
-              onClick={() => onCreateCard('task')}
+          </span>
-              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"
+        </button>
-            >
-              <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>
       </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 === 'QUESTION').length}</span>
-              <span>🃏 {cards.filter(c => c.type === 'joker').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 === '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: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
-  { value: "Luck", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
+  { value: "LUCK", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
-  { value: "Fun", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" }
+  { 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 || ''
       })
     }

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -17,7 +17,7 @@ export default function DeckCreator() {
   const [deck, setDeck] = useState({
     id: null,
     name: "Új Pakli",
-    type: "Question", // Question, Luck, Fun
+    type: "QUESTION", // QUESTION, LUCK, JOKER - backend formátum
     privacy: "private", // private, public
     description: "",
     cards: []
@@ -26,19 +26,18 @@ export default function DeckCreator() {
   // UI állapotok
   const [selectedCard, setSelectedCard] = useState(null)
   const [isCreatingCard, setIsCreatingCard] = useState(false)
-  const [newCardType, setNewCardType] = useState(null) // task, joker, luck
+  const [newCardType, setNewCardType] = useState(null)
 
-  // Betöltés (később API-ból)
+  // Betöltés API-ból
   useEffect(() => {
     if (deckId) {
       // TODO: Betöltés API-ból
-      loadDeck(deckId)
     } else {
       // Új deck
       setDeck({
         id: null,
         name: "Új Pakli",
-        type: "Question",
+        type: "QUESTION",
         privacy: "private",
         description: "",
         cards: []
@@ -46,60 +45,27 @@ export default function DeckCreator() {
     }
   }, [deckId])
 
-  const loadDeck = async (id) => {
-    // Mock deck betöltés
-    const mockDeck = {
-      id: id,
-      name: "Quiz Night",
-      type: "Question",
-      privacy: "public",
-      description: "Szórakoztató kvíz este",
-      cards: [
-        {
-          id: 1,
-          type: "task",
-          subType: "quiz",
-          question: "Mi Magyarország fővárosa?",
-          options: ["Budapest", "Debrecen", "Szeged", "Pécs"],
-          correctAnswer: 0,
-          points: 10,
-          timeLimit: 30,
-          explanation: "Budapest 1873 óta Magyarország fővárosa."
-        },
-        {
-          id: 2,
-          type: "task",
-          subType: "truefalse",
-          statement: "A Duna Magyarország leghosszabb folyója.",
-          isTrue: false,
-          points: 5,
-          timeLimit: 15,
-          explanation: "A Tisza a leghosszabb folyó Magyarországon."
-        }
-      ]
-    }
-    setDeck(mockDeck)
-  }
-
   const handleDeckUpdate = (updates) => {
     setDeck(prev => ({ ...prev, ...updates }))
   }
 
   const handleSaveDeck = async () => {
     try {
-      console.log("Deck mentése:", deck)
-
       const payload = {
         name: deck.name,
-        type: (deck.type || 'Question').toString().toUpperCase(),
+        type: deck.type,
         ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE',
         description: deck.description || '',
-        cards: deck.cards.map(c => ({ ...c, text: c.question || c.statement || c.text || '' }))
+        cards: deck.cards
       }
 
       const saved = await createDeck(payload)
-      setDeck(prev => ({ ...prev, id: saved.id ?? prev.id, creationdate: saved.creationdate ?? prev.creationdate, updatedate: saved.updatedate ?? prev.updatedate }))
+      setDeck(prev => ({ 
-      console.log('Deck saved (backend):', saved)
+        ...prev, 
+        id: saved.id ?? prev.id, 
+        creationdate: saved.creationdate ?? prev.creationdate, 
+        updatedate: saved.updatedate ?? prev.updatedate 
+      }))
       alert('✅ Deck sikeresen mentve!')
     } catch (error) {
       console.error('Mentési hiba:', error)
@@ -126,29 +92,21 @@ export default function DeckCreator() {
   }
 
   const handleSaveCard = (cardData) => {
-    if (isCreatingCard) {
+    const updatedCard = {
-      // Új kártya hozzáadása
+      ...cardData,
-      const newCard = {
+      id: isCreatingCard ? Date.now() : cardData.id
-        ...cardData,
-        id: Date.now(), // Temporary ID
-      }
-      setDeck(prev => ({
-        ...prev,
-        cards: [...prev.cards, newCard]
-      }))
-      setIsCreatingCard(false)
-      setNewCardType(null)
-      setSelectedCard(newCard)
-    } else {
-      // Meglévő kártya frissítése
-      setDeck(prev => ({
-        ...prev,
-        cards: prev.cards.map(card => 
-          card.id === cardData.id ? cardData : card
-        )
-      }))
-      setSelectedCard(cardData)
     }
+    
+    setDeck(prev => ({
+      ...prev,
+      cards: isCreatingCard 
+        ? [...prev.cards, updatedCard]
+        : prev.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
+    }))
+
+    setSelectedCard(updatedCard)
+    setIsCreatingCard(false)
+    setNewCardType(null)
   }
 
   const handleDeleteCard = (cardId) => {
@@ -184,6 +142,7 @@ export default function DeckCreator() {
             <CardsList
               cards={deck.cards}
               selectedCard={selectedCard}
+              deckType={deck.type}
               onSelectCard={handleSelectCard}
               onCreateCard={handleCreateCard}
               onDeleteCard={handleDeleteCard}