feat: allow game setup

ribeirolabs · Aug 1, 2024 · c0a4372 · c0a4372
1 parent fc6ae34
commit c0a4372
Showing 2 changed files with 40 additions and 38 deletions.
diff --git 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 (
     <Provider store={store}>
       <App />
@@ -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<HTMLFormElement>) {
     e.preventDefault();
     const players = playersAtoms.map((player) => store.get(player));
-    send({ type: "start", players });
+    send({ type: "start", players, attempts, bestOf });
+  }
+
+  function updateAttempts(e: ChangeEvent<HTMLInputElement>) {
+    setAttempts(e.target.valueAsNumber);
+  }
+
+  function updateBestOf(e: ChangeEvent<HTMLInputElement>) {
+    setBestOf(e.target.valueAsNumber);
   }
 
   return (
     <form className="p-2 space-y-4" onSubmit={confirm}>
+      <div className="flex gap-4 rounded-xl">
+        <label className="flex-[2]">
+          <div className="font-bold">Attempts</div>
+          <input
+            type="number"
+            className="p-2 rounded"
+            value={Number.isNaN(attempts) ? "" : attempts}
+            onChange={updateAttempts}
+          />
+        </label>
+        <label className="flex-1">
+          <div className="font-bold">Best of</div>
+          <input
+            type="number"
+            className="p-2 rounded"
+            value={Number.isNaN(bestOf) ? "" : bestOf}
+            onChange={updateBestOf}
+          />
+        </label>
+      </div>
+
+      <div className="h-[1px] border-b" />
+
       {playersAtoms.map((playerAtom) => (
         <PlayerForm key={playerAtom.toString()} playerAtom={playerAtom} />
       ))}

diff --git 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);
     });