One step closer to the end

2 files changed, 53 insertions, 0 deletions

diff --git a/frontend/ts/login.ts b/frontend/ts/login.ts
new file mode 100644
index 0000000..4ef46ab
--- /dev/null
+++ b/frontend/ts/login.ts
@@ -0,0 +1,26 @@
+import startGame from "./startGame.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>
+		<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);
+}
+
+document.body.innerHTML = html;
+document.getElementsByTagName("button")[0].onclick = login;
diff --git a/frontend/ts/startGame.ts b/frontend/ts/startGame.ts
new file mode 100644
index 0000000..50ef068
--- /dev/null
+++ b/frontend/ts/startGame.ts
@@ -0,0 +1,27 @@
+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];
+}
+function setOpponents(data: object, body: string) {
+  let a = [
+    {
+      id: 1,
+      color: "red",
+    }
+  ]
+  document.body.innerHTML = body;
+}
+export default async function startGame (data: object) {
+  let body = await (await fetch("/map.html")).text();
+  setOpponents(data, body);
+  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);
+}