1 files changed, 111 insertions, 42 deletions

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