Feat/review page (#3)

Created review page

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": {

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<UserId, string[]>;
   round: number;
+  roundStep: number;
   phase: Phase;
   letter: string;
 };
@@ -50,7 +52,29 @@ const moves: Moves<B, PB> = {
     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<B, PB> = {
     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,

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",

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<B, PB>();
 // const useSelectorShallow = makeUseSelectorShallow<B, PB>();
@@ -26,6 +28,11 @@ const phaseNames: Record<Phase, MessageDescriptor> = {
   review: msg`Review`,
 };
 
+const phaseToComponent: Record<Phase, ElementType> = {
+  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 (
+    <div>
+      <div className="flex justify-center">{category}</div>
+      <div className="flex-1 flex flex-col justify-between p-2 vmd:p-3 space-y-3.5 overflow-y-auto">
+        <div>
+          {userIds.map((userId: UserId) => (
+            <ReviewPlayer key={userId} userId={userId} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
 
+function WriteContent() {
   const numCategories = useSelector((state) => state.board.categories.length);
+  return (
+    <div className="flex-1 flex flex-col justify-between p-2 vmd:p-3 space-y-3.5 overflow-y-auto">
+      {Array(numCategories)
+        .fill(null)
+        .map((_, index) => (
+          <AnswerInput key={index} index={index} />
+        ))}
+    </div>
+  );
+}
+
+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 (
+    <div className={classNames(!answer && "opacity-70")}>
+      <div>
+        <b>{username}</b>
+      </div>
+      <div>{answer}</div>
+    </div>
+  );
+}
+
+function Board() {
+  useFonts();
+  const phase = useSelector((state) => state.board.phase);
+  const Content = phaseToComponent[phase];
   return (
     <div className="flex flex-col items-center justify-center w-full h-full overflow-hidden">
       <div className="w-full max-w-96 h-full max-h-vmd bg-neutral-50 flex flex-col rounded">
         <Header />
-        <div className="flex-1 flex flex-col justify-between p-2 vmd:p-3 space-y-3.5 overflow-y-auto">
-          {Array(numCategories)
-            .fill(null)
-            .map((_, index) => (
-              <AnswerInput key={index} index={index} />
-            ))}
-        </div>
+        <Content />
       </div>
     </div>
   );