Skip to content

Commit

Permalink
feat: allow game setup
Browse files Browse the repository at this point in the history
  • Loading branch information
igor-ribeiro committed Aug 1, 2024
1 parent fc6ae34 commit c0a4372
Showing 2 changed files with 40 additions and 38 deletions.
46 changes: 36 additions & 10 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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} />
))}
32 changes: 4 additions & 28 deletions src/state/game.ts
Original file line number Diff line number Diff line change
@@ -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);
});

0 comments on commit c0a4372

Please sign in to comment.