feat(client): block UI until player connected and notify winner

Implement blocking of the UI board until both players are connected and notify the winner, blocking the board after the game is over.

* **JoinGame.tsx**
  - Add state to track if both players have joined.
  - Add effect to block the board until both players have joined.
  - Update `bothPlayersJoined` event handler to set the state.
  - Update `Board` component to disable tile clicks until both players have joined.

* **useJoinGame.ts**
  - Add state to track if the game is over.
  - Update `gameIsOver` event handler to set the state.
  - Add logic to block the board if the game is over.

GomokuClient/packages/gomoku-core/src/hooks/useJoinGame.ts

@@ -30,6 +30,7 @@ export const useJoinGame = (
   const [players, setPlayers] = useState<SwaggerTypes.PlayersDto>(
     gameHistory.players,
   );
+  const [gameOver, setGameOver] = useState(false);
 
   const router = useRouter();
 
@@ -79,6 +80,7 @@ export const useJoinGame = (
         gameIsOver: async (message) => {
           toaster.show(formatErrorMessage(message.result));
           setWinningSequence(message.winningSequence);
+          setGameOver(true);
         },
         gameHubError: async (error) => {
           toaster.show(formatErrorMessage(error.message), "error");
@@ -125,7 +127,7 @@ export const useJoinGame = (
       x: SignalClientMessages.MakeMoveClientMessage["x"],
       y: SignalClientMessages.MakeMoveClientMessage["y"],
     ) => {
-      if (!hubProxy || winner) return;
+      if (!hubProxy || winner || gameOver) return;
 
       const makeMoveMessage = {
         gameId: gameID,
@@ -140,7 +142,7 @@ export const useJoinGame = (
         toaster.show("Error making move", "error");
       }
     },
-    [hubProxy, winner, gameID],
+    [hubProxy, winner, gameOver, gameID],
   );
 
   return {

GomokuClient/packages/gomoku-core/src/pages/JoinGame.tsx

@@ -3,6 +3,7 @@ import { GamePlayersInfo } from "@gomoku/story";
 import { GameTime, GameTimeMobile, Board } from "@gomoku/story";
 import { Chat } from "@gomoku/story";
 import { useParams } from "@tanstack/react-router";
+import { useState, useEffect } from "react";
 
 import type { SwaggerTypes } from "@gomoku/api";
 import type { GameTimeProps } from "@gomoku/story";
@@ -21,6 +22,8 @@ const JoinGame = ({ gameHistory }: JoinGameProps) => {
   const { jwtDecodedInfo } = useAuthToken();
   const isMobile = useMobileDesign(1488);
 
+  const [bothPlayersJoined, setBothPlayersJoined] = useState(false);
+
   const {
     hubProxy,
     tiles,
@@ -41,6 +44,12 @@ const JoinGame = ({ gameHistory }: JoinGameProps) => {
     jwtDecodedInfo?.username,
   );
 
+  useEffect(() => {
+    if (players.black && players.white) {
+      setBothPlayersJoined(true);
+    }
+  }, [players]);
+
   const commonGameTimeProps: Omit<
     GameTimeProps,
     "players" | "blackTimeLeft" | "whiteTimeLeft" | "clock"
@@ -168,7 +177,7 @@ const JoinGame = ({ gameHistory }: JoinGameProps) => {
               tiles={tiles}
               lastTile={lastTile}
               size={gameHistory.boardSize || 19}
-              onTileClick={handleMove}
+              onTileClick={bothPlayersJoined ? handleMove : undefined}
               style={{
                 order: isMobile ? 1 : "unset",
               }}