added onRezise event

globalScript.js

@@ -6,6 +6,7 @@ const PAGES = {
 let CURRENT_PAGE = PAGES.null
 
 let isAnimating = true
+let gridVisible = false
 
 function randomFloat(min, max) {
   return Math.random() * (max - min) + min;
@@ -32,8 +33,15 @@ function clampNearest(n, mul) {
 }
 
 
-function showGrid() {
+function toggleGrid() {
+  if (gridVisible) {
+    document.getElementById("gridCanvas").remove()
+    gridVisible = false
+    return
+  }
+
   let canvasEl = document.createElement("canvas")
+  canvasEl.id = "gridCanvas"
   canvasEl.width = window.innerWidth
   canvasEl.height = window.innerHeight
   canvasEl.style.position = "absolute"
@@ -62,6 +70,8 @@ function showGrid() {
   }
 
   ctx.stroke()
+
+  gridVisible = true
 }
 
 
@@ -112,4 +122,16 @@ document.addEventListener("DOMContentLoaded", async function() {
   else {
     setLoadingProgress("Cleaning up...")
   }
-}, false)
+}, false)
+
+
+window.addEventListener("resize", () => {
+  switch (CURRENT_PAGE) {
+    case (PAGES.SYNTHWAVE): onResizeSynthWave()
+  }
+
+  if (gridVisible) {
+    toggleGrid()
+    toggleGrid()
+  }
+})

index.html

@@ -61,12 +61,15 @@
 
   <div class="bgDiv" id="loadingScreen">
     <img class="loadingImg" draggable="false" src="./assets/byteDiceBlinkAnim_32x32.png">
+
     <button class="pxFont" onclick="stopShowingLoading()" id="loadingCornerText">
       Press ESC to instantly close the loading screen<br>Or click me to never see it again.
     </button>
+
     <p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
   </div>
 
+  
   <!-- libs -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>