2 files changed, 56 insertions, 25 deletions

diff --git a/frontend/ts/login.ts b/frontend/ts/login.ts
index 4ef46ab..5b09e89 100644
--- a/frontend/ts/login.ts
+++ b/frontend/ts/login.ts
@@ -1,26 +1,35 @@
+import { json } from "express";
 import startGame from "./startGame.js";
+// import { Data, Color } from "../../helpers/helpers.js";
 
 let 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>
+    <input type="text" name="username" required>
 		<button type="button" class="btn btn-light btn-lg" onclick="login">Starta spelet</button>
   </div>
 `;
 
-async function login() {
-  let username = document.getElementsByTagName("input")[0].innerHTML,
-    res = await fetch("/login", {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ username: username })
-    });
-  res = await res.json();
-  startGame(res);
+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());
 }
 
-document.body.innerHTML = html;
-document.getElementsByTagName("button")[0].onclick = login;
+(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();
+  }
+})()
\ No newline at end of file
diff --git a/frontend/ts/startGame.ts b/frontend/ts/startGame.ts
index 50ef068..a14742f 100644
--- a/frontend/ts/startGame.ts
+++ b/frontend/ts/startGame.ts
@@ -1,23 +1,45 @@
+import { Data, checkApiRes, mFetch } from "../../helpers/helpers";
+
 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");
+    throw new Error("Player is using browser older that his mom");
   } else return [canvas, ctx];
 }
-function setOpponents(data: object, body: string) {
-  let a = [
-    {
-      id: 1,
-      color: "red",
+
+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";
     }
-  ]
-  document.body.innerHTML = body;
+    tds[i].innerHTML = replacement.name;
+    tds[i].classList.add("bg-" + replacement.color);
+  }
+}
+
+function readyStateToggle(e: MouseEvent) {
+  mFetch("/readyStateToggle", { state: (e.target as any).checked });
 }
-export default async function startGame (data: object) {
+
+export default async function (data: Data) {
+  console.log(data);
   let body = await (await fetch("/map.html")).text();
-  setOpponents(data, body);
+  document.body.innerHTML = body;
+
+  setOpponents(data);
+  document.getElementsByTagName("input")[0].onclick = readyStateToggle;
+  
   let [canvas, ctx] = getCanvasAndCtx();
   let img = new Image(600, 600);
   img.width = 600;