Everything till generating empty game board

2 files changed, 137 insertions, 69 deletions

diff --git a/frontend/ts/login.ts b/frontend/ts/login.ts
index 5b09e89..ec4defa 100644
--- a/frontend/ts/login.ts
+++ b/frontend/ts/login.ts
@@ -1,35 +1,34 @@
-import { json } from "express";
-import startGame from "./startGame.js";
-// import { Data, Color } from "../../helpers/helpers.js";
+import StartGame from "./startGame.js";
+import Helpers from "../../helpers/helpers.js";
 
-let html = /* html */ `
+class Login {
+  static html = /* html */ `
 	<div class="container text-center fs-1" style="margin-top: 45vh;">
   	<label for="username">Vad heter du?</label>
-    <input type="text" name="username" required>
-		<button type="button" class="btn btn-light btn-lg" onclick="login">Starta spelet</button>
+    <input type="text" name="username" value="maks" required>
+		<button type="button" class="btn btn-light btn-lg" onclick="Login.login">Starta spelet</button>
   </div>
 `;
 
-async function login(username = "") {
-  if (username === "")
-    username = document.getElementsByTagName("input")[0].value;
-  let res = await fetch("/login", {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({ name: username })
-  });
-  startGame(await res.json());
-}
+  static async start() {
+    let res = await (await fetch("/startPoint")).json();
+    if (res.status === true) {
+      new StartGame(JSON.parse(res.data[0].data));
+    } else {
+      document.body.innerHTML = Login.html;
+      document.getElementsByTagName("button")[0].onclick = () => Login.login();
+
+      // !!
+      document.getElementsByTagName("button")[0].click();
+    }
+  }
 
-(async () => {
-  let res = await (await fetch("/startPoint")).json();
-  if (res.status === true) {
-    startGame(JSON.parse(res.data[0].data));
-  } else {
-    document.body.innerHTML = html;
-    document.getElementsByTagName("button")[0].onclick = () => login();
+  static async login(username = "") {
+    if (username === "")
+      username = document.getElementsByTagName("input")[0].value;
+    
+    let res = await Helpers.mFetch("/login", { name: username });
+    new StartGame(await res.json());
   }
-})()
\ No newline at end of file
+}
+Login.start();
\ No newline at end of file
diff --git a/frontend/ts/startGame.ts b/frontend/ts/startGame.ts
index a14742f..dbeeac1 100644
--- a/frontend/ts/startGame.ts
+++ b/frontend/ts/startGame.ts
@@ -1,49 +1,118 @@
-import { Data, checkApiRes, mFetch } from "../../helpers/helpers";
+import { Data } from "../../helpers/helpersBack";
+import Helpers from "../../helpers/helpers.js";
+import { Chequer, GameBoard } from "../../helpers/helpersBack.js";
 
-function getCanvasAndCtx(): [HTMLCanvasElement, CanvasRenderingContext2D] {
-  let canvas = document.getElementsByTagName("canvas")[0],
-    ctx = canvas.getContext("2d");
-  if (ctx === null) {
-    document.write("ur muther is fat, stop using IE");
-    throw new Error("Player is using browser older that his mom");
-  } else return [canvas, ctx];
-}
+export default class StartGame {
+  colors = ["primary", "danger", "success", "warning"];
+  radius = 20;
 
-function setOpponents(data: Data) {
-  // Start game
-  console.log("startGame.ts: data: ", data)
-  let tds = document.getElementsByClassName("player-name"),
-    colors = ["primary", "danger", "success", "warning"],
-    replacement = { name: "", color: "" };
-  for (let i = 0; i < 4; i++) {
-    if (data[i] !== undefined) {
-      replacement.name = data[i].name;
-      replacement.color = colors[i];
-    } else {
-      replacement.name = "?";
-      replacement.color = "secondary";
+  ctx!: CanvasRenderingContext2D;
+  canvas!: HTMLCanvasElement;
+  interval!: any;
+  img!: HTMLImageElement;
+  
+  chequers: Array<Chequer> = [];
+  gameBoard: GameBoard = [];
+
+  constructor(data: Data) {
+    this.init(data);
+  }
+
+  async init(data: Data) {
+    document.body.innerHTML = await (await fetch("/map.html")).text();
+    document.getElementsByTagName("input")[0].onclick = this.readyStateToggle;
+    [this.canvas, this.ctx] = this.getCanvasAndCtx();
+
+    this.setOpponents(data);
+
+    [this.canvas, this.ctx] = this.getCanvasAndCtx();
+    this.canvas.onclick = this.canvasClickHandler;
+
+    this.img = await this.loadImage("https://jopek.eu/maks/szkola/apkKli/fiaFiles/fia.png");
+    
+    await this.getData();
+    // this.ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.canvas.width, this.canvas.height);
+    // this.drawChequer({ x: 4, y: 1, color: 1 });
+
+    this.interval = setInterval(this.getData, 2000);
+  }
+
+  getCanvasAndCtx(): [HTMLCanvasElement, CanvasRenderingContext2D] {
+    let canvas = document.getElementsByTagName("canvas")[0],
+      ctx = canvas.getContext("2d");
+    if (ctx === null) {
+      document.write("stop using IE ...");
+      throw new Error("Player is using browser older than ...");
+    } else return [canvas, ctx];
+  }
+
+  async setOpponents(data: Data): Promise<void> {
+    let tds = (document.getElementsByClassName("player-name") as HTMLCollectionOf<HTMLElement>),
+      i = 0;
+    
+    for(let player of data) {
+      tds[i].classList.add("bg-" + this.colors[player.color]);
+      tds[i].innerText = player.name;
+      console.log("player, i", player, i);
+      i++;
+    }
+    for(; i < 4; i++) {
+      console.log("i", i);
+      tds[i].classList.add("bg-secondary");
+      tds[i].innerText = "?";
     }
-    tds[i].innerHTML = replacement.name;
-    tds[i].classList.add("bg-" + replacement.color);
   }
-}
 
-function readyStateToggle(e: MouseEvent) {
-  mFetch("/readyStateToggle", { state: (e.target as any).checked });
-}
+  isIntersect(point: { x: number, y: number }, circle: Chequer) {
+    return Math.sqrt((point.x - circle.x) ** 2 + (point.y - circle.y) ** 2) < this.radius;
+  }
 
-export default async function (data: Data) {
-  console.log(data);
-  let body = await (await fetch("/map.html")).text();
-  document.body.innerHTML = body;
+  canvasClickHandler(e: MouseEvent) {
+    const mousePos = {
+      x: e.clientX - this.canvas.offsetLeft,
+      y: e.clientY - this.canvas.offsetTop
+    };
+    this.chequers.forEach(chequer => {
+      if (this.isIntersect(mousePos, chequer)) {
+        alert('click on circle: ' + chequer);
+      }
+    });
+  }
 
-  setOpponents(data);
-  document.getElementsByTagName("input")[0].onclick = readyStateToggle;
-  
-  let [canvas, ctx] = getCanvasAndCtx();
-  let img = new Image(600, 600);
-  img.width = 600;
-  img.height = 600;
-  img.src = "https://www.egierki.pl/app/uploads/2020/05/Ludo-Play.jpg";
-  img.onload = () => ctx.drawImage(img, 0, 0);
-}
+  readyStateToggle(e: MouseEvent): void {
+    Helpers.mFetch("/readyStateToggle", { 
+      state: (e.target as HTMLInputElement).checked 
+    });
+  }
+
+  async loadImage(src: string): Promise<HTMLImageElement> {
+    return new Promise(resolve => {
+      let img = new Image()
+      img.src = src
+      img.onload = () => resolve(img)
+    })
+  }
+
+  drawChequer(chequer: Chequer): void {
+    let x = chequer.x * 60 + 30,
+      y = chequer.y * 60 + 28;
+
+    this.ctx.beginPath();
+    this.ctx.arc(x, y, this.radius, 0, 2 * Math.PI);
+    this.ctx.fillStyle = this.colors[chequer.color];
+    this.ctx.fill();
+    this.ctx.lineWidth = 5;
+    this.ctx.strokeStyle = 'grey';
+    this.ctx.closePath();
+    this.ctx.stroke();
+
+    this.chequers.push(chequer);
+  }
+
+  async getData() {
+    let data = await Helpers.mFetch("/getCurrentGameState", {});
+    // TODO: assign data to this.gameBoard and draw it
+    // TODO: add D6 dice
+    // TODO: if currentPLayer === true, call to logic or calc logic here
+  }
+}
\ No newline at end of file