diff --git a/game/package.json b/game/package.json index 683edef..23e8880 100644 --- a/game/package.json +++ b/game/package.json @@ -8,7 +8,7 @@ "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { - "build": "rm -rf ./dist && pnpm rollup --config", + "build": "pnpm rollup --config", "watch": "pnpm rollup --config --watch" }, "devDependencies": { diff --git a/game/src/index.ts b/game/src/index.ts index 66033ac..5c1a64d 100644 --- a/game/src/index.ts +++ b/game/src/index.ts @@ -26,9 +26,11 @@ export type Phase = "write" | "review"; export type B = { categories: string[]; - + userIds: UserId[]; // Info of the current round. + answers: Record; round: number; + roundStep: number; phase: Phase; letter: string; }; @@ -50,7 +52,29 @@ const moves: Moves = { executeNow({ board, playerboard, payload }) { const { answer, index } = payload as WritePayload; const { round } = board; - playerboard.answers[round][index] = answer; + const answerRound = playerboard.answers[round]; + if (answerRound) { + answerRound[index] = answer; + } + }, + execute({ board, playerboards, userId }) { + const playerboard = playerboards[userId]; + const { round } = board; + + const answerRound = playerboard.answers[round]; + //Go to review phase when any player has entered 10 answers + if (answerRound.every((a) => a.length > 0)) { + board.phase = "review" as const; + } else { + return; + } + + board.answers = {}; + + for (const [userId, playerboard] of Object.entries(playerboards)) { + const playerAnswers = playerboard.answers[board.round]; + board.answers[userId] = playerAnswers; + } }, }, }; @@ -60,6 +84,9 @@ const game: GameDef = { const board = { categories: CATEGORIES, round: 0, + roundStep: 0, + userIds: players, + answers: {}, // TODO No letter to start with, then a count them and then only we pick the letter. letter: "A", phase: "write" as const, diff --git a/ui/package.json b/ui/package.json index 0cbfea3..aecdbb0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -8,7 +8,7 @@ "main": "dist/index.js", "types": "dist/types/index.d.ts", "scripts": { - "build": "rm -rf ./dist && pnpm rollup --config", + "build": "pnpm rollup --config", "watch": "pnpm rollup --config --watch", "dev": "pnpm vite --host", "lingui:compile": "pnpm lingui compile", diff --git a/ui/src/Board.tsx b/ui/src/Board.tsx index 7bd7baf..4caabda 100644 --- a/ui/src/Board.tsx +++ b/ui/src/Board.tsx @@ -4,11 +4,12 @@ import { makeUseSelector, // makeUseSelectorShallow, useDispatch, + useUsername, } from "@lefun/ui"; import classNames from "classnames"; -import { useState } from "react"; +import { ElementType, useState } from "react"; import { B, PB, write, Phase } from "categorio-game"; @@ -17,6 +18,7 @@ import { Trans, msg } from "@lingui/macro"; import { useLingui } from "@lingui/react"; import { useFonts } from "./useFonts"; +import { UserId } from "@lefun/core"; const useSelector = makeUseSelector(); // const useSelectorShallow = makeUseSelectorShallow(); @@ -26,6 +28,11 @@ const phaseNames: Record = { review: msg`Review`, }; +const phaseToComponent: Record = { + write: WriteContent, + review: ReviewContent, +}; + function Header() { const round = useSelector((state) => state.board.round); const phase = useSelector((state) => state.board.phase); @@ -109,22 +116,62 @@ function AnswerInput({ index }: { index: number }) { ); } -function Board() { - useFonts(); +function ReviewContent() { + const userIds = useSelector((state) => state.board.userIds); + const roundstep = useSelector((state) => state.board.roundStep); + const category = useSelector((state) => state.board.categories[roundstep]); + return ( +
+
{category}
+
+
+ {userIds.map((userId: UserId) => ( + + ))} +
+
+
+ ); +} +function WriteContent() { const numCategories = useSelector((state) => state.board.categories.length); + return ( +
+ {Array(numCategories) + .fill(null) + .map((_, index) => ( + + ))} +
+ ); +} + +function ReviewPlayer({ userId }: { userId: UserId }) { + const username = useUsername(userId); + const roundStep = useSelector((state) => state.board.roundStep); + const answers = useSelector((state) => state.board.answers[userId]); + const answer = answers[roundStep]; + return ( +
+
+ {username} +
+
{answer}
+
+ ); +} + +function Board() { + useFonts(); + const phase = useSelector((state) => state.board.phase); + const Content = phaseToComponent[phase]; return (
-
- {Array(numCategories) - .fill(null) - .map((_, index) => ( - - ))} -
+
);