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:
parent
b7b1cd383f
commit
bc7977463e
4 changed files with 209 additions and 26 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue