infinite loading screen toy

2025-09-14 22:04:10 +02:00
parent da4ffe176c
commit ab66c9e194
9 changed files with 119 additions and 10 deletions
@@ -40,7 +40,7 @@
          </div>
        </button>
      </li>
-      <li class="toyLi">
+      <!-- <li class="toyLi">
        <button onclick="slideTransition('/toys/sc-tracker', event)" class="toyContainer borderedRect">
          <img class="toyImg" src="/assets/backgrounds/embedImage.png">
          <div class="toyTextContainer">
@@ -48,6 +48,15 @@
            <p class="desc">Tracks your Helldivers 2 Super Credit farming sessions.</p>
          </div>
        </button>
+      </li> -->
+      <li class="toyLi">
+        <button onclick="slideTransition('/toys/loading', event)" class="toyContainer borderedRect">
+          <img class="toyImg" src="/assets/byte_dice_fancy_64x64.png">
+          <div class="toyTextContainer">
+            <h1>Loading Screen</h1>
+            <p class="desc">The same loading screen as the website uses but less clutter and infinite. (Loading the rest of the description...)</p>
+          </div>
+        </button>
      </li>
    </ul>
  </div>
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+
+  <link rel="stylesheet" href="/global/navBar.css">
+  <link rel="stylesheet" href="/global/globalStyle.css">
+  <link rel="stylesheet" href="/global/loadingScreen.css">
+  <link rel="stylesheet" href="style.css">
+
+  <link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
+  <title>Byte Dice - Loading...</title>
+
+  <meta name="robots" content="index, follow">
+  <link rel="canonical" href="https://bytedice.net/toys/loading">
+
+  <meta name="description"         content="An infinite decorative loading screen.">
+  <meta name="keywords"            content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
+  <meta name="author"              content="Byte Dice">
+
+  <meta property="og:title"        content="Byte Dice">
+  <meta property="og:description"  content="An infinite decorative loading screen.">
+  <meta property="og:url"          content="https://bytedice.net/toys/loading">
+  <meta property="og:type"         content="website">
+  <meta property="og:image"        content="/assets/backgrounds/embedImage.png">
+  <meta property="og:image:width"  content="1280">
+  <meta property="og:image:height" content="720">
+
+  <!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
+  <meta name="twitter:card"        content="summary_large_image">
+</head>
+
+<body>
+  <div id="mainDiv">
+  </div>
+
+  <div id="loadingScreen"></div>
+
+
+  <!-- global -->
+  <script src="/global/globalScript.js"></script>
+  <script src="/global/pxDensity.js"></script>
+  <script src="/global/loadingScreen.js"></script>
+
+  <!-- local -->
+  <script src="script.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,35 @@
+CURRENT_PAGE = PAGES.LOADING
+
+
+let byteDiceSize = 1
+let loadingImg = undefined
+
+
+function clearLoadingScreenClutter() {
+  document.getElementById("fakeLoadingToggle").remove()
+  loadingImg = document.getElementById("loadingImg")
+}
+
+
+function periodicallyChangeTips() {
+  newTip()
+  setLoadingProgress("")
+
+  setInterval(periodicallyChangeTips, 60 * 1000)
+}
+
+
+function changeLoadingImgSize() {
+  loadingImg.style.width  = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
+  loadingImg.style.height = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
+}
+
+
+window.onkeydown = function(e) { // keycodes 48..57 = 0-9
+  let code = e.keyCode
+
+  if (!(code >= 48 && code <= 57)) { return }
+
+  byteDiceSize = (code - 48) / 9 + 1
+  changeLoadingImgSize()
+}