interface/index.ts

@@ -14,7 +14,6 @@ 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

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

web/src/App.tsx

@@ -3,11 +3,7 @@ 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 {
-  attachHandlerToStartRoundEvent,
-  attachHandlerToUpdateLobbyEvent,
-  PieceId,
-} from "interface";
+import { attachHandlerToUpdateLobbyEvent } from "interface";
 
 export interface AppProps {
   socket: Socket;
@@ -17,9 +13,8 @@ const App = (props: AppProps) => {
   const { socket } = props;
   const [renderedPage, setRenderedPage] = useState("LANDING");
 
-  const [initialPlayerNames, setInitialPlayerNames] = useState([] as string[]);
+  const [initialPlayerNames, setInitialPlayerNames] = useState([""]);
   const [gameCode, setGameCode] = useState("");
-  const [initialPieceIds, setInitialPieceIds] = useState([] as PieceId[]);
 
   const setupNextPageTransition = useCallback(() => {
     if (renderedPage === "LANDING") {
@@ -28,11 +23,6 @@ const App = (props: AppProps) => {
         setGameCode(event.gameCode);
         setRenderedPage("LOBBY");
       });
-    } else if (renderedPage === "LOBBY") {
-      attachHandlerToStartRoundEvent(socket, (event) => {
-        setInitialPieceIds(event.pieceIds);
-        setRenderedPage("GAME");
-      });
     }
   }, [renderedPage]);
 
@@ -47,9 +37,7 @@ const App = (props: AppProps) => {
           gameCode={gameCode}
         />
       )}
-      {renderedPage === "GAME" && (
-        <GamePage initialPieceIds={initialPieceIds} />
-      )}
+      {renderedPage === "GAME" && <GamePage />}
     </div>
   );
 };

web/src/pages/game/GamePage.tsx

@@ -6,19 +6,16 @@ import { buildBoard, PieceId } from "interface";
 import { DieViewProps } from "./types/DieViewProps";
 import { PlacePieceActionStack } from "./types/PlacePieceActionStack";
 
-export interface GamePageProps {
-  initialPieceIds: PieceId[];
-}
+const GamePage = () => {
+  const getRandomPieceId = () => {
+    const randomId = Math.floor(Math.random() * Object.keys(PieceId).length);
+    return Object.values(PieceId)[randomId];
+  };
 
-const GamePage = (props: GamePageProps) => {
-  const { initialPieceIds } = props;
-
-  const [pieceIds] = useState(initialPieceIds);
-
-  const getDiceSet: () => DieViewProps[] = () =>
-    pieceIds.map((pieceId) => {
+  const getRandomDiceSet: () => DieViewProps[] = () =>
+    [1, 2, 3, 4].map(() => {
       return {
-        pieceId: pieceId,
+        pieceId: getRandomPieceId(),
         isSelected: false,
         isDisabled: false,
         isSpecial: false,
@@ -26,7 +23,7 @@ const GamePage = (props: GamePageProps) => {
       };
     });
 
-  const [dice, setDice] = useState(getDiceSet());
+  const [dice, setDice] = useState(getRandomDiceSet());
   const [specialDice, setSpecialDice] = useState(
     [
       PieceId.P03,
@@ -99,7 +96,7 @@ const GamePage = (props: GamePageProps) => {
   const commitBoard = () => {
     if (dice.some((die) => !die.isDisabled)) return;
     placePieceActionStack.commitActions();
-    setDice(getDiceSet());
+    setDice(getRandomDiceSet());
     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, ClientEvent } from "interface";
+import { attachHandlerToUpdateLobbyEvent } from "interface";
 
 export interface LobbyPageProps {
   initialPlayerNames: string[];
@@ -16,7 +16,6 @@ const LobbyPage = (props: LobbyPageProps) => {
   attachHandlerToUpdateLobbyEvent(socket, (event) => {
     setPlayerNames(event.playerNames);
   });
-  const startGame = () => socket.emit(ClientEvent.START_GAME);
 
   return (
     <div className="lobby-page">
@@ -28,7 +27,7 @@ const LobbyPage = (props: LobbyPageProps) => {
           <article className="lobby-user-name">{name}</article>
         ))}
         <div className="start-game-button">
-          <button onClick={startGame}>Start Game</button>
+          <button>Start Game</button>
         </div>
         <article className="game-code">Game code: {gameCode}</article>
       </div>