diff --git a/globalStyle.css b/globalStyle.css index 42b7045..786ac93 100644 --- a/globalStyle.css +++ b/globalStyle.css @@ -4,4 +4,14 @@ --navBarBtn_Inner: #474747; --navBarBtn_Border: #232323; --pxDensity: 1; +} + +html { + font-family: "Roboto", sans-serif; + font-size: 1rem; +} + +.pxFont { + font-family: "Roboto", sans-serif; + font-size: 1rem; } \ No newline at end of file diff --git a/index.html b/index.html index 31c5afd..f0c9d5d 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + @@ -44,6 +45,7 @@ + \ No newline at end of file diff --git a/loadingScreen.css b/loadingScreen.css new file mode 100644 index 0000000..682200e --- /dev/null +++ b/loadingScreen.css @@ -0,0 +1,40 @@ +.bgDiv { + background-color: #323232; + position: absolute; + top: 0%; + left: 0%; + width: 100vw; + height: 100vh; +} +.loadingImg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: calc(32px * var(--pxDensity)); + height: calc(32px * var(--pxDensity)); + image-rendering: pixelated; +} +@keyframes fade-out { + 0% {opacity: 100%;} + 100% {opacity: 0%;} +} +/* custom pixel 3x5 font */ +.loadingCornerText { + background-color: transparent; + color: #ffffff; + border: none; + text-align: left; + position: absolute; + bottom: 0%; + left: 0%; + cursor: pointer; +} +.loadingText { + position: absolute; + bottom: 0%; + left: 50%; + transform: translateX(-50%); + text-align: center; + font-size: 1.5rem; +} \ No newline at end of file diff --git a/loadingScreen.js b/loadingScreen.js new file mode 100644 index 0000000..2f267c6 --- /dev/null +++ b/loadingScreen.js @@ -0,0 +1,68 @@ +function randomFloat(min, max) { + return Math.random() * (max - min) + min; +} + + +function randomIntFrom0(max) { + return Math.floor(Math.random() * max) +} + + +document.addEventListener("DOMContentLoaded", function() { + if (showLoading != "true") { return } + + document.body.appendChild(loadingScreenEl) + + const loadDur = randomFloat(3, 6) * 1000 + + setTimeout(function() { + removeLoadingScreen() + }, loadDur) +}, false) + + +function removeLoadingScreen() { + const fadeOutDur = 0.5 + + loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards` + + setTimeout(function() { + document.body.removeChild(loadingScreenEl) + }, fadeOutDur * 1000); +} + + +function stopShowingLoading() { + localStorage["showLoading"] = false +} + + +document.addEventListener("keydown", function(event) { + if (event.key === "Escape") { + 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/pxDensity.js b/pxDensity.js index 700e09d..7c88ebd 100644 --- a/pxDensity.js +++ b/pxDensity.js @@ -1,4 +1,4 @@ -document.addEventListener('DOMContentLoaded', function() { +document.addEventListener("DOMContentLoaded", function() { let densityWidth = document.documentElement.clientWidth / 256 let densityHeight = document.documentElement.clientHeight / 164