feat(web): add game settings screen and submit confirmation

- Add GameSetup component with Duolingo-style button selectors for
  language pair, POS, difficulty, and rounds
- Language swap: selecting the same language for source and target
  automatically swaps them instead of allowing duplicates
- Add selection-before-submission flow: user clicks an option to
  highlight it, then confirms with a Submit button to prevent misclicks
- Add selected state to OptionButton (purple ring highlight)
- Play Again on score screen returns to settings instead of
  auto-restarting with the same configuration
- Remove hardcoded GAME_SETTINGS, game configuration is now user-driven
This commit is contained in:
lila 2026-04-11 21:18:35 +02:00
parent b7b1cd383f
commit bc7977463e
4 changed files with 209 additions and 26 deletions

View file

@ -1,6 +1,6 @@
type OptionButtonProps = {
text: string;
state: "idle" | "disabled" | "correct" | "wrong";
state: "idle" | "selected" | "disabled" | "correct" | "wrong";
onSelect: () => void;
};
@ -10,6 +10,8 @@ export const OptionButton = ({ text, state, onSelect }: OptionButtonProps) => {
const styles = {
idle: "bg-white text-purple-900 border-purple-200 hover:bg-purple-50 hover:border-purple-300 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2",
selected:
"bg-purple-100 text-purple-900 border-purple-400 ring-2 ring-purple-400",
disabled: "bg-gray-100 text-gray-400 border-gray-200 cursor-default",
correct: "bg-emerald-400 text-white border-emerald-600 scale-[1.02]",
wrong: "bg-pink-400 text-white border-pink-600",
@ -19,7 +21,9 @@ export const OptionButton = ({ text, state, onSelect }: OptionButtonProps) => {
<button
className={`${base} ${styles[state]}`}
onClick={onSelect}
disabled={state !== "idle"}
disabled={
state === "disabled" || state === "correct" || state === "wrong"
}
>
{text}
</button>