diff --git a/globalScript.js b/globalScript.js index 02d0ffe..aac365f 100644 --- a/globalScript.js +++ b/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() } \ No newline at end of file diff --git a/globalStyle.css b/globalStyle.css index 786ac93..09fd1b9 100644 --- a/globalStyle.css +++ b/globalStyle.css @@ -4,6 +4,7 @@ --navBarBtn_Inner: #474747; --navBarBtn_Border: #232323; --pxDensity: 1; + --pxDensityPx: 1px; } html { diff --git a/index.html b/index.html index ec777cb..c0310f0 100644 --- a/index.html +++ b/index.html @@ -52,9 +52,9 @@ - + \ No newline at end of file diff --git a/loadingScreen.css b/loadingScreen.css index 682200e..683d375 100644 --- a/loadingScreen.css +++ b/loadingScreen.css @@ -26,7 +26,7 @@ border: none; text-align: left; position: absolute; - bottom: 0%; + top: 0%; left: 0%; cursor: pointer; } diff --git a/loadingScreen.js b/loadingScreen.js index 0c5343d..9197175 100644 --- a/loadingScreen.js +++ b/loadingScreen.js @@ -1,9 +1,35 @@ +let isLoading = true +let loadingScreenEl = document.createElement("div") +loadingScreenEl.className = "bgDiv" + +let loadingImg = `` +let closeText = ` + +` + +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 = `

Loading...
Tip: ${tips[randomIntFrom0(tips.length)]}

` + +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 = `` -let closeText = ` - -` - -let tips = [ - "Just don't die.", - "This is a tip.", - "Is thisn't not very un-understandable?" -] - -let loadingText = `

Loading...
Tip: ${tips[randomIntFrom0(tips.length)]}

` - -loadingScreenEl.innerHTML = loadingImg + closeText + loadingText - - -const showLoading = localStorage["showLoading"] || true \ No newline at end of file diff --git a/navBar.css b/navBar.css index 5b4ac0b..3b194c4 100644 --- a/navBar.css +++ b/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; } \ No newline at end of file diff --git a/pxDensity.js b/pxDensity.js index 047c1fc..8877e0f 100644 --- a/pxDensity.js +++ b/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 diff --git a/script.js b/script.js index 41cfb42..58ba4e1 100644 --- a/script.js +++ b/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.left = `calc(${randY}px * var(--pxDensity))` + starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))` + starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))` }, false) \ No newline at end of file diff --git a/style.css b/style.css index 6afd7b8..2fa3c1f 100644 --- a/style.css +++ b/style.css @@ -14,8 +14,8 @@ body { aspect-ratio: 1 / 1; image-rendering: pixelated; position: absolute; - top: 60%; - left: 50%; + top: round(60%, var(--pxDensityPx)); + left: round(50%, var(--pxDensityPx)); transform: translate(-50%, -50%); filter: drop-shadow(0px 0px 100px #C1AB00) } diff --git a/synthwaveEffect.js b/synthwaveEffect.js index 07d09c0..93cf13a 100644 --- a/synthwaveEffect.js +++ b/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) \ No newline at end of file