From 046617ae201bf6180adf30af743e1c8deeff5c4b Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <600878@stud.hvl.no>
Date: Sat, 20 May 2023 16:06:31 +0200
Subject: [PATCH] Drawn characters on the board

---
 .../inspectionProfiles/Project_Default.xml    |  5 ++++
 .../ClientApp/src/components/gameCanvas.tsx   |  7 ++---
 .../src/components/gameComponent.tsx          |  4 +--
 .../ClientApp/src/game/character.ts           | 25 +++++++++++++++++
 pac-man-board-game/ClientApp/src/game/game.ts |  4 +--
 .../ClientApp/src/game/tileMap.ts             | 27 ++++++++++++++++++-
 .../ClientApp/src/pages/counter.tsx           |  2 +-
 .../ClientApp/src/types/types.d.ts            |  4 ++-
 .../WebSocketService.ts                       |  0
 .../src/{classes => websockets}/actions.ts    |  0
 10 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 pac-man-board-game/ClientApp/src/game/character.ts
 rename pac-man-board-game/ClientApp/src/{classes => websockets}/WebSocketService.ts (100%)
 rename pac-man-board-game/ClientApp/src/{classes => websockets}/actions.ts (100%)

diff --git a/.idea/.idea.pac-man-board-game/.idea/inspectionProfiles/Project_Default.xml b/.idea/.idea.pac-man-board-game/.idea/inspectionProfiles/Project_Default.xml
index 146ab09..61b4da4 100644
--- a/.idea/.idea.pac-man-board-game/.idea/inspectionProfiles/Project_Default.xml
+++ b/.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" />
diff --git a/pac-man-board-game/ClientApp/src/components/gameCanvas.tsx b/pac-man-board-game/ClientApp/src/components/gameCanvas.tsx
index 69289eb..acfccb2 100644
--- a/pac-man-board-game/ClientApp/src/components/gameCanvas.tsx
+++ b/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);
   }, []);
diff --git a/pac-man-board-game/ClientApp/src/components/gameComponent.tsx b/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
index 01999d3..2722515 100644
--- a/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
+++ b/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);
 
diff --git a/pac-man-board-game/ClientApp/src/game/character.ts b/pac-man-board-game/ClientApp/src/game/character.ts
new file mode 100644
index 0000000..e1fbbcb
--- /dev/null
+++ b/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 {
+  }
+
+}
diff --git a/pac-man-board-game/ClientApp/src/game/game.ts b/pac-man-board-game/ClientApp/src/game/game.ts
index e4b2997..e4b66e9 100644
--- a/pac-man-board-game/ClientApp/src/game/game.ts
+++ b/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 {
 
diff --git a/pac-man-board-game/ClientApp/src/game/tileMap.ts b/pac-man-board-game/ClientApp/src/game/tileMap.ts
index 3f50e1c..6a2869f 100644
--- a/pac-man-board-game/ClientApp/src/game/tileMap.ts
+++ b/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;
   }
 }
diff --git a/pac-man-board-game/ClientApp/src/pages/counter.tsx b/pac-man-board-game/ClientApp/src/pages/counter.tsx
index f328db5..552e77a 100644
--- a/pac-man-board-game/ClientApp/src/pages/counter.tsx
+++ b/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");
 
diff --git a/pac-man-board-game/ClientApp/src/types/types.d.ts b/pac-man-board-game/ClientApp/src/types/types.d.ts
index 90826c8..29626c3 100644
--- a/pac-man-board-game/ClientApp/src/types/types.d.ts
+++ b/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 };
diff --git a/pac-man-board-game/ClientApp/src/classes/WebSocketService.ts b/pac-man-board-game/ClientApp/src/websockets/WebSocketService.ts
similarity index 100%
rename from pac-man-board-game/ClientApp/src/classes/WebSocketService.ts
rename to pac-man-board-game/ClientApp/src/websockets/WebSocketService.ts
diff --git a/pac-man-board-game/ClientApp/src/classes/actions.ts b/pac-man-board-game/ClientApp/src/websockets/actions.ts
similarity index 100%
rename from pac-man-board-game/ClientApp/src/classes/actions.ts
rename to pac-man-board-game/ClientApp/src/websockets/actions.ts