diff --git a/main.js b/main.js index 7b88c45..57f7a6c 100644 --- a/main.js +++ b/main.js @@ -1,49 +1,60 @@ import "./style.css"; -let msCurrent = 0; -let msToComplete = 30e3; +let start; // Date.now() +let end; // Date.now() + duration -let lastProgress = 0; -let progress = 0; -let started = false; - -let timeout; +let progress = 0; // Percentage displayed on BSoD +let interval; // The updateProgress() interval +let intervalsToWait = 0; // Intervals to pause updating progress. +let intervalsToZoom = 0; // Intervals to not pause updating progress. let fullscreened = false; function updateProgress() { - if (msToComplete <= msCurrent) { - document.querySelector("#progress-percentage").textContent = "100"; - console.log("BSOD done!"); - timeout = setTimeout(() => { - document.querySelector("main").style.setProperty("display", "none"); - document.body.style.removeProperty("background-color"); - if (fullscreened) { - const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen; - exitFullscreen.call(document); - } - }, 2000); - } else { - const rand = (msToComplete - msCurrent) > 1000 - ? Math.floor(((Math.random() * Math.min((msToComplete / 2), 10000)) - 1000) + 1000) - : 1000; - - if (started) { - lastProgress = progress; - progress = Math.max( - Math.min((msCurrent / msToComplete * (((Math.random() * 0.5) + 0.5) * 100)) + ((Math.random() * 10) - 5), 99), - lastProgress, // Make sure progress is always going up… - ); - } else { - progress = 0; - started = true; + interval = setInterval(() => { + const current = Date.now(); + + if (current >= end) { + progress = 100; + document.querySelector("#progress-percentage").textContent = "100"; + console.log("BSOD done!"); + clearInterval(interval); + + setTimeout(() => { + document.querySelector("main").style.setProperty("display", "none"); + document.body.style.removeProperty("background-color"); + if (fullscreened) { + const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen; + exitFullscreen.call(document); + } + }, 1000); + } + + if (intervalsToZoom >= 1) { + intervalsToZoom--; + } else if (intervalsToWait >= 1) { + intervalsToWait--; + return; } - msCurrent += rand; + const percent = (current - start) / (end - start); + const percentSquared = percent ** 2; + progress = Math.min(100, Math.max( + 100 * ((percentSquared / ((2 * (percentSquared - percent)) + 1)) + ((Math.random() * 0.1) - 0.08)), + progress, // Make sure progress doesn't go down + )); - document.querySelector("#progress-percentage").textContent = String(Math.floor(progress)); - timeout = setTimeout(updateProgress, rand); - } + if (Math.random() * percent > 0.6) { + intervalsToZoom = Math.round(Math.random() * 10) + 1; + console.log("zooming " + intervalsToZoom); + } else { + intervalsToWait = Math.round((Math.random() * (Math.min(((end - current) / 100) - 10, 75) + 10))); + console.log("waiting " + intervalsToWait); + } + + document.querySelector("#progress-percentage").textContent = progress.toFixed(0); + console.log(intervalsToWait, intervalsToZoom, percent); + }, 100); } // Changing background and theme color (affects iOS) @@ -56,13 +67,15 @@ document.getElementsByName("bg-color").forEach(element => { }); }); +// Starting the BSOD document.querySelector("#create").addEventListener("click", () => { - console.group("BSOD at " + Date.now()); - msCurrent = 0; - msToComplete = document.querySelector("input[name='length']").value * 1000 || 30000; - started = false; + start = Date.now(); + const duration = document.querySelector("input[name='length']") + .valueAsNumber * 1000 || 30e3; + end = start + duration; + console.group("BSOD at " + start); - console.log("Blue screening for " + msToComplete + "ms"); + console.log("Blue screening for " + duration + "ms"); // Setting background and theme color again, just in case document.getElementsByName("bg-color").forEach(element => { @@ -83,6 +96,13 @@ document.querySelector("#create").addEventListener("click", () => { console.log(bsodElement, inputValue); bsodElement.textContent = inputValue; }); + + // Resetting variables/text + document.querySelector("#progress-percentage").textContent = 0; + progress = 0; + intervalsToWait = Math.min(10, Math.floor(duration / 200)); + intervalsToZoom = 0; + console.groupEnd(1); const bsodElement = document.querySelector("main"); @@ -98,14 +118,12 @@ document.querySelector("#create").addEventListener("click", () => { } bsodElement.style.setProperty("display", "flex"); - updateProgress(); }); // Cancelling BSOD function cancelBSOD() { - msCurrent = 0; - clearTimeout(timeout); + clearInterval(interval); document.querySelector("main").style.setProperty("display", "none"); document.body.style.removeProperty("background-color"); console.log("BSOD cancelled."); @@ -137,5 +155,6 @@ if ( /iPad/.test(navigator.platform) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ) { - document.querySelector("#ios-warning").style.setProperty("display", "block"); + const iosWarning = document.querySelector("#ios-warning"); + iosWarning.style.setProperty("display", "block"); }