organized global files
This commit is contained in:
@@ -0,0 +1,176 @@
|
||||
const PAGES = {
|
||||
null: -1,
|
||||
SYNTHWAVE: 0,
|
||||
}
|
||||
|
||||
let CURRENT_PAGE = PAGES.null
|
||||
|
||||
let isAnimating = true
|
||||
let gridVisible = false
|
||||
|
||||
function randomFloat(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
|
||||
function randomIntFrom0(max) {
|
||||
return Math.floor(Math.random() * max)
|
||||
}
|
||||
|
||||
|
||||
function randomInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
function lerp(x, y, t) {
|
||||
return x + t * (y - x)
|
||||
}
|
||||
|
||||
|
||||
function toggleGrid() {
|
||||
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 = "0%"
|
||||
canvasEl.style.left = "0%"
|
||||
canvasEl.style.pointerEvents = "none"
|
||||
|
||||
let ctx = canvasEl.getContext("2d")
|
||||
|
||||
document.body.appendChild(canvasEl)
|
||||
|
||||
let repeatCountX = window.innerWidth / pxDensity
|
||||
let repeatCountY = window.innerHeight / pxDensity
|
||||
|
||||
ctx.strokeStyle = "#ff0000"
|
||||
ctx.beginPath()
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
ctx.stroke()
|
||||
|
||||
gridVisible = true
|
||||
}
|
||||
|
||||
|
||||
function pauseAnimBtn(state) {
|
||||
if (state == "auto") {
|
||||
if (localStorage["isAnimating"] == "true") { localStorage["isAnimating"] = "false" }
|
||||
else { localStorage["isAnimating"] = "true" }
|
||||
|
||||
state = localStorage["isAnimating"]
|
||||
}
|
||||
|
||||
let pauseBtn = document.getElementById("animationToggle")
|
||||
|
||||
if (state == "true") {
|
||||
isAnimating = true
|
||||
pauseBtn.src = "./assets/icons/pauseAnimation_8x8.png"
|
||||
}
|
||||
else {
|
||||
isAnimating = false
|
||||
pauseBtn.src = "./assets/icons/playAnimation_8x8.png"
|
||||
}
|
||||
|
||||
localStorage["isAnimating"] = state
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
startLoadingScreen()
|
||||
|
||||
setLoadingProgress("Fetching tips...")
|
||||
|
||||
await loadTips()
|
||||
|
||||
newTip()
|
||||
|
||||
setLoadingProgress("Calculating pixel density...")
|
||||
calcPixelDensity()
|
||||
console.log("pxDensity: " + getComputedStyle(document.body).getPropertyValue("--pxDensity"))
|
||||
|
||||
if (densityWidth > densityHeight) { console.log("pxDensity Direction: Width, " + densityWidth) }
|
||||
else { console.log("pxDensity Direction: Height, " + densityHeight) }
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): loadingScreenSynthwave()
|
||||
}
|
||||
|
||||
pauseAnimBtn(localStorage["isAnimating"] || "true")
|
||||
|
||||
if (showLoading != "true") {
|
||||
removeLoadingScreen()
|
||||
}
|
||||
else {
|
||||
setLoadingProgress("Cleaning up...")
|
||||
}
|
||||
}, false)
|
||||
|
||||
|
||||
window.addEventListener("resize", function() {
|
||||
calcPixelDensity()
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): onResizeSynthwave()
|
||||
}
|
||||
|
||||
if (gridVisible) {
|
||||
toggleGrid()
|
||||
toggleGrid()
|
||||
}
|
||||
})
|
||||
|
||||
let prevAnimationState = isAnimating
|
||||
|
||||
|
||||
document.addEventListener("visibilitychange", function() {
|
||||
if (document.hidden) {
|
||||
prevAnimationState = isAnimating;
|
||||
isAnimating = false;
|
||||
}
|
||||
else {
|
||||
isAnimating = prevAnimationState;
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
window.addEventListener("blur", function() {
|
||||
if (document.visibilityState === "visible") {
|
||||
prevAnimationState = isAnimating;
|
||||
isAnimating = false;
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
window.addEventListener("focus", function() {
|
||||
if (!document.hidden) {
|
||||
isAnimating = prevAnimationState;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
--navBar_Inner: #43608D;
|
||||
--navBar_Border: #2F3E56;
|
||||
--navBarBtn_Inner: #474747;
|
||||
--navBarBtn_Border: #232323;
|
||||
--pxDensity: 1;
|
||||
--pxDensityPx: 1px;
|
||||
--bottomPxMargin: 1px;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pxFont {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.bgDiv {
|
||||
background-color: #323232;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@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;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#loadingText {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: calc(50% - 40vw);
|
||||
width: 80vw;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
let isLoading = true
|
||||
let stopLoading = false
|
||||
let loadingScreenProgress = document.getElementById("loadingText")
|
||||
let loadingScreenEl = document.getElementById("loadingScreen")
|
||||
|
||||
|
||||
let tipsJson
|
||||
|
||||
|
||||
async function loadTips() {
|
||||
let tipsText = await fetch("./data/loadingScreenTips.json").then(response => response.text())
|
||||
tipsJson = JSON.parse(tipsText)
|
||||
}
|
||||
|
||||
|
||||
const showLoading = localStorage["showLoading"] || "true"
|
||||
let selectedTip = "undefined"
|
||||
|
||||
|
||||
function newTip() {
|
||||
selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
|
||||
}
|
||||
|
||||
|
||||
function setLoadingProgress(newText) {
|
||||
loadingScreenProgress.innerHTML = `Loading...<br>${newText}<br><br>Tip: ${selectedTip}`
|
||||
}
|
||||
|
||||
|
||||
function startLoadingScreen() {
|
||||
loadingScreenProgress.innerHTML = `Loading...<br><br>Tip: ${selectedTip}`
|
||||
|
||||
const loadDur = randomFloat(3000, 6000)
|
||||
|
||||
setTimeout(removeLoadingScreen, loadDur)
|
||||
}
|
||||
|
||||
|
||||
function removeLoadingScreen() {
|
||||
if (!isLoading) { return }
|
||||
|
||||
setLoadingProgress("Done!")
|
||||
|
||||
isLoading = false
|
||||
const fadeOutDur = 0.5
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.left = "100vw"
|
||||
loadingScreenEl.style.pointerEvents = "none"
|
||||
document.getElementById("loadingCornerText").remove()
|
||||
newTip()
|
||||
}, fadeOutDur * 1000)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
|
||||
function stopShowingLoading() {
|
||||
localStorage["showLoading"] = false
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.key === "Escape") {
|
||||
removeLoadingScreen()
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,52 @@
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
margin: calc(1px * var(--pxDensity));
|
||||
margin-bottom: calc(2px * var(--pxDensity));
|
||||
}
|
||||
|
||||
.navBar {
|
||||
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%;
|
||||
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));
|
||||
}
|
||||
.navBtn:hover {
|
||||
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: pointer;
|
||||
}
|
||||
.navBtn:active {
|
||||
filter: brightness(0.75);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
}
|
||||
.navBtnImg {
|
||||
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));
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
let pxDensity = parseFloat(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
|
||||
let pxDensityDefined = false
|
||||
|
||||
let densityWidth = document.documentElement.clientWidth / 256
|
||||
let densityHeight = document.documentElement.clientHeight / 164
|
||||
|
||||
function calcPixelDensity() {
|
||||
densityWidth = document.documentElement.clientWidth / 256
|
||||
densityHeight = document.documentElement.clientHeight / 164
|
||||
|
||||
let widest = Math.max(densityWidth, densityHeight)
|
||||
|
||||
document.documentElement.style.setProperty("--pxDensity", widest)
|
||||
document.documentElement.style.setProperty("--pxDensityPx", `${widest}px`)
|
||||
|
||||
pxDensity = parseFloat(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
|
||||
|
||||
pxDensityDefined = true
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
function slideTransition(url) {
|
||||
const dur = 0.5
|
||||
const loadingTime = 1.0
|
||||
|
||||
const slideLeft = `slide-left ${dur}s cubic-bezier(0, 0, 0, 1.46) forwards`
|
||||
|
||||
let loadingScreen = document.getElementById("loadingScreen")
|
||||
let mainDiv = document.getElementById("mainDiv")
|
||||
|
||||
loadingScreen.style.animation = slideLeft
|
||||
loadingScreen.style.pointerEvents = "auto"
|
||||
mainDiv.style.animation = slideLeft
|
||||
|
||||
setLoadingProgress(`Loading URL "${url}"`)
|
||||
|
||||
setTimeout(function() {
|
||||
setLoadingProgress("Done!")
|
||||
setTimeout(function() { document.location = url }, loadingTime * 1000)
|
||||
}, (dur + loadingTime) * 1000)
|
||||
}
|
||||
Reference in New Issue
Block a user