Game can only be started after at least 2 players have joined, moved dice below stats

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

@@ -1,8 +1,9 @@
 import React, {MouseEventHandler} from "react";
 import {State} from "../game/player";
-import {currentPlayerAtom, rollDiceButtonAtom, thisPlayerAtom} from "../utils/state";
+import {currentPlayerAtom, playersAtom, rollDiceButtonAtom, thisPlayerAtom} from "../utils/state";
 import {useAtomValue} from "jotai";
 import {Button} from "./Button";
+import rules from "../game/rules";
 
 interface GameButtonProps extends ComponentProps {
   onReadyClick?: MouseEventHandler,
@@ -17,9 +18,10 @@ const GameButton: Component<GameButtonProps> = (
 
   const currentPlayer = useAtomValue(currentPlayerAtom);
   const thisPlayer = useAtomValue(thisPlayerAtom);
+  const players = useAtomValue(playersAtom);
   const activeRollDiceButton = useAtomValue(rollDiceButtonAtom);
 
-  if (currentPlayer === undefined || currentPlayer.State === State.waitingForPlayers) {
+  if (players.length >= rules.minPlayers && (currentPlayer === undefined || currentPlayer.State === State.waitingForPlayers)) {
     return <Button onClick={onReadyClick}>Ready</Button>;
   }
   if (!thisPlayer?.isTurn()) { // TODO also show when waiting for other players

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

@@ -14,9 +14,9 @@ import GameButton from "./gameButton";
 const wsService = new WebSocketService(import.meta.env.VITE_API);
 
 // TODO bug, when taking player on last dice, the currentPlayer changes and the wrong character get to steal
+// TODO bug, first player can sometimes roll dice twice (maybe only on firefox)
 
-// TODO move stats above dice
+// TODO add debug menu on dev, for testing and cheating
-// TODO don't start game until at least 2 players have joined
 // TODO join game lobby
 // TODO sign up player page
 // TODO sign in page
@@ -90,13 +90,13 @@ export const GameComponent: Component<{ player: Player, map: GameMap }> = ({play
 
   return (
     <>
+      <div className={"flex justify-center"}>
+        {players?.map(p => <PlayerStats key={p.Name} player={p}/>)}
+      </div>
       <div className={"flex-center"}>
         <GameButton onReadyClick={sendReady} onRollDiceClick={rollDice}/>
       </div>
       <AllDice values={dice}/>
-      <div className={"flex justify-center"}>
-        {players?.map(p => <PlayerStats key={p.Name} player={p}/>)}
-      </div>
       <GameBoard className={"mx-auto my-2"} onMove={onCharacterMove} map={map}/>
     </>
   );

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

@@ -4,6 +4,7 @@ import {Colour} from "./colour";
 import {getDefaultStore} from "jotai";
 import {currentPlayerNameAtom, playersAtom} from "../utils/state";
 import Pellet from "./pellet";
+import rules from "./rules";
 
 export enum State {
   waitingForPlayers,
@@ -39,7 +40,7 @@ export default class Player {
   }
 
   public stealFrom(other: Player): void {
-    for (let i = 0; i < 2; i++) {
+    for (let i = 0; i < rules.maxStealPellets; i++) {
       const pellet = other.Box.Pellets.pop();
       if (pellet)
         this.Box.addPellet(pellet);

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

@@ -0,0 +1,7 @@
+const rules = {
+  minPlayers: 2,
+  maxPlayers: 4,
+  maxStealPellets: 2,
+}
+
+export default rules;