[#104] Create/Updatehttps://project.mdnd-it.cc/work_packages/104
This commit is contained in:
GitG0r0
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user