Dice can be selected

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

@@ -2,20 +2,56 @@ import React from "react";
 
 interface AllDiceProps extends ComponentProps {
   values?: number[],
+  onclick?: (dice: SelectedDice) => void,
+  selectedDiceIndex: number | undefined
 }
 
-export const AllDice: Component<AllDiceProps> = ({className, values}) => {
+export const AllDice: Component<AllDiceProps> = (
+  {
+    className,
+    values,
+    onclick,
+    selectedDiceIndex
+  }) => {
+
+  function handleClick(index: SelectedDice) {
+    if (onclick) {
+      onclick(index);
+    }
+  }
+
   return (
     <div className={"flex gap-5 justify-center"}>
-      {values?.map((value, index) => <Dice key={index} className={className} value={value}/>)}
+      {values?.map((value, index) =>
+        <Dice key={index}
+              className={`${selectedDiceIndex === index ? "border-2 border-black" : ""} ${className}`}
+              value={value}
+              onClick={(value) => handleClick({index, value})}/>)}
     </div>
   );
 };
 
 interface DiceProps extends ComponentProps {
   value?: number,
+  onClick?: (value: number) => void,
 }
 
-export const Dice: Component<DiceProps> = ({className, value}) => (
-  <p className={`text-2xl ${className}`}>{value?.toString()}</p>
-);
+export const Dice: Component<DiceProps> = (
+  {
+    className,
+    value,
+    onClick,
+  }) => {
+
+  function handleClick() {
+    if (onClick && value) {
+      onClick(value);
+    }
+  }
+
+  return (
+    <button className={`text-2xl bg-gray-400 px-4 m-1 ${className}`} onClick={handleClick}>
+      {value?.toString()}
+    </button>
+  );
+};

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import GameCanvas from "../components/gameCanvas";
 import Game from "../game/game";
 import {AllDice} from "./dice";
@@ -7,9 +7,15 @@ import {Action} from "../classes/actions";
 let game: Game;
 export const GameComponent: Component = () => {
 
-  const [dice, setDice] = React.useState<number[]>();
+  const [dice, setDice] = useState<number[]>();
+  const [selectedDice, setSelectedDice] = useState<SelectedDice>();
 
-  function startGameLoop() {
+  function handleDiceClick(selected: SelectedDice): void {
+    setSelectedDice(selected);
+    game.selectedDice = selected;
+  }
+
+  function startGameLoop(): void {
     if (!game.isConnected()) {
       setTimeout(startGameLoop, 50);
       return;
@@ -20,10 +26,10 @@ export const GameComponent: Component = () => {
   function updateState() {
     game.wsService.onReceive = (message) => {
       const parsed: ActionMessage = JSON.parse(message.data);
-      console.log(parsed);
+
       switch (parsed.Action) {
         case Action.rollDice:
-          setDice(parsed.Data as number[]);
+          setDice(parsed.Data as number[]); // Updates the state of other players
           break;
       }
     };
@@ -44,7 +50,7 @@ export const GameComponent: Component = () => {
       <div className={"flex justify-center"}>
         <button onClick={startGameLoop}>Roll dice</button>
       </div>
-      <AllDice values={dice}/>
+      <AllDice values={dice} onclick={handleDiceClick} selectedDiceIndex={selectedDice?.index}/>
       <GameCanvas className={"mx-auto"}/>
     </div>
   );

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

@@ -4,6 +4,7 @@ import {Action} from "../classes/actions";
 export default class Game {
 
   private readonly _wsService: WebSocketService;
+  public selectedDice?: SelectedDice;
 
   constructor() {
     this._wsService = new WebSocketService("wss://localhost:3000/api/game");
@@ -17,11 +18,15 @@ export default class Game {
   }
 
   public async gameLoop(setDice: Setter<number[] | undefined>): Promise<void> {
-    // Throw the dices
+    // Throw the dice
     const result = await this.rollDice();
-    setDice(result.Data);
+    const dice = result.Data;
+    setDice(dice); // Updates the state of the current player
 
-    // Choose a dice and move pac-man or a ghost
+    // Choose a dice
+    
+    // Choose a character to move
+    // this.chooseCharacter();
 
     // Use the remaining dice to move pac-man if the player moved a ghost or vice versa
 
@@ -38,7 +43,7 @@ export default class Game {
   public isConnected(): boolean {
     return this._wsService.isOpen();
   }
-  
+
   public disconnect(): void {
     this._wsService.close();
   }
@@ -61,15 +66,11 @@ export default class Game {
     return result;
   }
 
-  private chooseDice(dices: number[]): number {
+  private movePacMan(steps: number): void {
     throw new Error("Not implemented");
   }
 
-  private movePacMan(dice: number): void {
-    throw new Error("Not implemented");
-  }
-
-  private moveGhost(dice: number): void {
+  private moveGhost(steps: number): void {
     throw new Error("Not implemented");
   }
 
@@ -81,8 +82,11 @@ export default class Game {
     throw new Error("Not implemented");
   }
 
+  private chooseCharacter(): void {
+    throw new Error("Method not implemented.");
+  }
+
   get wsService(): WebSocketService {
     return this._wsService;
   }
-
 }

pac-man-board-game/ClientApp/src/types/types.d.ts

@@ -8,3 +8,8 @@ type ActionMessage<T = object> = {
   Action: import("../classes/actions").Action,
   Data?: T
 }
+
+type SelectedDice = {
+  value: number,
+  index: number
+};