Drawn characters on the board

.idea/.idea.pac-man-board-game/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,11 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="JSSuspiciousNameCombination" enabled="false" level="WARNING" enabled_by_default="false">
+      <group names="x,width,left,right" />
+      <group names="y,height,top,bottom" />
+      <exclude classes="Math" />
+    </inspection_tool>
     <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
       <option name="processCode" value="true" />
       <option name="processLiterals" value="true" />

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

@@ -1,15 +1,16 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import TileMap from "../game/tileMap";
 
 const tileMap = new TileMap();
 
 const GameCanvas: Component = ({className}) => {
 
-  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const context = canvasRef.current?.getContext("2d");
     if (!context) return;
+    context.canvas.height = context.canvas.width;
 
     tileMap.draw(context);
   }, []);

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

@@ -2,7 +2,7 @@ import React, {useState} from "react";
 import GameCanvas from "../components/gameCanvas";
 import Game from "../game/game";
 import {AllDice} from "./dice";
-import {Action} from "../classes/actions";
+import {Action} from "../websockets/actions";
 
 let game: Game;
 export const GameComponent: Component = () => {
@@ -23,7 +23,7 @@ export const GameComponent: Component = () => {
     void game.gameLoop(setDice);
   }
 
-  function updateState() {
+  function updateState(): void {
     game.wsService.onReceive = (message) => {
       const parsed: ActionMessage = JSON.parse(message.data);
 

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

@@ -0,0 +1,25 @@
+type CharacterColor = "red" | "blue" | "yellow" | "green";
+
+export abstract class Character {
+  public color: CharacterColor;
+  public position: CharacterPosition;
+
+  public constructor(color: CharacterColor, startPosition: CharacterPosition) {
+    this.color = color;
+    this.position = startPosition;
+  }
+
+  public abstract moveTo(position: CharacterPosition): void;
+}
+
+export class PacMan extends Character {
+  moveTo(position: CharacterPosition): void {
+  }
+
+}
+
+export class Ghost extends Character {
+  moveTo(position: CharacterPosition): void {
+  }
+
+}

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

@@ -1,5 +1,5 @@
-import WebSocketService from "../classes/WebSocketService";
-import {Action} from "../classes/actions";
+import WebSocketService from "../websockets/WebSocketService";
+import {Action} from "../websockets/actions";
 
 export default class Game {
 

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

@@ -1,3 +1,5 @@
+import {Character, Ghost, PacMan} from "./character";
+
 export default class TileMap {
 
   /**
@@ -22,8 +24,15 @@ export default class TileMap {
     [1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
   ];
 
+  public characters: Character[] = [];
+
+  public constructor() {
+    this.characters.push(new PacMan("yellow", {x: 3, y: 3}), new Ghost("blue", {x: 7, y: 3}));
+  }
+
   public draw(ctx: CanvasRenderingContext2D): void {
     this.drawMap(ctx);
+    this.drawCharacters(ctx);
   }
 
   private drawMap(context: CanvasRenderingContext2D): void {
@@ -60,9 +69,25 @@ export default class TileMap {
     context.fillRect(x, y, tileSize, tileSize);
   }
 
+  private drawCharacters(ctx: CanvasRenderingContext2D): void {
+    for (const character of this.characters) {
+      this.drawCircle(ctx, character);
+    }
+  }
+
+  private drawCircle(ctx: CanvasRenderingContext2D, character: Character): void {
+    const tileSize = this.getTileSize(ctx);
+    const x = character.position.x * tileSize;
+    const y = character.position.y * tileSize;
+    ctx.fillStyle = character.color;
+    ctx.beginPath();
+    ctx.arc(x + tileSize / 2, y + tileSize / 2, tileSize / 2, tileSize / 2, 0.34 * Math.PI);
+    ctx.fill();
+    ctx.stroke();
+  }
+
   private getTileSize(context: CanvasRenderingContext2D): number {
     const canvasSize = context.canvas.width;
-    context.canvas.height = canvasSize;
     return canvasSize / this.map[0].length;
   }
 }

pac-man-board-game/ClientApp/src/pages/counter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import WebSocketService from "../classes/WebSocketService";
+import WebSocketService from "../websockets/WebSocketService";
 
 const ws = new WebSocketService("wss://localhost:3000/api/ws");
 

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

@@ -5,7 +5,7 @@ type Setter<T> = React.Dispatch<React.SetStateAction<T>>;
 type WebSocketData = string | ArrayBufferLike | Blob | ArrayBufferView;
 
 type ActionMessage<T = object> = {
-  Action: import("../classes/actions").Action,
+  Action: import("../websockets/actions").Action,
   Data?: T
 }
 
@@ -13,3 +13,5 @@ type SelectedDice = {
   value: number,
   index: number
 };
+
+type CharacterPosition = { x: number, y: number };