Fixes

public/src/assets/style.css

@@ -2,3 +2,59 @@ body {
   margin: 0;
   overflow: hidden;
 }
+
+@font-face {
+  font-family: "Changa";
+  src: url("fonts/changa.woff") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.header {
+  width: 100%;
+  height: 90px;
+  background-color: #1b262c;
+  border-bottom: 3px solid #90bdd9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: "Changa";
+}
+
+.logo {
+  height: 50px;
+  position: relative;
+  top: 7px;
+}
+
+.popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 500px;
+  height: 500px;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.popup-tab {
+  display: none;
+}
+
+.header-right {
+  margin-right: 20px;
+}
+
+.pixelart {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  margin: 0 20px;
+}
+
+#main-canvas {
+  height: calc(100vh - 90px);
+}

public/src/js/accounts.js

@@ -0,0 +1,44 @@
+const login_form = document.getElementById("login-form");
+const login_button = document.getElementById("login-button");
+
+login_button.onclick = () => {
+  document.getElementById("login").style.display = "block";
+};
+
+login_form.onsubmit = async (e) => {
+  e.preventDefault();
+  const username = login_form.username.value;
+  const pass = login_form.pass.value;
+  let response = await fetch("/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ username, pass }),
+  });
+  response = await response.json();
+  document.getElementById("login-info").innerText = response.message;
+};
+
+const signup_form = document.getElementById("signup-form");
+const signup_button = document.getElementById("signup-button");
+
+signup_button.onclick = () => {
+  document.getElementById("signup").style.display = "block";
+};
+
+signup_form.onsubmit = async (e) => {
+  e.preventDefault();
+  const username = signup_form.username.value;
+  const email = signup_form.email.value;
+  const pass = signup_form.pass.value;
+  let response = await fetch("/signup", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ username, email, pass }),
+  });
+  response = await response.json();
+  document.getElementById("signup-info").innerText = response.message;
+};

public/src/js/game_renderer.js

@@ -39,7 +39,7 @@ export default class GameRenderer {
     /** @type {HTMLCanvasElement} */
     this.canvas = document.getElementById(CANVAS_ID);
     this.canvas.width = window.innerWidth;
-    this.canvas.height = window.innerHeight;
+    this.canvas.height = window.innerHeight - 90;
     /** @type {CanvasRenderingContext2D} */
     this.ctx = this.canvas.getContext("2d");
     this.ctx.imageSmoothingEnabled = false;

public/src/js/ui_renderer.js

@@ -83,7 +83,7 @@ export default class UIRenderer extends GameRenderer {
    */
   resize() {
     this.canvas.width = window.innerWidth;
-    this.canvas.height = window.innerHeight;
+    this.canvas.height = window.innerHeight - 90;
     this.ctx.imageSmoothingEnabled = false;
   }
   /**