fix(frontend): broadcast moves in use play hook

Author: Patai5

frontend/src/components/Play/Play.tsx

@@ -25,20 +25,20 @@ export default function Play() {
     const [gameStarted, setGameStarted] = React.useState(true);
 
     const chessBoardStateHandlers = useChessBoardState({ color, isEnabled: gameStarted });
-    const { handleClientMakeMove } = chessBoardStateHandlers;
+    const { handleClientMakeMove, setBroadcastMove } = chessBoardStateHandlers;
 
     const { id: gameId } = useParams();
 
     const playGameApi = usePlayApi({ gameId, clientUsername, setColor, setGameStarted, handleClientMakeMove });
     const { connectionState, players, highlightDrawButton, gameResult, broadcastMove, handleResign, handleOfferDraw } =
         playGameApi;
+    setBroadcastMove(broadcastMove);
 
     const chessProps = {
         color: color,
         players: players,
         gameStarted: gameStarted,
         gameResult: gameResult,
-        broadcastMove: broadcastMove,
         actions: {
             playActions: {
                 highlightDraw: highlightDrawButton,

frontend/src/components/shared/Chess/useChessBoardState/handleMovePiece.ts

@@ -12,7 +12,7 @@ export type MoveOptions = Omit<SelectPieceOptions, "piece"> & {
 
 export const handleMoveTo = (
     chessBoardState: ChessBoardState,
-    options: MoveOptions & { moveTo: Position },
+    options: MoveOptions & Required<Pick<MoveOptions, "broadcastMove">> & { moveTo: Position },
 ): ChessBoardState => {
     const { moveTo, chess } = options;
     const { selectedPiece } = chessBoardState;

frontend/src/components/shared/Chess/useChessBoardState/useChessBoardState.ts

@@ -22,6 +22,7 @@ export type ChessBoardStateHandlersProps = {
     chess: Chess;
     colorToPlay: Color;
     setColorToPlay: (color: Color) => void;
+    setBroadcastMove: (broadcastMove: ((move: MoveInfo) => void) | null) => void;
     handleClientMakeMove: (move: Move, promotionPiece: PromotionPieceType | null) => void;
     handleClientUndoMove: () => void;
     handleHoveringOver: (position: Position) => void;
@@ -40,6 +41,7 @@ export const useChessBoardState = (props: Props): ChessBoardStateHandlersProps =
     const { color, isEnabled } = props;
 
     const [colorToPlay, setColorToPlay] = React.useState<Color>(color);
+    const broadcastMove = React.useRef<((move: MoveInfo) => void) | null>(null);
     const chess = React.useRef(new Chess()).current;
 
     const [chessBoardState, setChessBoardState] = React.useState<ChessBoardState>({
@@ -56,7 +58,9 @@ export const useChessBoardState = (props: Props): ChessBoardStateHandlersProps =
     };
 
     const handleMovedTo = (moveTo: Position) => {
-        const options = { moveTo, chess, isEnabled, color, setColorToPlay };
+        if (!broadcastMove.current) throw new Error("broadcastMove function is required for broadcasting moves");
+
+        const options = { moveTo, chess, isEnabled, color, setColorToPlay, broadcastMove: broadcastMove.current };
         setChessBoardState((chessBoardState) => handleMoveTo(chessBoardState, options));
     };
 
@@ -95,11 +99,16 @@ export const useChessBoardState = (props: Props): ChessBoardStateHandlersProps =
         setColorToPlay(chess.board.colorToPlay);
     };
 
+    const setBroadcastMove = (newBroadcastMove: (move: MoveInfo) => void) => {
+        broadcastMove.current = newBroadcastMove;
+    };
+
     return {
         chessBoardState,
         chess,
         colorToPlay,
         setColorToPlay,
+        setBroadcastMove,
         handleClientMakeMove,
         handleClientUndoMove,
         handleMaybeGetPromotionPiece,

frontend/test/components/Play/Play.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import Play from "components/Play/Play";
 import { AppContext, AppContextType } from "hooks/appContext";
 import { expect, test, vi } from "vitest";
@@ -64,3 +64,19 @@ test("Should display chessboard after game is loaded", async () => {
 
     expect(screen.getByTestId("square-0-0", { exact: false })).toBeTruthy();
 });
+
+test("Should move pieces and broadcast moves", async () => {
+    await loadGame();
+
+    const squareE2 = screen.getByTestId("square-1-4", { exact: false });
+    const squareE4 = screen.getByTestId("square-3-4", { exact: false });
+
+    fireEvent.mouseDown(squareE2);
+    fireEvent.mouseMove(squareE4);
+    fireEvent.mouseUp(squareE4);
+
+    expect(squareE2.getAttribute("data-testid")).includes(`piece-empty`);
+    expect(squareE4.getAttribute("data-testid")).includes(`piece-Pawn`);
+
+    expect(MockWebSocket.messages).toContain(JSON.stringify({ type: "move", move: "e2e4" }));
+});

frontend/test/mockWebSocket.ts

@@ -27,6 +27,8 @@ export class MockWebSocket {
 
     static readyState = MockWebSocket.CONNECTING;
 
+    static messages: string[] = [];
+
     triggerOpen() {
         MockWebSocket.readyState = MockWebSocket.OPEN;
         MockWebSocket.singletonOnopen?.();
@@ -52,5 +54,7 @@ export class MockWebSocket {
         }, 10);
     }
 
-    send() {}
+    send(message: string) {
+        MockWebSocket.messages.push(message);
+    }
 }