Moved button to component and added a Waiting state for the button

pac-man-board-game/ClientApp/src/components/dice.tsx

@@ -1,21 +1,18 @@
 import React from "react";
-import {useSetAtom} from "jotai";
+import {useAtom} from "jotai";
 import {selectedDiceAtom} from "../utils/state";
 
 interface AllDiceProps extends ComponentProps {
   values?: number[],
-  onclick?: (dice: SelectedDice) => void,
-  selectedDiceIndex: number | undefined
 }
 
 export const AllDice: Component<AllDiceProps> = (
   {
     className,
     values,
-    selectedDiceIndex
   }) => {
 
-  const setSelectedDice = useSetAtom(selectedDiceAtom);
+  const [selectedDice, setSelectedDice] = useAtom(selectedDiceAtom);
 
   function handleClick(dice: SelectedDice): void {
     setSelectedDice(dice);
@@ -25,7 +22,7 @@ export const AllDice: Component<AllDiceProps> = (
     <div className={"flex gap-5 justify-center"}>
       {values?.map((value, index) =>
         <Dice key={index}
-              className={`${selectedDiceIndex === index ? "border-2 border-black" : ""} ${className}`}
+              className={`${selectedDice?.index === index ? "border-2 border-black" : ""} ${className}`}
               value={value}
               onClick={(value) => handleClick({index, value})}/>)}
     </div>

pac-man-board-game/ClientApp/src/components/gameBoard.tsx

@@ -100,7 +100,7 @@ const Board: Component<BoardProps> = (
                   possiblePath={possiblePositions.find(p => p.End.X === colIndex && p.End.Y === rowIndex)}
                   character={characters.find(c => c.isAt({X: colIndex, Y: rowIndex}))}
                   isSelected={selectedCharacter?.isAt({X: colIndex, Y: rowIndex})}
-                  showPath={hoveredPosition?.Path?.find(pos => pos.x === colIndex && pos.y === rowIndex) !== undefined}
+                  showPath={hoveredPosition?.Path?.find(pos => pos.X === colIndex && pos.Y === rowIndex) !== undefined}
                   handleMoveCharacter={handleMoveCharacter}
                   handleSelectCharacter={handleSelectCharacter}
                   handleStartShowPath={handleShowPath}

pac-man-board-game/ClientApp/src/components/gameButton.tsx

@@ -0,0 +1,28 @@
+import React, {MouseEventHandler} from "react";
+import {State} from "../game/player";
+import {currentPlayerAtom, thisPlayerAtom} from "../utils/state";
+import {useAtomValue} from "jotai";
+
+interface GameButtonProps extends ComponentProps {
+  onReadyClick?: MouseEventHandler,
+  onRollDiceClick?: MouseEventHandler
+}
+
+const GameButton: Component<GameButtonProps> = (
+  {
+    onReadyClick,
+    onRollDiceClick,
+  }) => {
+  const currentPlayer = useAtomValue(currentPlayerAtom);
+  const thisPlayer = useAtomValue(thisPlayerAtom);
+  
+  if (currentPlayer === undefined || currentPlayer.State === State.waitingForPlayers) {
+    return <button onClick={onReadyClick}>Ready</button>;
+  }
+  if (!thisPlayer?.isTurn()) {
+    return <button>Please wait</button>;
+  }
+  return <button onClick={onRollDiceClick}>Roll dice</button>;
+};
+
+export default GameButton;

pac-man-board-game/ClientApp/src/components/gameComponent.tsx

@@ -4,15 +4,16 @@ import {doAction, GameAction} from "../utils/actions";
 import GameBoard from "./gameBoard";
 import WebSocketService from "../websockets/WebSocketService";
 import {getCharacterSpawns, testMap} from "../game/map";
-import Player, {State} from "../game/player";
+import Player from "../game/player";
 import PlayerStats from "../components/playerStats";
 import {getDefaultStore, useAtom, useAtomValue} from "jotai";
 import {currentPlayerAtom, diceAtom, ghostsAtom, playersAtom, selectedDiceAtom} from "../utils/state";
 import {CharacterType} from "../game/character";
+import GameButton from "./gameButton";
 
 const wsService = new WebSocketService(import.meta.env.VITE_API);
 
-export const GameComponent: Component<{ player: Player }> = ({player}) => {
+export const GameComponent: Component<{ player: Player }> = ({player}) => { // TODO players not moving
   const players = useAtomValue(playersAtom);
 
   const dice = useAtomValue(diceAtom);
@@ -44,7 +45,6 @@ export const GameComponent: Component<{ player: Player }> = ({player}) => {
   }
 
   async function sendPlayer(): Promise<void> {
-    // TODO set spawn position and position
     wsService.send({
       Action: GameAction.playerInfo,
       Data: {
@@ -71,13 +71,9 @@ export const GameComponent: Component<{ player: Player }> = ({player}) => {
   return (
     <>
       <div className={"flex-center"}>
-        {
-          currentPlayer === undefined || currentPlayer.State === State.waitingForPlayers ?
-            <button onClick={sendReady}>Ready</button> :
-            <button onClick={startGameLoop}>Roll dice</button>
-        }
+        <GameButton onReadyClick={sendReady} onRollDiceClick={startGameLoop}/>
       </div>
-      <AllDice values={dice} selectedDiceIndex={selectedDice?.index}/>
+      <AllDice values={dice}/>
       {players?.map(p => <PlayerStats key={p.Name} player={p} isCurrentPlayer={currentPlayer?.Name === p.Name}/>)}
       <GameBoard className={"mx-auto my-2"} onMove={onCharacterMove} map={testMap}/>
     </>

pac-man-board-game/ClientApp/src/game/player.ts

@@ -1,6 +1,8 @@
 import {Character, CharacterType} from "./character";
 import Box from "./box";
 import {Colour} from "./colour";
+import {getDefaultStore} from "jotai";
+import {currentPlayerAtom} from "../utils/state";
 
 export enum State {
   waitingForPlayers,
@@ -26,6 +28,11 @@ export default class Player {
     this.State = props.State ?? State.waitingForPlayers;
   }
 
+  public isTurn(): boolean {
+    const store = getDefaultStore();
+    return store.get(currentPlayerAtom)?.Name === this.Name;
+  }
+
   public stealFrom(other: Player): void {
     for (let i = 0; i < 2; i++) {
       const pellet = other.Box.Pellets.pop();

pac-man-board-game/Services/GameGroup.cs

@@ -47,7 +47,7 @@ public class GameGroup : IEnumerable<IPlayer>
 
     public IEnumerable<IPlayer> SetReady(IPlayer player)
     {
-        if (!Players.Contains(player))
+        if (!Players.Contains(player)) // TODO throws exception after game has started and refresh
             throw new PlayerNotFoundException("The player was not found in the game group.");
         player.State = State.Ready;
         return Players;