From c207fa596145623c5dfc8bb5e0fbccf23d651707 Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 19:35:08 +0200
Subject: [PATCH 1/9] =?UTF-8?q?feat(deck-creator):=20dropdown=20men=C3=BCk?=
 =?UTF-8?q?=20fejleszt=C3=A9se?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Típus és láthatóság dropdown menük átalakítása
- Ikonok hozzáadása mindkét dropdown menühöz
- Szöveg színek javítása a jobb láthatóságért
- Hover és kijelölési állapotok hozzáadása
- Dropdown menük egységes stílusának kialakítása
---
 .../src/components/DeckCreator/DeckHeader.jsx | 135 +++++++++++++++---
 1 file changed, 112 insertions(+), 23 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index 2aaa8626..7ca4e98d 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
@@ -1,7 +1,7 @@
 // src/components/DeckCreator/DeckHeader.jsx
 // Deck alapadatok szerkesztése és mentés
 
-import React from "react"
+import React, { useState, useRef, useEffect } from "react"
 import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
 
 const deckTypes = [
@@ -16,9 +16,30 @@ const privacyOptions = [
 ]
 
 export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
+  const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
+  const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
+  const typeDropdownRef = useRef(null);
+  const privacyDropdownRef = useRef(null);
+  
   const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0]
   const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0]
 
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
+        setIsTypeDropdownOpen(false);
+      }
+      if (privacyDropdownRef.current && !privacyDropdownRef.current.contains(event.target)) {
+        setIsPrivacyDropdownOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   const handleInputChange = (field, value) => {
     onUpdate({ [field]: value })
   }
@@ -80,17 +101,51 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
               <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
                 🎯 Típus
               </label>
-              <select
-                value={deck.type}
-                onChange={(e) => handleInputChange('type', e.target.value)}
-                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-              >
-                {deckTypes.map(type => (
-                  <option key={type.value} value={type.value}>
-                    {type.label}
-                  </option>
-                ))}
-              </select>
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
+                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
+                  style={{
+                    paddingLeft: "2.5rem"
+                  }}
+                >
+                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                    {React.createElement(currentDeckType.icon, {
+                      style: { color: currentDeckType.color }
+                    })}
+                  </div>
+                  {currentDeckType.label}
+                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                    <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                </button>
+                
+                {isTypeDropdownOpen && (
+                  <div 
+                    className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
+                    ref={typeDropdownRef}
+                  >
+                    {deckTypes.map(type => (
+                      <button
+                        key={type.value}
+                        onClick={() => {
+                          handleInputChange('type', type.value);
+                          setIsTypeDropdownOpen(false);
+                        }}
+                        className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
+                      >
+                        {React.createElement(type.icon, {
+                          style: { color: type.color }
+                        })}
+                        <span>{type.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Privacy */}
@@ -98,17 +153,51 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
               <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
                 👁️ Láthatóság
               </label>
-              <select
-                value={deck.privacy}
-                onChange={(e) => handleInputChange('privacy', e.target.value)}
-                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-              >
-                {privacyOptions.map(option => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
+                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
+                  style={{
+                    paddingLeft: "2.5rem"
+                  }}
+                >
+                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                    {React.createElement(currentPrivacy.icon, {
+                      className: "text-[color:var(--color-text)]"
+                    })}
+                  </div>
+                  {currentPrivacy.label}
+                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                    <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                </button>
+                
+                {isPrivacyDropdownOpen && (
+                  <div 
+                    className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
+                    ref={privacyDropdownRef}
+                  >
+                    {privacyOptions.map(option => (
+                      <button
+                        key={option.value}
+                        onClick={() => {
+                          handleInputChange('privacy', option.value);
+                          setIsPrivacyDropdownOpen(false);
+                        }}
+                        className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
+                      >
+                        {React.createElement(option.icon, {
+                          className: "text-[color:var(--color-text)]"
+                        })}
+                        <span>{option.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Description */}
-- 
2.52.0


From f56ebbf2c313fa8070bf8f057eed3b7434b4d96d Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 19:43:31 +0200
Subject: [PATCH 2/9] =?UTF-8?q?fix(deck-creator):=20angol=20sz=C3=B6vegek?=
 =?UTF-8?q?=20magyar=C3=ADt=C3=A1sa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 'Deck' szó cseréje 'Pakli'-ra
- Placeholder szövegek magyarítása
---
 .../src/components/DeckCreator/DeckHeader.jsx               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index 7ca4e98d..408b0251 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
@@ -63,7 +63,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
           </button>
           
           <h1 className="text-2xl font-bold text-[color:var(--color-text)]">
-            📝 Deck Szerkesztés
+            📝 Pakli Szerkesztés
           </h1>
         </div>
 
@@ -83,14 +83,14 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
           {/* Deck Name */}
           <div>
             <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              📦 Deck neve
+              📦 Pakli neve
             </label>
             <input
               type="text"
               value={deck.name}
               onChange={(e) => handleInputChange('name', e.target.value)}
               className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-              placeholder="Add meg a deck nevét..."
+              placeholder="Add meg a pakli nevét..."
             />
           </div>
 
-- 
2.52.0


From 46ad6caefd830bf73a9eb6ee06ff8ad3ab58a116 Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 19:52:45 +0200
Subject: [PATCH 3/9] =?UTF-8?q?refactor(deck-creator):=20statisztika=20pan?=
 =?UTF-8?q?el=20elt=C3=A1vol=C3=ADt=C3=A1sa=20=C3=A9s=20layout=20optimaliz?=
 =?UTF-8?q?=C3=A1l=C3=A1sa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Statisztika panel eltávolítva
- Grid elrendezés egyszerűsítve
- Felesleges kód eltávolítva
- Jobb helykihasználás az űrlap elemeknek
---
 .../src/components/DeckCreator/DeckHeader.jsx | 289 ++++++++----------
 1 file changed, 127 insertions(+), 162 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index 408b0251..22d8dcd1 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
@@ -44,10 +44,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
     onUpdate({ [field]: value })
   }
 
-  const cardsCount = deck.cards?.length || 0
-  const taskCards = deck.cards?.filter(card => card.type === 'task')?.length || 0
-  const jokerCards = deck.cards?.filter(card => card.type === 'joker')?.length || 0
-  const luckCards = deck.cards?.filter(card => card.type === 'luck')?.length || 0
+  // Remove unused card count variables
 
   return (
     <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
@@ -77,172 +74,140 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
       </div>
 
       {/* Main Content Row */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end">
-        {/* Deck Basic Info */}
-        <div className="lg:col-span-2 space-y-4">
-          {/* Deck Name */}
+      <div className="space-y-4">
+        {/* Deck Name */}
+        <div>
+          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+            📦 Pakli neve
+          </label>
+          <input
+            type="text"
+            value={deck.name}
+            onChange={(e) => handleInputChange('name', e.target.value)}
+            className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+            placeholder="Add meg a pakli nevét..."
+          />
+        </div>
+
+        {/* Type, Privacy and Description Row */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {/* Deck Type */}
           <div>
             <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              📦 Pakli neve
+              🎯 Típus
+            </label>
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
+                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
+                style={{
+                  paddingLeft: "2.5rem"
+                }}
+              >
+                <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                  {React.createElement(currentDeckType.icon, {
+                    style: { color: currentDeckType.color }
+                  })}
+                </div>
+                {currentDeckType.label}
+                <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                  <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              </button>
+              
+              {isTypeDropdownOpen && (
+                <div 
+                  className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
+                  ref={typeDropdownRef}
+                >
+                  {deckTypes.map(type => (
+                    <button
+                      key={type.value}
+                      onClick={() => {
+                        handleInputChange('type', type.value);
+                        setIsTypeDropdownOpen(false);
+                      }}
+                      className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
+                    >
+                      {React.createElement(type.icon, {
+                        style: { color: type.color }
+                      })}
+                      <span>{type.label}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Privacy */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              👁️ Láthatóság
+            </label>
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
+                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
+                style={{
+                  paddingLeft: "2.5rem"
+                }}
+              >
+                <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                  {React.createElement(currentPrivacy.icon, {
+                    className: "text-[color:var(--color-text)]"
+                  })}
+                </div>
+                {currentPrivacy.label}
+                <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                  <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              </button>
+              
+              {isPrivacyDropdownOpen && (
+                <div 
+                  className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
+                  ref={privacyDropdownRef}
+                >
+                  {privacyOptions.map(option => (
+                    <button
+                      key={option.value}
+                      onClick={() => {
+                        handleInputChange('privacy', option.value);
+                        setIsPrivacyDropdownOpen(false);
+                      }}
+                      className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
+                    >
+                      {React.createElement(option.icon, {
+                        className: "text-[color:var(--color-text)]"
+                      })}
+                      <span>{option.label}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              📝 Leírás
             </label>
             <input
               type="text"
-              value={deck.name}
-              onChange={(e) => handleInputChange('name', e.target.value)}
+              value={deck.description}
+              onChange={(e) => handleInputChange('description', e.target.value)}
               className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-              placeholder="Add meg a pakli nevét..."
+              placeholder="Rövid leírás..."
             />
           </div>
-
-          {/* Type and Privacy Row */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {/* Deck Type */}
-            <div>
-              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                🎯 Típus
-              </label>
-              <div className="relative">
-                <button
-                  type="button"
-                  onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
-                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
-                  style={{
-                    paddingLeft: "2.5rem"
-                  }}
-                >
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
-                    {React.createElement(currentDeckType.icon, {
-                      style: { color: currentDeckType.color }
-                    })}
-                  </div>
-                  {currentDeckType.label}
-                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                    <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                </button>
-                
-                {isTypeDropdownOpen && (
-                  <div 
-                    className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
-                    ref={typeDropdownRef}
-                  >
-                    {deckTypes.map(type => (
-                      <button
-                        key={type.value}
-                        onClick={() => {
-                          handleInputChange('type', type.value);
-                          setIsTypeDropdownOpen(false);
-                        }}
-                        className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
-                      >
-                        {React.createElement(type.icon, {
-                          style: { color: type.color }
-                        })}
-                        <span>{type.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Privacy */}
-            <div>
-              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                👁️ Láthatóság
-              </label>
-              <div className="relative">
-                <button
-                  type="button"
-                  onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
-                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
-                  style={{
-                    paddingLeft: "2.5rem"
-                  }}
-                >
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
-                    {React.createElement(currentPrivacy.icon, {
-                      className: "text-[color:var(--color-text)]"
-                    })}
-                  </div>
-                  {currentPrivacy.label}
-                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                    <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                </button>
-                
-                {isPrivacyDropdownOpen && (
-                  <div 
-                    className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
-                    ref={privacyDropdownRef}
-                  >
-                    {privacyOptions.map(option => (
-                      <button
-                        key={option.value}
-                        onClick={() => {
-                          handleInputChange('privacy', option.value);
-                          setIsPrivacyDropdownOpen(false);
-                        }}
-                        className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
-                      >
-                        {React.createElement(option.icon, {
-                          className: "text-[color:var(--color-text)]"
-                        })}
-                        <span>{option.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Description */}
-            <div>
-              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                📝 Leírás
-              </label>
-              <input
-                type="text"
-                value={deck.description}
-                onChange={(e) => handleInputChange('description', e.target.value)}
-                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-                placeholder="Rövid leírás..."
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Stats Panel */}
-        <div className="bg-[color:var(--color-background)]/50 rounded-xl p-4 border border-[color:var(--color-surface-selected)]">
-          <h3 className="text-[color:var(--color-text)] font-semibold mb-3 flex items-center gap-2">
-            📊 Statisztikák
-          </h3>
-          
-          <div className="space-y-2 text-sm">
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">Összes kártya:</span>
-              <span className="text-[color:var(--color-text)] font-semibold">{cardsCount}</span>
-            </div>
-            
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">📋 Feladat:</span>
-              <span className="text-[color:var(--color-question)] font-semibold">{taskCards}</span>
-            </div>
-            
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">🃏 Joker:</span>
-              <span className="text-[color:var(--color-success)] font-semibold">{jokerCards}</span>
-            </div>
-            
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">🎲 Szerencse:</span>
-              <span className="text-[color:var(--color-luck)] font-semibold">{luckCards}</span>
-            </div>
-          </div>
         </div>
       </div>
     </div>
-- 
2.52.0


From 83efb91f529ac5142ffd97cdc3d8291fb3be27cc Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 20:01:54 +0200
Subject: [PATCH 4/9] =?UTF-8?q?style(deck-creator):=20pakli=20n=C3=A9v=20m?=
 =?UTF-8?q?ez=C5=91=20sz=C3=A9less=C3=A9g=C3=A9nek=20optimaliz=C3=A1l?=
 =?UTF-8?q?=C3=A1sa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Pakli név mező mostantól csak 2/3 szélességű
- Jobb vizuális egyensúly a form elemek között
- Reszponzív elrendezés megtartva
---
 .../src/components/DeckCreator/DeckHeader.jsx | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index 22d8dcd1..a0f65d2a 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
@@ -75,18 +75,24 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
 
       {/* Main Content Row */}
       <div className="space-y-4">
-        {/* Deck Name */}
-        <div>
-          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-            📦 Pakli neve
-          </label>
-          <input
-            type="text"
-            value={deck.name}
-            onChange={(e) => handleInputChange('name', e.target.value)}
-            className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-            placeholder="Add meg a pakli nevét..."
-          />
+        {/* Two Column Layout */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {/* Deck Name - Takes up 2 columns */}
+          <div className="md:col-span-2">
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              📦 Pakli neve
+            </label>
+            <input
+              type="text"
+              value={deck.name}
+              onChange={(e) => handleInputChange('name', e.target.value)}
+              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+              placeholder="Add meg a pakli nevét..."
+            />
+          </div>
+          
+          {/* Empty space for visual balance */}
+          <div className="hidden md:block"></div>
         </div>
 
         {/* Type, Privacy and Description Row */}
-- 
2.52.0


From 00b13de70c5962587274c796ebfc50ccb129c545 Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 20:10:47 +0200
Subject: [PATCH 5/9] =?UTF-8?q?fix(deck-creator):=20alap=C3=A9rtelmezett?=
 =?UTF-8?q?=20n=C3=A9v=20magyar=C3=ADt=C3=A1sa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 'Új Deck' helyett 'Új Pakli' az alapértelmezett név
- Mind a kezdeti állapotban, mind az új pakli létrehozásakor
---
 SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
index 78032b44..60c13986 100644
--- a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+++ b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
@@ -16,7 +16,7 @@ export default function DeckCreator() {
   // Deck alapadatok
   const [deck, setDeck] = useState({
     id: null,
-    name: "Új Deck",
+    name: "Új Pakli",
     type: "Question", // Question, Luck, Fun
     privacy: "private", // private, public
     description: "",
@@ -37,7 +37,7 @@ export default function DeckCreator() {
       // Új deck
       setDeck({
         id: null,
-        name: "Új Deck",
+        name: "Új Pakli",
         type: "Question",
         privacy: "private",
         description: "",
-- 
2.52.0


From ec001fb39fa3d82cd4272d527d71061eef125796 Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 21:23:16 +0200
Subject: [PATCH 6/9] =?UTF-8?q?Refactor:=20DeckCreator=20komponensek=20t?=
 =?UTF-8?q?=C3=ADpus=20kezel=C3=A9s=C3=A9nek=20egys=C3=A9ges=C3=ADt=C3=A9s?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../src/components/DeckCreator/CardEditor.jsx | 32 +++----
 .../src/components/DeckCreator/CardsList.jsx  | 73 +++++---------
 .../src/components/DeckCreator/DeckHeader.jsx |  6 +-
 .../DeckCreator/JokerCardEditor.jsx           |  4 +-
 .../components/DeckCreator/LuckCardEditor.jsx |  4 +-
 .../src/pages/DeckCreator/DeckCreator.jsx     | 95 ++++++-------------
 6 files changed, 76 insertions(+), 138 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
index 2f48e046..7597e813 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+++ b/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} 
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx b/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
index cbbc8ce9..bd412d10 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
+++ b/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>
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index a0f65d2a..79dda370 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/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 = [
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
index c902cade..3d23a1af 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
+++ b/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 || ''
       })
     }
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
index e1edd2b6..f0dbb093 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
+++ b/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 || ''
       })
     }
diff --git a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
index 60c13986..396c1dd7 100644
--- a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+++ b/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 }))
-      console.log('Deck saved (backend):', saved)
+      setDeck(prev => ({ 
+        ...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) {
-      // Ú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)
+    const updatedCard = {
+      ...cardData,
+      id: isCreatingCard ? Date.now() : cardData.id
     }
+    
+    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}
-- 
2.52.0


From edca8f84cd33810ef4b15acd5f14008366b90d3c Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 23:21:19 +0200
Subject: [PATCH 7/9] =?UTF-8?q?Fix:=20K=C3=A1rtya=20t=C3=ADpus=20kezel?=
 =?UTF-8?q?=C3=A9s=20jav=C3=ADt=C3=A1sa=20=C3=A9s=20joker=20k=C3=A1rty?=
 =?UTF-8?q?=C3=A1k=20megjelen=C3=ADt=C3=A9se?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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   |   4 +-
 SerpentRace_Frontend/package-lock.json        |  23 ++++
 SerpentRace_Frontend/package.json             |   1 +
 .../src/components/DeckCreator/CardEditor.jsx | 111 +++++++++++-------
 .../src/components/DeckCreator/CardsList.jsx  |  94 +++------------
 .../src/components/DeckCreator/DeckHeader.jsx |   2 +-
 .../components/DeckCreator/DeckManager.jsx    |   8 +-
 .../src/components/PopUp/DeckInfoPopUp.jsx    |   2 +-
 SerpentRace_Frontend/src/index.css            |   2 +-
 .../src/pages/DeckCreator/DeckCreator.jsx     |  89 ++++++--------
 10 files changed, 160 insertions(+), 176 deletions(-)

diff --git a/SerpentRace_Docker/docker-compose.watch.yml b/SerpentRace_Docker/docker-compose.watch.yml
index b7e523ca..8d026a06 100644
--- a/SerpentRace_Docker/docker-compose.watch.yml
+++ b/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
diff --git a/SerpentRace_Frontend/package-lock.json b/SerpentRace_Frontend/package-lock.json
index e8e4cd88..02104eac 100644
--- a/SerpentRace_Frontend/package-lock.json
+++ b/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",
diff --git a/SerpentRace_Frontend/package.json b/SerpentRace_Frontend/package.json
index 5bb119a6..d06aa2d6 100644
--- a/SerpentRace_Frontend/package.json
+++ b/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": {
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
index 9d853d24..ff6e2293 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
@@ -58,38 +58,55 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
 
   // Kártya adatok inicializálása
   useEffect(() => {
-    if (isCreating && cardType) {
-      setCardData(getDefaultCardData(cardType))
-    } else if (card) {
-      setCardData({ ...card })
-    } else {
+    try {
+      if (isCreating && 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) => {
-    if (data.type === 'QUESTION') {
-      if (!data.question && !data.statement) {
-        notifyError("Kérdés vagy állítás megadása kötelező!")
+    try {
+      if (!data || !data.type) {
+        notifyError("Érvénytelen kártya adatok!")
         return false
       }
-      if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
-        notifyError("Minden válaszlehetőséget ki kell tölteni!")
-        return false
-      }
-    } else if (data.type === 'JOKER') {
-      if (!data.text || !data.text.trim()) {
-        notifyError("Joker kártya szövege nem lehet üres!")
-        return false
-      }
-    } else if (data.type === 'LUCK') {
-      if (!data.text || !data.text.trim()) {
-        notifyError("Szerencse kártya szövege nem lehet üres!")
-        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 && data.options.some(opt => !opt.trim())) {
+          notifyError("Minden válaszlehetőséget ki kell tölteni!")
+          return false
+        }
+      } else if (data.type === 'JOKER') {
+        if (!data.text || !data.text.trim()) {
+          notifyError("Joker kártya szövege nem lehet üres!")
+          return false
+        }
+      } else if (data.type === 'LUCK') {
+        if (!data.text || !data.text.trim()) {
+          notifyError("Szerencse kártya szövege nem lehet üres!")
+          return false
+        }
       }
+      
+      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
     }
-    
-    return true
   }
 
   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)))
-    }
+    onSave(cardData)
   }
 
   // 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 && (
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx b/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
index f56d8dfe..b391b5cc 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
+++ b/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>
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index 79dda370..b285dd5e 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/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 = [
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
index 0b1eddac..6aa60f09 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
+++ b/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">
diff --git a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx
index 9d5ed97f..1db050ea 100644
--- a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx
+++ b/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)" }
diff --git a/SerpentRace_Frontend/src/index.css b/SerpentRace_Frontend/src/index.css
index a73bc306..e6db465c 100644
--- a/SerpentRace_Frontend/src/index.css
+++ b/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;
diff --git a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
index 0b68151e..f3d382b3 100644
--- a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+++ b/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
-    const updatedCard = {
-      ...cardData,
-      id: isCreatingCard ? Date.now() : cardData.id
-=======
-    if (isCreatingCard) {
-      // Új kártya hozzáadása
-      const newCard = {
+    try {
+      const updatedCard = {
         ...cardData,
-        id: Date.now(), // Temporary ID
+        id: isCreatingCard ? Date.now() : cardData.id
       }
-      setDeck(prev => ({
-        ...prev,
-        cards: [...prev.cards, newCard]
-      }))
+      
+      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)
-      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
+      
+      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')
     }
-    
-    setDeck(prev => ({
-      ...prev,
-      cards: isCreatingCard 
-        ? [...prev.cards, updatedCard]
-        : prev.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
-    }))
-
-    setSelectedCard(updatedCard)
-    setIsCreatingCard(false)
-    setNewCardType(null)
   }
 
   // 🔧 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)
-- 
2.52.0


From f2a54154f55dcfc3e28f8cec0fb6b17b3dc7368d Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 23:34:34 +0200
Subject: [PATCH 8/9] =?UTF-8?q?UI:=20Be=C3=A1ll=C3=ADt=C3=A1sok=20szekci?=
 =?UTF-8?q?=C3=B3=20letilt=C3=A1sa=20a=20feladat=20k=C3=A1rty=C3=A1kn?=
 =?UTF-8?q?=C3=A1l?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Pontszám, Időlimit és Karakterlimit mezők letiltva
- Magyarázat mező is letiltva
- Szöveges válasz típusnál a beállítások (kis/nagy betű, pontos egyezés, stb.) letiltva
- Egységes 'Hamarosan elérhető' effekt az összes letiltott szekción
- Tipp mező továbbra is opcionális és használható
- Ezek a beállítások nem kötelezőek a kártya mentéséhez
---
 .../components/DeckCreator/TaskCardEditor.jsx | 198 ++++++++++--------
 1 file changed, 108 insertions(+), 90 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
index 9c98c89a..0bbd0a16 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
@@ -374,37 +374,48 @@ export default function TaskCardEditor({ card, onChange }) {
             </div>
           </div>
 
-          {/* Beállítások */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={card.caseSensitive || false}
-                onChange={(e) => updateField('caseSensitive', e.target.checked)}
-                className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
-              />
-              <span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
-            </label>
+          {/* Beállítások - Később elérhető */}
+          <div className="relative">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 opacity-50 pointer-events-none blur-[1px]">
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={false}
+                  disabled
+                  className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
+                />
+                <span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
+              </label>
+              
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={false}
+                  disabled
+                  className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
+                />
+                <span className="text-[color:var(--color-text)]">Pontos egyezés</span>
+              </label>
+              
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={false}
+                  disabled
+                  className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
+                />
+                <span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
+              </label>
+            </div>
             
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={card.exactMatch || false}
-                onChange={(e) => updateField('exactMatch', e.target.checked)}
-                className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
-              />
-              <span className="text-[color:var(--color-text)]">Pontos egyezés</span>
-            </label>
-            
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={card.partialAccepted || true}
-                onChange={(e) => updateField('partialAccepted', e.target.checked)}
-                className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
-              />
-              <span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
-            </label>
+            {/* Hamarosan elérhető felület */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
+                <span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
+                  🚧 Hamarosan elérhető
+                </span>
+              </div>
+            </div>
           </div>
 
           {/* Tipp */}
@@ -423,76 +434,83 @@ export default function TaskCardEditor({ card, onChange }) {
         </div>
       )}
 
-      {/* Közös beállítások */}
-      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+      {/* Közös beállítások - Később elérhető */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6 relative">
         <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
           ⚙️ Beállítások
         </h3>
         
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {/* Pontszám */}
-          <div>
-            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              💰 Pontszám
-            </label>
-            <input
-              type="number"
-              value={card.points || 10}
-              onChange={(e) => updateField('points', parseInt(e.target.value) || 0)}
-              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-              min="0"
-              max="1000"
-            />
-          </div>
+        <div className="relative">
+          <div className="opacity-50 pointer-events-none blur-[1px]">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {/* Pontszám */}
+              <div>
+                <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                  💰 Pontszám
+                </label>
+                <input
+                  type="number"
+                  value={10}
+                  disabled
+                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                  min="0"
+                  max="1000"
+                />
+              </div>
 
-          {/* Időlimit */}
-          <div>
-            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              ⏱️ Időlimit
-            </label>
-            <select
-              value={card.timeLimit || 30}
-              onChange={(e) => updateField('timeLimit', parseInt(e.target.value))}
-              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-            >
-              {timeLimits.map(time => (
-                <option key={time.value} value={time.value}>
-                  {time.label}
-                </option>
-              ))}
-            </select>
-          </div>
+              {/* Időlimit */}
+              <div>
+                <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                  ⏱️ Időlimit
+                </label>
+                <select
+                  disabled
+                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                >
+                  <option>30 másodperc</option>
+                </select>
+              </div>
 
-          {/* Karakterlimit (csak szöveges válasznál) */}
-          {card.subType === 'text' && (
-            <div>
+              {/* Karakterlimit (csak szöveges válasznál) */}
+              {card.subType === 'text' && (
+                <div>
+                  <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                    📝 Karakterlimit
+                  </label>
+                  <input
+                    type="number"
+                    value={100}
+                    disabled
+                    className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                    min="10"
+                    max="500"
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Magyarázat */}
+            <div className="mt-6">
               <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                📝 Karakterlimit
+                💡 Magyarázat (opcionális)
               </label>
-              <input
-                type="number"
-                value={card.characterLimit || 100}
-                onChange={(e) => updateField('characterLimit', parseInt(e.target.value) || 0)}
-                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-                min="10"
-                max="500"
+              <textarea
+                disabled
+                className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
+                rows="3"
+                placeholder="Magyarázat a helyes válaszhoz..."
               />
             </div>
-          )}
-        </div>
-
-        {/* Magyarázat */}
-        <div className="mt-6">
-          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-            💡 Magyarázat (opcionális)
-          </label>
-          <textarea
-            value={card.explanation || ''}
-            onChange={(e) => updateField('explanation', e.target.value)}
-            className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
-            rows="3"
-            placeholder="Magyarázat a helyes válaszhoz..."
-          />
+          </div>
+          
+          {/* Hamarosan elérhető felület */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
+              <span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
+                🚧 Hamarosan elérhető
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-- 
2.52.0


From 3bbd3f1e8a8054ee60109b85f56262951cd1d361 Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Thu, 23 Oct 2025 00:31:33 +0200
Subject: [PATCH 9/9] =?UTF-8?q?Feature:=20Consequence=20rendszer=20impleme?=
 =?UTF-8?q?nt=C3=A1l=C3=A1sa=20minden=20k=C3=A1rtya=20t=C3=ADpushoz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TaskCardEditor: Consequence és wrongConsequence kezelés hozzáadva
- JokerCardEditor: Teljesítés és nem teljesítés consequence-ek
- LuckCardEditor: Szerencse kártyák consequence kezelése
- CardEditor: Alapértelmezett consequence értékek az új kártyákhoz
- DeckCreator: Consequence mezők biztosítása mentéskor
- CardsList: Következmény típusok megjelenítése
- UI javítás: Mind a három editor külön szekciókba rendezve (info, szöveg, következmények)
- Egységes struktúra és design az összes kártya szerkesztőnél
---
 .../src/components/DeckCreator/CardEditor.jsx |   9 +-
 .../src/components/DeckCreator/CardsList.jsx  |   8 -
 .../DeckCreator/JokerCardEditor.jsx           | 201 +++++++++++++++---
 .../components/DeckCreator/LuckCardEditor.jsx | 138 +++++++++---
 .../components/DeckCreator/TaskCardEditor.jsx | 122 +++++++++++
 .../src/pages/DeckCreator/DeckCreator.jsx     |  33 ++-
 6 files changed, 427 insertions(+), 84 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
index ff6e2293..2fc5cbe3 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
@@ -20,7 +20,8 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       id: null,
       type: type,
       points: 10,
-      timeLimit: 30
+      timeLimit: 30,
+      consequence: { type: 0, value: 1 }
     }
 
     switch (type) {
@@ -31,7 +32,8 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
           question: '',
           options: ['', '', '', ''],
           correctAnswer: 0,
-          explanation: ''
+          explanation: '',
+          wrongConsequence: { type: 1, value: 1 }
         }
       case 'JOKER':
         return {
@@ -40,7 +42,8 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
           description: '',
           effect: '',
           actionType: 'skip',
-          usage: 'once'
+          usage: 'once',
+          wrongConsequence: { type: 1, value: 1 }
         }
       case 'LUCK':
         return {
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx b/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
index b391b5cc..30ea9d16 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
@@ -263,14 +263,6 @@ export default function CardsList({
           <div className="text-[color:var(--color-text)] font-semibold">
             📊 Összesen: {cards.length} kártya
           </div>
-
-          {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 === 'QUESTION').length}</span>
-              <span>🃏 {cards.filter(c => c.type === 'JOKER').length}</span>
-              <span>🎲 {cards.filter(c => c.type === 'LUCK').length}</span>
-            </div>
-          )}
         </div>
       </div>
     </div>
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
index 3d23a1af..5f8118e6 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
@@ -4,17 +4,29 @@
 import React, { useState, useEffect } from 'react'
 import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa'
 
+const consequenceTypes = [
+  { value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
+  { value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
+  { value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
+  { value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
+  { value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
+]
+
 export default function JokerCardEditor({ card, onChange }) {
   const [cardData, setCardData] = useState({
     type: 'JOKER',
-    text: ''
+    text: '',
+    consequence: { type: 0, value: 1 },
+    wrongConsequence: { type: 1, value: 1 }
   })
 
   useEffect(() => {
     if (card) {
       setCardData({
         type: 'JOKER',
-        text: card.text || ''
+        text: card.text || '',
+        consequence: card.consequence || { type: 0, value: 1 },
+        wrongConsequence: card.wrongConsequence || { type: 1, value: 1 }
       })
     }
   }, [card])
@@ -31,6 +43,36 @@ export default function JokerCardEditor({ card, onChange }) {
     }
   }
 
+  const updateConsequence = (field, value) => {
+    const newCardData = {
+      ...cardData,
+      consequence: {
+        ...cardData.consequence,
+        [field]: value
+      }
+    }
+    setCardData(newCardData)
+    
+    if (onChange) {
+      onChange(newCardData)
+    }
+  }
+
+  const updateWrongConsequence = (field, value) => {
+    const newCardData = {
+      ...cardData,
+      wrongConsequence: {
+        ...cardData.wrongConsequence,
+        [field]: value
+      }
+    }
+    setCardData(newCardData)
+    
+    if (onChange) {
+      onChange(newCardData)
+    }
+  }
+
   // Példa joker kártyák
   const exampleCards = [
     "Felelsz vagy mersz? (Az előző játékos kérdez)",
@@ -57,18 +99,10 @@ export default function JokerCardEditor({ card, onChange }) {
   }
 
   return (
-    <div className="max-w-4xl mx-auto">
+    <div className="space-y-6">
+      {/* Info box */}
       <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
-        {/* Header */}
-        <div className="flex items-center gap-3 mb-6">
-          <FaTheaterMasks className="text-2xl text-[color:var(--color-fun)]" />
-          <h3 className="text-xl font-bold text-[color:var(--color-text)]">
-            Joker Kártya Szerkesztő
-          </h3>
-        </div>
-
-        {/* Info box */}
-        <div className="bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/30 rounded-lg p-4 mb-6">
+        <div className="bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/30 rounded-lg p-4">
           <div className="flex items-start gap-3">
             <FaInfoCircle className="text-[color:var(--color-fun)] mt-1 flex-shrink-0" />
             <div>
@@ -86,28 +120,33 @@ export default function JokerCardEditor({ card, onChange }) {
             </div>
           </div>
         </div>
+      </div>
 
-        {/* Card text input */}
-        <div className="space-y-4">
-          <div>
-            <label className="block text-[color:var(--color-text)] font-medium mb-2">
-              Joker kártya feladat *
-            </label>
-            <textarea
-              value={cardData.text}
-              onChange={handleTextChange}
-              placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)"
-              className="w-full h-32 p-4 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:outline-none focus:border-[color:var(--color-fun)] transition-colors"
-              maxLength={150}
-            />
-            <div className="flex justify-between items-center mt-2">
-              <span className="text-xs text-[color:var(--color-text-muted)]">
-                Maximális hossz: 150 karakter
-              </span>
-              <span className="text-xs text-[color:var(--color-text-muted)]">
-                {cardData.text.length}/150
-              </span>
-            </div>
+      {/* Kártya szövege */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
+          <FaTheaterMasks className="text-[color:var(--color-fun)]" />
+          Kártya szövege
+        </h3>
+        
+        <div>
+          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+            Joker kártya feladat *
+          </label>
+          <textarea
+            value={cardData.text}
+            onChange={handleTextChange}
+            placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)"
+            className="w-full h-32 px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:ring-2 focus:ring-[color:var(--color-fun)] focus:border-transparent outline-none transition-all duration-200"
+            maxLength={150}
+          />
+          <div className="flex justify-between items-center mt-2">
+            <span className="text-xs text-[color:var(--color-text-muted)]">
+              Maximális hossz: 150 karakter
+            </span>
+            <span className="text-xs text-[color:var(--color-text-muted)]">
+              {cardData.text.length}/150
+            </span>
           </div>
         </div>
 
@@ -147,6 +186,100 @@ export default function JokerCardEditor({ card, onChange }) {
           </div>
         )}
       </div>
+
+      {/* Következmények (teljesítés esetén) */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+          🎯 Következmények (teljesítés esetén)
+        </h3>
+        
+        <div className="space-y-4">
+          {/* Consequence Type */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Hatás típusa
+            </label>
+            <select
+              value={cardData.consequence?.type ?? 0}
+              onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
+              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+            >
+              {consequenceTypes.map(type => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+            <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+              {consequenceTypes.find(t => t.value === (cardData.consequence?.type ?? 0))?.description}
+            </div>
+          </div>
+
+          {/* Consequence Value - csak ha előre/hátra lépés */}
+          {(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
+            <div>
+              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                Mezők száma
+              </label>
+              <input
+                type="number"
+                value={cardData.consequence?.value ?? 1}
+                onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
+                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                min="1"
+                max="10"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Következmények (nem teljesítés esetén) */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+          ❌ Következmények (nem teljesítés esetén)
+        </h3>
+        
+        <div className="space-y-4">
+          {/* Wrong Consequence Type */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Hatás típusa
+            </label>
+            <select
+              value={cardData.wrongConsequence?.type ?? 1}
+              onChange={(e) => updateWrongConsequence('type', parseInt(e.target.value))}
+              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
+            >
+              {consequenceTypes.map(type => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+            <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+              {consequenceTypes.find(t => t.value === (cardData.wrongConsequence?.type ?? 1))?.description}
+            </div>
+          </div>
+
+          {/* Wrong Consequence Value - csak ha előre/hátra lépés */}
+          {(cardData.wrongConsequence?.type === 0 || cardData.wrongConsequence?.type === 1) && (
+            <div>
+              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                Mezők száma
+              </label>
+              <input
+                type="number"
+                value={cardData.wrongConsequence?.value ?? 1}
+                onChange={(e) => updateWrongConsequence('value', parseInt(e.target.value) || 1)}
+                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
+                min="1"
+                max="10"
+              />
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
index f0dbb093..f59fcb76 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
@@ -4,17 +4,27 @@
 import React, { useState, useEffect } from 'react'
 import { FaDice, FaInfoCircle } from 'react-icons/fa'
 
+const consequenceTypes = [
+  { value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
+  { value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
+  { value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
+  { value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
+  { value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
+]
+
 export default function LuckCardEditor({ card, onChange }) {
   const [cardData, setCardData] = useState({
     type: 'LUCK',
-    text: ''
+    text: '',
+    consequence: { type: 0, value: 1 }
   })
 
   useEffect(() => {
     if (card) {
       setCardData({
         type: 'LUCK',
-        text: card.text || ''
+        text: card.text || '',
+        consequence: card.consequence || { type: 0, value: 1 }
       })
     }
   }, [card])
@@ -31,19 +41,26 @@ export default function LuckCardEditor({ card, onChange }) {
     }
   }
 
-  return (
-    <div className="max-w-4xl mx-auto">
-      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
-        {/* Header */}
-        <div className="flex items-center gap-3 mb-6">
-          <FaDice className="text-2xl text-[color:var(--color-luck)]" />
-          <h3 className="text-xl font-bold text-[color:var(--color-text)]">
-            Szerencse Kártya Szerkesztő
-          </h3>
-        </div>
+  const updateConsequence = (field, value) => {
+    const newCardData = {
+      ...cardData,
+      consequence: {
+        ...cardData.consequence,
+        [field]: value
+      }
+    }
+    setCardData(newCardData)
+    
+    if (onChange) {
+      onChange(newCardData)
+    }
+  }
 
-        {/* Info box */}
-        <div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4 mb-6">
+  return (
+    <div className="space-y-6">
+      {/* Info box */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4">
           <div className="flex items-start gap-3">
             <FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" />
             <div>
@@ -60,28 +77,32 @@ export default function LuckCardEditor({ card, onChange }) {
             </div>
           </div>
         </div>
+      </div>
 
-        {/* Card text input */}
-        <div className="space-y-4">
-          <div>
-            <label className="block text-[color:var(--color-text)] font-medium mb-2">
-              Kártya szövege *
-            </label>
-            <textarea
-              value={cardData.text}
-              onChange={handleTextChange}
-              placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
-              className="w-full h-32 p-4 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:outline-none focus:border-[color:var(--color-luck)] transition-colors"
-              maxLength={200}
-            />
-            <div className="flex justify-between items-center mt-2">
-              <span className="text-xs text-[color:var(--color-text-muted)]">
-                Maximális hossz: 200 karakter
-              </span>
-              <span className="text-xs text-[color:var(--color-text-muted)]">
-                {cardData.text.length}/200
-              </span>
-            </div>
+      {/* Kártya szövege */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
+          <FaDice className="text-[color:var(--color-luck)]" />
+          Kártya szövege
+        </h3>
+        <div>
+          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+            Szerencse esemény leírása *
+          </label>
+          <textarea
+            value={cardData.text}
+            onChange={handleTextChange}
+            placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
+            className="w-full h-32 px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
+            maxLength={200}
+          />
+          <div className="flex justify-between items-center mt-2">
+            <span className="text-xs text-[color:var(--color-text-muted)]">
+              Maximális hossz: 200 karakter
+            </span>
+            <span className="text-xs text-[color:var(--color-text-muted)]">
+              {cardData.text.length}/200
+            </span>
           </div>
         </div>
 
@@ -100,6 +121,53 @@ export default function LuckCardEditor({ card, onChange }) {
           </div>
         )}
       </div>
+
+      {/* Következmények */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+          🎯 Következmények
+        </h3>
+        
+        <div className="space-y-4">
+          {/* Consequence Type */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Hatás típusa
+            </label>
+            <select 
+              value={cardData.consequence?.type ?? 0}
+              onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
+              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
+            >
+              {consequenceTypes.map(type => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+            <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+              {consequenceTypes.find(t => t.value === (cardData.consequence?.type ?? 0))?.description}
+            </div>
+          </div>
+          
+          {/* Consequence Value - csak ha előre/hátra lépés */}
+          {(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
+            <div>
+              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                Mezők száma
+              </label>
+              <input
+                type="number"
+                min="1"
+                max="10"
+                value={cardData.consequence?.value ?? 1}
+                onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
+                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
+              />
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
index 0bbd0a16..cace7ed8 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
@@ -20,6 +20,14 @@ const timeLimits = [
   { value: 120, label: '2 perc' }
 ]
 
+const consequenceTypes = [
+  { value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
+  { value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
+  { value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
+  { value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
+  { value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
+]
+
 export default function TaskCardEditor({ card, onChange }) {
   
   const updateField = (field, value) => {
@@ -81,6 +89,26 @@ export default function TaskCardEditor({ card, onChange }) {
     onChange({ acceptedAnswers: newAnswers })
   }
 
+  const updateConsequence = (field, value) => {
+    const currentConsequence = card.consequence || { type: 0, value: 1 }
+    onChange({ 
+      consequence: {
+        ...currentConsequence,
+        [field]: value
+      }
+    })
+  }
+
+  const updateWrongConsequence = (field, value) => {
+    const currentWrongConsequence = card.wrongConsequence || { type: 1, value: 1 }
+    onChange({ 
+      wrongConsequence: {
+        ...currentWrongConsequence,
+        [field]: value
+      }
+    })
+  }
+
   return (
     <div className="max-w-4xl mx-auto space-y-6">
       {/* Feladat típus választó */}
@@ -513,6 +541,100 @@ export default function TaskCardEditor({ card, onChange }) {
           </div>
         </div>
       </div>
+
+      {/* Következmények (helyes válasz esetén) */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+          🎯 Következmények (helyes válasz esetén)
+        </h3>
+        
+        <div className="space-y-4">
+          {/* Consequence Type */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Hatás típusa
+            </label>
+            <select
+              value={card.consequence?.type ?? 0}
+              onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
+              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+            >
+              {consequenceTypes.map(type => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+            <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+              {consequenceTypes.find(t => t.value === (card.consequence?.type ?? 0))?.description}
+            </div>
+          </div>
+
+          {/* Consequence Value - csak ha előre/hátra lépés */}
+          {(card.consequence?.type === 0 || card.consequence?.type === 1) && (
+            <div>
+              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                Mezők száma
+              </label>
+              <input
+                type="number"
+                value={card.consequence?.value ?? 1}
+                onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
+                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                min="1"
+                max="10"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Következmények (rossz válasz esetén) */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+          ❌ Következmények (rossz válasz esetén)
+        </h3>
+        
+        <div className="space-y-4">
+          {/* Wrong Consequence Type */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Hatás típusa
+            </label>
+            <select
+              value={card.wrongConsequence?.type ?? 1}
+              onChange={(e) => updateWrongConsequence('type', parseInt(e.target.value))}
+              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
+            >
+              {consequenceTypes.map(type => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+            <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+              {consequenceTypes.find(t => t.value === (card.wrongConsequence?.type ?? 1))?.description}
+            </div>
+          </div>
+
+          {/* Wrong Consequence Value - csak ha előre/hátra lépés */}
+          {(card.wrongConsequence?.type === 0 || card.wrongConsequence?.type === 1) && (
+            <div>
+              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                Mezők száma
+              </label>
+              <input
+                type="number"
+                value={card.wrongConsequence?.value ?? 1}
+                onChange={(e) => updateWrongConsequence('value', parseInt(e.target.value) || 1)}
+                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
+                min="1"
+                max="10"
+              />
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
index f3d382b3..5226cc2e 100644
--- a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+++ b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
@@ -51,9 +51,16 @@ export default function DeckCreator() {
 
   const handleSaveDeck = async () => {
     try {
+      // Konvertálás: Frontend string -> Backend enum number
+      const typeMapping = {
+        'LUCK': 0,
+        'JOKER': 1,
+        'QUESTION': 2
+      }
+      
       const payload = {
         name: deck.name,
-        type: deck.type,
+        type: typeMapping[deck.type] ?? 2, // Alapértelmezett: QUESTION
         ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE',
         description: deck.description || '',
         cards: deck.cards
@@ -95,18 +102,30 @@ export default function DeckCreator() {
 
   const handleSaveCard = (cardData) => {
     try {
+      // Biztosítjuk az alapértelmezett consequence értékeket
+      const defaultConsequence = { type: 0, value: 1 }
+      const defaultWrongConsequence = { type: 1, value: 1 }
+      
       const updatedCard = {
         ...cardData,
-        id: isCreatingCard ? Date.now() : cardData.id
+        id: isCreatingCard ? Date.now() : cardData.id,
+        consequence: cardData.consequence || defaultConsequence,
+        // wrongConsequence csak QUESTION és JOKER típusoknál
+        ...(cardData.type === 'QUESTION' || cardData.type === 'JOKER' 
+          ? { wrongConsequence: cardData.wrongConsequence || defaultWrongConsequence }
+          : {}
+        )
       }
       
+      let wasInvalidCardDeleted = false
+      
       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`)
+          wasInvalidCardDeleted = true
           
           return {
             ...prev,
@@ -130,7 +149,13 @@ export default function DeckCreator() {
       setIsCreatingCard(false)
       setNewCardType(null)
       
-      notifySuccess('Kártya sikeresen mentve!')
+      // Csak egy értesítés
+      if (wasInvalidCardDeleted) {
+        const invalidCount = deck.cards.filter(card => card.type !== deck.type).length
+        notifyWarning(`Kártya mentve! ${invalidCount} db nem megfelelő típusú kártya törlésre került.`)
+      } else {
+        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')
-- 
2.52.0