ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

infinite loading screen toy

Browse Source
This commit is contained in:
ByteDice
2025-09-14 22:04:10 +02:00
parent da4ffe176c
commit ab66c9e194
9 changed files with 119 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/byte_dice_border.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

assets/byte_dice_fancy_64x64.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

global/globalScript.js
+14 -2
View File
@@ -4,7 +4,8 @@ const PAGES = {
SYNTHWAVE: 1, SYNTHWAVE: 1,
TOYS: 2, TOYS: 2,
LICENSE: 3, LICENSE: 3,
SC_TRACKER: 4 SC_TRACKER: 4,
LOADING: 5
} }
const CONSOLE_COLORS = { const CONSOLE_COLORS = {
red: "color: #FF0000;", red: "color: #FF0000;",
@@ -17,6 +18,7 @@ let CURRENT_PAGE = PAGES.null
let isAnimating = true let isAnimating = true
let gridVisible = false let gridVisible = false
let navBarPresent = false
function randomFloat(min, max) { function randomFloat(min, max) {
return Math.random() * (max - min) + min return Math.random() * (max - min) + min
@@ -139,7 +141,7 @@ function pauseAnimBtn(state) {
function setVh() { 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}`) } if (densityWidth > densityHeight) { debugPrint("pxDensity", `Width, ${pxDensity}`) }
else { debugPrint("pxDensity", `Height, ${pxDensity}`) } else { debugPrint("pxDensity", `Height, ${pxDensity}`) }
if (navBarPresent) {
setLoadingProgress("adding navBar...") setLoadingProgress("adding navBar...")
await loadNavBarJson() await loadNavBarJson()
onLoadNavBar() onLoadNavBar()
}
switch (CURRENT_PAGE) { switch (CURRENT_PAGE) {
case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
case (PAGES.LICENSE): onLoadLicense(); break case (PAGES.LICENSE): onLoadLicense(); break
} }
if (navBarPresent) {
pauseAnimBtn(localStorage["isAnimating"] || "true") pauseAnimBtn(localStorage["isAnimating"] || "true")
debugPrint("isAnimating", isAnimating) debugPrint("isAnimating", isAnimating)
}
if (CURRENT_PAGE == PAGES.LOADING) {
clearLoadingScreenClutter()
periodicallyChangeTips()
return
}
if (fakeLoading != "true") { if (fakeLoading != "true") {
removeLoadingScreen(true) removeLoadingScreen(true)
global/loadingScreen.js
+2 -2
View File
@@ -7,9 +7,9 @@ let fakeLoadingComplete = false
loadingScreenEl.className = "bgDiv" loadingScreenEl.className = "bgDiv"
loadingScreenEl.innerHTML = ` 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%"> <p class="encased" style="height: 100%">
Use extended loading screen?<br> Use extended loading screen?<br>
<small style="margin: 0px; font-size: 10px;">(For immersion)</small> <small style="margin: 0px; font-size: 10px;">(For immersion)</small>
global/navBar.js
+2
View File
@@ -1,6 +1,8 @@
let navBarJson let navBarJson
let alts let alts
navBarPresent = true
function onLoadNavBar() { function onLoadNavBar() {
const container = document.getElementById("navBarContainer") const container = document.getElementById("navBarContainer")
const altString = container.dataset.alt || "" const altString = container.dataset.alt || ""
toys/index.html
+10 -1
View File
@@ -40,7 +40,7 @@
</div> </div>
</button> </button>
</li> </li>
<li class="toyLi"> <!-- <li class="toyLi">
<button onclick="slideTransition('/toys/sc-tracker', event)" class="toyContainer borderedRect"> <button onclick="slideTransition('/toys/sc-tracker', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/backgrounds/embedImage.png"> <img class="toyImg" src="/assets/backgrounds/embedImage.png">
<div class="toyTextContainer"> <div class="toyTextContainer">
@@ -48,6 +48,15 @@
<p class="desc">Tracks your Helldivers 2 Super Credit farming sessions.</p> <p class="desc">Tracks your Helldivers 2 Super Credit farming sessions.</p>
</div> </div>
</button> </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> </li>
</ul> </ul>
</div> </div>
toys/loading/index.html
+51
View File
@@ -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>
toys/loading/script.js
+35
View File
@@ -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()
}
toys/loading/style.css
View File