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

added loading screen

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-10 11:30:39 +01:00
parent f514ae89de
commit 97d38f66dd
5 changed files with 121 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
globalStyle.css
+10
View File
@@ -4,4 +4,14 @@
--navBarBtn_Inner: #474747; --navBarBtn_Inner: #474747;
--navBarBtn_Border: #232323; --navBarBtn_Border: #232323;
--pxDensity: 1; --pxDensity: 1;
}
html {
font-family: "Roboto", sans-serif;
font-size: 1rem;
}
.pxFont {
font-family: "Roboto", sans-serif;
font-size: 1rem;
} }
index.html
+2
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="navBar.css"> <link rel="stylesheet" href="navBar.css">
<link rel="stylesheet" href="/globalStyle.css"> <link rel="stylesheet" href="/globalStyle.css">
<link rel="stylesheet" href="/loadingScreen.css">
</head> </head>
<body style="background-color: #323232; color: #ffffff;"> <body style="background-color: #323232; color: #ffffff;">
@@ -44,6 +45,7 @@
</ul> </ul>
<script src="/pxDensity.js"></script> <script src="/pxDensity.js"></script>
<script src="/loadingScreen.js"></script>
</body> </body>
</html> </html>
loadingScreen.css
+40
View File
@@ -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;
}
loadingScreen.js
+68
View File
@@ -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
pxDensity.js
+1 -1
View File
@@ -1,4 +1,4 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener("DOMContentLoaded", function() {
let densityWidth = document.documentElement.clientWidth / 256 let densityWidth = document.documentElement.clientWidth / 256
let densityHeight = document.documentElement.clientHeight / 164 let densityHeight = document.documentElement.clientHeight / 164