Merge pull request '[#104] Create/Update' (#31) from task/104-create-update into main

Reviewed-on: #31

SerpentRace_Frontend/src/App.jsx

@@ -9,6 +9,7 @@ import ResetPassword from "./pages/Auth/ResetPassword"
 import Landingpage from "./pages/Landing/Landingpage"
 import Home from "./pages/Landing/Home"
 import DeckManagerPage from "./pages/Decks/DeckManagerPage"
+import DeckCreator from "./pages/DeckCreator/DeckCreator"
 import CompanyHub from "./pages/Companies/Companies"
 import About from "./pages/About/About"
 import ScrollToTop from "./components/ScrollToTop"
@@ -53,6 +54,8 @@ function App() {
         <Route path="/" element={<Landingpage />} />
         <Route path="/home" element={<Home />} />
         <Route path="/decks" element={<DeckManagerPage />} />
+        <Route path="/deck-creator" element={<DeckCreator />} />
+        <Route path="/deck-creator/:deckId" element={<DeckCreator />} />
         <Route path="/game" element={<GameScreen />} />
         <Route path="/companies" element={<CompanyHub />} />
 

SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx

@@ -0,0 +1,224 @@
+// src/components/DeckCreator/CardEditor.jsx
+// Jobb oldali kártya szerkesztő
+
+import React, { useState, useEffect } from "react"
+import { FaSave, FaTimes, FaEye } from "react-icons/fa"
+import TaskCardEditor from "./TaskCardEditor.jsx"
+import JokerCardEditor from "./JokerCardEditor.jsx"
+import LuckCardEditor from "./LuckCardEditor.jsx"
+import CardPreview from "./CardPreview.jsx"
+
+export default function CardEditor({ card, isCreating, cardType, onSave, onCancel }) {
+  const [cardData, setCardData] = useState(null)
+  const [showPreview, setShowPreview] = useState(false)
+
+  // Alapértelmezett kártya adatok
+  const getDefaultCardData = (type) => {
+    const baseData = {
+      id: null,
+      type: type,
+      points: 10,
+      timeLimit: 30
+    }
+
+    switch (type) {
+      case 'task':
+        return {
+          ...baseData,
+          subType: 'quiz',
+          question: '',
+          options: ['', '', '', ''],
+          correctAnswer: 0,
+          explanation: ''
+        }
+      case 'joker':
+        return {
+          ...baseData,
+          title: '',
+          description: '',
+          effect: '',
+          actionType: 'skip',
+          usage: 'once'
+        }
+      case 'luck':
+        return {
+          ...baseData,
+          event: '',
+          positiveEffect: '',
+          negativeEffect: '',
+          probability: 50,
+          risk: 'low'
+        }
+      default:
+        return baseData
+    }
+  }
+
+  // Kártya adatok inicializálása
+  useEffect(() => {
+    if (isCreating && cardType) {
+      setCardData(getDefaultCardData(cardType))
+    } else if (card) {
+      setCardData({ ...card })
+    } else {
+      setCardData(null)
+    }
+  }, [card, isCreating, cardType])
+
+  const handleSave = () => {
+    if (!cardData) return
+    
+    // Validáció
+    if (!validateCard(cardData)) return
+    
+    onSave(cardData)
+  }
+
+  const validateCard = (data) => {
+    if (data.type === 'task') {
+      if (!data.question && !data.statement) {
+        alert("❌ Kérdés vagy állítás megadása kötelező!")
+        return false
+      }
+      if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
+        alert("❌ Minden válaszlehetőséget ki kell tölteni!")
+        return false
+      }
+    } 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') {
+      if (!data.text || !data.text.trim()) {
+        alert("❌ Szerencse kártya szövege nem lehet üres!")
+        return false
+      }
+    }
+    
+    return true
+  }
+
+  const updateCardData = (updates) => {
+    setCardData(prev => prev ? { ...prev, ...updates } : null)
+  }
+
+  // Ha nincs kiválasztott kártya vagy új kártya létrehozás
+  if (!cardData) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-[color:var(--color-background)]">
+        <div className="text-center">
+          <div className="text-6xl mb-4">🃏</div>
+          <div className="text-[color:var(--color-text)] text-xl font-semibold mb-2">
+            Válassz ki egy kártyát
+          </div>
+          <div className="text-[color:var(--color-text-muted)]">
+            Klikkelj egy kártyára a bal oldalon a szerkesztéshez,<br />
+            vagy hozz létre egy újat.
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col">
+      {/* 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">
+          <div className="flex items-center gap-3">
+            <div className="text-2xl">
+              {cardData.type === 'task' && '📋'}
+              {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'}
+              </h2>
+              <div className="text-[color:var(--color-text-muted)] text-sm">
+                {cardData.type === 'task' && cardData.subType && (
+                  <>
+                    {cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
+                    {cardData.subType === 'truefalse' && 'Igaz/Hamis'}
+                    {cardData.subType === 'matching' && 'Párosítás'}
+                    {cardData.subType === 'text' && 'Szöveges válasz'}
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className={`
+                flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200
+                ${showPreview 
+                  ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]' 
+                  : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
+                }
+              `}
+            >
+              <FaEye />
+              Előnézet
+            </button>
+            
+            <button
+              onClick={onCancel}
+              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
+            >
+              <FaTimes />
+              Mégse
+            </button>
+            
+            <button
+              onClick={handleSave}
+              className="flex items-center gap-2 px-6 py-2 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"
+            >
+              <FaSave />
+              Mentés
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden">
+        {showPreview ? (
+          /* Preview Mode */
+          <div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
+            <CardPreview card={cardData} />
+          </div>
+        ) : (
+          /* Edit Mode */
+          <div className="h-full overflow-y-auto p-6">
+            {cardData.type === 'task' && (
+              <TaskCardEditor 
+                card={cardData} 
+                onChange={updateCardData} 
+              />
+            )}
+            
+            {cardData.type === 'joker' && (
+              <JokerCardEditor 
+                card={cardData} 
+                onChange={updateCardData} 
+              />
+            )}
+            
+            {cardData.type === 'luck' && (
+              <LuckCardEditor 
+                card={cardData} 
+                onChange={updateCardData} 
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

SerpentRace_Frontend/src/components/DeckCreator/CardPreview.jsx

@@ -0,0 +1,148 @@
+// src/components/DeckCreator/CardPreview.jsx
+// Kártya előnézet komponens
+
+import React from "react"
+import { FaQuestionCircle, FaTheaterMasks, FaDice, FaClock, FaStar } from "react-icons/fa"
+
+export default function CardPreview({ card }) {
+  if (!card) {
+    return (
+      <div className="text-center text-[color:var(--color-text-muted)]">
+        <div className="text-6xl mb-4">🃏</div>
+        <div>Nincs kiválasztott kártya az előnézethez</div>
+      </div>
+    )
+  }
+
+  // Kártya típus specifikus beállítások
+  const getCardConfig = (card) => {
+    switch (card.type) {
+      case 'task':
+        return {
+          bgColor: 'var(--color-question)',
+          icon: FaQuestionCircle,
+          title: 'FELADAT KÁRTYA',
+          emoji: '📋'
+        }
+      case 'joker':
+        return {
+          bgColor: 'var(--color-fun)',
+          icon: FaTheaterMasks,
+          title: 'JOKER KÁRTYA',
+          emoji: '🎭'
+        }
+      case 'luck':
+        return {
+          bgColor: 'var(--color-luck)',
+          icon: FaDice,
+          title: 'SZERENCSE KÁRTYA',
+          emoji: '🎲'
+        }
+      default:
+        return {
+          bgColor: 'var(--color-border)',
+          icon: FaQuestionCircle,
+          title: 'ISMERETLEN KÁRTYA',
+          emoji: '❓'
+        }
+    }
+  }
+
+  const config = getCardConfig(card)
+  
+  // Kártya tartalom meghatározása
+  const getCardContent = (card) => {
+    if (card.type === 'task') {
+      return card.question || card.statement || 'Feladat leírása...'
+    }
+    if (card.type === 'joker' || card.type === 'luck') {
+      return card.text || 'Kártya szövege...'
+    }
+    return 'Kártya tartalma...'
+  }
+
+  return (
+    <div className="flex items-center justify-center p-6">
+      {/* Kártya container */}
+      <div 
+        className="relative w-80 h-96 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
+        style={{
+          background: `linear-gradient(135deg, ${config.bgColor}15, ${config.bgColor}05)`,
+          border: `3px solid ${config.bgColor}`,
+        }}
+      >
+        {/* Kártya header */}
+        <div 
+          className="h-16 rounded-t-xl flex items-center justify-center relative overflow-hidden"
+          style={{ backgroundColor: config.bgColor }}
+        >
+          {/* Háttér pattern */}
+          <div className="absolute inset-0 opacity-20">
+            <div className="w-full h-full" style={{
+              backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px)`
+            }} />
+          </div>
+          
+          <div className="relative flex items-center gap-3">
+            <config.icon className="text-white text-xl" />
+            <span className="text-white font-bold text-sm tracking-wide">
+              {config.title}
+            </span>
+          </div>
+        </div>
+
+        {/* Kártya body */}
+        <div className="p-6 h-80 flex flex-col">
+          {/* Főikon */}
+          <div className="text-center mb-4">
+            <div className="text-5xl mb-2">{config.emoji}</div>
+          </div>
+
+          {/* Tartalom */}
+          <div className="flex-1 flex flex-col justify-center">
+            <div 
+              className="text-[color:var(--color-text)] text-center leading-relaxed"
+              style={{
+                fontSize: card.text && card.text.length > 100 ? '14px' : '16px'
+              }}
+            >
+              {getCardContent(card)}
+            </div>
+          </div>
+
+          {/* Alsó információk */}
+          <div className="border-t border-[color:var(--color-border)] pt-4 mt-4">
+            <div className="flex justify-between items-center text-sm">
+              {/* Idő */}
+              {card.timeLimit && (
+                <div className="flex items-center gap-1 text-[color:var(--color-text-muted)]">
+                  <FaClock className="text-xs" />
+                  <span>{card.timeLimit}s</span>
+                </div>
+              )}
+              
+              {/* Pontok */}
+              {card.points && (
+                <div className="flex items-center gap-1 text-[color:var(--color-text-muted)]">
+                  <FaStar className="text-xs" />
+                  <span>{card.points} pont</span>
+                </div>
+              )}
+              
+              {/* Ha nincs idő/pont info */}
+              {!card.timeLimit && !card.points && (
+                <div className="text-[color:var(--color-text-muted)] text-xs w-full text-center">
+                  SerpentRace Deck
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Kártya corner dekoráció */}
+        <div className="absolute top-2 right-2 w-4 h-4 rounded-full" style={{ backgroundColor: config.bgColor, opacity: 0.3 }} />
+        <div className="absolute bottom-2 left-2 w-4 h-4 rounded-full" style={{ backgroundColor: config.bgColor, opacity: 0.3 }} />
+      </div>
+    </div>
+  )
+}

SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx

@@ -0,0 +1,230 @@
+// src/components/DeckCreator/CardsList.jsx
+// Bal oldali kártyák listája és új kártya létrehozás
+
+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)" }
+}
+
+const cardSubTypeLabels = {
+  quiz: "Quiz",
+  truefalse: "Igaz/Hamis",
+  matching: "Párosítás",
+  text: "Szöveges válasz"
+}
+
+export default function CardsList({ 
+  cards, 
+  selectedCard, 
+  onSelectCard, 
+  onCreateCard, 
+  onDeleteCard,
+  isCreatingCard,
+  newCardType 
+}) {
+
+  const getCardPreview = (card) => {
+    if (card.type === 'task') {
+      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'
+    }
+    return 'Ismeretlen kártya'
+  }
+
+  const getCardTypeLabel = (card) => {
+    if (card.type === 'task') {
+      if (card.subType) {
+        return cardSubTypeLabels[card.subType] || 'Feladat'
+      }
+      return 'Feladat'
+    }
+    if (card.type === 'joker') {
+      return 'Joker'
+    }
+    if (card.type === 'luck') {
+      return 'Szerencse'
+    }
+    return 'Ismeretlen'
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="p-4 border-b border-[color:var(--color-surface-selected)]">
+        <h2 className="text-lg font-bold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
+          🃏 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>
+      </div>
+
+      {/* Cards List */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {/* Creating Card Indicator */}
+        {isCreatingCard && (
+          <div className="bg-[color:var(--color-background)]/50 border-2 border-dashed border-[color:var(--color-success)] rounded-xl p-4 animate-pulse">
+            <div className="flex items-center gap-3">
+              {newCardType && (
+                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-success)]/20">
+                  {React.createElement(cardTypeIcons[newCardType]?.icon || FaQuestionCircle, {
+                    className: "text-[color:var(--color-success)] text-sm"
+                  })}
+                </div>
+              )}
+              <div>
+                <div className="text-[color:var(--color-text)] font-medium">
+                  Új {newCardType === 'task' ? 'feladat' : newCardType === 'joker' ? 'joker' : 'szerencse'} kártya
+                </div>
+                <div className="text-[color:var(--color-text-muted)] text-sm">
+                  Szerkesztés folyamatban...
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Existing Cards */}
+        {cards.map((card, index) => {
+          const cardIcon = cardTypeIcons[card.type] || cardTypeIcons.task
+          const isSelected = selectedCard?.id === card.id
+          
+          return (
+            <div
+              key={card.id}
+              onClick={() => onSelectCard(card)}
+              className={`
+                p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group
+                ${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 Header */}
+              <div className="flex items-start justify-between gap-2 mb-3">
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  <div className="flex items-center justify-center w-10 h-10 rounded-full border-2" style={{ borderColor: cardIcon.color }}>
+                    {React.createElement(cardIcon.icon, {
+                      style: { color: cardIcon.color },
+                      className: "text-lg"
+                    })}
+                  </div>
+                  
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[color:var(--color-text)] font-bold text-sm mb-1">
+                      #{index + 1} - {getCardTypeLabel(card)}
+                    </div>
+                    {card.timeLimit && (
+                      <div className="text-[color:var(--color-text-muted)] text-xs flex items-center gap-1">
+                        ⏱️ {card.timeLimit} másodperc
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onDeleteCard(card.id)
+                    }}
+                    className="p-1.5 rounded-lg bg-[color:var(--color-error)]/10 hover:bg-[color:var(--color-error)]/20 text-[color:var(--color-error)] transition-colors duration-200"
+                  >
+                    <FaTrash className="text-xs" />
+                  </button>
+                </div>
+              </div>
+
+              {/* Card Content Preview */}
+              <div className="bg-[color:var(--color-surface)]/30 rounded-lg p-3 mb-2">
+                <div 
+                  className="text-[color:var(--color-text)] text-sm leading-relaxed"
+                  style={{
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden'
+                  }}
+                >
+                  {getCardPreview(card)}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+
+        {/* Empty State */}
+        {cards.length === 0 && !isCreatingCard && (
+          <div className="text-center py-12">
+            <div className="text-[color:var(--color-text-muted)] text-lg mb-2">🃏</div>
+            <div className="text-[color:var(--color-text-muted)] text-sm">
+              Még nincsenek kártyák.
+              <br />
+              Hozz létre az első kártyát!
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Footer Stats */}
+      <div className="p-4 border-t border-[color:var(--color-surface-selected)] bg-[color:var(--color-background)]/30">
+        <div className="text-center">
+          <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 === 'task').length}</span>
+              <span>🃏 {cards.filter(c => c.type === 'joker').length}</span>
+              <span>🎲 {cards.filter(c => c.type === 'luck').length}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx

@@ -0,0 +1,161 @@
+// src/components/DeckCreator/DeckHeader.jsx
+// Deck alapadatok szerkesztése és mentés
+
+import React 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)" }
+]
+
+const privacyOptions = [
+  { value: "private", label: "Privát", icon: FaLock },
+  { value: "public", label: "Publikus", icon: FaGlobe }
+]
+
+export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
+  const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0]
+  const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0]
+
+  const handleInputChange = (field, value) => {
+    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
+
+  return (
+    <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
+      {/* Top Row - Title and Actions */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={onBack}
+            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
+          >
+            <FaArrowLeft />
+            Vissza
+          </button>
+          
+          <h1 className="text-2xl font-bold text-[color:var(--color-text)]">
+            📝 Deck Szerkesztés
+          </h1>
+        </div>
+
+        <button
+          onClick={onSave}
+          className="flex items-center gap-2 px-6 py-2 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"
+        >
+          <FaSave />
+          Mentés
+        </button>
+      </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>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              📦 Deck 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..."
+            />
+          </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>
+              <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>
+
+            {/* Privacy */}
+            <div>
+              <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>
+
+            {/* 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>
+  )
+}

SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx

@@ -0,0 +1,152 @@
+// src/components/DeckCreator/JokerCardEditor.jsx
+// Joker kártya szerkesztő
+
+import React, { useState, useEffect } from 'react'
+import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa'
+
+export default function JokerCardEditor({ card, onChange }) {
+  const [cardData, setCardData] = useState({
+    type: 'joker',
+    text: ''
+  })
+
+  useEffect(() => {
+    if (card) {
+      setCardData({
+        type: 'joker',
+        text: card.text || ''
+      })
+    }
+  }, [card])
+
+  const handleTextChange = (e) => {
+    const newCardData = {
+      ...cardData,
+      text: e.target.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)",
+    "Csinálj 20 felülést!",
+    "Mesélj el egy vicces történetet az életedből!",
+    "Utánozd a kedvenc állatodat 30 másodpercig!",
+    "Énekelj el egy dalt amit mindenki ismer!",
+    "Mondj el 5 dolgot amiért hálás vagy!",
+    "Táncolj 1 percig zene nélkül!"
+  ]
+
+  const insertExample = (example) => {
+    setCardData(prev => ({
+      ...prev,
+      text: example
+    }))
+    
+    if (onChange) {
+      onChange({
+        ...cardData,
+        text: example
+      })
+    }
+  }
+
+  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">
+          <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="flex items-start gap-3">
+            <FaInfoCircle className="text-[color:var(--color-fun)] mt-1 flex-shrink-0" />
+            <div>
+              <h4 className="font-semibold text-[color:var(--color-text)] mb-2 flex items-center gap-2">
+                <FaUsers className="text-sm" />
+                Joker kártya működése:
+              </h4>
+              <p className="text-[color:var(--color-text-muted)] text-sm mb-2">
+                A joker kártyák interaktív feladatokat tartalmaznak, melyek megtörik a jeget a játékosok között. 
+                Ezek lehetnek fizikai feladatok, kérdések, vagy szórakoztató kihívások.
+              </p>
+              <p className="text-[color:var(--color-fun)] text-sm font-medium">
+                Cél: Szórakozás és játékosok közötti kapcsolat erősítése
+              </p>
+            </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>
+          </div>
+        </div>
+
+        {/* Example cards */}
+        <div className="mt-6">
+          <h4 className="text-sm font-medium text-[color:var(--color-text)] mb-3">
+            💡 Példa joker kártyák (kattints rájuk a beszúráshoz):
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {exampleCards.map((example, index) => (
+              <button
+                key={index}
+                onClick={() => insertExample(example)}
+                className="text-left p-3 bg-[color:var(--color-fun)]/5 hover:bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/20 rounded-lg text-sm text-[color:var(--color-text)] transition-colors"
+              >
+                {example}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Preview */}
+        {cardData.text.trim() && (
+          <div className="mt-6 p-4 bg-[color:var(--color-fun)]/5 border border-[color:var(--color-fun)]/20 rounded-lg">
+            <h4 className="text-sm font-medium text-[color:var(--color-text)] mb-2">
+              Kártya előnézet:
+            </h4>
+            <div className="bg-[color:var(--color-surface)] border-2 border-[color:var(--color-fun)] rounded-lg p-4 text-center">
+              <FaTheaterMasks className="text-2xl text-[color:var(--color-fun)] mx-auto mb-2" />
+              <p className="text-[color:var(--color-text)] font-medium">
+                {cardData.text}
+              </p>
+              <div className="mt-2 text-xs text-[color:var(--color-fun)] font-medium">
+                🃏 JOKER KÁRTYA
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx

@@ -0,0 +1,105 @@
+// src/components/DeckCreator/LuckCardEditor.jsx
+// Szerencse kártya szerkesztő
+
+import React, { useState, useEffect } from 'react'
+import { FaDice, FaInfoCircle } from 'react-icons/fa'
+
+export default function LuckCardEditor({ card, onChange }) {
+  const [cardData, setCardData] = useState({
+    type: 'luck',
+    text: ''
+  })
+
+  useEffect(() => {
+    if (card) {
+      setCardData({
+        type: 'luck',
+        text: card.text || ''
+      })
+    }
+  }, [card])
+
+  const handleTextChange = (e) => {
+    const newCardData = {
+      ...cardData,
+      text: e.target.value
+    }
+    setCardData(newCardData)
+    
+    if (onChange) {
+      onChange(newCardData)
+    }
+  }
+
+  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>
+
+        {/* Info box */}
+        <div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4 mb-6">
+          <div className="flex items-start gap-3">
+            <FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" />
+            <div>
+              <h4 className="font-semibold text-[color:var(--color-text)] mb-2">
+                Szerencse kártya működése:
+              </h4>
+              <p className="text-[color:var(--color-text-muted)] text-sm mb-2">
+                Amikor egy játékos szerencse mezőre lép, kap egy kártyát amit felolvas. 
+                A kártyán lévő utasítás azonnal teljesül.
+              </p>
+              <p className="text-[color:var(--color-luck)] text-sm font-medium">
+                Példa: "Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
+              </p>
+            </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>
+          </div>
+        </div>
+
+        {/* Preview */}
+        {cardData.text.trim() && (
+          <div className="mt-6 p-4 bg-[color:var(--color-luck)]/5 border border-[color:var(--color-luck)]/20 rounded-lg">
+            <h4 className="text-sm font-medium text-[color:var(--color-text)] mb-2">
+              Kártya előnézet:
+            </h4>
+            <div className="bg-[color:var(--color-surface)] border-2 border-[color:var(--color-luck)] rounded-lg p-4 text-center">
+              <FaDice className="text-2xl text-[color:var(--color-luck)] mx-auto mb-2" />
+              <p className="text-[color:var(--color-text)] font-medium">
+                {cardData.text}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx

@@ -0,0 +1,500 @@
+// src/components/DeckCreator/TaskCardEditor.jsx
+// Feladat kártya szerkesztő (Quiz, Igaz/Hamis, Párosítás, Szöveges)
+
+import React from "react"
+import { FaPlus, FaTrash, FaCheck, FaTimes } from "react-icons/fa"
+
+const taskSubTypes = [
+  { value: 'quiz', label: '📋 Quiz (A/B/C/D)', description: 'Feleletválasztós kérdés' },
+  { value: 'truefalse', label: '✅ Igaz/Hamis', description: 'Igaz vagy hamis állítás' },
+  { value: 'matching', label: '🔗 Párosítás', description: 'Elemek összekapcsolása' },
+  { value: 'text', label: '✏️ Szöveges válasz', description: 'Szabadszöveges válasz' }
+]
+
+const timeLimits = [
+  { value: 15, label: '15 másodperc' },
+  { value: 30, label: '30 másodperc' },
+  { value: 45, label: '45 másodperc' },
+  { value: 60, label: '1 perc' },
+  { value: 90, label: '1.5 perc' },
+  { value: 120, label: '2 perc' }
+]
+
+export default function TaskCardEditor({ card, onChange }) {
+  
+  const updateField = (field, value) => {
+    onChange({ [field]: value })
+  }
+
+  const updateOption = (index, value) => {
+    const newOptions = [...card.options]
+    newOptions[index] = value
+    onChange({ options: newOptions })
+  }
+
+  const addMatchingPair = () => {
+    const newLeft = [...(card.leftItems || []), '']
+    const newRight = [...(card.rightItems || []), '']
+    const newCorrectPairs = { ...(card.correctPairs || {}), [newLeft.length - 1]: newRight.length - 1 }
+    
+    onChange({ 
+      leftItems: newLeft,
+      rightItems: newRight,
+      correctPairs: newCorrectPairs
+    })
+  }
+
+  const removeMatchingPair = (index) => {
+    const newLeft = card.leftItems.filter((_, i) => i !== index)
+    const newRight = card.rightItems.filter((_, i) => i !== index)
+    const newCorrectPairs = {}
+    
+    // Újraszámozás
+    Object.entries(card.correctPairs).forEach(([leftIdx, rightIdx]) => {
+      const newLeftIdx = parseInt(leftIdx) > index ? parseInt(leftIdx) - 1 : parseInt(leftIdx)
+      const newRightIdx = parseInt(rightIdx) > index ? parseInt(rightIdx) - 1 : parseInt(rightIdx)
+      if (newLeftIdx !== index && newRightIdx !== index) {
+        newCorrectPairs[newLeftIdx] = newRightIdx
+      }
+    })
+    
+    onChange({ 
+      leftItems: newLeft,
+      rightItems: newRight,
+      correctPairs: newCorrectPairs
+    })
+  }
+
+  const addAcceptedAnswer = () => {
+    const newAnswers = [...(card.acceptedAnswers || []), '']
+    onChange({ acceptedAnswers: newAnswers })
+  }
+
+  const updateAcceptedAnswer = (index, value) => {
+    const newAnswers = [...card.acceptedAnswers]
+    newAnswers[index] = value
+    onChange({ acceptedAnswers: newAnswers })
+  }
+
+  const removeAcceptedAnswer = (index) => {
+    const newAnswers = card.acceptedAnswers.filter((_, i) => i !== index)
+    onChange({ acceptedAnswers: newAnswers })
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      {/* Feladat típus választó */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+          🎯 Feladat típusa
+        </h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {taskSubTypes.map(type => (
+            <button
+              key={type.value}
+              onClick={() => updateField('subType', type.value)}
+              className={`
+                p-4 rounded-xl border text-left transition-all duration-200 hover:scale-105
+                ${card.subType === type.value
+                  ? 'bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg'
+                  : 'bg-[color:var(--color-background)] border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-surface-selected)]'
+                }
+              `}
+            >
+              <div className="font-semibold text-[color:var(--color-text)]">
+                {type.label}
+              </div>
+              <div className="text-sm text-[color:var(--color-text-muted)] mt-1">
+                {type.description}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Quiz típus szerkesztő */}
+      {card.subType === 'quiz' && (
+        <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+          <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+            📋 Quiz kérdés
+          </h3>
+          
+          {/* Kérdés */}
+          <div className="mb-6">
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Kérdés
+            </label>
+            <textarea
+              value={card.question || ''}
+              onChange={(e) => updateField('question', 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="Írd be a kérdést..."
+            />
+          </div>
+
+          {/* Válaszlehetőségek */}
+          <div className="space-y-3">
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium">
+              Válaszlehetőségek
+            </label>
+            
+            {['A', 'B', 'C', 'D'].map((letter, index) => (
+              <div key={index} className="flex items-center gap-3">
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => updateField('correctAnswer', index)}
+                    className={`
+                      w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-200
+                      ${card.correctAnswer === index
+                        ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
+                        : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)]'
+                      }
+                    `}
+                  >
+                    {letter}
+                  </button>
+                  
+                  {card.correctAnswer === index && (
+                    <FaCheck className="text-[color:var(--color-success)] text-sm" />
+                  )}
+                </div>
+                
+                <input
+                  type="text"
+                  value={card.options?.[index] || ''}
+                  onChange={(e) => updateOption(index, e.target.value)}
+                  className="flex-1 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={`${letter} válasz...`}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Igaz/Hamis típus szerkesztő */}
+      {card.subType === 'truefalse' && (
+        <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+          <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+            ✅ Igaz/Hamis állítás
+          </h3>
+          
+          {/* Állítás */}
+          <div className="mb-6">
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Állítás
+            </label>
+            <textarea
+              value={card.statement || ''}
+              onChange={(e) => updateField('statement', 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="Írd be az állítást..."
+            />
+          </div>
+
+          {/* Helyes válasz */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-3">
+              Helyes válasz
+            </label>
+            
+            <div className="flex gap-4">
+              <button
+                onClick={() => updateField('isTrue', true)}
+                className={`
+                  flex items-center gap-3 px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105
+                  ${card.isTrue === true
+                    ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] shadow-lg'
+                    : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)]'
+                  }
+                `}
+              >
+                <FaCheck />
+                ✅ IGAZ
+              </button>
+              
+              <button
+                onClick={() => updateField('isTrue', false)}
+                className={`
+                  flex items-center gap-3 px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105
+                  ${card.isTrue === false
+                    ? 'bg-[color:var(--color-error)] text-[color:var(--color-text-inverse)] shadow-lg'
+                    : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)]'
+                  }
+                `}
+              >
+                <FaTimes />
+                ❌ HAMIS
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Párosítás típus szerkesztő */}
+      {card.subType === 'matching' && (
+        <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+          <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+            🔗 Párosítás feladat
+          </h3>
+          
+          {/* Feladat leírás */}
+          <div className="mb-6">
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Feladat leírása
+            </label>
+            <input
+              type="text"
+              value={card.taskDescription || ''}
+              onChange={(e) => updateField('taskDescription', 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="Pl.: Párosítsd a országokat a fővárosukkal"
+            />
+          </div>
+
+          {/* Párosítások */}
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <label className="text-[color:var(--color-text-muted)] text-sm font-medium">
+                Párosítások
+              </label>
+              <button
+                onClick={addMatchingPair}
+                className="flex items-center gap-2 px-3 py-1 rounded-lg bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] text-sm font-medium hover:bg-[color:var(--color-success)]/80 transition-all duration-200"
+              >
+                <FaPlus />
+                Új pár
+              </button>
+            </div>
+
+            {(card.leftItems || []).map((leftItem, index) => (
+              <div key={index} className="grid grid-cols-5 gap-3 items-center">
+                <input
+                  type="text"
+                  value={leftItem}
+                  onChange={(e) => {
+                    const newLeft = [...card.leftItems]
+                    newLeft[index] = e.target.value
+                    onChange({ leftItems: newLeft })
+                  }}
+                  className="col-span-2 px-3 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 text-sm"
+                  placeholder="Bal oldal..."
+                />
+                
+                <div className="text-center text-[color:var(--color-text-muted)]">↔</div>
+                
+                <input
+                  type="text"
+                  value={card.rightItems?.[index] || ''}
+                  onChange={(e) => {
+                    const newRight = [...(card.rightItems || [])]
+                    newRight[index] = e.target.value
+                    onChange({ rightItems: newRight })
+                  }}
+                  className="px-3 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 text-sm"
+                  placeholder="Jobb oldal..."
+                />
+                
+                <button
+                  onClick={() => removeMatchingPair(index)}
+                  className="p-2 rounded-lg bg-[color:var(--color-error)]/10 text-[color:var(--color-error)] hover:bg-[color:var(--color-error)]/20 transition-all duration-200"
+                >
+                  <FaTrash className="text-xs" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Szöveges válasz típus szerkesztő */}
+      {card.subType === 'text' && (
+        <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+          <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
+            ✏️ Szöveges válasz
+          </h3>
+          
+          {/* Kérdés */}
+          <div className="mb-6">
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Kérdés
+            </label>
+            <textarea
+              value={card.question || ''}
+              onChange={(e) => updateField('question', 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="Írd be a kérdést..."
+            />
+          </div>
+
+          {/* Elfogadott válaszok */}
+          <div className="mb-6">
+            <div className="flex justify-between items-center mb-3">
+              <label className="text-[color:var(--color-text-muted)] text-sm font-medium">
+                Elfogadott válaszok
+              </label>
+              <button
+                onClick={addAcceptedAnswer}
+                className="flex items-center gap-2 px-3 py-1 rounded-lg bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] text-sm font-medium hover:bg-[color:var(--color-success)]/80 transition-all duration-200"
+              >
+                <FaPlus />
+                Új válasz
+              </button>
+            </div>
+
+            <div className="space-y-2">
+              {(card.acceptedAnswers || ['', '', '']).map((answer, index) => (
+                <div key={index} className="flex gap-2">
+                  <input
+                    type="text"
+                    value={answer}
+                    onChange={(e) => updateAcceptedAnswer(index, e.target.value)}
+                    className="flex-1 px-3 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 text-sm"
+                    placeholder={`Elfogadott válasz ${index + 1}...`}
+                  />
+                  
+                  {(card.acceptedAnswers?.length || 0) > 1 && (
+                    <button
+                      onClick={() => removeAcceptedAnswer(index)}
+                      className="p-2 rounded-lg bg-[color:var(--color-error)]/10 text-[color:var(--color-error)] hover:bg-[color:var(--color-error)]/20 transition-all duration-200"
+                    >
+                      <FaTrash className="text-xs" />
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            <div className="text-xs text-[color:var(--color-text-muted)] mt-2">
+              Vesszővel elválasztva is megadhatsz több elfogadott választ egy mezőben
+            </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>
+            
+            <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>
+          </div>
+
+          {/* Tipp */}
+          <div className="mt-4">
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              Tipp (opcionális)
+            </label>
+            <input
+              type="text"
+              value={card.hint || ''}
+              onChange={(e) => updateField('hint', 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="Segítő tipp a játékosoknak..."
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Közös beállítások */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+        <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>
+
+          {/* 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>
+
+          {/* 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={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"
+              />
+            </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>
+      </div>
+    </div>
+  )
+}

SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react"
+import { useNavigate } from "react-router-dom"
 import {
   FaPlus,
   FaFilter,
@@ -73,6 +74,8 @@ const sortOptions = [
 ]
 
 const DeckManager = () => {
+  const navigate = useNavigate()
+  
   const [selectedType, setSelectedType] = useState("All")
   const [selectedOrigin, setSelectedOrigin] = useState("Mind")
   const [sortBy, setSortBy] = useState("date-desc")
@@ -245,7 +248,10 @@ const DeckManager = () => {
         {/* Decks Grid */}
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
           {/* Create New Deck (Mockup) */}
-          <div className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg">
+          <div 
+            onClick={() => navigate('/deck-creator')}
+            className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
+          >
             <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
             <span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
           </div>

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -0,0 +1,201 @@
+// src/pages/DeckCreator/DeckCreator.jsx
+// Deck Creator Page - Deck létrehozás és szerkesztés
+
+import React, { useState, useEffect } from "react"
+import { useParams, useNavigate } from "react-router-dom"
+import Navbar from "../../components/Navbar/Navbar.jsx"
+import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
+import CardsList from "../../components/DeckCreator/CardsList.jsx"
+import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
+
+export default function DeckCreator() {
+  const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
+  const navigate = useNavigate()
+
+  // Deck alapadatok
+  const [deck, setDeck] = useState({
+    id: null,
+    name: "Új Deck",
+    type: "Question", // Question, Luck, Fun
+    privacy: "private", // private, public
+    description: "",
+    cards: []
+  })
+
+  // UI állapotok
+  const [selectedCard, setSelectedCard] = useState(null)
+  const [isCreatingCard, setIsCreatingCard] = useState(false)
+  const [newCardType, setNewCardType] = useState(null) // task, joker, luck
+
+  // Betöltés (később API-ból)
+  useEffect(() => {
+    if (deckId) {
+      // TODO: Betöltés API-ból
+      loadDeck(deckId)
+    } else {
+      // Új deck
+      setDeck({
+        id: null,
+        name: "Új Deck",
+        type: "Question",
+        privacy: "private",
+        description: "",
+        cards: []
+      })
+    }
+  }, [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 {
+      // TODO: API mentés
+      console.log("Deck mentése:", deck)
+      alert("✅ Deck sikeresen mentve!")
+    } catch (error) {
+      console.error("Mentési hiba:", error)
+      alert("❌ Hiba történt a mentés során!")
+    }
+  }
+
+  const handleBack = () => {
+    if (confirm("Biztosan visszamész? A nem mentett változtatások elvesznek.")) {
+      navigate("/decks")
+    }
+  }
+
+  const handleCreateCard = (cardType) => {
+    setNewCardType(cardType)
+    setIsCreatingCard(true)
+    setSelectedCard(null)
+  }
+
+  const handleSelectCard = (card) => {
+    setSelectedCard(card)
+    setIsCreatingCard(false)
+    setNewCardType(null)
+  }
+
+  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 handleDeleteCard = (cardId) => {
+    if (confirm("Biztosan törlöd ezt a kártyát?")) {
+      setDeck(prev => ({
+        ...prev,
+        cards: prev.cards.filter(card => card.id !== cardId)
+      }))
+      
+      if (selectedCard?.id === cardId) {
+        setSelectedCard(null)
+      }
+    }
+  }
+
+  return (
+    <div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
+      <Navbar />
+      
+      <main className="flex-1 flex flex-col">
+        {/* Deck Header */}
+        <DeckHeader 
+          deck={deck}
+          onUpdate={handleDeckUpdate}
+          onSave={handleSaveDeck}
+          onBack={handleBack}
+        />
+
+        {/* Main Content */}
+        <div className="flex-1 flex">
+          {/* Left Panel - Cards List */}
+          <div className="w-80 bg-[color:var(--color-surface)] border-r border-[color:var(--color-surface-selected)] flex flex-col">
+            <CardsList
+              cards={deck.cards}
+              selectedCard={selectedCard}
+              onSelectCard={handleSelectCard}
+              onCreateCard={handleCreateCard}
+              onDeleteCard={handleDeleteCard}
+              isCreatingCard={isCreatingCard}
+              newCardType={newCardType}
+            />
+          </div>
+
+          {/* Right Panel - Card Editor */}
+          <div className="flex-1 bg-[color:var(--color-background)] flex flex-col">
+            <CardEditor
+              card={selectedCard}
+              isCreating={isCreatingCard}
+              cardType={newCardType}
+              onSave={handleSaveCard}
+              onCancel={() => {
+                setIsCreatingCard(false)
+                setNewCardType(null)
+                setSelectedCard(null)
+              }}
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}