Fix: Kártya típus kezelés javítása és joker kártyák megjelenítése
- Hozzáadva react-toastify a notifyWarning használatához - Javítva a CardEditor fejléc hogy helyesen jelenítse meg az új kártya típusát - Javítva a CardsList 'szerkesztés folyamatban' rész hogy QUESTION/JOKER/LUCK értékeket használjon - Implementálva az automatikus nem megfelelő típusú kártyák törlése új kártya mentésekor - Hozzáadva hibakezelés a kártya mentési logikához - Joker típus címke változtatva 'Szórakozás'-ról 'Joker'-re - Joker kártya szín változtatva citromsárgára (#FFD700) - Docker watch mode volume konfiguráció javítása a hot reload-hoz
This commit is contained in:
GitG0r0
@@ -27,20 +27,12 @@ const cardSubTypeLabels = {
|
||||
text: "Szöveges válasz"
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
export default function CardsList({
|
||||
cards,
|
||||
selectedCard,
|
||||
deckType,
|
||||
onSelectCard,
|
||||
onCreateCard,
|
||||
=======
|
||||
export default function CardsList({
|
||||
cards,
|
||||
selectedCard,
|
||||
onSelectCard,
|
||||
onCreateCard,
|
||||
>>>>>>> main
|
||||
onDeleteCard,
|
||||
isCreatingCard,
|
||||
newCardType
|
||||
@@ -48,7 +40,6 @@ export default function CardsList({
|
||||
const [confirmingDelete, setConfirmingDelete] = useState(null)
|
||||
|
||||
const getCardPreview = (card) => {
|
||||
<<<<<<< HEAD
|
||||
if (card.type === 'QUESTION') {
|
||||
return card.question || card.statement || 'Új feladat kártya'
|
||||
}
|
||||
@@ -57,44 +48,22 @@ export default function CardsList({
|
||||
}
|
||||
if (card.type === 'LUCK') {
|
||||
return card.text || 'Új szerencse kártya'
|
||||
=======
|
||||
if (card.type === 'QUESTION') {
|
||||
return card.question || card.statement || 'Új feladat kártya'
|
||||
}
|
||||
if (card.type === 'JOKER') {
|
||||
return card.text || 'Új joker kártya'
|
||||
}
|
||||
if (card.type === 'LUCK') {
|
||||
return card.text || 'Új szerencse kártya'
|
||||
>>>>>>> main
|
||||
}
|
||||
return "Ismeretlen kártya"
|
||||
}
|
||||
|
||||
const getCardTypeLabel = (card) => {
|
||||
<<<<<<< HEAD
|
||||
if (card.type === 'QUESTION') {
|
||||
=======
|
||||
if (card.type === "task") {
|
||||
>>>>>>> main
|
||||
if (card.subType) {
|
||||
return cardSubTypeLabels[card.subType] || "Feladat"
|
||||
}
|
||||
return "Feladat"
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
if (card.type === 'JOKER') {
|
||||
return 'Joker'
|
||||
}
|
||||
if (card.type === 'LUCK') {
|
||||
return 'Szerencse'
|
||||
=======
|
||||
if (card.type === "joker") {
|
||||
return "Joker"
|
||||
}
|
||||
if (card.type === "luck") {
|
||||
return "Szerencse"
|
||||
>>>>>>> main
|
||||
}
|
||||
return "Ismeretlen"
|
||||
}
|
||||
@@ -119,11 +88,14 @@ export default function CardsList({
|
||||
🃏 Kártyák
|
||||
</h2>
|
||||
|
||||
<<<<<<< HEAD
|
||||
{/* 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"
|
||||
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 ${
|
||||
deckType === 'QUESTION' ? 'bg-[color:var(--color-question)] hover:bg-[color:var(--color-question)]/80' :
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<FaPlus />
|
||||
<span>
|
||||
@@ -132,42 +104,6 @@ export default function CardsList({
|
||||
{deckType === 'LUCK' && '🎲 Új szerencse kártya'}
|
||||
</span>
|
||||
</button>
|
||||
=======
|
||||
{/* 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>
|
||||
>>>>>>> main
|
||||
</div>
|
||||
|
||||
{/* Cards List */}
|
||||
@@ -185,7 +121,7 @@ export default function CardsList({
|
||||
)}
|
||||
<div>
|
||||
<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 className="text-[color:var(--color-text-muted)] text-sm">
|
||||
Szerkesztés folyamatban...
|
||||
@@ -205,14 +141,24 @@ export default function CardsList({
|
||||
key={card.id}
|
||||
onClick={() => onSelectCard(card)}
|
||||
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
|
||||
? "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"
|
||||
}
|
||||
${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 */}
|
||||
<div className="flex items-start justify-between gap-2 mb-3">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
@@ -320,15 +266,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)]">
|
||||
<<<<<<< HEAD
|
||||
<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>
|
||||
=======
|
||||
<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>
|
||||
>>>>>>> main
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user