Action objects and update dices on all screens after roll

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

@@ -33,29 +33,34 @@ export default class WebSocketService {
     if (this._onError) this.ws.onerror = this._onError;
   }
 
-  public send(data: WebSocketData): void {
+  public send(data: ActionRequest | string): void {
+    if (typeof data !== "string") {
+      data = JSON.stringify(data);
+    }
     this.ws?.send(data);
   }
-
-  public async sendAndReceive<T>(data: WebSocketData): Promise<T> {
+  
+  public async sendAndReceive<R>(data: ActionRequest): Promise<R> {
     if (!this.isOpen()) return Promise.reject("WebSocket is not open");
 
-    let result: T | undefined;
-    this.onReceive = (event: MessageEvent) => {
-      result = JSON.parse(event.data) as T;
+    let result: R | undefined;
+    this.ws!.onmessage = (event: MessageEvent<string>) => {
+      result = JSON.parse(event.data) as R;
     };
 
     this.send(data);
-    return new Promise<T>((resolve) => {
-      function f() {
+    return new Promise<R>((resolve) => {
+      const f = () => {
         if (result === undefined) {
           setTimeout(f, 50);
           return;
         }
-      }
+        const resolved = resolve(result);
+        if (this._onReceive) this.onReceive = this._onReceive;
+        return resolved;
+      };
 
       f();
-      return resolve(result!);
     });
   }
 
@@ -90,4 +95,4 @@ export default class WebSocketService {
     if (!this.ws) return;
     this.ws.onerror = onError;
   }
-}
+}

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

@@ -0,0 +1,4 @@
+export enum Action {
+  rollDice,
+  pickDice,
+}

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

@@ -1,14 +1,14 @@
 import React from "react";
 
 interface AllDiceProps extends ComponentProps {
-  values: number[],
+  values?: number[],
 }
 
 export const AllDice: Component<AllDiceProps> = ({className, values}) => {
   return (
-    <>
-      {values?.map((value, index) => <Dice key={index} className={className}/>)}
-    </>
+    <div className={"flex gap-5 justify-center"}>
+      {values?.map((value, index) => <Dice key={index} className={className} value={value}/>)}
+    </div>
   );
 };
 
@@ -16,8 +16,6 @@ interface DiceProps extends ComponentProps {
   value?: number,
 }
 
-export const Dice: Component<DiceProps> = ({className, value}) => {
-  return (
-    <div className={className}>{value?.toString()}</div>
-  );
-};
+export const Dice: Component<DiceProps> = ({className, value}) => (
+  <p className={`text-2xl ${className}`}>{value?.toString()}</p>
+);

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

@@ -3,33 +3,42 @@ import GameCanvas from "../components/gameCanvas";
 import Game from "../game/game";
 import {AllDice} from "./dice";
 
+let game: Game;
 export const GameComponent: Component = () => {
 
-  const [dice, setDice] = React.useState<number[]>([0, 0]);
+  const [dice, setDice] = React.useState<number[]>();
+
+  function startGameLoop() {
+    if (!game.isConnected()) {
+      setTimeout(startGameLoop, 50);
+      return;
+    }
+    void game.gameLoop(setDice);
+  }
+
+  function updateState() {
+    game.wsService.onReceive = (message) => {
+      const parsed = JSON.parse(message.data);
+      if (parsed instanceof Array) {
+        setDice(parsed);
+      }
+    };
+  }
 
   React.useEffect(() => {
-    let game: Game = new Game();
+    game = new Game();
+    updateState();
+
     game.connectToServer();
-    function f() {
-      if (!game.isConnected()) {
-        setTimeout(f, 50);
-        return;
-      }
-      game.gameLoop(setDice);
-    }
-    f();
-    // TODO only call gameLoop after the previous one has finished
-    // const id = setInterval(() => game.gameLoop(), 5000);
-    // return () => clearInterval(id);
+    startGameLoop();
   }, []);
-  
-  React.useEffect(() => {
-    console.log(dice);
-  }, [dice]);
 
   return (
     <div>
-      <h1 className={"w-fit mx-auto"}>Pac-Man</h1>
+      <h1 className={"w-fit mx-auto"}>Pac-Man The Board Game</h1>
+      <div className={"flex justify-center"}>
+        <button onClick={startGameLoop}>Roll dice</button>
+      </div>
       <AllDice values={dice}/>
       <GameCanvas className={"mx-auto"}/>
     </div>

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

@@ -1,11 +1,12 @@
 import WebSocketService from "../classes/WebSocketService";
+import {Action} from "../classes/actions";
 
 export default class Game {
 
-  private wsService: WebSocketService;
+  private _wsService: WebSocketService;
 
   constructor() {
-    this.wsService = new WebSocketService("wss://localhost:3000/api/game");
+    this._wsService = new WebSocketService("wss://localhost:3000/api/game");
     // Connect to the server
 
     // Create players
@@ -15,12 +16,10 @@ export default class Game {
     // Roll to start
   }
 
-  public gameLoop(setDice: Setter<number[]>): void {
+  public async gameLoop(setDice: Setter<number[] | undefined>): Promise<void> {
     // Throw the dices
-    this.rollDice().then((dices) => {
-      console.log(dices);
-      setDice(dices);
-    });
+    const result = await this.rollDice();
+    setDice(result);
 
     // Choose a dice and move pac-man or a ghost
 
@@ -32,12 +31,12 @@ export default class Game {
   }
 
   public connectToServer(): void {
-    this.wsService.open();
-    this.wsService.registerEvents();
+    this._wsService.open();
+    this._wsService.registerEvents();
   }
 
   public isConnected(): boolean {
-    return this.wsService.isOpen();
+    return this._wsService.isOpen();
   }
 
   private createPlayers(): void {
@@ -54,7 +53,7 @@ export default class Game {
 
   private async rollDice(): Promise<number[]> {
     let result: number[];
-    result = await this.wsService.sendAndReceive<number[]>("roll");
+    result = await this._wsService.sendAndReceive<number[]>({action: Action.rollDice});
     return result;
   }
 
@@ -78,4 +77,8 @@ export default class Game {
     throw new Error("Not implemented");
   }
 
+  get wsService(): WebSocketService {
+    return this._wsService;
+  }
+
 }

pac-man-board-game/ClientApp/src/index.css

@@ -10,3 +10,7 @@
 h1 {
     @apply text-4xl;
 }
+
+button {
+    @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}

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

@@ -3,3 +3,8 @@ type MessageEventFunction = (data: MessageEvent<any>) => void;
 type Setter<T> = React.Dispatch<React.SetStateAction<T>>;
 
 type WebSocketData = string | ArrayBufferLike | Blob | ArrayBufferView;
+
+type ActionRequest = {
+  action: import("../classes/actions").Action,
+  data?: object
+}

pac-man-board-game/Controllers/GameController.cs

@@ -1,7 +1,8 @@
 using System.Net.WebSockets;
-using System.Text;
 using System.Text.Json;
+using System.Text.RegularExpressions;
 using Microsoft.AspNetCore.Mvc;
+using pacMan.Game;
 using pacMan.Game.Interfaces;
 using pacMan.Game.Items;
 using pacMan.Interfaces;
@@ -14,6 +15,7 @@ namespace pacMan.Controllers;
 public class GameController : GenericController
 {
     private readonly IDiceCup _diceCup;
+
     public GameController(ILogger<GameController> logger, IWebSocketService wsService) : base(logger, wsService)
     {
         _diceCup = new DiceCup();
@@ -25,11 +27,21 @@ public class GameController : GenericController
     protected override ArraySegment<byte> Run(WebSocketReceiveResult result, byte[] data)
     {
         var stringResult = data.GetString(data.Length);
-        Logger.Log(LogLevel.Information, "Received: {}", stringResult);
-        
-        var rolls = _diceCup.Roll();
-        Logger.Log(LogLevel.Information, "Rolled {}", string.Join(", ", rolls));
+        // Removes invalid characters from the string
+        stringResult = Regex.Replace(stringResult, @"\p{C}+", "");
 
-        return rolls.ToArraySegment();
+        Logger.Log(LogLevel.Information, "Received: {}", stringResult);
+        var action = JsonSerializer.Deserialize<ActionRequest>(stringResult);
+
+        switch (action?.Action)
+        {
+            case GameAction.RollDice:
+                var rolls = _diceCup.Roll();
+                Logger.Log(LogLevel.Information, "Rolled {}", string.Join(", ", rolls));
+
+                return rolls.ToArraySegment();
+            default:
+                return new ArraySegment<byte>("Invalid action"u8.ToArray());
+        }
     }
 }

pac-man-board-game/Game/Action.cs

@@ -0,0 +1,6 @@
+namespace pacMan.Game;
+
+public enum GameAction
+{
+    RollDice
+}

pac-man-board-game/Game/ActionRequest.cs

@@ -0,0 +1,7 @@
+namespace pacMan.Game;
+
+public class ActionRequest
+{
+    public GameAction Action { get; set; }
+    public object? Data { get; set; }
+}