Use server response to consume dice as defined by the backend

interface/index.ts

@@ -14,6 +14,7 @@ export * from "./types/PlacedPiece";
 export * from "./BoardBuilder";
 export * from "./server-events/ServerError";
 export * from "./server-events/ServerEvent";
+export * from "./server-events/StartRoundEvent";
 export * from "./server-events/UpdateLobbyEvent";
 export * from "./client-events/ClientEvent";
 export * from "./client-events/CreateLobbyEvent";

interface/server-events/StartRoundEvent.ts

@@ -0,0 +1,22 @@
+import { Socket as ServerSocket } from "socket.io";
+import { Socket as ClientSocket } from "socket.io-client";
+import { ServerEvent } from "./ServerEvent";
+import { PieceId } from "../constants/Pieces";
+
+export type StartRoundEvent = {
+  pieceIds: PieceId[];
+};
+
+export const emitStartRoundEvent = (
+  socket: ServerSocket,
+  payload: StartRoundEvent,
+) => {
+  socket.emit(ServerEvent.START_ROUND, payload);
+};
+
+export function attachHandlerToStartRoundEvent(
+  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

@@ -3,7 +3,11 @@ import { Socket } from "socket.io-client";
 import LandingPage from "./pages/landing/LandingPage";
 import GamePage from "./pages/game/GamePage";
 import LobbyPage from "./pages/lobby/LobbyPage";
-import { attachHandlerToUpdateLobbyEvent } from "interface";
+import {
+  attachHandlerToStartRoundEvent,
+  attachHandlerToUpdateLobbyEvent,
+  PieceId,
+} from "interface";
 
 export interface AppProps {
   socket: Socket;
@@ -13,8 +17,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") {
@@ -23,6 +28,11 @@ const App = (props: AppProps) => {
         setGameCode(event.gameCode);
         setRenderedPage("LOBBY");
       });
+    } else if (renderedPage === "LOBBY") {
+      attachHandlerToStartRoundEvent(socket, (event) => {
+        setInitialPieceIds(event.pieceIds);
+        setRenderedPage("GAME");
+      });
     }
   }, [renderedPage]);
 
@@ -37,7 +47,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 = () => {
+export interface GamePageProps {
-  const getRandomPieceId = () => {
+  initialPieceIds: PieceId[];
-    const randomId = Math.floor(Math.random() * Object.keys(PieceId).length);
+}
-    return Object.values(PieceId)[randomId];
-  };
 
-  const getRandomDiceSet: () => DieViewProps[] = () =>
+const GamePage = (props: GamePageProps) => {
-    [1, 2, 3, 4].map(() => {
+  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);
   };
 

web/src/pages/lobby/LobbyPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import "./LobbyPage.scss";
 import { Socket } from "socket.io-client";
-import { attachHandlerToUpdateLobbyEvent } from "interface";
+import { attachHandlerToUpdateLobbyEvent, ClientEvent } from "interface";
 
 export interface LobbyPageProps {
   initialPlayerNames: string[];
@@ -16,6 +16,7 @@ const LobbyPage = (props: LobbyPageProps) => {
   attachHandlerToUpdateLobbyEvent(socket, (event) => {
     setPlayerNames(event.playerNames);
   });
+  const startGame = () => socket.emit(ClientEvent.START_GAME);
 
   return (
     <div className="lobby-page">
@@ -27,7 +28,7 @@ const LobbyPage = (props: LobbyPageProps) => {
           <article className="lobby-user-name">{name}</article>
         ))}
         <div className="start-game-button">
-          <button>Start Game</button>
+          <button onClick={startGame}>Start Game</button>
         </div>
         <article className="game-code">Game code: {gameCode}</article>
       </div>