Add version function and fix multiple visual bugs, fix styling

VERSION

@@ -0,0 +1 @@
+1.0

public/assets/css/theme-haxxor.css

@@ -191,7 +191,7 @@
   --color-text-light-2: #457636;
   --color-text-light-3: #234519;
   --color-footer: #000000;
-  --color-timeline: #343c44;
+  --color-timeline: #3ca81e;
   --color-input-text: var(--color-text-dark);
   --color-input-background: #000000;
   --color-input-toggle-background: #11210c;
@@ -239,20 +239,44 @@
 }
 
 .full {
-  position: relative
+  position: relative;
+  z-index: 2;
+}
+
+#activity-feed.flex-list .flex-item {
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  background: var(--color-box-body);
+  margin: 10px;
+  padding: 10px;
+  box-shadow: rgba(102, 255, 102, 0.1) 0px 1px 0px, rgba(102, 255, 102, 0.1) 0px 8px 24px, rgba(102, 255, 102, 0.1) 0px 16px 48px;
+}
+
+
+
+.divider + .flex-list > .flex-item:first-child {
+  padding-top: 10px;
 }
 
 .ui.input {
   animation: glow 800ms ease-out infinite alternate;
 }
 
+.timeline-item.event {
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  background: var(--color-box-body);
+  margin: 10px;
+}
+
+
 @keyframes glow {
   0% {
-  border-color: #393;
+  border-color: #339933;
   box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
   }	
   100% {
-  border-color: #6f6;
+  border-color: rgb(102, 255, 102);
   box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
   }
 }

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;
   }
+  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"
+  return style.getPropertyValue("--is-haxxorman") == "true";
 }
 
 document.addEventListener("DOMContentLoaded", main);