diff --git a/index.html b/index.html index c0310f0..eba2bc3 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,14 @@ +
+ + +

Loading...
Loading files...

Tip: Tip loading...

+
+ diff --git a/loadingScreen.css b/loadingScreen.css index 683d375..8ca67ce 100644 --- a/loadingScreen.css +++ b/loadingScreen.css @@ -8,8 +8,8 @@ } .loadingImg { position: absolute; - top: 50%; - left: 50%; + top: round(50%, var(--pxDensityPx)); + left: round(50%, var(--pxDensityPx)); transform: translate(-50%, -50%); width: calc(32px * var(--pxDensity)); height: calc(32px * var(--pxDensity)); @@ -30,7 +30,7 @@ left: 0%; cursor: pointer; } -.loadingText { +#loadingText { position: absolute; bottom: 0%; left: 50%; diff --git a/loadingScreen.js b/loadingScreen.js index 9197175..0621bd2 100644 --- a/loadingScreen.js +++ b/loadingScreen.js @@ -1,53 +1,51 @@ let isLoading = true -let loadingScreenEl = document.createElement("div") -loadingScreenEl.className = "bgDiv" - -let loadingImg = `` -let closeText = ` - -` +let stopLoading = false +let loadingScreenProgress = document.getElementById("loadingText") +let loadingScreenEl = document.getElementById("loadingScreen") 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!" + "Bad at a game? Just press the \"get good at games\" button!", + "I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)", + "You should listen to that song that goes \"do do do do do do do do do.\"" ] -let loadingText = `

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

` - -loadingScreenEl.innerHTML = loadingImg + closeText + loadingText - +let selectedTip = tips[randomIntFrom0(tips.length)] const showLoading = localStorage["showLoading"] || "true" -document.addEventListener("DOMContentLoaded", function() { - if (showLoading != "true") { return } +function setLoadingProgress(newText) { + loadingScreenProgress.innerHTML = `Loading...
${newText}

Tip: ${selectedTip}` +} - document.body.appendChild(loadingScreenEl) + +function startLoadingScreen() { + loadingScreenProgress.innerHTML = `Loading...

Tip: ${selectedTip}` const loadDur = randomFloat(3000, 6000) - setTimeout(function() { - removeLoadingScreen() - }, loadDur) -}, false) + setTimeout(removeLoadingScreen, loadDur) +} function removeLoadingScreen() { if (!isLoading) { return } + setLoadingProgress("Done!") + isLoading = false const fadeOutDur = 0.5 - loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards` - setTimeout(function() { - document.body.removeChild(loadingScreenEl) - }, fadeOutDur * 1000); + loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards` + + setTimeout(function() { + document.body.removeChild(loadingScreenEl) + }, fadeOutDur * 1000) + }, 500) } diff --git a/pxDensity.js b/pxDensity.js index 8877e0f..9d1fb58 100644 --- a/pxDensity.js +++ b/pxDensity.js @@ -1,7 +1,7 @@ let pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity") let pxDensityDefined = false -document.addEventListener("DOMContentLoaded", function() { +function calcPixelDensity() { let densityWidth = document.documentElement.clientWidth / 256 let densityHeight = document.documentElement.clientHeight / 164 @@ -12,4 +12,4 @@ document.addEventListener("DOMContentLoaded", function() { pxDensityDefined = true console.log("pxDensity: " + getComputedStyle(document.body).getPropertyValue("--pxDensity")) -}, false) \ No newline at end of file +} \ No newline at end of file diff --git a/script.js b/script.js index 58ba4e1..8c9f9db 100644 --- a/script.js +++ b/script.js @@ -1,8 +1,29 @@ document.addEventListener("DOMContentLoaded", function() { + startLoadingScreen() + + setLoadingProgress("Calculating pixel density...") + calcPixelDensity() + + setLoadingProgress("Adding stars...") + addStars() + + setLoadingProgress("Animating synthwave background...") + startSynthAnimation() + + if (showLoading != "true") { + removeLoadingScreen() + } + else { + setLoadingProgress("Cleaning up...") + } +}, false) + + +function addStars() { let starNoise = document.getElementById("starNoise") let randX = randomInt(0, 256) let randY = randomInt(0, 256) 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 +} \ No newline at end of file diff --git a/style.css b/style.css index 2fa3c1f..566386f 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,7 @@ body { #0d0035 100%); background-position: 0% 10vh; overflow: hidden; - background-color: #dadada !important; + margin: 0%; } .synthSun { width: calc(40px * var(--pxDensity)); diff --git a/synthwaveEffect.js b/synthwaveEffect.js index 93cf13a..7825bbf 100644 --- a/synthwaveEffect.js +++ b/synthwaveEffect.js @@ -143,10 +143,10 @@ function animateSynthWave() { } -document.addEventListener("DOMContentLoaded", function() { +function startSynthAnimation() { for (i = 0; i < 350; i++) { animateSynthWave() } setInterval( animateSynthWave, 1000 / 24) -}, false) \ No newline at end of file +} \ No newline at end of file