added loading screen

2024-12-10 11:30:39 +01:00
parent f514ae89de
commit 97d38f66dd
5 changed files with 121 additions and 1 deletions
@@ -5,3 +5,13 @@
  --navBarBtn_Border: #232323;
  --pxDensity: 1;
 }
+
+html {
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+}
+
+.pxFont {
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+}
@@ -8,6 +8,7 @@

  <link rel="stylesheet" href="navBar.css">
  <link rel="stylesheet" href="/globalStyle.css">
+  <link rel="stylesheet" href="/loadingScreen.css">
 </head>

 <body style="background-color: #323232; color: #ffffff;">
@@ -44,6 +45,7 @@
  </ul>

  <script src="/pxDensity.js"></script>
+  <script src="/loadingScreen.js"></script>
 </body>

 </html>
@@ -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;
+}
@@ -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 = `<img class="loadingImg" draggable="false" src="/assets/discord_8x8.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
@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("DOMContentLoaded", function() {
  let densityWidth =  document.documentElement.clientWidth / 256
  let densityHeight = document.documentElement.clientHeight / 164