Feature: Consequence rendszer implementálása minden kártya típushoz

- 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
2025-10-23 00:31:33 +02:00
parent f2a54154f5
commit 3bbd3f1e8a
6 changed files with 427 additions and 84 deletions
@@ -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>
  )
 }