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

Refactor: DeckCreator komponensek típus kezelésének egységesítése

Browse Source 
- Frissítve a DeckHeader típusai a backend formátumra (QUESTION, LUCK, JOKER)
- Frissítve a CardsList és Editor komponensek típus kezelése
- Egyszerűsítve a kártya létrehozás és mentés logika
- Az új kártya gomb mindig a pakli típusának megfelelő kártyát hozza létre
This commit is contained in:
GitG0r0
2025-10-22 21:23:16 +02:00
parent 00b13de70c
commit ec001fb39f
6 changed files with 76 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
+26 -47
View File
@@ -5,9 +5,9 @@ import React from "react"
import { FaPlus, FaEdit, FaTrash, FaQuestionCircle, FaCheck, FaTimes, FaDice, FaTheaterMasks } from "react-icons/fa"
const cardTypeIcons = {
task: { icon: FaQuestionCircle, color: "var(--color-question)" },
joker: { icon: FaTheaterMasks, color: "var(--color-fun)" },
luck: { icon: FaDice, color: "var(--color-luck)" }
QUESTION: { icon: FaQuestionCircle, color: "var(--color-question)" },
JOKER: { icon: FaTheaterMasks, color: "var(--color-fun)" },
LUCK: { icon: FaDice, color: "var(--color-luck)" }
}
const cardSubTypeLabels = {
@@ -19,7 +19,8 @@ const cardSubTypeLabels = {
export default function CardsList({
cards,
selectedCard,
selectedCard,
deckType,
onSelectCard,
onCreateCard,
onDeleteCard,
@@ -28,29 +29,29 @@ export default function CardsList({
}) {
const getCardPreview = (card) => {
if (card.type === 'task') {
if (card.type === 'QUESTION') {
return card.question || card.statement || 'Új feladat kártya'
}
if (card.type === 'joker') {
if (card.type === 'JOKER') {
return card.text || 'Új joker kártya'
}
if (card.type === 'luck') {
if (card.type === 'LUCK') {
return card.text || 'Új szerencse kártya'
}
return 'Ismeretlen kártya'
}
const getCardTypeLabel = (card) => {
if (card.type === 'task') {
if (card.type === 'QUESTION') {
if (card.subType) {
return cardSubTypeLabels[card.subType] || 'Feladat'
}
return 'Feladat'
}
if (card.type === 'joker') {
if (card.type === 'JOKER') {
return 'Joker'
}
if (card.type === 'luck') {
if (card.type === 'LUCK') {
return 'Szerencse'
}
return 'Ismeretlen'
@@ -64,40 +65,18 @@ export default function CardsList({
🃏 Kártyák
</h2>
{/* New Card Dropdown */}
<div className="relative group">
<button className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg">
<FaPlus />
Új kártya
</button>
{/* Dropdown Menu */}
<div className="absolute top-full left-0 right-0 mt-2 bg-[color:var(--color-card)] rounded-xl shadow-lg border border-[color:var(--color-surface-selected)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
<button
onClick={() => onCreateCard('task')}
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-t-xl"
>
<FaQuestionCircle className="text-[color:var(--color-question)]" />
📋 Feladat kártya
</button>
<button
onClick={() => onCreateCard('joker')}
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200"
>
<FaTheaterMasks className="text-[color:var(--color-fun)]" />
🃏 Joker kártya
</button>
<button
onClick={() => onCreateCard('luck')}
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-b-xl"
>
<FaDice className="text-[color:var(--color-luck)]" />
🎲 Szerencse kártya
</button>
</div>
</div>
{/* New Card Button */}
<button
onClick={() => onCreateCard(deckType)}
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
>
<FaPlus />
<span>
{deckType === 'QUESTION' && '📋 Új feladat kártya'}
{deckType === 'JOKER' && '🃏 Új joker kártya'}
{deckType === 'LUCK' && '🎲 Új szerencse kártya'}
</span>
</button>
</div>
{/* Cards List */}
@@ -218,9 +197,9 @@ export default function CardsList({
{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>
<span>📋 {cards.filter(c => c.type === 'QUESTION').length}</span>
<span>🃏 {cards.filter(c => c.type === 'JOKER').length}</span>
<span>🎲 {cards.filter(c => c.type === 'LUCK').length}</span>
</div>
)}
</div>