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);
};