Use server response to consume dice as defined by the backend

interface/server-events/StartRoundEvent.ts

@@ -1,4 +1,5 @@
-import { Socket } from "socket.io-client";
+import { Socket as ServerSocket } from "socket.io";
+import { Socket as ClientSocket } from "socket.io-client";
 import { ServerEvent } from "./ServerEvent";
 import { PieceId } from "../constants/Pieces";
 
@@ -6,8 +7,15 @@ export type StartRoundEvent = {
   pieceIds: PieceId[];
 };
 
+export const emitStartRoundEvent = (
+  socket: ServerSocket,
+  payload: StartRoundEvent,
+) => {
+  socket.emit(ServerEvent.START_ROUND, payload);
+};
+
 export function attachHandlerToStartRoundEvent(
-  socket: Socket,
+  socket: ClientSocket,
   handler: (event: StartRoundEvent) => void,
 ): void {
   socket.once(ServerEvent.START_ROUND, handler);

interface/server-events/UpdateLobbyEvent.ts

@@ -1,4 +1,5 @@
-import { Socket } from "socket.io-client";
+import { Socket as ServerSocket } from "socket.io";
+import { Socket as ClientSocket } from "socket.io-client";
 import { ServerEvent } from "./ServerEvent";
 
 export type UpdateLobbyEvent = {
@@ -6,8 +7,15 @@ export type UpdateLobbyEvent = {
   gameCode: string;
 };
 
+export const emitUpdateLobbyEvent = (
+  socket: ServerSocket,
+  payload: UpdateLobbyEvent,
+) => {
+  socket.emit(ServerEvent.LOBBY_UPDATE, payload);
+};
+
 export function attachHandlerToUpdateLobbyEvent(
-  socket: Socket,
+  socket: ClientSocket,
   handler: (event: UpdateLobbyEvent) => void,
 ): void {
   socket.once(ServerEvent.LOBBY_UPDATE, handler);

web/src/App.tsx

@@ -7,6 +7,7 @@ import LobbyPage from "./pages/lobby/LobbyPage";
 import {
   attachHandlerToStartRoundEvent,
   attachHandlerToUpdateLobbyEvent,
+  PieceId,
 } from "interface";
 
 export interface AppProps {
@@ -17,8 +18,9 @@ const App = (props: AppProps) => {
   const { socket } = props;
   const [renderedPage, setRenderedPage] = useState("LANDING");
 
-  const [initialPlayerNames, setInitialPlayerNames] = useState([""]);
+  const [initialPlayerNames, setInitialPlayerNames] = useState([] as string[]);
   const [gameCode, setGameCode] = useState("");
+  const [initialPieceIds, setInitialPieceIds] = useState([] as PieceId[]);
 
   const setupNextPageTransition = useCallback(() => {
     if (renderedPage === "LANDING") {
@@ -29,6 +31,7 @@ const App = (props: AppProps) => {
       });
     } else if (renderedPage === "LOBBY") {
       attachHandlerToStartRoundEvent(socket, (event) => {
+        setInitialPieceIds(event.pieceIds);
         setRenderedPage("GAME");
       });
     }
@@ -45,7 +48,9 @@ const App = (props: AppProps) => {
           gameCode={gameCode}
         />
       )}
-      {renderedPage === "GAME" && <GamePage />}
+      {renderedPage === "GAME" && (
+        <GamePage initialPieceIds={initialPieceIds} />
+      )}
     </div>
   );
 };

web/src/pages/game/GamePage.tsx

@@ -6,16 +6,19 @@ import { buildBoard, PieceId } from "interface";
 import { DieViewProps } from "./types/DieViewProps";
 import { PlacePieceActionStack } from "./types/PlacePieceActionStack";
 
-const GamePage = () => {
-  const getRandomPieceId = () => {
-    const randomId = Math.floor(Math.random() * Object.keys(PieceId).length);
-    return Object.values(PieceId)[randomId];
-  };
+export interface GamePageProps {
+  initialPieceIds: PieceId[];
+}
 
-  const getRandomDiceSet: () => DieViewProps[] = () =>
-    [1, 2, 3, 4].map(() => {
+const GamePage = (props: GamePageProps) => {
+  const { initialPieceIds } = props;
+
+  const [pieceIds] = useState(initialPieceIds);
+
+  const getDiceSet: () => DieViewProps[] = () =>
+    pieceIds.map((pieceId) => {
       return {
-        pieceId: getRandomPieceId(),
+        pieceId: pieceId,
         isSelected: false,
         isDisabled: false,
         isSpecial: false,
@@ -23,7 +26,7 @@ const GamePage = () => {
       };
     });
 
-  const [dice, setDice] = useState(getRandomDiceSet());
+  const [dice, setDice] = useState(getDiceSet());
   const [specialDice, setSpecialDice] = useState(
     [
       PieceId.P03,
@@ -96,7 +99,7 @@ const GamePage = () => {
   const commitBoard = () => {
     if (dice.some((die) => !die.isDisabled)) return;
     placePieceActionStack.commitActions();
-    setDice(getRandomDiceSet());
+    setDice(getDiceSet());
     setSpecialDieUsedInRound(false);
   };