feat(frontend): enhance luck card editor with button-based value selection #91

Merged
Donat merged 1 commits from cdjavitasok into main 2025-11-05 19:10:57 +01:00
Showing only changes of commit b34442bf9a - Show all commits
@@ -150,22 +150,35 @@ export default function LuckCardEditor({ card, onChange }) {
</div>
</div>
{/* Consequence Value - csak kör kihagyás és extra kör */}
{(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && (
{/* Consequence Value */}
{[0, 1, 2, 3].includes(cardData.consequence?.type) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
{cardData.consequence?.type === 2 ? 'Körök kihagyása' : 'Extra körök száma'}
{[0, 1].includes(cardData.consequence?.type) ? 'Lépések száma' : (cardData.consequence?.type === 2 ? 'Kihagyott körök' : 'Extra körök száma')}
</label>
<input
type="number"
min="1"
max="5"
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 className="text-xs text-[color:var(--color-text-muted)] mt-1">
Érték: 1-5 között
<div className="flex flex-wrap gap-2 mt-2">
{Array.from({ length: [0, 1].includes(cardData.consequence?.type) ? 10 : 5 }, (_, i) => i + 1).map(num => (
<button
key={num}
type="button"
onClick={() => updateConsequence('value', num)}
className={`
w-10 h-10 rounded-lg font-semibold transition-all duration-200
flex items-center justify-center
${(cardData.consequence?.value ?? 1) === num
? 'bg-[color:var(--color-luck)] text-white ring-2 ring-offset-2 ring-offset-[color:var(--color-surface)] ring-[color:var(--color-luck)]'
: 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
}
`}
>
{num}
</button>
))}
</div>
<div className="text-xs text-[color:var(--color-text-muted)] mt-3">
Érték: {[0, 1].includes(cardData.consequence?.type) ? '1-10' : '1-5'} között
</div>
</div>
)}