Add version function and fix multiple visual bugs, fix styling

public/assets/scripts/haxxor.js

@@ -1,7 +1,11 @@
 // Stolen from https://codepen.io/loktar00/pen/BaGqXY
 // However has modifications to work good as a theme
 
-"use strict";
+const VERSION = "1.0";
+const REMOTE_UPDATE_PATH =
+  "https://git.javalsai.dynv6.net/UwU/haxxor-theme/raw/branch/main/"; // Change this to your remote repository!
+
+("use strict");
 function createTetris() {
   var tetrominos = [
     {
@@ -89,7 +93,6 @@ function createTetris() {
     this.bgCanvas.width = this.fgCanvas.width = this.width;
     this.bgCanvas.height = this.fgCanvas.height = this.height;
 
-
     this.bgCtx = this.bgCanvas.getContext("2d");
     this.fgCtx = this.fgCanvas.getContext("2d");
 
@@ -97,6 +100,8 @@ function createTetris() {
     this.bgCanvas.style.top = this.posY + "px";
 
     // Stay in background
+    this.bgCanvas.style.zIndex = 1;
+    this.fgCanvas.style.zIndex = 1;
     this.bgCanvas.style.position = "absolute";
     this.fgCanvas.style.position = "absolute";
 
@@ -123,8 +128,6 @@ function createTetris() {
     this.level = 0;
     this.loseBlock = 0;
 
-
-
     // init the board
     this.board = [];
     this.boardWidth = Math.floor(this.width / this.unitSize);
@@ -479,39 +482,73 @@ function createTetris() {
     curPiece.y = -4;
   };
 
-  var width = window.innerWidth,
-    boardDiv = 20 * Math.round(window.innerWidth / 20),
+  let boardDiv = 20 * Math.round(window.innerWidth / 20),
     boards = 1,
     bWidth = boardDiv / boards,
     tetrisInstances = [];
 
-  let barsHeight = document.getElementsByClassName("secondary-nav")[0].clientHeight + document.getElementById("navbar").clientHeight;
-  let footer_size = document.getElementsByClassName("page-footer")[0].clientHeight;
-  
-  let bheight = window.innerHeight - barsHeight - footer_size;
-  console.log(window.innerHeight, document.getElementsByClassName("secondary-nav")[0].clientHeight, document.getElementById("navbar").clientHeight);
+  let second_nav = 0;
+  if (document.getElementsByClassName("secondary-nav")[0] !== undefined)
+    second_nav =
+      document.getElementsByClassName("secondary-nav")[0].clientHeight;
+  let barsHeight = second_nav + document.getElementById("navbar").clientHeight;
 
+  let bheight = determineFullHeight() - barsHeight;
+  console.log(
+    determineFullHeight(),
+    document.getElementsByClassName("full height")[0].scrollHeight,
+    second_nav,
+    document.getElementById("navbar").clientHeight
+  );
 
   for (var w = 0; w < boards; w++) {
     tetrisInstances.push(
-      new Tetris(20 * Math.round((w * bWidth) / 20), barsHeight, bWidth, bheight)
+      new Tetris(
+        20 * Math.round((w * bWidth) / 20),
+        barsHeight,
+        bWidth,
+        bheight
+      )
     );
   }
 }
 
-
+function determineFullHeight() {
+  if (document.getElementsByClassName("full height")[0] !== undefined) {
+    return document.getElementsByClassName("full height")[0].clientHeight; // This is guaranteed to work very fine
+  } else {
+    let footer_size = 0;
+    if (document.getElementsByClassName("page-footer")[0] !== undefined)
+      footer_size =
+        document.getElementsByClassName("page-footer")[0].clientHeight;
+    return document.documentElement.scrollHeight - footer_size; // Fallback response, might not work as well
+  }
+}
 
 function main() {
-    if (!isActive()) {
-        return;
-    }
+  if (!isActive()) {
+    return;
+  }
+  getUpdated();
+  setTimeout(createTetris, 50); // Sometimes page isnt completely rendered when tetris is supposed to be loaded, so 50ms timeout is enough to load page on most systems
+}
 
-    createTetris();
+async function getUpdated() {
+  try {
+    let remote_version = (await fetch(REMOTE_UPDATE_PATH + "VERSION")).text;
+    if (remote_version != VERSION) {
+      console.log(
+        `New version available in remote:\nRemote: v${remote_version}\nCurrent: v${VERSION}`
+      );
+    }
+  } catch {
+    console.log("Failed to get updates, is updates repository offline?");
+  }
 }
 
 function isActive() {
-    let style = getComputedStyle(document.body);
-    return style.getPropertyValue("--is-haxxorman") == "true"
+  let style = getComputedStyle(document.body);
+  return style.getPropertyValue("--is-haxxorman") == "true";
 }
 
-document.addEventListener("DOMContentLoaded", main);
+document.addEventListener("DOMContentLoaded", main);