diff --git a/src/components/PairCards.css b/src/components/PairCards.css index 265f636..66593de 100644 --- a/src/components/PairCards.css +++ b/src/components/PairCards.css @@ -337,8 +337,9 @@ border-color: #C8956A; } .pair-option-btn:active:not(:disabled) { transform: scale(0.95); } -.pair-option-btn.correct { background: #3D7055; color: #fff; border-color: #3D7055; } -.pair-option-btn.wrong { background: #A84040; color: #fff; border-color: #A84040; } +.pair-option-btn.selected { background: #FFF0DC; border-color: #C4A85A; color: #5C3D22; } +.pair-option-btn.correct { background: #3D7055; color: #fff; border-color: #3D7055; } +.pair-option-btn.wrong { background: #A84040; color: #fff; border-color: #A84040; } .pair-option-btn:disabled { cursor: default; } /* ── Feedback ── */ diff --git a/src/components/PairWordCard.jsx b/src/components/PairWordCard.jsx index 67ef6f9..fb72510 100644 --- a/src/components/PairWordCard.jsx +++ b/src/components/PairWordCard.jsx @@ -84,7 +84,8 @@ function shuffle(arr) { } export default function PairWordCard({ card, onComplete }) { - const [picked, setPicked] = useState(null) + const [selected, setSelected] = useState(null) // chosen but not yet confirmed + const [picked, setPicked] = useState(null) // confirmed answer const [activeChip, setActiveChip] = useState(null) const lang = card.lang || 'de' @@ -111,12 +112,17 @@ export default function PairWordCard({ card, onComplete }) { setActiveChip(prev => prev?.id === id ? null : { id, ...entry }) } - function handlePick(opt) { + function handleSelect(opt) { if (picked) return + setSelected(prev => prev?.id === opt.id ? null : opt) + } + + function handleConfirm() { + if (!selected || picked) return setActiveChip(null) - setPicked(opt) - const r = opt.correct ? 'correct' : 'wrong' - if (opt.correct) triggerConfetti() + setPicked(selected) + const r = selected.correct ? 'correct' : 'wrong' + if (selected.correct) triggerConfetti() setTimeout(() => onComplete(r), 900) } @@ -159,9 +165,11 @@ export default function PairWordCard({ card, onComplete }) { if (picked) { if (opt.id === picked.id) cls += opt.correct ? ' correct' : ' wrong' else if (opt.correct) cls += ' correct' + } else if (selected?.id === opt.id) { + cls += ' selected' } return ( -
)} + + {!picked && ( +