diff --git a/interface/server-events/StartRoundEvent.ts b/interface/server-events/StartRoundEvent.ts index 75179fc..7b870ec 100644 --- a/interface/server-events/StartRoundEvent.ts +++ b/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); diff --git a/interface/server-events/UpdateLobbyEvent.ts b/interface/server-events/UpdateLobbyEvent.ts index 2f0881d..9cbbb79 100644 --- a/interface/server-events/UpdateLobbyEvent.ts +++ b/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); diff --git a/web/src/App.tsx b/web/src/App.tsx index 101a8ea..2965565 100644 --- a/web/src/App.tsx +++ b/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" && } + {renderedPage === "GAME" && ( + + )} ); }; diff --git a/web/src/pages/game/GamePage.tsx b/web/src/pages/game/GamePage.tsx index 529308b..c66ee9e 100644 --- a/web/src/pages/game/GamePage.tsx +++ b/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); };