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

telefonos nezet

Browse Source
This commit is contained in:
mategery
2025-11-18 15:37:29 +01:00
parent 22ea5c43f2
commit 4bcb93d357
14 changed files with 388 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+18 -31
View File
@@ -189,20 +189,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
// 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 null
}
return (
@@ -231,22 +218,22 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
)}
{/* 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="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-4 sm:px-6 py-3 sm:py-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div className="flex items-center gap-3">
<div className="text-2xl">
<div className="text-xl sm:text-2xl">
{cardData.type === 'QUESTION' && '📋'}
{cardData.type === 'JOKER' && '🃏'}
{cardData.type === 'LUCK' && '🎲'}
</div>
<div>
<h2 className="text-xl font-bold text-[color:var(--color-text)]">
<h2 className="text-lg sm:text-xl font-bold text-[color:var(--color-text)]">
{isCreating ? 'Új' : 'Szerkesztés'} {' '}
{(isCreating ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'}
{(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'}
{(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'}
</h2>
<div className="text-[color:var(--color-text-muted)] text-sm">
<div className="text-[color:var(--color-text-muted)] text-xs sm:text-sm">
{cardData.type === 'QUESTION' && cardData.subType && (
<>
{cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
@@ -259,19 +246,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 sm:gap-3 flex-wrap w-full sm:w-auto">
<button
onClick={() => setShowPreview(!showPreview)}
className={`
flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200
flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl font-medium transition-all duration-200 text-sm
${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
<FaEye className="text-sm" />
<span className="hidden sm:inline">Előnézet</span>
</button>
<button
@@ -279,17 +266,17 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
notifyWarning('Kártya készítés megszakítva')
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"
className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200 text-sm"
>
<FaTimes />
Mégse
<FaTimes className="text-sm" />
<span className="hidden sm:inline">Mégse</span>
</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"
className="flex items-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm: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 text-sm"
>
<FaSave />
<FaSave className="text-sm" />
Mentés
</button>
</div>
@@ -297,13 +284,13 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div>
{/* Content */}
<div className="flex-1 overflow-hidden">
<div className="flex-1 overflow-y-auto">
{showPreview ? (
<div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
<div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-4 sm:p-6">
<CardPreview card={cardData} />
</div>
) : (
<div className="h-full overflow-y-auto p-6">
<div className="p-4 sm:p-6">
{cardData.type === 'QUESTION' && (
<TaskCardEditor
card={cardData}