aligned eerything to be pixel-perfect

globalScript.js

@@ -1,11 +1,46 @@
 function randomFloat(min, max) {
   return Math.random() * (max - min) + min;
 }
-  
+
+
 function randomIntFrom0(max) {
   return Math.floor(Math.random() * max)
 }
 
+
 function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min) + min)
+}
+
+
+function showGrid() {
+  let canvasEl = document.createElement("canvas")
+  canvasEl.width = window.innerWidth
+  canvasEl.height = window.innerHeight
+  canvasEl.style.position = "absolute"
+  canvasEl.style.top = "0%"
+  canvasEl.style.left = "0%"
+  canvasEl.style.pointerEvents = "none"
+
+  let ctx = canvasEl.getContext("2d")
+
+  document.body.appendChild(canvasEl)
+
+  let repeatCountX = window.innerWidth / pxDensity
+  let repeatCountY = window.innerHeight / pxDensity
+
+  ctx.strokeStyle = "#ff0000"
+  ctx.beginPath()
+
+  for (x = 0; x < repeatCountX; x++) {
+    ctx.moveTo(x * pxDensity, 0)
+    ctx.lineTo(x * pxDensity, window.innerHeight)
+  }
+
+  for (y = 0; y < repeatCountY; y++) {
+    ctx.moveTo(0, y * pxDensity)
+    ctx.lineTo(window.innerWidth, y * pxDensity)
+  }
+
+  ctx.stroke()
 }

globalStyle.css

@@ -4,6 +4,7 @@
   --navBarBtn_Inner: #474747;
   --navBarBtn_Border: #232323;
   --pxDensity: 1;
+  --pxDensityPx: 1px;
 }
 
 html {

index.html

@@ -52,9 +52,9 @@
 
   <script src="/globalScript.js"></script>
   <script src="/pxDensity.js"></script>
-  <script src="/loadingScreen.js"></script>
   <script src="/synthwaveEffect.js"></script>
   <script src="/script.js"></script>
+  <script src="/loadingScreen.js"></script>
 </body>
 
 </html>

loadingScreen.css

@@ -26,7 +26,7 @@
   border: none;
   text-align: left;
   position: absolute;
-  bottom: 0%;
+  top: 0%;
   left: 0%;
   cursor: pointer;
 }

loadingScreen.js

@@ -1,9 +1,35 @@
+let isLoading = true
+let loadingScreenEl = document.createElement("div")
+loadingScreenEl.className = "bgDiv"
+
+let loadingImg = `<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">`
+let closeText = `
+	<button class="loadingCornerText pxFont" onclick="stopShowingLoading()">
+		Press ESC to instantly close theloading screen<br>Click me to never see it again.
+	</button>
+`
+
+let tips = [
+	"Just don't die.",
+	"Did you know this is a tip?",
+	"Is thisn't not very un-understandable?",
+  "m".repeat(200),
+  "Bad at a game? Just press the \"get good at games\" button!"
+]
+
+let loadingText = `<p class="loadingText">Loading...<br>Tip: ${tips[randomIntFrom0(tips.length)]}</p>`
+
+loadingScreenEl.innerHTML = loadingImg + closeText + loadingText
+
+const showLoading = localStorage["showLoading"] || "true"
+
+
 document.addEventListener("DOMContentLoaded", function() {
 	if (showLoading != "true") { return }
 
 	document.body.appendChild(loadingScreenEl)
 
-	const loadDur = randomFloat(3, 6) * 1000
+	const loadDur = randomFloat(3000, 6000)
 
 	setTimeout(function() {
 		removeLoadingScreen()
@@ -11,7 +37,10 @@ document.addEventListener("DOMContentLoaded", function() {
 }, false)
 
 
-function removeLoadingScreen() {	
+function removeLoadingScreen() {
+  if (!isLoading) { return }
+
+  isLoading = false
 	const fadeOutDur = 0.5
 	
 	loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
@@ -32,27 +61,3 @@ document.addEventListener("keydown", function(event) {
 		removeLoadingScreen()
 	}
 })
-
-
-let loadingScreenEl = document.createElement("div")
-loadingScreenEl.className = "bgDiv"
-
-let loadingImg = `<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">`
-let closeText = `
-	<button class="loadingCornerText pxFont" onclick="stopShowingLoading()">
-		Press ESC to instantly close theloading screen<br>Click me to never see it again.
-	</button>
-`
-
-let tips = [
-	"Just don't die.",
-	"This is a tip.",
-	"Is thisn't not very un-understandable?"
-]
-
-let loadingText = `<p class="loadingText">Loading...<br>Tip: ${tips[randomIntFrom0(tips.length)]}</p>`
-
-loadingScreenEl.innerHTML = loadingImg + closeText + loadingText
-
-
-const showLoading = localStorage["showLoading"] || true

navBar.css

@@ -15,19 +15,18 @@ li {
   filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
   padding: 0%;
   display: inline-block;
-  position: relative;
   margin-bottom: calc(4px * var(--pxDensity));
   position: absolute;
   bottom: 0%;
   left: 50%;
   transform: translateX(-50%);
+  font-size: 0px;
 }
 .navBtn {
   background-color: transparent;
   display: inline-flex;
   padding: 0%;
   border: none;
-  position: relative;
   filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
 }
 .navBtn:hover {
@@ -50,5 +49,4 @@ li {
   image-rendering: pixelated;
   position: absolute;
   margin: calc(2px * var(--pxDensity));
-  pointer-events: none;
 }

pxDensity.js

@@ -7,6 +7,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 
   document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight))
+  document.documentElement.style.setProperty("--pxDensityPx", `${Math.max(densityWidth, densityHeight)}px`)
   pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity")
   pxDensityDefined = true
 

script.js

@@ -3,6 +3,6 @@ document.addEventListener("DOMContentLoaded", function() {
   let randX = randomInt(0, 256)
   let randY = randomInt(0, 256)
 
-  starNoise.style.top = `calc(${randX}px * var(--pxDensity))`
+  starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))`
-  starNoise.style.left = `calc(${randY}px * var(--pxDensity))`
+  starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))`
 }, false)

style.css

@@ -14,8 +14,8 @@ body {
   aspect-ratio: 1 / 1;
   image-rendering: pixelated;
   position: absolute;
-  top: 60%;
+  top: round(60%, var(--pxDensityPx));
-  left: 50%;
+  left: round(50%, var(--pxDensityPx));
   transform: translate(-50%, -50%);
   filter: drop-shadow(0px 0px 100px #C1AB00)
 }

synthwaveEffect.js

@@ -1,6 +1,7 @@
 let canvas = document.getElementById("synthwave")
 let ctx = canvas.getContext("2d")
 let hills = []
+let isAnimating = true
 
 canvas.width = window.innerWidth
 canvas.height = window.innerHeight
@@ -92,11 +93,13 @@ let iters = 0
 let previousHill = undefined
 
 function animateSynthWave() {
+  if (!isAnimating) { return }
+
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 
   if (iters >= iterToNewHill) {
     let hillInstance = new Hill(canvas.width / 2, canvas.height / 3 * 2, [0, 180, 240], 25, canvas.width, 325)
-    hillInstance.generate(25, 50, 100)
+    hillInstance.generate(25, canvas.height / 24, 100)
     hills.unshift(hillInstance)
     iters = 0
   }
@@ -141,5 +144,9 @@ function animateSynthWave() {
 
 
 document.addEventListener("DOMContentLoaded", function() {
+  for (i = 0; i < 350; i++) {
+    animateSynthWave()
+  }
+
   setInterval( animateSynthWave, 1000 / 24)
 }, false)