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
@@ -4,7 +4,8 @@ const PAGES = {
  SYNTHWAVE: 1,
  TOYS: 2,
  LICENSE: 3,
-  SC_TRACKER: 4
+  SC_TRACKER: 4,
+  LOADING: 5
 }
 const CONSOLE_COLORS = {
  red: "color: #FF0000;",
@@ -17,6 +18,7 @@ let CURRENT_PAGE = PAGES.null

 let isAnimating = true
 let gridVisible = false
+let navBarPresent = false

 function randomFloat(min, max) {
  return Math.random() * (max - min) + min
@@ -139,7 +141,7 @@ function pauseAnimBtn(state) {


 function setVh() {
-  document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px");
+  document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px")
 }


@@ -161,17 +163,27 @@ document.addEventListener("DOMContentLoaded", async function() {
  if (densityWidth > densityHeight) { debugPrint("pxDensity", `Width, ${pxDensity}`) }
  else { debugPrint("pxDensity", `Height, ${pxDensity}`) } 

+  if (navBarPresent) {
    setLoadingProgress("adding navBar...")
    await loadNavBarJson()
    onLoadNavBar()
+  }

  switch (CURRENT_PAGE) {
    case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
    case (PAGES.LICENSE):   onLoadLicense(); break
  }
  
+  if (navBarPresent) {
    pauseAnimBtn(localStorage["isAnimating"] || "true")
    debugPrint("isAnimating", isAnimating)
+  }
+
+  if (CURRENT_PAGE == PAGES.LOADING) {
+    clearLoadingScreenClutter()
+    periodicallyChangeTips()
+    return
+  }

  if (fakeLoading != "true") { 
    removeLoadingScreen(true)
@@ -7,9 +7,9 @@ let fakeLoadingComplete = false

 loadingScreenEl.className = "bgDiv"
 loadingScreenEl.innerHTML = `
-  <img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">
+  <img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png" id="loadingImg">

-  <div style="margin-left: calc(3px * var(--pxDensity)); display: flex;">
+  <div style="margin-left: calc(3px * var(--pxDensity)); display: flex;" id="fakeLoadingToggle">
    <p class="encased" style="height: 100%">
      Use extended loading screen?<br>
      <small style="margin: 0px; font-size: 10px;">(For immersion)</small>
@@ -1,6 +1,8 @@
 let navBarJson
 let alts

+navBarPresent = true
+
 function onLoadNavBar() {
  const container = document.getElementById("navBarContainer")
  const altString = container.dataset.alt || ""
@@ -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()
+}