convert all indents to tabs
This commit is contained in:
+142
-149
@@ -1,17 +1,17 @@
|
||||
const PAGES = {
|
||||
_404: -1,
|
||||
null: 0,
|
||||
SYNTHWAVE: 1,
|
||||
TOYS: 2,
|
||||
LICENSE: 3,
|
||||
LOADING: 4,
|
||||
_404: -1,
|
||||
null: 0,
|
||||
SYNTHWAVE: 1,
|
||||
TOYS: 2,
|
||||
LICENSE: 3,
|
||||
LOADING: 4,
|
||||
LIBS: 5
|
||||
}
|
||||
const CONSOLE_COLORS = {
|
||||
red: "color: #FF0000;",
|
||||
green: "color: #00FF00",
|
||||
white: "color: #FFFFFF;",
|
||||
debugTitle: "color: #00FF00;",
|
||||
red: "color: #FF0000;",
|
||||
green: "color: #00FF00",
|
||||
white: "color: #FFFFFF;",
|
||||
debugTitle: "color: #00FF00;",
|
||||
}
|
||||
|
||||
let CURRENT_PAGE = PAGES.null
|
||||
@@ -21,131 +21,124 @@ let gridVisible = false
|
||||
let navBarPresent = false
|
||||
|
||||
function randomFloat(min, max) {
|
||||
return Math.random() * (max - min) + min
|
||||
return Math.random() * (max - min) + min
|
||||
}
|
||||
|
||||
|
||||
function randomIntFrom0(max) {
|
||||
return Math.floor(Math.random() * max)
|
||||
return Math.floor(Math.random() * max)
|
||||
}
|
||||
|
||||
|
||||
function randomInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
}
|
||||
|
||||
|
||||
function randomBool(probability) {
|
||||
return Math.random() <= probability
|
||||
return Math.random() <= probability
|
||||
}
|
||||
|
||||
|
||||
function clampNearest(n, mul) {
|
||||
if(n > 0)
|
||||
return Math.ceil(n / mul) * mul
|
||||
else if( n < 0)
|
||||
return Math.floor(n / mul) * mul
|
||||
else
|
||||
return 0
|
||||
if (n > 0) { return Math.ceil(n / mul) * mul }
|
||||
else if (n < 0) { return Math.floor(n / mul) * mul }
|
||||
else { return 0 }
|
||||
}
|
||||
|
||||
|
||||
function lerp(x, y, t) {
|
||||
return x + t * (y - x)
|
||||
return x + t * (y - x)
|
||||
}
|
||||
|
||||
|
||||
function debugPrint(title, value) {
|
||||
if (!title) {
|
||||
console.error(
|
||||
`error[A0000]: this function takes 1 argument but 0 arguments were supplied
|
||||
--> unknown:0:0
|
||||
|
|
||||
0 | debugPrint()
|
||||
| ^^^^^^^^^^-- argument #1 of type \`Any\` is missing`
|
||||
)
|
||||
return
|
||||
}
|
||||
if (!title) {
|
||||
console.error("debugPrint() takes 2 arguments")
|
||||
return
|
||||
}
|
||||
|
||||
if (value) {
|
||||
console.log(`%c${title}:\n%c${value}`, CONSOLE_COLORS.debugTitle, CONSOLE_COLORS.white)
|
||||
}
|
||||
else {
|
||||
console.log(`%c${title}`, CONSOLE_COLORS.debugTitle)
|
||||
}
|
||||
if (value) {
|
||||
console.log(`%c${title}:\n%c${value}`, CONSOLE_COLORS.debugTitle, CONSOLE_COLORS.white)
|
||||
}
|
||||
else {
|
||||
console.log(`%c${title}`, CONSOLE_COLORS.debugTitle)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toggleGrid(offX = 0, offY = 0) {
|
||||
if (gridVisible) {
|
||||
document.getElementById("gridCanvas").remove()
|
||||
gridVisible = false
|
||||
return
|
||||
}
|
||||
if (gridVisible) {
|
||||
document.getElementById("gridCanvas").remove()
|
||||
gridVisible = false
|
||||
return
|
||||
}
|
||||
|
||||
let canvasEl = document.createElement("canvas")
|
||||
canvasEl.id = "gridCanvas"
|
||||
canvasEl.width = window.innerWidth
|
||||
canvasEl.height = window.innerHeight
|
||||
canvasEl.style.position = "absolute"
|
||||
canvasEl.style.top = `${offY * pxDensity}px`
|
||||
canvasEl.style.left = `${offX * pxDensity}px`
|
||||
canvasEl.style.pointerEvents = "none"
|
||||
let canvasEl = document.createElement("canvas")
|
||||
canvasEl.id = "gridCanvas"
|
||||
canvasEl.width = window.innerWidth
|
||||
canvasEl.height = window.innerHeight
|
||||
canvasEl.style.position = "absolute"
|
||||
canvasEl.style.top = `${offY * pxDensity}px`
|
||||
canvasEl.style.left = `${offX * pxDensity}px`
|
||||
canvasEl.style.pointerEvents = "none"
|
||||
|
||||
let ctx = canvasEl.getContext("2d")
|
||||
let ctx = canvasEl.getContext("2d")
|
||||
|
||||
document.body.appendChild(canvasEl)
|
||||
document.body.appendChild(canvasEl)
|
||||
|
||||
let repeatCountX = window.innerWidth / pxDensity
|
||||
let repeatCountY = window.innerHeight / pxDensity
|
||||
let repeatCountX = window.innerWidth / pxDensity
|
||||
let repeatCountY = window.innerHeight / pxDensity
|
||||
|
||||
ctx.strokeStyle = "#ff0000"
|
||||
ctx.strokeStyle = "#ff0000"
|
||||
ctx.strokeSize = 1
|
||||
ctx.beginPath()
|
||||
ctx.beginPath()
|
||||
|
||||
for (x = 0; x < repeatCountX; x++) {
|
||||
ctx.moveTo(x * pxDensity, 0)
|
||||
ctx.lineTo(x * pxDensity, window.innerHeight)
|
||||
}
|
||||
for (x = 0; x < repeatCountX; x++) {
|
||||
ctx.moveTo(x * pxDensity, 0)
|
||||
ctx.lineTo(x * pxDensity, window.innerHeight)
|
||||
}
|
||||
|
||||
for (y = 0; y < repeatCountY; y++) {
|
||||
ctx.moveTo(0, y * pxDensity)
|
||||
ctx.lineTo(window.innerWidth, y * pxDensity)
|
||||
}
|
||||
for (y = 0; y < repeatCountY; y++) {
|
||||
ctx.moveTo(0, y * pxDensity)
|
||||
ctx.lineTo(window.innerWidth, y * pxDensity)
|
||||
}
|
||||
|
||||
ctx.stroke()
|
||||
ctx.stroke()
|
||||
|
||||
gridVisible = true
|
||||
gridVisible = true
|
||||
}
|
||||
|
||||
|
||||
function pauseAnimBtn(state) {
|
||||
if (state == "auto") {
|
||||
if (localStorage["isAnimating"] == "true") { localStorage["isAnimating"] = "false" }
|
||||
else { localStorage["isAnimating"] = "true" }
|
||||
if (state == "auto") {
|
||||
if (localStorage["isAnimating"] == "true") { localStorage["isAnimating"] = "false" }
|
||||
else { localStorage["isAnimating"] = "true" }
|
||||
|
||||
state = localStorage["isAnimating"]
|
||||
}
|
||||
state = localStorage["isAnimating"]
|
||||
}
|
||||
|
||||
let pauseBtn = document.getElementById("animationToggle")
|
||||
let pauseBtn = document.getElementById("animationToggle")
|
||||
if (pauseBtn == undefined) { return; }
|
||||
|
||||
if (state == "true") {
|
||||
isAnimating = true
|
||||
pauseBtn.src = "/assets/icons/pauseAnimation_8x8.png"
|
||||
}
|
||||
else {
|
||||
isAnimating = false
|
||||
pauseBtn.src = "/assets/icons/playAnimation_8x8.png"
|
||||
}
|
||||
if (state == "true") {
|
||||
isAnimating = true
|
||||
pauseBtn.src = "/assets/icons/pauseAnimation_8x8.png"
|
||||
}
|
||||
else {
|
||||
isAnimating = false
|
||||
pauseBtn.src = "/assets/icons/playAnimation_8x8.png"
|
||||
}
|
||||
|
||||
localStorage["isAnimating"] = isAnimating
|
||||
localStorage["isAnimating"] = isAnimating
|
||||
}
|
||||
|
||||
|
||||
function setVh() {
|
||||
document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px")
|
||||
document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px")
|
||||
}
|
||||
|
||||
|
||||
function getEngine() {
|
||||
if ("MozAppearance" in document.documentElement.style)
|
||||
{ return "gecko" }
|
||||
@@ -172,86 +165,86 @@ document.addEventListener("DOMContentLoaded", async function () {
|
||||
let engine = getEngine()
|
||||
if (!["gecko", "blink"].includes(engine))
|
||||
{ alert("Your web browser is not supported, expect major issues.\nRendering engine: " + engine) }
|
||||
|
||||
|
||||
setLoadingProgress("Fetching tips...")
|
||||
|
||||
await loadTips()
|
||||
await loadTips()
|
||||
|
||||
newTip()
|
||||
newTip()
|
||||
|
||||
setLoadingProgress("Calculating pixel density...")
|
||||
calcPixelDensity()
|
||||
setLoadingProgress("Calculating pixel density...")
|
||||
calcPixelDensity()
|
||||
|
||||
if (densityWidth > densityHeight) { debugPrint("pxDensity", `Width, ${pxDensity}`) }
|
||||
else { debugPrint("pxDensity", `Height, ${pxDensity}`) }
|
||||
if (densityWidth > densityHeight) { debugPrint("pxDensity", `Width, ${pxDensity}`) }
|
||||
else { debugPrint("pxDensity", `Height, ${pxDensity}`) }
|
||||
|
||||
if (navBarPresent) {
|
||||
setLoadingProgress("adding navBar...")
|
||||
await loadNavBarJson()
|
||||
onLoadNavBar()
|
||||
}
|
||||
if (navBarPresent) {
|
||||
setLoadingProgress("adding navBar...")
|
||||
await loadNavBarJson()
|
||||
onLoadNavBar()
|
||||
}
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
|
||||
case (PAGES.LICENSE): loadingScreenStars(); await loadingScreenLicense(); break
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
|
||||
case (PAGES.LICENSE): loadingScreenStars(); await loadingScreenLicense(); break
|
||||
case (PAGES.TOYS): loadingScreenStars(); break
|
||||
case (PAGES.LIBS): loadingScreenStars(); break
|
||||
}
|
||||
|
||||
if (navBarPresent) {
|
||||
pauseAnimBtn(localStorage["isAnimating"] || "true")
|
||||
debugPrint("isAnimating", isAnimating)
|
||||
}
|
||||
}
|
||||
|
||||
if (CURRENT_PAGE == PAGES.LOADING) {
|
||||
clearLoadingScreenClutter()
|
||||
if (navBarPresent) {
|
||||
pauseAnimBtn(localStorage["isAnimating"] || "true")
|
||||
debugPrint("isAnimating", isAnimating)
|
||||
}
|
||||
|
||||
if (CURRENT_PAGE == PAGES.LOADING) {
|
||||
clearLoadingScreenClutter()
|
||||
setLoadingProgress("")
|
||||
setInterval(periodicallyChangeTips, 60 * 1000)
|
||||
return
|
||||
}
|
||||
setInterval(periodicallyChangeTips, 60 * 1000)
|
||||
return
|
||||
}
|
||||
|
||||
if (fakeLoading != "true") {
|
||||
removeLoadingScreen(true)
|
||||
}
|
||||
else {
|
||||
setLoadingProgress("Cleaning up...")
|
||||
loadingComplete = true
|
||||
if (fakeLoadingComplete) {
|
||||
removeLoadingScreen()
|
||||
}
|
||||
}
|
||||
if (fakeLoading != "true") {
|
||||
removeLoadingScreen(true)
|
||||
}
|
||||
else {
|
||||
setLoadingProgress("Cleaning up...")
|
||||
loadingComplete = true
|
||||
if (fakeLoadingComplete) {
|
||||
removeLoadingScreen()
|
||||
}
|
||||
}
|
||||
}, false)
|
||||
|
||||
|
||||
window.addEventListener("resize", function() {
|
||||
setVh()
|
||||
calcPixelDensity()
|
||||
setVh()
|
||||
calcPixelDensity()
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): onResizeSynthwave()
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): onResizeSynthwave()
|
||||
case (PAGES.LICENSE): scaleDisplayLicense()
|
||||
}
|
||||
}
|
||||
|
||||
// unoptimal but works well enough
|
||||
if (gridVisible) {
|
||||
toggleGrid()
|
||||
toggleGrid()
|
||||
}
|
||||
// unoptimal but works well enough
|
||||
if (gridVisible) {
|
||||
toggleGrid()
|
||||
toggleGrid()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
if ("scrollRestoration" in history) {
|
||||
history.scrollRestoration = "manual";
|
||||
history.scrollRestoration = "manual";
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener("pageshow", (event) => {
|
||||
if (event.persisted) {
|
||||
// reload page to clear unwanted cache.
|
||||
// for some reason the loading screen stays
|
||||
// permanently open without this.
|
||||
window.location.reload()
|
||||
}
|
||||
if (event.persisted) {
|
||||
// reload page to clear unwanted cache.
|
||||
// for some reason the loading screen stays
|
||||
// permanently open without this.
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
|
||||
let prevAnimationState = isAnimating
|
||||
@@ -270,27 +263,27 @@ async function sha256(text) {
|
||||
|
||||
/*
|
||||
document.addEventListener("visibilitychange", function() {
|
||||
if (document.hidden) {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
else {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
if (document.hidden) {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
else {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener("blur", function() {
|
||||
if (document.visibilityState === "visible") {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
if (document.visibilityState === "visible") {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener("focus", function() {
|
||||
if (!document.hidden) {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
if (!document.hidden) {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
})
|
||||
*/
|
||||
+78
-78
@@ -1,112 +1,112 @@
|
||||
:root {
|
||||
--navBar_Inner: #43608D;
|
||||
--navBar_Border: #2F3E56;
|
||||
--navBar_SecondInner: #344b6c;
|
||||
--navBarBtn_Inner: #474747;
|
||||
--navBarBtn_Border: #232323;
|
||||
--brightBlue: #569cd6;
|
||||
--pxDensity: 1;
|
||||
--pxDensityPx: 1px;
|
||||
--bottomPxMargin: 1px;
|
||||
--navBar_Inner: #43608D;
|
||||
--navBar_Border: #2F3E56;
|
||||
--navBar_SecondInner: #344b6c;
|
||||
--navBarBtn_Inner: #474747;
|
||||
--navBarBtn_Border: #232323;
|
||||
--brightBlue: #569cd6;
|
||||
--pxDensity: 1;
|
||||
--pxDensityPx: 1px;
|
||||
--bottomPxMargin: 1px;
|
||||
}
|
||||
html {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
background-color: #323232;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
background-color: #323232;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
body {
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background-color: #323232;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
margin: 0%;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background-color: #323232;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
margin: 0%;
|
||||
width: 100vw;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
.pxFont {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: min(5vmin, 2vmax, 1rem)
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: min(5vmin, 2vmax, 1rem)
|
||||
}
|
||||
@keyframes slide-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
.borderedRect {
|
||||
background-color: var(--navBar_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
|
||||
background-color: var(--navBar_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
|
||||
|
||||
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
padding: 0%;
|
||||
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
padding: 0%;
|
||||
}
|
||||
.invisible {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
}
|
||||
.encased {
|
||||
display: inline-block;
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
|
||||
display: inline-block;
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
|
||||
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
width: round(auto, var(--pxDensity));
|
||||
/*height: calc(6px * var(--pxDensity));*/
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
width: round(auto, var(--pxDensity));
|
||||
/*height: calc(6px * var(--pxDensity));*/
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(4px * var(--pxDensity));
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(4px * var(--pxDensity));
|
||||
}
|
||||
.switch input {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.switchDecor {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--navBarBtn_Border);
|
||||
transition: 0.2s steps(2, end);
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--navBarBtn_Border);
|
||||
transition: 0.2s steps(2, end);
|
||||
}
|
||||
.switchDecor:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: calc(2px * var(--pxDensity));
|
||||
width: calc(2px * var(--pxDensity));
|
||||
left: calc(1px * var(--pxDensity));
|
||||
bottom: calc(1px * var(--pxDensity));
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
transition: 0.2s steps(2, end);
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: calc(2px * var(--pxDensity));
|
||||
width: calc(2px * var(--pxDensity));
|
||||
left: calc(1px * var(--pxDensity));
|
||||
bottom: calc(1px * var(--pxDensity));
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
transition: 0.2s steps(2, end);
|
||||
}
|
||||
.switch input:checked + .switchDecor {
|
||||
background-color: var(--brightBlue);
|
||||
background-color: var(--brightBlue);
|
||||
}
|
||||
.switch input:checked + .switchDecor:before {
|
||||
transform: translateX(calc(4px * var(--pxDensity)));
|
||||
transform: translateX(calc(4px * var(--pxDensity)));
|
||||
}
|
||||
#starNoise {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: calc(512px * var(--pxDensity));
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
image-rendering: pixelated;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: calc(512px * var(--pxDensity));
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
image-rendering: pixelated;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
+33
-33
@@ -1,43 +1,43 @@
|
||||
.bgDiv {
|
||||
background-color: #323232;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background-color: #323232;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
.loadingImg {
|
||||
position: absolute;
|
||||
top: round(50%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(32px * var(--pxDensity));
|
||||
height: calc(32px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
top: round(50%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
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%;}
|
||||
0% {opacity: 100%;}
|
||||
100% {opacity: 0%;}
|
||||
}
|
||||
#loadingCornerText {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#loadingText {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: calc(50vw - min(45vw, 250px));
|
||||
width: min(90vw, 500px);
|
||||
text-align: center;
|
||||
font-size: min(5vmin, 2vmax, 25px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: calc(50vw - min(45vw, 250px));
|
||||
width: min(90vw, 500px);
|
||||
text-align: center;
|
||||
font-size: min(5vmin, 2vmax, 25px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
}
|
||||
+45
-45
@@ -7,22 +7,22 @@ let fakeLoadingComplete = false
|
||||
|
||||
loadingScreenEl.className = "bgDiv"
|
||||
loadingScreenEl.innerHTML = `
|
||||
<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png" id="loadingImg">
|
||||
<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png" id="loadingImg">
|
||||
|
||||
<div style="margin-left: calc(3px * var(--pxDensity)); display: flex;" id="fakeLoadingToggle">
|
||||
<p class="encased" style="height: 100%; font-size: min(5vmin, 2vmax, 25px)">
|
||||
Use extended loading screen?<br>
|
||||
<small style="margin: 0px; font-size: min(5vmin, 2vmax, 10px)">(For immersion)</small>
|
||||
</p>
|
||||
<div class="encased" style="height: inherit; display: flex;">
|
||||
<label class="switch" style="margin: auto;">
|
||||
<input type="checkbox" name="fakeLoadingToggle" onclick="setShowLoading(this.checked)" ${localStorage["fakeLoading"] != "true" ? "" : "checked"}>
|
||||
<span class="switchDecor"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: calc(3px * var(--pxDensity)); display: flex;" id="fakeLoadingToggle">
|
||||
<p class="encased" style="height: 100%; font-size: min(5vmin, 2vmax, 25px)">
|
||||
Use extended loading screen?<br>
|
||||
<small style="margin: 0px; font-size: min(5vmin, 2vmax, 10px)">(For immersion)</small>
|
||||
</p>
|
||||
<div class="encased" style="height: inherit; display: flex;">
|
||||
<label class="switch" style="margin: auto;">
|
||||
<input type="checkbox" name="fakeLoadingToggle" onclick="setShowLoading(this.checked)" ${localStorage["fakeLoading"] != "true" ? "" : "checked"}>
|
||||
<span class="switchDecor"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
|
||||
<p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
|
||||
`
|
||||
|
||||
|
||||
@@ -32,9 +32,9 @@ let tipsJson
|
||||
|
||||
|
||||
async function loadTips() {
|
||||
let tipsText = await fetch("/data/loadingScreenTips.json").then(response => response.text())
|
||||
tipsJson = JSON.parse(tipsText)
|
||||
console.log(tipsJson)
|
||||
let tipsText = await fetch("/data/loadingScreenTips.json").then(response => response.text())
|
||||
tipsJson = JSON.parse(tipsText)
|
||||
console.log(tipsJson)
|
||||
}
|
||||
|
||||
|
||||
@@ -43,54 +43,54 @@ let selectedTip = "undefined"
|
||||
|
||||
|
||||
function newTip() {
|
||||
if (randomIntFrom0(1000) == 0) {
|
||||
// If you snitch the code for this easter egg
|
||||
// then I'll permanently remove the easter egg.
|
||||
selectedTip = `You like kissing boys, don't you?<br>
|
||||
<img src="/assets/boykissers/boykisser_64x64.png"
|
||||
style="aspect-ratio: 1 / 1; width: min-content; height: min-content;">`
|
||||
}
|
||||
else {
|
||||
selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
|
||||
}
|
||||
if (randomIntFrom0(1000) == 0) {
|
||||
// If you snitch the code for this easter egg
|
||||
// then I'll permanently remove the easter egg.
|
||||
selectedTip = `You like kissing boys, don't you?<br>
|
||||
<img src="/assets/boykissers/boykisser_64x64.png"
|
||||
style="aspect-ratio: 1 / 1; width: min-content; height: min-content;">`
|
||||
}
|
||||
else {
|
||||
selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
|
||||
}
|
||||
|
||||
debugPrint("new tip", selectedTip)
|
||||
}
|
||||
debugPrint("new tip", selectedTip)
|
||||
}
|
||||
|
||||
|
||||
function setLoadingProgress(newText) {
|
||||
loadingScreenProgress.innerHTML = `Loading...<br>${newText}<br><br>Tip: ${selectedTip}`
|
||||
loadingScreenProgress.innerHTML = `Loading...<br>${newText}<br><br>Tip: ${selectedTip}`
|
||||
}
|
||||
|
||||
function startLoadingScreen() {
|
||||
loadingScreenProgress.innerHTML = `Loading...<br><br>Tip: ${selectedTip}`
|
||||
|
||||
const loadDur = randomFloat(2000, 4000)
|
||||
debugPrint("loadDur initial", loadDur)
|
||||
debugPrint("loadDur initial", loadDur)
|
||||
|
||||
setTimeout(function() {
|
||||
if (loadingComplete) { removeLoadingScreen() }
|
||||
fakeLoadingComplete = true
|
||||
}, loadDur)
|
||||
if (loadingComplete) { removeLoadingScreen() }
|
||||
fakeLoadingComplete = true
|
||||
}, loadDur)
|
||||
}
|
||||
|
||||
|
||||
function removeLoadingScreen() {
|
||||
if (!isLoading) { return }
|
||||
if (!isLoading) { return }
|
||||
|
||||
setLoadingProgress("Done!")
|
||||
setLoadingProgress("Done!")
|
||||
|
||||
isLoading = false
|
||||
isLoading = false
|
||||
const fadeOutDur = 0.5
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.left = "100vw"
|
||||
newTip()
|
||||
}, fadeOutDur * 1000)
|
||||
}, 500)
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.left = "100vw"
|
||||
newTip()
|
||||
}, fadeOutDur * 1000)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
|
||||
|
||||
+36
-36
@@ -1,57 +1,57 @@
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
margin: calc(1px * var(--pxDensity));
|
||||
margin-bottom: calc(2px * var(--pxDensity));
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
margin: calc(1px * var(--pxDensity));
|
||||
margin-bottom: calc(2px * var(--pxDensity));
|
||||
}
|
||||
|
||||
.navBar {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 0px;
|
||||
width: max-content;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 0px;
|
||||
width: max-content;
|
||||
}
|
||||
.navBtn {
|
||||
background-color: transparent;
|
||||
display: inline-flex;
|
||||
padding: 0%;
|
||||
border: none;
|
||||
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
background-color: transparent;
|
||||
display: inline-flex;
|
||||
padding: 0%;
|
||||
border: none;
|
||||
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
button:hover {
|
||||
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: pointer;
|
||||
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: pointer;
|
||||
}
|
||||
button:active {
|
||||
filter: brightness(0.75);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
filter: brightness(0.75);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
}
|
||||
.button:disabled, button[disabled] {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.button:disabled:hover, button[disabled]:hover {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.button:disabled:active, button[disabled]:active {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
.navBtnImg {
|
||||
width: calc(12px * var(--pxDensity));
|
||||
height: calc(12px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
margin: 0%;
|
||||
width: calc(12px * var(--pxDensity));
|
||||
height: calc(12px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
margin: 0%;
|
||||
}
|
||||
.navBtnIcon {
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(8px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
margin: calc(2px * var(--pxDensity));
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(8px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
margin: calc(2px * var(--pxDensity));
|
||||
}
|
||||
+51
-51
@@ -4,76 +4,76 @@ let alts
|
||||
navBarPresent = true
|
||||
|
||||
function onLoadNavBar() {
|
||||
const container = document.getElementById("navBarContainer")
|
||||
const altString = container.dataset.alt || ""
|
||||
alts = altString.replaceAll(" ", "").split(",")
|
||||
const container = document.getElementById("navBarContainer")
|
||||
const altString = container.dataset.alt || ""
|
||||
alts = altString.replaceAll(" ", "").split(",")
|
||||
|
||||
debugPrint("Navbar alts", alts.join(", "));
|
||||
debugPrint("Navbar alts", alts.join(", "));
|
||||
|
||||
if (!container) { return }
|
||||
if (!container) { return }
|
||||
|
||||
const navBarAligner = document.createElement("div")
|
||||
navBarAligner.className = "navBarAligner"
|
||||
const navBarAligner = document.createElement("div")
|
||||
navBarAligner.className = "navBarAligner"
|
||||
|
||||
const navBar = document.createElement("ul")
|
||||
navBar.className = "navBar borderedRect"
|
||||
const navBar = document.createElement("ul")
|
||||
navBar.className = "navBar borderedRect"
|
||||
|
||||
|
||||
for (let btn of navBarJson) {
|
||||
createdBtn = createNavBarBtn(
|
||||
btn["icon"] || "",
|
||||
btn["action"] || "",
|
||||
btn["actionValue"] || "",
|
||||
btn["iconId"] || "",
|
||||
btn["alt"] || "",
|
||||
btn["disabled"] || false,
|
||||
btn["hidden"] || false
|
||||
)
|
||||
for (let btn of navBarJson) {
|
||||
createdBtn = createNavBarBtn(
|
||||
btn["icon"] || "",
|
||||
btn["action"] || "",
|
||||
btn["actionValue"] || "",
|
||||
btn["iconId"] || "",
|
||||
btn["alt"] || "",
|
||||
btn["disabled"] || false,
|
||||
btn["hidden"] || false
|
||||
)
|
||||
|
||||
if (createdBtn != null) {
|
||||
navBar.appendChild(createdBtn)
|
||||
}
|
||||
}
|
||||
if (createdBtn != null) {
|
||||
navBar.appendChild(createdBtn)
|
||||
}
|
||||
}
|
||||
|
||||
navBarAligner.appendChild(navBar)
|
||||
container.appendChild(navBarAligner)
|
||||
navBarAligner.appendChild(navBar)
|
||||
container.appendChild(navBarAligner)
|
||||
}
|
||||
|
||||
function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false, hidden = false) {
|
||||
if (alts.includes(alt["name"])) {
|
||||
icon = alt["icon"] || icon || ""
|
||||
action = alt["action"] || action || ""
|
||||
actionValue = alt["actionValue"] || actionValue || ""
|
||||
iconId = alt["iconId"] || iconId || ""
|
||||
if (alts.includes(alt["name"])) {
|
||||
icon = alt["icon"] || icon || ""
|
||||
action = alt["action"] || action || ""
|
||||
actionValue = alt["actionValue"] || actionValue || ""
|
||||
iconId = alt["iconId"] || iconId || ""
|
||||
|
||||
disabled = alt["disabled"] === undefined ? disabled : alt["disabled"] || false;
|
||||
hidden = alt["hidden"] || false;
|
||||
}
|
||||
disabled = alt["disabled"] === undefined ? disabled : alt["disabled"] || false;
|
||||
hidden = alt["hidden"] || false;
|
||||
}
|
||||
|
||||
let onClick
|
||||
switch (action) {
|
||||
case "navigate": onClick = `slideTransition('${actionValue}', event)`; break
|
||||
case "function": onClick = `${actionValue}`; break
|
||||
default: ""
|
||||
}
|
||||
let onClick
|
||||
switch (action) {
|
||||
case "navigate": onClick = `slideTransition('${actionValue}', event)`; break
|
||||
case "function": onClick = `${actionValue}`; break
|
||||
default: ""
|
||||
}
|
||||
|
||||
if (hidden) { return null; }
|
||||
if (hidden) { return null; }
|
||||
|
||||
let btn = document.createElement("li")
|
||||
let btn = document.createElement("li")
|
||||
|
||||
btn.innerHTML = `
|
||||
<button onclick="${onClick}" class="navBtn" ${disabled == true ? "disabled" : ""}>
|
||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
||||
<img class="navBtnIcon" draggable="false" src="/assets/icons/${icon}" id="${iconId}">
|
||||
</button>
|
||||
`
|
||||
btn.innerHTML = `
|
||||
<button onclick="${onClick}" class="navBtn" ${disabled == true ? "disabled" : ""}>
|
||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
||||
<img class="navBtnIcon" draggable="false" src="/assets/icons/${icon}" id="${iconId}">
|
||||
</button>
|
||||
`
|
||||
|
||||
return btn;
|
||||
return btn;
|
||||
}
|
||||
|
||||
async function loadNavBarJson() {
|
||||
let navBarText = await fetch("/data/navBar.json").then(response => response.text())
|
||||
navBarJson = JSON.parse(navBarText)
|
||||
console.log(navBarJson)
|
||||
let navBarText = await fetch("/data/navBar.json").then(response => response.text())
|
||||
navBarJson = JSON.parse(navBarText)
|
||||
console.log(navBarJson)
|
||||
}
|
||||
|
||||
|
||||
+7
-7
@@ -8,15 +8,15 @@ let densityWidth = document.documentElement.clientWidth / pxWidth
|
||||
let densityHeight = document.documentElement.clientHeight / pxHeight
|
||||
|
||||
function calcPixelDensity() {
|
||||
densityWidth = document.documentElement.clientWidth / pxWidth
|
||||
densityHeight = document.documentElement.clientHeight / pxHeight
|
||||
densityWidth = document.documentElement.clientWidth / pxWidth
|
||||
densityHeight = document.documentElement.clientHeight / pxHeight
|
||||
|
||||
let widest = Math.max(densityWidth, densityHeight)
|
||||
let widest = Math.max(densityWidth, densityHeight)
|
||||
|
||||
document.documentElement.style.setProperty("--pxDensity", widest)
|
||||
document.documentElement.style.setProperty("--pxDensityPx", `${widest}px`)
|
||||
document.documentElement.style.setProperty("--pxDensity", widest)
|
||||
document.documentElement.style.setProperty("--pxDensityPx", `${widest}px`)
|
||||
|
||||
pxDensity = widest
|
||||
pxDensity = widest
|
||||
|
||||
pxDensityDefined = true
|
||||
pxDensityDefined = true
|
||||
}
|
||||
+32
-32
@@ -2,48 +2,48 @@ let loadingScreen = document.getElementById("loadingScreen")
|
||||
let mainDiv = document.getElementById("mainDiv")
|
||||
|
||||
function slideTransition(url, event) {
|
||||
const ctrlPressed = event.ctrlKey
|
||||
let dur = 500
|
||||
let loadingTime = randomFloat(500, 1500)
|
||||
const ctrlPressed = event.ctrlKey
|
||||
let dur = 500
|
||||
let loadingTime = randomFloat(500, 1500)
|
||||
|
||||
if (localStorage["fakeLoading"] != "true") { dur = 500; loadingTime = 0; }
|
||||
if (localStorage["fakeLoading"] != "true") { dur = 500; loadingTime = 0; }
|
||||
|
||||
debugPrint("loadDur transition", loadingTime)
|
||||
debugPrint("loadDur transition", loadingTime)
|
||||
|
||||
const slideLeft = `slide-left ${dur / 1000}s cubic-bezier(0, 0, 0, 1.46) forwards`
|
||||
const slideLeft = `slide-left ${dur / 1000}s cubic-bezier(0, 0, 0, 1.46) forwards`
|
||||
|
||||
loadingScreen.style.animation = slideLeft
|
||||
loadingScreen.style.pointerEvents = "auto"
|
||||
mainDiv.style.animation = slideLeft
|
||||
loadingScreen.style.animation = slideLeft
|
||||
loadingScreen.style.pointerEvents = "auto"
|
||||
mainDiv.style.animation = slideLeft
|
||||
|
||||
setLoadingProgress(`Loading URL "${url}"`)
|
||||
setLoadingProgress(`Loading URL "${url}"`)
|
||||
|
||||
setTimeout(function() {
|
||||
setLoadingProgress("Done!")
|
||||
setTimeout(function() {
|
||||
if (ctrlPressed) {
|
||||
window.open(url, "_blank")
|
||||
}
|
||||
else if (url.startsWith("http")) {
|
||||
window.open(url, "_blank").focus()
|
||||
}
|
||||
else {
|
||||
document.location = url
|
||||
}
|
||||
setTimeout(function() {
|
||||
setLoadingProgress("Done!")
|
||||
setTimeout(function() {
|
||||
if (ctrlPressed) {
|
||||
window.open(url, "_blank")
|
||||
}
|
||||
else if (url.startsWith("http")) {
|
||||
window.open(url, "_blank").focus()
|
||||
}
|
||||
else {
|
||||
document.location = url
|
||||
}
|
||||
|
||||
resetLoadingScreen()
|
||||
}, loadingTime)
|
||||
}, dur + loadingTime)
|
||||
resetLoadingScreen()
|
||||
}, loadingTime)
|
||||
}, dur + loadingTime)
|
||||
}
|
||||
|
||||
function resetLoadingScreen() {
|
||||
const fadeOutDur = 0.5
|
||||
const fadeOutDur = 0.5
|
||||
|
||||
loadingScreen.style.left = "0vw"
|
||||
loadingScreen.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
mainDiv.style.animation = "none"
|
||||
loadingScreen.style.left = "0vw"
|
||||
loadingScreen.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
mainDiv.style.animation = "none"
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreen.style.left = "100vw"
|
||||
}, fadeOutDur * 1000)
|
||||
setTimeout(function() {
|
||||
loadingScreen.style.left = "100vw"
|
||||
}, fadeOutDur * 1000)
|
||||
}
|
||||
Reference in New Issue
Block a user