diff --git a/src/App.tsx b/src/App.tsx index bb5ae14..ef46b44 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,6 @@ import { twMerge } from "tailwind-merge"; import { atom, PrimitiveAtom, useAtom, useAtomValue } from "jotai"; -import { - ChangeEvent, - FormEvent, - Fragment, - ReactNode, - useEffect, - useState, -} from "react"; +import { ChangeEvent, FormEvent, Fragment, useEffect, useState } from "react"; import { gameAtom, usePlayers, @@ -22,7 +15,7 @@ import { Provider, useSetAtom } from "jotai/react"; const store = createStore(); -function Root({ children }: { children: ReactNode }) { +function Root() { return ( @@ -62,6 +55,8 @@ const playersAtom = atom([atom(emptyPlayer())]); function PlayersForm() { const send = useSetAtom(gameAtom); const [playersAtoms, setPlayersAtoms] = useAtom(playersAtom); + const [attempts, setAttempts] = useState(5); + const [bestOf, setBestOf] = useState(3); function addPlayer() { setPlayersAtoms((players) => players.concat(atom(emptyPlayer()))); @@ -70,11 +65,42 @@ function PlayersForm() { function confirm(e: FormEvent) { e.preventDefault(); const players = playersAtoms.map((player) => store.get(player)); - send({ type: "start", players }); + send({ type: "start", players, attempts, bestOf }); + } + + function updateAttempts(e: ChangeEvent) { + setAttempts(e.target.valueAsNumber); + } + + function updateBestOf(e: ChangeEvent) { + setBestOf(e.target.valueAsNumber); } return (
+
+ + +
+ +
+ {playersAtoms.map((playerAtom) => ( ))} diff --git a/src/state/game.ts b/src/state/game.ts index 242bf7b..4300032 100644 --- a/src/state/game.ts +++ b/src/state/game.ts @@ -34,34 +34,6 @@ export type Game = { activeRound: number; }; -const player1: Player = { - id: getId(), - name: "Igor", - percentage: 70, - controlled: true, -}; - -const player2: Player = { - id: getId(), - name: "Vinicius", - percentage: 60, - controlled: false, -}; - -const rounds: Round[] = [ - { - id: getId(), - name: "Round #1", - order: [player2.id, player1.id], - attempts: { - [player1.id]: new Array(5).fill(null), - [player2.id]: new Array(5).fill(null), - }, - activePlayer: 0, - winner: null, - }, -]; - export const GAME: Game = { id: getId(), winner: null, @@ -79,6 +51,8 @@ type Action = | { type: "start"; players: Player[]; + attempts: number; + bestOf: number; }; function randomMake(percentage: number): boolean { @@ -146,6 +120,8 @@ export function gameReducer(state: Game, action: Action): Game { if (action.type === "start") { const next = produce(state, (game) => { game.players = action.players; + game.attempts = action.attempts; + game.bestOf = action.bestOf; createNextRound(game); });