Fix: Kártya típus kezelés javítása és joker kártyák megjelenítése

- Hozzáadva react-toastify a notifyWarning használatához
- Javítva a CardEditor fejléc hogy helyesen jelenítse meg az új kártya típusát
- Javítva a CardsList 'szerkesztés folyamatban' rész hogy QUESTION/JOKER/LUCK értékeket használjon
- Implementálva az automatikus nem megfelelő típusú kártyák törlése új kártya mentésekor
- Hozzáadva hibakezelés a kártya mentési logikához
- Joker típus címke változtatva 'Szórakozás'-ról 'Joker'-re
- Joker kártya szín változtatva citromsárgára (#FFD700)
- Docker watch mode volume konfiguráció javítása a hot reload-hoz

SerpentRace_Docker/docker-compose.watch.yml

@@ -75,7 +75,9 @@ services:
     environment:
       - NODE_ENV=development
       - VITE_API_URL=http://localhost:3000
-    volumes: []
+    volumes:
+      - ../SerpentRace_Frontend:/app
+      - /app/node_modules
     develop:
       watch:
         - action: sync

SerpentRace_Frontend/package-lock.json

@@ -15,6 +15,7 @@
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.6.0",
+        "react-toastify": "^11.0.5",
         "tailwindcss": "^4.1.7"
       },
       "devDependencies": {
@@ -1816,6 +1817,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3363,6 +3373,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

SerpentRace_Frontend/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.0",
+    "react-toastify": "^11.0.5",
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {

SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx

@@ -58,22 +58,34 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
 
   // Kártya adatok inicializálása
   useEffect(() => {
+    try {
       if (isCreating && cardType) {
-      setCardData(getDefaultCardData(cardType))
+        const defaultData = getDefaultCardData(cardType)
+        setCardData(defaultData)
       } else if (card) {
         setCardData({ ...card })
       } else {
         setCardData(null)
       }
+    } catch (error) {
+      console.error('Kártya inicializálási hiba:', error)
+      setCardData(null)
+    }
   }, [card, isCreating, cardType])
 
   const validateCard = (data) => {
+    try {
+      if (!data || !data.type) {
+        notifyError("Érvénytelen kártya adatok!")
+        return false
+      }
+
       if (data.type === 'QUESTION') {
         if (!data.question && !data.statement) {
           notifyError("Kérdés vagy állítás megadása kötelező!")
           return false
         }
-      if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
+        if (data.subType === 'quiz' && data.options && data.options.some(opt => !opt.trim())) {
           notifyError("Minden válaszlehetőséget ki kell tölteni!")
           return false
         }
@@ -90,6 +102,11 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       }
       
       return true
+    } catch (error) {
+      console.error('Validálási hiba:', error)
+      notifyError("Hiba történt a kártya ellenőrzése során")
+      return false
+    }
   }
 
   const updateCardData = (updates) => {
@@ -97,16 +114,14 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
   }
 
   const handleSave = () => {
-    if (!cardData) return
+    if (!cardData) {
+      notifyError("Nincs mentendő kártya adat!")
+      return
+    }
 
     if (!validateCard(cardData)) return
 
-    try {
     onSave(cardData)
-      notifySuccess('Kártya sikeresen mentve!')
-    } catch (error) {
-      notifyError('Hiba történt a kártya mentése során: ' + (error?.message || String(error)))
-    }
   }
 
   // Ha nincs kiválasztott kártya vagy új kártya létrehozás
@@ -129,6 +144,29 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
 
   return (
     <div className="flex-1 flex flex-col">
+      {/* Type Mismatch Warning */}
+      {cardData?.type && cardType && cardData.type !== cardType && !isCreating && (
+        <div className="bg-[color:var(--color-error)]/10 border-l-4 border-[color:var(--color-error)] px-6 py-4">
+          <div className="flex items-center gap-3">
+            <div className="text-[color:var(--color-error)] text-xl">⚠️</div>
+            <div>
+              <div className="text-[color:var(--color-error)] font-semibold">
+                Figyelmeztetés: Nem megfelelő kártya típus
+              </div>
+              <div className="text-[color:var(--color-error)]/80 text-sm">
+                {`Ez egy ${
+                  cardData.type === 'QUESTION' ? 'Feladat' : 
+                  cardData.type === 'JOKER' ? 'Joker' : 'Szerencse'
+                } kártya, de a pakli típusa ${
+                  cardType === 'QUESTION' ? 'Feladat' : 
+                  cardType === 'JOKER' ? 'Joker' : 'Szerencse'
+                }.`}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Header */}
       <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
         <div className="flex items-center justify-between">
@@ -140,17 +178,10 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
             </div>
             <div>
               <h2 className="text-xl font-bold text-[color:var(--color-text)]">
-<<<<<<< HEAD
                 {isCreating ? 'Új' : 'Szerkesztés'} {' '}
-                {cardData.type === 'QUESTION' && 'Feladat kártya'}
-                {cardData.type === 'JOKER' && 'Joker kártya'}
-                {cardData.type === 'LUCK' && 'Szerencse kártya'}
-=======
-                {isCreating ? 'Új' : 'Szerkesztés'} {' '}
-                {cardData.type === 'QUESTION' && 'Feladat kártya'}
-                {cardData.type === 'JOKER' && 'Joker kártya'}
-                {cardData.type === 'LUCK' && 'Szerencse kártya'}
->>>>>>> main
+                {(isCreating ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'}
+                {(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'}
+                {(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'}
               </h2>
               <div className="text-[color:var(--color-text-muted)] text-sm">
                 {cardData.type === 'QUESTION' && cardData.subType && (

SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx

@@ -27,20 +27,12 @@ const cardSubTypeLabels = {
   text: "Szöveges válasz"
 }
 
-<<<<<<< HEAD
 export default function CardsList({ 
   cards, 
   selectedCard,
   deckType, 
   onSelectCard, 
   onCreateCard,
-=======
-export default function CardsList({
-  cards,
-  selectedCard,
-  onSelectCard,
-  onCreateCard,
->>>>>>> main
   onDeleteCard,
   isCreatingCard,
   newCardType
@@ -48,7 +40,6 @@ export default function CardsList({
   const [confirmingDelete, setConfirmingDelete] = useState(null)
 
   const getCardPreview = (card) => {
-<<<<<<< HEAD
     if (card.type === 'QUESTION') {
       return card.question || card.statement || 'Új feladat kártya'
     }
@@ -57,44 +48,22 @@ export default function CardsList({
     }
     if (card.type === 'LUCK') {
       return card.text || 'Új szerencse kártya'
-=======
-    if (card.type === 'QUESTION') {
-      return card.question || card.statement || 'Új feladat kártya'
-    }
-    if (card.type === 'JOKER') {
-      return card.text || 'Új joker kártya'
-    }
-    if (card.type === 'LUCK') {
-      return card.text || 'Új szerencse kártya'
->>>>>>> main
     }
     return "Ismeretlen kártya"
   }
 
   const getCardTypeLabel = (card) => {
-<<<<<<< HEAD
     if (card.type === 'QUESTION') {
-=======
-    if (card.type === "task") {
->>>>>>> main
       if (card.subType) {
         return cardSubTypeLabels[card.subType] || "Feladat"
       }
       return "Feladat"
     }
-<<<<<<< HEAD
     if (card.type === 'JOKER') {
       return 'Joker'
     }
     if (card.type === 'LUCK') {
       return 'Szerencse'
-=======
-    if (card.type === "joker") {
-      return "Joker"
-    }
-    if (card.type === "luck") {
-      return "Szerencse"
->>>>>>> main
     }
     return "Ismeretlen"
   }
@@ -119,11 +88,14 @@ export default function CardsList({
           🃏 Kártyák
         </h2>
 
-<<<<<<< HEAD
         {/* 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"
+          className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg ${
+            deckType === 'QUESTION' ? 'bg-[color:var(--color-question)] hover:bg-[color:var(--color-question)]/80' :
+            deckType === 'LUCK' ? 'bg-[color:var(--color-luck)] hover:bg-[color:var(--color-luck)]/80' :
+            'bg-[color:var(--color-fun)] hover:bg-[color:var(--color-fun)]/80'
+          }`}
         >
           <FaPlus />
           <span>
@@ -132,42 +104,6 @@ export default function CardsList({
             {deckType === 'LUCK' && '🎲 Új szerencse kártya'}
           </span>
         </button>
-=======
-        {/* 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>
->>>>>>> main
       </div>
 
       {/* Cards List */}
@@ -185,7 +121,7 @@ export default function CardsList({
               )}
               <div>
                 <div className="text-[color:var(--color-text)] font-medium">
-                  Új {newCardType === "task" ? "feladat" : newCardType === "joker" ? "joker" : "szerencse"} kártya
+                  Új {newCardType === "QUESTION" ? "feladat" : newCardType === "JOKER" ? "joker" : "szerencse"} kártya
                 </div>
                 <div className="text-[color:var(--color-text-muted)] text-sm">
                   Szerkesztés folyamatban...
@@ -205,14 +141,24 @@ export default function CardsList({
               key={card.id}
               onClick={() => onSelectCard(card)}
               className={`
-                p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group
+                p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group relative
                 ${
                   isSelected
                     ? "bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg"
                     : "bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80"
                 }
+                ${card.type !== deckType ? "opacity-70" : ""}
               `}
             >
+              {card.type !== deckType && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="absolute inset-0 bg-[color:var(--color-error)]/5 backdrop-blur-[1px] rounded-xl"></div>
+                  <div className="absolute rotate-[-15deg] border-t-2 border-[color:var(--color-error)] w-full"></div>
+                  <span className="absolute top-1 right-1 text-xs text-[color:var(--color-error)] bg-[color:var(--color-error)]/10 px-2 py-1 rounded-lg">
+                    ⚠️ Nem megfelelő típus
+                  </span>
+                </div>
+              )}
               {/* Card Header */}
               <div className="flex items-start justify-between gap-2 mb-3">
                 <div className="flex items-center gap-3 flex-1 min-w-0">
@@ -320,15 +266,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)]">
-<<<<<<< HEAD
               <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>
-=======
-              <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>
->>>>>>> main
             </div>
           )}
         </div>

SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx

@@ -7,7 +7,7 @@ import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaugh
 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: "JOKER", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" }
+  { value: "JOKER", label: "Joker", icon: FaLaughBeam, color: "var(--color-fun)" }
 ]
 
 const privacyOptions = [

SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx

@@ -17,7 +17,7 @@ import DeckInfoPopUp from "../PopUp/DeckInfoPopUp"
 const deckTypes = [
   { label: "Luck", color: "var(--color-luck)" },
   { label: "Question", color: "var(--color-question)" },
-  { label: "Fun", color: "var(--color-fun)" },
+  { label: "Joker", color: "var(--color-fun)" },
 ]
 
 // initial state will be fetched from backend
@@ -163,8 +163,8 @@ const DeckManager = () => {
                   ? "Szerencse"
                   : type.label === "Question"
                   ? "Kérdés"
-                  : type.label === "Fun"
-                  ? "Szórakozás"
+                  : type.label === "Joker"
+                  ? "Joker"
                   : type.label}
               </button>
             ))}
@@ -303,7 +303,7 @@ const DeckManager = () => {
                       : deck.type === "Question"
                       ? "Kérdés"
                       : deck.type === "Fun"
-                      ? "Szórakozás"
+                      ? "Joker"
                       : deck.type}
                   </span>
                   <h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">

SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx

@@ -32,7 +32,7 @@ export default function DeckInfoPopUp({ deck, onClose }) {
   const deckTypes = {
     "Luck": { label: "Szerencse", color: "var(--color-luck)" },
     "Question": { label: "Kérdés", color: "var(--color-question)" },
-    "Fun": { label: "Szórakozás", color: "var(--color-fun)" }
+    "Fun": { label: "Joker", color: "var(--color-fun)" }
   }
 
   const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }

SerpentRace_Frontend/src/index.css

@@ -31,7 +31,7 @@
   /* Deck típus színek */
   --color-luck: #5fa985; /* zöld, mint a success */
   --color-question: #4f7be6; /* új kék, illik az oldalhoz */
-  --color-fun: #e15b64; /* piros, mint az error */
+  --color-fun: #FFD700; /* citromsárga a joker kártyákhoz */
 
   /* Háttérszínek */
   --color-background: #181d23;

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -8,7 +8,7 @@ import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
 import CardsList from "../../components/DeckCreator/CardsList.jsx"
 import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
 import { createDeck } from '../../api/deckApi'
-import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
+import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices"
 
 export default function DeckCreator() {
   const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
@@ -32,11 +32,7 @@ export default function DeckCreator() {
   // Betöltés API-ból
   useEffect(() => {
     if (deckId) {
-<<<<<<< HEAD
-      // TODO: Betöltés API-ból
-=======
       loadDeck(deckId)
->>>>>>> main
     } else {
       setDeck({
         id: null,
@@ -64,15 +60,6 @@ export default function DeckCreator() {
       }
 
       const saved = await createDeck(payload)
-<<<<<<< HEAD
-      setDeck(prev => ({ 
-        ...prev, 
-        id: saved.id ?? prev.id, 
-        creationdate: saved.creationdate ?? prev.creationdate, 
-        updatedate: saved.updatedate ?? prev.updatedate 
-      }))
-      alert('✅ Deck sikeresen mentve!')
-=======
       setDeck(prev => ({
         ...prev,
         id: saved.id ?? prev.id,
@@ -82,7 +69,6 @@ export default function DeckCreator() {
 
       console.log('Deck saved (backend):', saved)
       notifySuccess('Deck sikeresen mentve!')
->>>>>>> main
     } catch (error) {
       console.error('Mentési hiba:', error)
       notifyError('Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
@@ -108,46 +94,47 @@ export default function DeckCreator() {
   }
 
   const handleSaveCard = (cardData) => {
-<<<<<<< HEAD
+    try {
       const updatedCard = {
         ...cardData,
         id: isCreatingCard ? Date.now() : cardData.id
-=======
-    if (isCreatingCard) {
-      // Új kártya hozzáadása
-      const newCard = {
-        ...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)
->>>>>>> main
       }
       
-    setDeck(prev => ({
+      setDeck(prev => {
+        // Ellenőrizzük, vannak-e nem megfelelő típusú kártyák
+        const invalidCards = prev.cards.filter(card => card.type !== prev.type)
+        
+        // Ha új kártyát mentünk megfelelő típussal és vannak nem megfelelők
+        if (isCreatingCard && cardData.type === prev.type && invalidCards.length > 0) {
+          notifyWarning(`${invalidCards.length} db nem megfelelő típusú kártya törlésre került`)
+          
+          return {
+            ...prev,
+            cards: [
+              ...prev.cards.filter(card => card.type === prev.type),
+              updatedCard
+            ]
+          }
+        }
+        
+        // Alap mentési logika
+        return {
           ...prev,
           cards: isCreatingCard 
             ? [...prev.cards, updatedCard]
             : prev.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
-    }))
+        }
+      })
 
       setSelectedCard(updatedCard)
       setIsCreatingCard(false)
       setNewCardType(null)
+      
+      notifySuccess('Kártya sikeresen mentve!')
+    } catch (error) {
+      console.error('Kártya mentési hiba:', error)
+      notifyError('Hiba történt a kártya mentése során')
+    }
   }
 
   // 🔧 Itt is confirm() volt — most a CardsList popupja kezeli a megerősítést
@@ -196,7 +183,7 @@ export default function DeckCreator() {
             <CardEditor
               card={selectedCard}
               isCreating={isCreatingCard}
-              cardType={newCardType}
+              cardType={isCreatingCard ? newCardType : deck.type}
               onSave={handleSaveCard}
               onCancel={() => {
                 setIsCreatingCard(false)