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

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
Conversation 0 Commits 1 Files Changed 1
+26 -13
1 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b34442bf9a - Show all commits
SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
+26 -13
View File
@@ -150,22 +150,35 @@ export default function LuckCardEditor({ card, onChange }) {
</div> </div>
</div> </div>
{/* Consequence Value - csak kör kihagyás és extra kör */} {/* Consequence Value */}
{(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && ( {[0, 1, 2, 3].includes(cardData.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">
{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> </label>
<input
type="number" <div className="flex flex-wrap gap-2 mt-2">
min="1" {Array.from({ length: [0, 1].includes(cardData.consequence?.type) ? 10 : 5 }, (_, i) => i + 1).map(num => (
max="5" <button
value={cardData.consequence?.value ?? 1} key={num}
onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)} type="button"
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" onClick={() => updateConsequence('value', num)}
/> className={`
<div className="text-xs text-[color:var(--color-text-muted)] mt-1"> w-10 h-10 rounded-lg font-semibold transition-all duration-200
Érték: 1-5 között 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>
</div> </div>
)} )}