[#104] Create/Updatehttps://project.mdnd-it.cc/work_packages/104

2025-09-12 19:44:22 +02:00
parent 37f81f25a7
commit d1377291ab
10 changed files with 1731 additions and 1 deletions
@@ -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>
+  )
+}