Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deckcreate-oldal-javitas #62

Merged
Donat merged 10 commits from deckcreate-oldal-javitas into main 2025-10-23 17:29:45 +02:00
Conversation 0 Commits 10 Files Changed 13
+879 -419
13 changed files with 879 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Docker/docker-compose.watch.yml
+3 -1
View File
@@ -75,7 +75,9 @@ services:
environment: environment:
- NODE_ENV=development - NODE_ENV=development
- VITE_API_URL=http://localhost:3000 - VITE_API_URL=http://localhost:3000
volumes: [] volumes:
- ../SerpentRace_Frontend:/app
- /app/node_modules
develop: develop:
watch: watch:
- action: sync - action: sync
SerpentRace_Frontend/package-lock.json
Generated
+23
View File
@@ -15,6 +15,7 @@
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.6.0", "react-router-dom": "^7.6.0",
"react-toastify": "^11.0.5",
"tailwindcss": "^4.1.7" "tailwindcss": "^4.1.7"
}, },
"devDependencies": { "devDependencies": {
@@ -1816,6 +1817,15 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3363,6 +3373,19 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/react-toastify": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
"integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
"license": "MIT",
"dependencies": {
"clsx": "^2.1.1"
},
"peerDependencies": {
"react": "^18 || ^19",
"react-dom": "^18 || ^19"
}
},
"node_modules/resolve-from": { "node_modules/resolve-from": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
SerpentRace_Frontend/package.json
+1
View File
@@ -17,6 +17,7 @@
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.6.0", "react-router-dom": "^7.6.0",
"react-toastify": "^11.0.5",
"tailwindcss": "^4.1.7" "tailwindcss": "^4.1.7"
}, },
"devDependencies": { "devDependencies": {
SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+89 -48
View File
@@ -20,29 +20,32 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
id: null, id: null,
type: type, type: type,
points: 10, points: 10,
timeLimit: 30 timeLimit: 30,
consequence: { type: 0, value: 1 }
} }
switch (type) { switch (type) {
case 'task': case 'QUESTION':
return { return {
...baseData, ...baseData,
subType: 'quiz', subType: 'quiz',
question: '', question: '',
options: ['', '', '', ''], options: ['', '', '', ''],
correctAnswer: 0, correctAnswer: 0,
explanation: '' explanation: '',
wrongConsequence: { type: 1, value: 1 }
} }
case 'joker': case 'JOKER':
return { return {
...baseData, ...baseData,
title: '', title: '',
description: '', description: '',
effect: '', effect: '',
actionType: 'skip', actionType: 'skip',
usage: 'once' usage: 'once',
wrongConsequence: { type: 1, value: 1 }
} }
case 'luck': case 'LUCK':
return { return {
...baseData, ...baseData,
event: '', event: '',
@@ -58,38 +61,55 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
// Kártya adatok inicializálása // Kártya adatok inicializálása
useEffect(() => { useEffect(() => {
if (isCreating && cardType) { try {
setCardData(getDefaultCardData(cardType)) if (isCreating && cardType) {
} else if (card) { const defaultData = getDefaultCardData(cardType)
setCardData({ ...card }) setCardData(defaultData)
} else { } else if (card) {
setCardData({ ...card })
} else {
setCardData(null)
}
} catch (error) {
console.error('Kártya inicializálási hiba:', error)
setCardData(null) setCardData(null)
} }
}, [card, isCreating, cardType]) }, [card, isCreating, cardType])
const validateCard = (data) => { const validateCard = (data) => {
if (data.type === 'task') { try {
if (!data.question && !data.statement) { if (!data || !data.type) {
notifyError("Kérdés vagy állítás megadása kötelező!") notifyError("Érvénytelen kártya adatok!")
return false return false
} }
if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
notifyError("Minden válaszlehetőséget ki kell tölteni!")
return false
}
} else if (data.type === 'joker') {
if (!data.text || !data.text.trim()) {
notifyError("Joker kártya szövege nem lehet üres!")
return false
}
} else if (data.type === 'luck') {
if (!data.text || !data.text.trim()) {
notifyError("Szerencse kártya szövege nem lehet üres!")
return false
}
}
return true if (data.type === 'QUESTION') {
if (!data.question && !data.statement) {
notifyError("Kérdés vagy állítás megadása kötelező!")
return false
}
if (data.subType === 'quiz' && data.options && data.options.some(opt => !opt.trim())) {
notifyError("Minden válaszlehetőséget ki kell tölteni!")
return false
}
} else if (data.type === 'JOKER') {
if (!data.text || !data.text.trim()) {
notifyError("Joker kártya szövege nem lehet üres!")
return false
}
} else if (data.type === 'LUCK') {
if (!data.text || !data.text.trim()) {
notifyError("Szerencse kártya szövege nem lehet üres!")
return false
}
}
return true
} catch (error) {
console.error('Validálási hiba:', error)
notifyError("Hiba történt a kártya ellenőrzése során")
return false
}
} }
const updateCardData = (updates) => { const updateCardData = (updates) => {
@@ -97,16 +117,14 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
} }
const handleSave = () => { const handleSave = () => {
if (!cardData) return if (!cardData) {
notifyError("Nincs mentendő kártya adat!")
return
}
if (!validateCard(cardData)) return if (!validateCard(cardData)) return
try { onSave(cardData)
onSave(cardData)
notifySuccess('Kártya sikeresen mentve!')
} catch (error) {
notifyError('Hiba történt a kártya mentése során: ' + (error?.message || String(error)))
}
} }
// Ha nincs kiválasztott kártya vagy új kártya létrehozás // Ha nincs kiválasztott kártya vagy új kártya létrehozás
@@ -129,24 +147,47 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
return ( return (
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
{/* Type Mismatch Warning */}
{cardData?.type && cardType && cardData.type !== cardType && !isCreating && (
<div className="bg-[color:var(--color-error)]/10 border-l-4 border-[color:var(--color-error)] px-6 py-4">
<div className="flex items-center gap-3">
<div className="text-[color:var(--color-error)] text-xl">⚠️</div>
<div>
<div className="text-[color:var(--color-error)] font-semibold">
Figyelmeztetés: Nem megfelelő kártya típus
</div>
<div className="text-[color:var(--color-error)]/80 text-sm">
{`Ez egy ${
cardData.type === 'QUESTION' ? 'Feladat' :
cardData.type === 'JOKER' ? 'Joker' : 'Szerencse'
} kártya, de a pakli típusa ${
cardType === 'QUESTION' ? 'Feladat' :
cardType === 'JOKER' ? 'Joker' : 'Szerencse'
}.`}
</div>
</div>
</div>
</div>
)}
{/* Header */} {/* Header */}
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4"> <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 justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="text-2xl"> <div className="text-2xl">
{cardData.type === 'task' && '📋'} {cardData.type === 'QUESTION' && '📋'}
{cardData.type === 'joker' && '🃏'} {cardData.type === 'JOKER' && '🃏'}
{cardData.type === 'luck' && '🎲'} {cardData.type === 'LUCK' && '🎲'}
</div> </div>
<div> <div>
<h2 className="text-xl font-bold text-[color:var(--color-text)]"> <h2 className="text-xl font-bold text-[color:var(--color-text)]">
{isCreating ? 'Új' : 'Szerkesztés'}{' '} {isCreating ? 'Új' : 'Szerkesztés'} {' '}
{cardData.type === 'task' && 'Feladat kártya'} {(isCreating ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'}
{cardData.type === 'joker' && 'Joker kártya'} {(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'}
{cardData.type === 'luck' && 'Szerencse kártya'} {(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'}
</h2> </h2>
<div className="text-[color:var(--color-text-muted)] text-sm"> <div className="text-[color:var(--color-text-muted)] text-sm">
{cardData.type === 'task' && cardData.subType && ( {cardData.type === 'QUESTION' && cardData.subType && (
<> <>
{cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'} {cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
{cardData.subType === 'truefalse' && 'Igaz/Hamis'} {cardData.subType === 'truefalse' && 'Igaz/Hamis'}
@@ -203,21 +244,21 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div> </div>
) : ( ) : (
<div className="h-full overflow-y-auto p-6"> <div className="h-full overflow-y-auto p-6">
{cardData.type === 'task' && ( {cardData.type === 'QUESTION' && (
<TaskCardEditor <TaskCardEditor
card={cardData} card={cardData}
onChange={updateCardData} onChange={updateCardData}
/> />
)} )}
{cardData.type === 'joker' && ( {cardData.type === 'JOKER' && (
<JokerCardEditor <JokerCardEditor
card={cardData} card={cardData}
onChange={updateCardData} onChange={updateCardData}
/> />
)} )}
{cardData.type === 'luck' && ( {cardData.type === 'LUCK' && (
<LuckCardEditor <LuckCardEditor
card={cardData} card={cardData}
onChange={updateCardData} onChange={updateCardData}
SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
+43 -58
View File
@@ -15,9 +15,9 @@ import {
import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices" import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
const cardTypeIcons = { const cardTypeIcons = {
task: { icon: FaQuestionCircle, color: "var(--color-question)" }, QUESTION: { icon: FaQuestionCircle, color: "var(--color-question)" },
joker: { icon: FaTheaterMasks, color: "var(--color-fun)" }, JOKER: { icon: FaTheaterMasks, color: "var(--color-fun)" },
luck: { icon: FaDice, color: "var(--color-luck)" } LUCK: { icon: FaDice, color: "var(--color-luck)" }
} }
const cardSubTypeLabels = { const cardSubTypeLabels = {
@@ -30,6 +30,7 @@ const cardSubTypeLabels = {
export default function CardsList({ export default function CardsList({
cards, cards,
selectedCard, selectedCard,
deckType,
onSelectCard, onSelectCard,
onCreateCard, onCreateCard,
onDeleteCard, onDeleteCard,
@@ -39,30 +40,30 @@ export default function CardsList({
const [confirmingDelete, setConfirmingDelete] = useState(null) const [confirmingDelete, setConfirmingDelete] = useState(null)
const getCardPreview = (card) => { const getCardPreview = (card) => {
if (card.type === "task") { if (card.type === 'QUESTION') {
return card.question || card.statement || "Új feladat kártya" return card.question || card.statement || 'Új feladat kártya'
} }
if (card.type === "joker") { if (card.type === 'JOKER') {
return card.text || "Új joker kártya" return card.text || 'Új joker kártya'
} }
if (card.type === "luck") { if (card.type === 'LUCK') {
return card.text || "Új szerencse kártya" return card.text || 'Új szerencse kártya'
} }
return "Ismeretlen kártya" return "Ismeretlen kártya"
} }
const getCardTypeLabel = (card) => { const getCardTypeLabel = (card) => {
if (card.type === "task") { if (card.type === 'QUESTION') {
if (card.subType) { if (card.subType) {
return cardSubTypeLabels[card.subType] || "Feladat" return cardSubTypeLabels[card.subType] || "Feladat"
} }
return "Feladat" return "Feladat"
} }
if (card.type === "joker") { if (card.type === 'JOKER') {
return "Joker" return 'Joker'
} }
if (card.type === "luck") { if (card.type === 'LUCK') {
return "Szerencse" return 'Szerencse'
} }
return "Ismeretlen" return "Ismeretlen"
} }
@@ -87,40 +88,22 @@ export default function CardsList({
🃏 Kártyák 🃏 Kártyák
</h2> </h2>
{/* New Card Dropdown */} {/* New Card Button */}
<div className="relative group"> <button
<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"> onClick={() => onCreateCard(deckType)}
<FaPlus /> className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg ${
Új kártya deckType === 'QUESTION' ? 'bg-[color:var(--color-question)] hover:bg-[color:var(--color-question)]/80' :
</button> deckType === 'LUCK' ? 'bg-[color:var(--color-luck)] hover:bg-[color:var(--color-luck)]/80' :
'bg-[color:var(--color-fun)] hover:bg-[color:var(--color-fun)]/80'
{/* 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 <FaPlus />
onClick={() => onCreateCard("task")} <span>
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" {deckType === 'QUESTION' && '📋 Új feladat kártya'}
> {deckType === 'JOKER' && '🃏 Új joker kártya'}
<FaQuestionCircle className="text-[color:var(--color-question)]" /> {deckType === 'LUCK' && '🎲 Új szerencse kártya'}
📋 Feladat kártya </span>
</button> </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> </div>
{/* Cards List */} {/* Cards List */}
@@ -138,7 +121,7 @@ export default function CardsList({
)} )}
<div> <div>
<div className="text-[color:var(--color-text)] font-medium"> <div className="text-[color:var(--color-text)] font-medium">
Új {newCardType === "task" ? "feladat" : newCardType === "joker" ? "joker" : "szerencse"} kártya Új {newCardType === "QUESTION" ? "feladat" : newCardType === "JOKER" ? "joker" : "szerencse"} kártya
</div> </div>
<div className="text-[color:var(--color-text-muted)] text-sm"> <div className="text-[color:var(--color-text-muted)] text-sm">
Szerkesztés folyamatban... Szerkesztés folyamatban...
@@ -158,14 +141,24 @@ export default function CardsList({
key={card.id} key={card.id}
onClick={() => onSelectCard(card)} onClick={() => onSelectCard(card)}
className={` className={`
p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group relative
${ ${
isSelected isSelected
? "bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg" ? "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" : "bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80"
} }
${card.type !== deckType ? "opacity-70" : ""}
`} `}
> >
{card.type !== deckType && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="absolute inset-0 bg-[color:var(--color-error)]/5 backdrop-blur-[1px] rounded-xl"></div>
<div className="absolute rotate-[-15deg] border-t-2 border-[color:var(--color-error)] w-full"></div>
<span className="absolute top-1 right-1 text-xs text-[color:var(--color-error)] bg-[color:var(--color-error)]/10 px-2 py-1 rounded-lg">
⚠️ Nem megfelelő típus
</span>
</div>
)}
{/* Card Header */} {/* Card Header */}
<div className="flex items-start justify-between gap-2 mb-3"> <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 gap-3 flex-1 min-w-0">
@@ -270,14 +263,6 @@ export default function CardsList({
<div className="text-[color:var(--color-text)] font-semibold"> <div className="text-[color:var(--color-text)] font-semibold">
📊 Összesen: {cards.length} kártya 📊 Összesen: {cards.length} kártya
</div> </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> </div>
</div> </div>
SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+148 -88
View File
@@ -1,13 +1,13 @@
// src/components/DeckCreator/DeckHeader.jsx // src/components/DeckCreator/DeckHeader.jsx
// Deck alapadatok szerkesztése és mentés // Deck alapadatok szerkesztése és mentés
import React from "react" import React, { useState, useRef, useEffect } from "react"
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa" import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
const deckTypes = [ const deckTypes = [
{ value: "Question", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" }, { value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
{ value: "Luck", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" }, { value: "LUCK", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
{ value: "Fun", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" } { value: "JOKER", label: "Joker", icon: FaLaughBeam, color: "var(--color-fun)" }
] ]
const privacyOptions = [ const privacyOptions = [
@@ -16,17 +16,35 @@ const privacyOptions = [
] ]
export default function DeckHeader({ deck, onUpdate, onSave, onBack }) { export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
const typeDropdownRef = useRef(null);
const privacyDropdownRef = useRef(null);
const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0] const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0]
const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0] const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0]
useEffect(() => {
function handleClickOutside(event) {
if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
setIsTypeDropdownOpen(false);
}
if (privacyDropdownRef.current && !privacyDropdownRef.current.contains(event.target)) {
setIsPrivacyDropdownOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
const handleInputChange = (field, value) => { const handleInputChange = (field, value) => {
onUpdate({ [field]: value }) onUpdate({ [field]: value })
} }
const cardsCount = deck.cards?.length || 0 // Remove unused card count variables
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 ( return (
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4"> <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
@@ -42,7 +60,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
</button> </button>
<h1 className="text-2xl font-bold text-[color:var(--color-text)]"> <h1 className="text-2xl font-bold text-[color:var(--color-text)]">
📝 Deck Szerkesztés 📝 Pakli Szerkesztés
</h1> </h1>
</div> </div>
@@ -56,103 +74,145 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
</div> </div>
{/* Main Content Row */} {/* Main Content Row */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end"> <div className="space-y-4">
{/* Deck Basic Info */} {/* Two Column Layout */}
<div className="lg:col-span-2 space-y-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Deck Name */} {/* Deck Name - Takes up 2 columns */}
<div> <div className="md:col-span-2">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📦 Deck neve 📦 Pakli neve
</label> </label>
<input <input
type="text" type="text"
value={deck.name} value={deck.name}
onChange={(e) => handleInputChange('name', e.target.value)} 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" className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
placeholder="Add meg a deck nevét..." placeholder="Add meg a pakli nevét..."
/> />
</div> </div>
{/* Type and Privacy Row */} {/* Empty space for visual balance */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="hidden md:block"></div>
{/* 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> </div>
{/* Stats Panel */} {/* Type, Privacy and Description Row */}
<div className="bg-[color:var(--color-background)]/50 rounded-xl p-4 border border-[color:var(--color-surface-selected)]"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<h3 className="text-[color:var(--color-text)] font-semibold mb-3 flex items-center gap-2"> {/* Deck Type */}
📊 Statisztikák <div>
</h3> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
🎯 Típus
</label>
<div className="relative">
<button
type="button"
onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
style={{
paddingLeft: "2.5rem"
}}
>
<div className="absolute left-4 top-1/2 -translate-y-1/2">
{React.createElement(currentDeckType.icon, {
style: { color: currentDeckType.color }
})}
</div>
{currentDeckType.label}
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</div>
</button>
<div className="space-y-2 text-sm"> {isTypeDropdownOpen && (
<div className="flex justify-between items-center"> <div
<span className="text-[color:var(--color-text-muted)]">Összes kártya:</span> className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
<span className="text-[color:var(--color-text)] font-semibold">{cardsCount}</span> ref={typeDropdownRef}
>
{deckTypes.map(type => (
<button
key={type.value}
onClick={() => {
handleInputChange('type', type.value);
setIsTypeDropdownOpen(false);
}}
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
>
{React.createElement(type.icon, {
style: { color: type.color }
})}
<span>{type.label}</span>
</button>
))}
</div>
)}
</div> </div>
</div>
<div className="flex justify-between items-center"> {/* Privacy */}
<span className="text-[color:var(--color-text-muted)]">📋 Feladat:</span> <div>
<span className="text-[color:var(--color-question)] font-semibold">{taskCards}</span> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
</div> 👁️ Láthatóság
</label>
<div className="relative">
<button
type="button"
onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
style={{
paddingLeft: "2.5rem"
}}
>
<div className="absolute left-4 top-1/2 -translate-y-1/2">
{React.createElement(currentPrivacy.icon, {
className: "text-[color:var(--color-text)]"
})}
</div>
{currentPrivacy.label}
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</div>
</button>
<div className="flex justify-between items-center"> {isPrivacyDropdownOpen && (
<span className="text-[color:var(--color-text-muted)]">🃏 Joker:</span> <div
<span className="text-[color:var(--color-success)] font-semibold">{jokerCards}</span> className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
ref={privacyDropdownRef}
>
{privacyOptions.map(option => (
<button
key={option.value}
onClick={() => {
handleInputChange('privacy', option.value);
setIsPrivacyDropdownOpen(false);
}}
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
>
{React.createElement(option.icon, {
className: "text-[color:var(--color-text)]"
})}
<span>{option.label}</span>
</button>
))}
</div>
)}
</div> </div>
</div>
<div className="flex justify-between items-center"> {/* Description */}
<span className="text-[color:var(--color-text-muted)]">🎲 Szerencse:</span> <div>
<span className="text-[color:var(--color-luck)] font-semibold">{luckCards}</span> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
</div> 📝 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> </div>
</div> </div>
SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
+4 -4
View File
@@ -17,7 +17,7 @@ import DeckInfoPopUp from "../PopUp/DeckInfoPopUp"
const deckTypes = [ const deckTypes = [
{ label: "Luck", color: "var(--color-luck)" }, { label: "Luck", color: "var(--color-luck)" },
{ label: "Question", color: "var(--color-question)" }, { label: "Question", color: "var(--color-question)" },
{ label: "Fun", color: "var(--color-fun)" }, { label: "Joker", color: "var(--color-fun)" },
] ]
// initial state will be fetched from backend // initial state will be fetched from backend
@@ -163,8 +163,8 @@ const DeckManager = () => {
? "Szerencse" ? "Szerencse"
: type.label === "Question" : type.label === "Question"
? "Kérdés" ? "Kérdés"
: type.label === "Fun" : type.label === "Joker"
? "Szórakozás" ? "Joker"
: type.label} : type.label}
</button> </button>
))} ))}
@@ -303,7 +303,7 @@ const DeckManager = () => {
: deck.type === "Question" : deck.type === "Question"
? "Kérdés" ? "Kérdés"
: deck.type === "Fun" : deck.type === "Fun"
? "Szórakozás" ? "Joker"
: deck.type} : deck.type}
</span> </span>
<h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate"> <h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
+169 -36
View File
@@ -4,17 +4,29 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa' 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 }) { export default function JokerCardEditor({ card, onChange }) {
const [cardData, setCardData] = useState({ const [cardData, setCardData] = useState({
type: 'joker', type: 'JOKER',
text: '' text: '',
consequence: { type: 0, value: 1 },
wrongConsequence: { type: 1, value: 1 }
}) })
useEffect(() => { useEffect(() => {
if (card) { if (card) {
setCardData({ setCardData({
type: 'joker', type: 'JOKER',
text: card.text || '' text: card.text || '',
consequence: card.consequence || { type: 0, value: 1 },
wrongConsequence: card.wrongConsequence || { type: 1, value: 1 }
}) })
} }
}, [card]) }, [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 // Példa joker kártyák
const exampleCards = [ const exampleCards = [
"Felelsz vagy mersz? (Az előző játékos kérdez)", "Felelsz vagy mersz? (Az előző játékos kérdez)",
@@ -57,18 +99,10 @@ export default function JokerCardEditor({ card, onChange }) {
} }
return ( 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"> <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
{/* Header */} <div className="bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/30 rounded-lg p-4">
<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"> <div className="flex items-start gap-3">
<FaInfoCircle className="text-[color:var(--color-fun)] mt-1 flex-shrink-0" /> <FaInfoCircle className="text-[color:var(--color-fun)] mt-1 flex-shrink-0" />
<div> <div>
@@ -86,28 +120,33 @@ export default function JokerCardEditor({ card, onChange }) {
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Card text input */} {/* Kártya szövege */}
<div className="space-y-4"> <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<div> <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
<label className="block text-[color:var(--color-text)] font-medium mb-2"> <FaTheaterMasks className="text-[color:var(--color-fun)]" />
Joker kártya feladat * Kártya szövege
</label> </h3>
<textarea
value={cardData.text} <div>
onChange={handleTextChange} <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)" Joker kártya feladat *
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" </label>
maxLength={150} <textarea
/> value={cardData.text}
<div className="flex justify-between items-center mt-2"> onChange={handleTextChange}
<span className="text-xs text-[color:var(--color-text-muted)]"> placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)"
Maximális hossz: 150 karakter 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"
</span> maxLength={150}
<span className="text-xs text-[color:var(--color-text-muted)]"> />
{cardData.text.length}/150 <div className="flex justify-between items-center mt-2">
</span> <span className="text-xs text-[color:var(--color-text-muted)]">
</div> Maximális hossz: 150 karakter
</span>
<span className="text-xs text-[color:var(--color-text-muted)]">
{cardData.text.length}/150
</span>
</div> </div>
</div> </div>
@@ -147,6 +186,100 @@ export default function JokerCardEditor({ card, onChange }) {
</div> </div>
)} )}
</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> </div>
) )
} }
SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
+105 -37
View File
@@ -4,17 +4,27 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { FaDice, FaInfoCircle } from 'react-icons/fa' import { FaDice, FaInfoCircle } from 'react-icons/fa'
const consequenceTypes = [
{ value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
{ value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
{ value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
{ value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
{ value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]
export default function LuckCardEditor({ card, onChange }) { export default function LuckCardEditor({ card, onChange }) {
const [cardData, setCardData] = useState({ const [cardData, setCardData] = useState({
type: 'luck', type: 'LUCK',
text: '' text: '',
consequence: { type: 0, value: 1 }
}) })
useEffect(() => { useEffect(() => {
if (card) { if (card) {
setCardData({ setCardData({
type: 'luck', type: 'LUCK',
text: card.text || '' text: card.text || '',
consequence: card.consequence || { type: 0, value: 1 }
}) })
} }
}, [card]) }, [card])
@@ -31,19 +41,26 @@ export default function LuckCardEditor({ card, onChange }) {
} }
} }
return ( const updateConsequence = (field, value) => {
<div className="max-w-4xl mx-auto"> const newCardData = {
<div className="bg-[color:var(--color-surface)] rounded-xl p-6"> ...cardData,
{/* Header */} consequence: {
<div className="flex items-center gap-3 mb-6"> ...cardData.consequence,
<FaDice className="text-2xl text-[color:var(--color-luck)]" /> [field]: value
<h3 className="text-xl font-bold text-[color:var(--color-text)]"> }
Szerencse Kártya Szerkesztő }
</h3> setCardData(newCardData)
</div>
{/* Info box */} if (onChange) {
<div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4 mb-6"> onChange(newCardData)
}
}
return (
<div className="space-y-6">
{/* Info box */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" /> <FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" />
<div> <div>
@@ -60,28 +77,32 @@ export default function LuckCardEditor({ card, onChange }) {
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Card text input */} {/* Kártya szövege */}
<div className="space-y-4"> <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<div> <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
<label className="block text-[color:var(--color-text)] font-medium mb-2"> <FaDice className="text-[color:var(--color-luck)]" />
Kártya szövege * Kártya szövege
</label> </h3>
<textarea <div>
value={cardData.text} <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
onChange={handleTextChange} Szerencse esemény leírása *
placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt" </label>
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" <textarea
maxLength={200} value={cardData.text}
/> onChange={handleTextChange}
<div className="flex justify-between items-center mt-2"> placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
<span className="text-xs text-[color:var(--color-text-muted)]"> className="w-full h-32 px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
Maximális hossz: 200 karakter maxLength={200}
</span> />
<span className="text-xs text-[color:var(--color-text-muted)]"> <div className="flex justify-between items-center mt-2">
{cardData.text.length}/200 <span className="text-xs text-[color:var(--color-text-muted)]">
</span> Maximális hossz: 200 karakter
</div> </span>
<span className="text-xs text-[color:var(--color-text-muted)]">
{cardData.text.length}/200
</span>
</div> </div>
</div> </div>
@@ -100,6 +121,53 @@ export default function LuckCardEditor({ card, onChange }) {
</div> </div>
)} )}
</div> </div>
{/* Következmények */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
🎯 Következmények
</h3>
<div className="space-y-4">
{/* Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={cardData.consequence?.type ?? 0}
onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (cardData.consequence?.type ?? 0))?.description}
</div>
</div>
{/* Consequence Value - csak ha előre/hátra lépés */}
{(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
min="1"
max="10"
value={cardData.consequence?.value ?? 1}
onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
/>
</div>
)}
</div>
</div>
</div> </div>
) )
} }
SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
+211 -71
View File
@@ -20,6 +20,14 @@ const timeLimits = [
{ value: 120, label: '2 perc' } { value: 120, label: '2 perc' }
] ]
const consequenceTypes = [
{ value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
{ value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
{ value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
{ value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
{ value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]
export default function TaskCardEditor({ card, onChange }) { export default function TaskCardEditor({ card, onChange }) {
const updateField = (field, value) => { const updateField = (field, value) => {
@@ -81,6 +89,26 @@ export default function TaskCardEditor({ card, onChange }) {
onChange({ acceptedAnswers: newAnswers }) onChange({ acceptedAnswers: newAnswers })
} }
const updateConsequence = (field, value) => {
const currentConsequence = card.consequence || { type: 0, value: 1 }
onChange({
consequence: {
...currentConsequence,
[field]: value
}
})
}
const updateWrongConsequence = (field, value) => {
const currentWrongConsequence = card.wrongConsequence || { type: 1, value: 1 }
onChange({
wrongConsequence: {
...currentWrongConsequence,
[field]: value
}
})
}
return ( return (
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
{/* Feladat típus választó */} {/* Feladat típus választó */}
@@ -374,37 +402,48 @@ export default function TaskCardEditor({ card, onChange }) {
</div> </div>
</div> </div>
{/* Beállítások */} {/* Beállítások - Később elérhető */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="relative">
<label className="flex items-center gap-2 text-sm"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4 opacity-50 pointer-events-none blur-[1px]">
<input <label className="flex items-center gap-2 text-sm">
type="checkbox" <input
checked={card.caseSensitive || false} type="checkbox"
onChange={(e) => updateField('caseSensitive', e.target.checked)} checked={false}
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]" disabled
/> className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
<span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span> />
</label> <span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
</label>
<label className="flex items-center gap-2 text-sm"> <label className="flex items-center gap-2 text-sm">
<input <input
type="checkbox" type="checkbox"
checked={card.exactMatch || false} checked={false}
onChange={(e) => updateField('exactMatch', e.target.checked)} disabled
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]" 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> <span className="text-[color:var(--color-text)]">Pontos egyezés</span>
</label> </label>
<label className="flex items-center gap-2 text-sm"> <label className="flex items-center gap-2 text-sm">
<input <input
type="checkbox" type="checkbox"
checked={card.partialAccepted || true} checked={false}
onChange={(e) => updateField('partialAccepted', e.target.checked)} disabled
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]" 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> <span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
</label> </label>
</div>
{/* Hamarosan elérhető felület */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
<span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
🚧 Hamarosan elérhető
</span>
</div>
</div>
</div> </div>
{/* Tipp */} {/* Tipp */}
@@ -423,76 +462,177 @@ export default function TaskCardEditor({ card, onChange }) {
</div> </div>
)} )}
{/* Közös beállítások */} {/* Közös beállítások - Később elérhető */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6"> <div className="bg-[color:var(--color-surface)] rounded-xl p-6 relative">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4"> <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
⚙️ Beállítások ⚙️ Beállítások
</h3> </h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="relative">
{/* Pontszám */} <div className="opacity-50 pointer-events-none blur-[1px]">
<div> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> {/* Pontszám */}
💰 Pontszám <div>
</label> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
<input 💰 Pontszám
type="number" </label>
value={card.points || 10} <input
onChange={(e) => updateField('points', parseInt(e.target.value) || 0)} type="number"
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" value={10}
min="0" disabled
max="1000" 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
disabled
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
>
<option>30 másodperc</option>
</select>
</div>
{/* Karakterlimit (csak szöveges válasznál) */}
{card.subType === 'text' && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📝 Karakterlimit
</label>
<input
type="number"
value={100}
disabled
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
min="10"
max="500"
/>
</div>
)}
</div>
{/* Magyarázat */}
<div className="mt-6">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
💡 Magyarázat (opcionális)
</label>
<textarea
disabled
className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
rows="3"
placeholder="Magyarázat a helyes válaszhoz..."
/>
</div>
</div> </div>
{/* Időlimit */} {/* Hamarosan elérhető felület */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
<span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
🚧 Hamarosan elérhető
</span>
</div>
</div>
</div>
</div>
{/* Következmények (helyes válasz esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
🎯 Következmények (helyes válasz esetén)
</h3>
<div className="space-y-4">
{/* Consequence Type */}
<div> <div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
⏱️ Időlimit Hatás típusa
</label> </label>
<select <select
value={card.timeLimit || 30} value={card.consequence?.type ?? 0}
onChange={(e) => updateField('timeLimit', parseInt(e.target.value))} 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" 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 => ( {consequenceTypes.map(type => (
<option key={time.value} value={time.value}> <option key={type.value} value={type.value}>
{time.label} {type.label}
</option> </option>
))} ))}
</select> </select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (card.consequence?.type ?? 0))?.description}
</div>
</div> </div>
{/* Karakterlimit (csak szöveges válasznál) */} {/* Consequence Value - csak ha előre/hátra lépés */}
{card.subType === 'text' && ( {(card.consequence?.type === 0 || card.consequence?.type === 1) && (
<div> <div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📝 Karakterlimit Mezők száma
</label> </label>
<input <input
type="number" type="number"
value={card.characterLimit || 100} value={card.consequence?.value ?? 1}
onChange={(e) => updateField('characterLimit', parseInt(e.target.value) || 0)} 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" 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" min="1"
max="500" max="10"
/> />
</div> </div>
)} )}
</div> </div>
</div>
{/* Magyarázat */} {/* Következmények (rossz válasz esetén) */}
<div className="mt-6"> <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
💡 Magyarázat (opcionális) ❌ Következmények (rossz válasz esetén)
</label> </h3>
<textarea
value={card.explanation || ''} <div className="space-y-4">
onChange={(e) => updateField('explanation', e.target.value)} {/* Wrong Consequence Type */}
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" <div>
rows="3" <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
placeholder="Magyarázat a helyes válaszhoz..." Hatás típusa
/> </label>
<select
value={card.wrongConsequence?.type ?? 1}
onChange={(e) => updateWrongConsequence('type', parseInt(e.target.value))}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (card.wrongConsequence?.type ?? 1))?.description}
</div>
</div>
{/* Wrong Consequence Value - csak ha előre/hátra lépés */}
{(card.wrongConsequence?.type === 0 || card.wrongConsequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
value={card.wrongConsequence?.value ?? 1}
onChange={(e) => updateWrongConsequence('value', parseInt(e.target.value) || 1)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div> </div>
</div> </div>
</div> </div>
SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default function DeckInfoPopUp({ deck, onClose }) {
const deckTypes = { const deckTypes = {
"Luck": { label: "Szerencse", color: "var(--color-luck)" }, "Luck": { label: "Szerencse", color: "var(--color-luck)" },
"Question": { label: "Kérdés", color: "var(--color-question)" }, "Question": { label: "Kérdés", color: "var(--color-question)" },
"Fun": { label: "Szórakozás", color: "var(--color-fun)" } "Fun": { label: "Joker", color: "var(--color-fun)" }
} }
const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" } const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
SerpentRace_Frontend/src/index.css
+1 -1
View File
@@ -31,7 +31,7 @@
/* Deck típus színek */ /* Deck típus színek */
--color-luck: #5fa985; /* zöld, mint a success */ --color-luck: #5fa985; /* zöld, mint a success */
--color-question: #4f7be6; /* új kék, illik az oldalhoz */ --color-question: #4f7be6; /* új kék, illik az oldalhoz */
--color-fun: #e15b64; /* piros, mint az error */ --color-fun: #FFD700; /* citromsárga a joker kártyákhoz */
/* Háttérszínek */ /* Háttérszínek */
--color-background: #181d23; --color-background: #181d23;
SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+71 -64
View File
@@ -8,7 +8,7 @@ import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
import CardsList from "../../components/DeckCreator/CardsList.jsx" import CardsList from "../../components/DeckCreator/CardsList.jsx"
import CardEditor from "../../components/DeckCreator/CardEditor.jsx" import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
import { createDeck } from '../../api/deckApi' import { createDeck } from '../../api/deckApi'
import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices" import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices"
export default function DeckCreator() { export default function DeckCreator() {
const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined) const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
@@ -17,8 +17,8 @@ export default function DeckCreator() {
// Deck alapadatok // Deck alapadatok
const [deck, setDeck] = useState({ const [deck, setDeck] = useState({
id: null, id: null,
name: "Új Deck", name: "Új Pakli",
type: "Question", // Question, Luck, Fun type: "QUESTION", // QUESTION, LUCK, JOKER - backend formátum
privacy: "private", // private, public privacy: "private", // private, public
description: "", description: "",
cards: [] cards: []
@@ -27,17 +27,17 @@ export default function DeckCreator() {
// UI állapotok // UI állapotok
const [selectedCard, setSelectedCard] = useState(null) const [selectedCard, setSelectedCard] = useState(null)
const [isCreatingCard, setIsCreatingCard] = useState(false) const [isCreatingCard, setIsCreatingCard] = useState(false)
const [newCardType, setNewCardType] = useState(null) // task, joker, luck const [newCardType, setNewCardType] = useState(null)
// Betöltés (később API-ból) // Betöltés API-ból
useEffect(() => { useEffect(() => {
if (deckId) { if (deckId) {
loadDeck(deckId) loadDeck(deckId)
} else { } else {
setDeck({ setDeck({
id: null, id: null,
name: "Új Deck", name: "Új Pakli",
type: "Question", type: "QUESTION",
privacy: "private", privacy: "private",
description: "", description: "",
cards: [] cards: []
@@ -45,55 +45,25 @@ export default function DeckCreator() {
} }
}, [deckId]) }, [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) => { const handleDeckUpdate = (updates) => {
setDeck(prev => ({ ...prev, ...updates })) setDeck(prev => ({ ...prev, ...updates }))
} }
const handleSaveDeck = async () => { const handleSaveDeck = async () => {
try { try {
console.log("Deck mentése:", deck) // Konvertálás: Frontend string -> Backend enum number
const typeMapping = {
'LUCK': 0,
'JOKER': 1,
'QUESTION': 2
}
const payload = { const payload = {
name: deck.name, name: deck.name,
type: (deck.type || 'Question').toString().toUpperCase(), type: typeMapping[deck.type] ?? 2, // Alapértelmezett: QUESTION
ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE', ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE',
description: deck.description || '', description: deck.description || '',
cards: deck.cards.map(c => ({ ...c, text: c.question || c.statement || c.text || '' })) cards: deck.cards
} }
const saved = await createDeck(payload) const saved = await createDeck(payload)
@@ -131,28 +101,64 @@ export default function DeckCreator() {
} }
const handleSaveCard = (cardData) => { const handleSaveCard = (cardData) => {
if (isCreatingCard) { try {
// Új kártya hozzáadása // Biztosítjuk az alapértelmezett consequence értékeket
const newCard = { const defaultConsequence = { type: 0, value: 1 }
const defaultWrongConsequence = { type: 1, value: 1 }
const updatedCard = {
...cardData, ...cardData,
id: Date.now(), // Temporary ID id: isCreatingCard ? Date.now() : cardData.id,
consequence: cardData.consequence || defaultConsequence,
// wrongConsequence csak QUESTION és JOKER típusoknál
...(cardData.type === 'QUESTION' || cardData.type === 'JOKER'
? { wrongConsequence: cardData.wrongConsequence || defaultWrongConsequence }
: {}
)
} }
setDeck(prev => ({
...prev, let wasInvalidCardDeleted = false
cards: [...prev.cards, newCard]
})) setDeck(prev => {
// Ellenőrizzük, vannak-e nem megfelelő típusú kártyák
const invalidCards = prev.cards.filter(card => card.type !== prev.type)
// Ha új kártyát mentünk megfelelő típussal és vannak nem megfelelők
if (isCreatingCard && cardData.type === prev.type && invalidCards.length > 0) {
wasInvalidCardDeleted = true
return {
...prev,
cards: [
...prev.cards.filter(card => card.type === prev.type),
updatedCard
]
}
}
// Alap mentési logika
return {
...prev,
cards: isCreatingCard
? [...prev.cards, updatedCard]
: prev.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
}
})
setSelectedCard(updatedCard)
setIsCreatingCard(false) setIsCreatingCard(false)
setNewCardType(null) setNewCardType(null)
setSelectedCard(newCard)
} else { // Csak egy értesítés
// Meglévő kártya frissítése if (wasInvalidCardDeleted) {
setDeck(prev => ({ const invalidCount = deck.cards.filter(card => card.type !== deck.type).length
...prev, notifyWarning(`Kártya mentve! ${invalidCount} db nem megfelelő típusú kártya törlésre került.`)
cards: prev.cards.map(card => } else {
card.id === cardData.id ? cardData : card notifySuccess('Kártya sikeresen mentve!')
) }
})) } catch (error) {
setSelectedCard(cardData) console.error('Kártya mentési hiba:', error)
notifyError('Hiba történt a kártya mentése során')
} }
} }
@@ -188,6 +194,7 @@ export default function DeckCreator() {
<CardsList <CardsList
cards={deck.cards} cards={deck.cards}
selectedCard={selectedCard} selectedCard={selectedCard}
deckType={deck.type}
onSelectCard={handleSelectCard} onSelectCard={handleSelectCard}
onCreateCard={handleCreateCard} onCreateCard={handleCreateCard}
onDeleteCard={handleDeleteCard} onDeleteCard={handleDeleteCard}
@@ -201,7 +208,7 @@ export default function DeckCreator() {
<CardEditor <CardEditor
card={selectedCard} card={selectedCard}
isCreating={isCreatingCard} isCreating={isCreatingCard}
cardType={newCardType} cardType={isCreatingCard ? newCardType : deck.type}
onSave={handleSaveCard} onSave={handleSaveCard}
onCancel={() => { onCancel={() => {
setIsCreatingCard(false) setIsCreatingCard(false)