diff --git a/.cpanel.yml b/.cpanel.yml index b0ea774..eda19e0 100644 --- a/.cpanel.yml +++ b/.cpanel.yml @@ -1,6 +1,6 @@ --- deployment: - tasks: - # $DEPLOYPATH needs to be initialized - - source ~/.bash_profile - - /bin/cp -R * $DEPLOYPATH \ No newline at end of file + tasks: + # $DEPLOYPATH needs to be initialized + - source ~/.bash_profile + - /bin/cp -R * $DEPLOYPATH \ No newline at end of file diff --git a/.gitignore b/.gitignore deleted file mode 100644 index dbe9c82..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.vscode/ \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6641be9 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "editor.tabSize": 2, + "editor.insertSpaces": false, + "editor.detectIndentation": false +} diff --git a/data/loadingScreenTips.json b/data/loadingScreenTips.json index 53c0bc1..c1da1c9 100644 --- a/data/loadingScreenTips.json +++ b/data/loadingScreenTips.json @@ -1,70 +1,70 @@ [ - "Just don't die.", - "15% | 20% | 25% | no tip :(", - "Is thisn't not un-veryn't un-understandable?", - "mmmmmmmmmmmmmmmmmmmmmicrowave sounds.", - "Bad at a game? Skill issue, git gud.", - "I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)", - "There's a really good song that goes like \"do do do do do do do do do.\"", - "The real tip was the friends you made along the way.", - "Nothing suspicious here... keep scrolling.", - "Did you know that... uh... hold on, let me think... I don't know, I forgot.", - "Remember that one task you're avoiding? Yeah, keep avoiding it and stay on this epic website.", - "I use Gentoo, btw. (Take that, Arch users!)", - "This tip took 3 hours to write.", - "Water is wet.", - "Why is it called a 'loading screen' if the screen has already loaded?", - "Look at you go, reading these tips like a pro so I didn't waste my time!", - "If this ever reappears, pretend to be extremely surprised.", - "Private tip. Anyone who reads will be executed on the spot.", - "Why do we park on driveways and drive on parkways?", - "If a progress bar ever stops, yell \"MOVE!\" as loud as you can.", - "You are now breathing manually.", - "If you're reading this, congratulations, you can read!", - "bytedice.net/toys", - "Loading...", - "Bees communicate through twerking.", - "Stop breathing! you're addicted!", - "How do wireless signals work?", - "A wise person once said something important. This is not that.", - "Why do they call it oven when you of in the cold food and of out hot eat the food?", - "Sometimes when I think really hard, I get an idea. Most of the time, I don't.", - "Why is it called a 'building' if it's already built?", - "Run.", - "Rubber duckies are geniuses. Don't believe me? Talk to one yourself.", - "It works on my machine.", - "If you think about it, sandwiches are just edible plates.", - "The word \"Loading\" backward is \"gnidaoL\". I don't know what that means.", - "This tip is non-edible.", - "Shoes are technically portable floors.", - "Why did Isaac Newton ruin the world by inventing gravity and thus disabling our flight?", - "It's better to pee in the shower than to shower in the pee.", - "Why does your nose run but your feet smell?", - "Fish.", "VGhpcyBpcyBub3QgYW4gQVJHLi4uIG9yIGlzIGl0PyAqVlNhdWNlIG11c2ljIHN0YXJ0cyBwbGF5aW5nLio=", - "Don't trust stairs. They're always up to something.", - "You can't fail at life if you define success as simply existing.", - "You've never seen your neighbors bring in their groceries, have you?", - "When you clean out a vacuum cleaner, you become the vacuum cleaner.", - "Bread is just a loaf of edible sponge.", - "Sponge is just a piece of inedible bread.", - "When life gives you lemons, hand them back and ask for chocolate instead.", - "[Under review for potential treason.]", - "Tomatoes are fruit, which makes ketchup a smoothie.", - "Shork gumey.", - "You just lost the game.", - "H", - "A sandwich walks into a bar. The bartender says, 'Sorry, we don't serve food here.'", - "This website is sponsored by bytedice.net!", - "Waffles are pancakes with abs.", - "Opening the fridge again will not spawn more food.", - "A spoon is just a tiny bowl on a stick.", - "What's red and smells like blue paint? Red paint.", - "Ɛ:", - ":3", - "Is it gay to be homosexual?", - "Rust. No, not C++ or Java. Rust. Only Rust.", - "My eyes are up here, buddy.", - "The word 'bed' looks like a bed.", - "The word 'queue' is just the letter Q followed silent letters standing in a queue.", - "Press escape then write `:q!` to exit VIM." + "Just don't die.", + "15% | 20% | 25% | no tip :(", + "Is thisn't not un-veryn't un-understandable?", + "mmmmmmmmmmmmmmmmmmmmmicrowave sounds.", + "Bad at a game? Skill issue, git gud.", + "I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)", + "There's a really good song that goes like \"do do do do do do do do do.\"", + "The real tip was the friends you made along the way.", + "Nothing suspicious here... keep scrolling.", + "Did you know that... uh... hold on, let me think... I don't know, I forgot.", + "Remember that one task you're avoiding? Yeah, keep avoiding it and stay on this epic website.", + "I use Gentoo, btw. (Take that, Arch users!)", + "This tip took 3 hours to write.", + "Water is wet.", + "Why is it called a 'loading screen' if the screen has already loaded?", + "Look at you go, reading these tips like a pro so I didn't waste my time!", + "If this ever reappears, pretend to be extremely surprised.", + "Private tip. Anyone who reads will be executed on the spot.", + "Why do we park on driveways and drive on parkways?", + "If a progress bar ever stops, yell \"MOVE!\" as loud as you can.", + "You are now breathing manually.", + "If you're reading this, congratulations, you can read!", + "bytedice.net/toys", + "Loading...", + "Bees communicate through twerking.", + "Stop breathing! you're addicted!", + "How do wireless signals work?", + "A wise person once said something important. This is not that.", + "Why do they call it oven when you of in the cold food and of out hot eat the food?", + "Sometimes when I think really hard, I get an idea. Most of the time, I don't.", + "Why is it called a 'building' if it's already built?", + "Run.", + "Rubber duckies are geniuses. Don't believe me? Talk to one yourself.", + "It works on my machine.", + "If you think about it, sandwiches are just edible plates.", + "The word \"Loading\" backward is \"gnidaoL\". I don't know what that means.", + "This tip is non-edible.", + "Shoes are technically portable floors.", + "Why did Isaac Newton ruin the world by inventing gravity and thus disabling our flight?", + "It's better to pee in the shower than to shower in the pee.", + "Why does your nose run but your feet smell?", + "Fish.", "VGhpcyBpcyBub3QgYW4gQVJHLi4uIG9yIGlzIGl0PyAqVlNhdWNlIG11c2ljIHN0YXJ0cyBwbGF5aW5nLio=", + "Don't trust stairs. They're always up to something.", + "You can't fail at life if you define success as simply existing.", + "You've never seen your neighbors bring in their groceries, have you?", + "When you clean out a vacuum cleaner, you become the vacuum cleaner.", + "Bread is just a loaf of edible sponge.", + "Sponge is just a piece of inedible bread.", + "When life gives you lemons, hand them back and ask for chocolate instead.", + "[Under review for potential treason.]", + "Tomatoes are fruit, which makes ketchup a smoothie.", + "Shork gumey.", + "You just lost the game.", + "H", + "A sandwich walks into a bar. The bartender says, 'Sorry, we don't serve food here.'", + "This website is sponsored by bytedice.net!", + "Waffles are pancakes with abs.", + "Opening the fridge again will not spawn more food.", + "A spoon is just a tiny bowl on a stick.", + "What's red and smells like blue paint? Red paint.", + "Ɛ:", + ":3", + "Is it gay to be homosexual?", + "Rust. No, not C++ or Java. Rust. Only Rust.", + "My eyes are up here, buddy.", + "The word 'bed' looks like a bed.", + "The word 'queue' is just the letter Q followed silent letters standing in a queue.", + "Press escape then write `:q!` to exit VIM." ] \ No newline at end of file diff --git a/data/navBar.json b/data/navBar.json index 7d240dd..3547d93 100644 --- a/data/navBar.json +++ b/data/navBar.json @@ -1,24 +1,24 @@ [ - { - "icon": "youtube_8x8.png", - "action": "navigate", - "actionValue": "https://youtube.com/@ByteDice" - }, - { - "icon": "github_8x8.png", - "action": "navigate", - "actionValue": "https://github.com/ByteDice" - }, - { - "hidden": true, - "alt": { - "name": "byte", - "icon": "dice3_8x8.png", - "action": "navigate", - "actionValue": "/", - "disabled": false - } - }, + { + "icon": "youtube_8x8.png", + "action": "navigate", + "actionValue": "https://youtube.com/@ByteDice" + }, + { + "icon": "github_8x8.png", + "action": "navigate", + "actionValue": "https://github.com/ByteDice" + }, + { + "hidden": true, + "alt": { + "name": "byte", + "icon": "dice3_8x8.png", + "action": "navigate", + "actionValue": "/", + "disabled": false + } + }, { "hidden": true, "alt": { @@ -39,15 +39,15 @@ "disabled": false } }, - { - "icon": "pauseAnimation_8x8.png", - "action": "function", - "actionValue": "pauseAnimBtn('auto')", - "iconId": "animationToggle", - "hidden": false, - "alt": { - "name": "noAnim", - "hidden": true + { + "icon": "pauseAnimation_8x8.png", + "action": "function", + "actionValue": "pauseAnimBtn('auto')", + "iconId": "animationToggle", + "hidden": false, + "alt": { + "name": "noAnim", + "hidden": true } - } + } ] \ No newline at end of file diff --git a/global/globalScript.js b/global/globalScript.js index a7b77e3..574fa63 100644 --- a/global/globalScript.js +++ b/global/globalScript.js @@ -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 + } }) */ \ No newline at end of file diff --git a/global/globalStyle.css b/global/globalStyle.css index 4a8d7b9..4df0fe6 100644 --- a/global/globalStyle.css +++ b/global/globalStyle.css @@ -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%); } \ No newline at end of file diff --git a/global/loadingScreen.css b/global/loadingScreen.css index f1c6a2c..af2a1db 100644 --- a/global/loadingScreen.css +++ b/global/loadingScreen.css @@ -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; } \ No newline at end of file diff --git a/global/loadingScreen.js b/global/loadingScreen.js index db2a544..b7c8013 100644 --- a/global/loadingScreen.js +++ b/global/loadingScreen.js @@ -7,22 +7,22 @@ let fakeLoadingComplete = false loadingScreenEl.className = "bgDiv" loadingScreenEl.innerHTML = ` - + -
-

- Use extended loading screen?
- (For immersion) -

-
- -
-
+
+

+ Use extended loading screen?
+ (For immersion) +

+
+ +
+
-

Loading...
Loading files...

Tip: Tip loading...

+

Loading...
Loading files...

Tip: Tip loading...

` @@ -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?
- ` - } - 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?
+ ` + } + else { + selectedTip = tipsJson[randomIntFrom0(tipsJson.length)] + } - debugPrint("new tip", selectedTip) -} + debugPrint("new tip", selectedTip) +} function setLoadingProgress(newText) { - loadingScreenProgress.innerHTML = `Loading...
${newText}

Tip: ${selectedTip}` + loadingScreenProgress.innerHTML = `Loading...
${newText}

Tip: ${selectedTip}` } function startLoadingScreen() { loadingScreenProgress.innerHTML = `Loading...

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) } diff --git a/global/navBar.css b/global/navBar.css index 84a26b9..66482ed 100644 --- a/global/navBar.css +++ b/global/navBar.css @@ -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)); } \ No newline at end of file diff --git a/global/navBar.js b/global/navBar.js index 7f8fc82..feced4b 100644 --- a/global/navBar.js +++ b/global/navBar.js @@ -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 = ` - - ` + btn.innerHTML = ` + + ` - 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) } diff --git a/global/pxDensity.js b/global/pxDensity.js index 4fc4cc4..670951a 100644 --- a/global/pxDensity.js +++ b/global/pxDensity.js @@ -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 } \ No newline at end of file diff --git a/global/screenTransition.js b/global/screenTransition.js index 71cb7e6..c74e1d2 100644 --- a/global/screenTransition.js +++ b/global/screenTransition.js @@ -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) } \ No newline at end of file diff --git a/libs/index.html b/libs/index.html index 48c06e6..cba8d3f 100644 --- a/libs/index.html +++ b/libs/index.html @@ -2,64 +2,64 @@ - - + + - - - - + + + + - - Byte Dice - Libs + + Byte Dice - Libs - - + + - - - + + + - - - - + + + + -
+
- + -
+
+ + + -
+
- - - - - - + + + + + + - - + + diff --git a/libs/style.css b/libs/style.css index 4c3df23..f59689a 100644 --- a/libs/style.css +++ b/libs/style.css @@ -1,54 +1,54 @@ .libContainer { - border: none; - display: grid; + border: none; + display: grid; width: 100%; max-height: calc(39px * var(--pxDensity)); - grid-template-columns: calc(24px * var(--pxDensity)) 1fr; - grid-template-rows: 1fr auto; - color: inherit; + grid-template-columns: calc(24px * var(--pxDensity)) 1fr; + grid-template-rows: 1fr auto; + color: inherit; } .libImg { - image-rendering: pixelated; - overflow: hidden; - width: 100%; - height: 100%; + image-rendering: pixelated; + overflow: hidden; + width: 100%; + height: 100%; object-fit: contain; - margin: auto auto; + margin: auto auto; } .libSrcContainer { background-color: var(--navBar_SecondInner); - padding: calc(1px * var(--pxDensity)); - border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border); - text-align: left; - overflow-x: hidden; + padding: calc(1px * var(--pxDensity)); + border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border); + text-align: left; + overflow-x: hidden; grid-column: 1 / -1; grid-row: 2; } .libTextContainer { - background-color: var(--navBar_SecondInner); - padding: calc(1px * var(--pxDensity)); - border-left: calc(1px * var(--pxDensity)) solid var(--navBar_Border); - text-align: left; - overflow-y: scroll; - overflow-x: hidden; - height: calc(100% - (2px * var(--pxDensity))); + background-color: var(--navBar_SecondInner); + padding: calc(1px * var(--pxDensity)); + border-left: calc(1px * var(--pxDensity)) solid var(--navBar_Border); + text-align: left; + overflow-y: scroll; + overflow-x: hidden; + height: calc(100% - (2px * var(--pxDensity))); } h1 { - font-size: max(1.2em, 2.5vmin); - margin: 0%; - margin-bottom: calc(1px * var(--pxDensity)); + font-size: max(1.2em, 2.5vmin); + margin: 0%; + margin-bottom: calc(1px * var(--pxDensity)); } .desc { - font-size: max(1em, 2vmin); - margin: 0%; + font-size: max(1em, 2vmin); + margin: 0%; } button:hover { - filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); - cursor: pointer; + filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); + cursor: pointer; } button:active { - filter: brightness(0.85); - transform: translateY(calc(1px * var(--pxDensity))); + filter: brightness(0.85); + transform: translateY(calc(1px * var(--pxDensity))); } .libUl { padding: calc(3px * var(--pxDensity)); @@ -60,9 +60,9 @@ button:active { .libUl { grid-template-columns: 1fr !important; } } .libLi { - margin: 0; + margin: 0; } ul { - margin: 0%; - padding: 0%; + margin: 0%; + padding: 0%; } \ No newline at end of file diff --git a/script.js b/script.js index 7839403..734b3dd 100644 --- a/script.js +++ b/script.js @@ -1,23 +1,23 @@ CURRENT_PAGE = PAGES.SYNTHWAVE function loadingScreenSynthwave() { - setLoadingProgress("Adding stars...") - addStars() + setLoadingProgress("Adding stars...") + addStars() - setLoadingProgress("Starting starfall animation...") - startStarfall() + setLoadingProgress("Starting starfall animation...") + startStarfall() - setLoadingProgress("Starting synthwave animation...") - defShaderMaterial() - preAnimateSynthwave(25) - animateSynthwave(0) + setLoadingProgress("Starting synthwave animation...") + defShaderMaterial() + preAnimateSynthwave(25) + animateSynthwave(0) } function onResizeSynthwave() { - renderer.setSize(window.innerWidth, window.innerHeight) - composer.setSize(window.innerWidth, window.innerHeight) - camera.aspect = window.innerWidth / window.innerHeight - camera.updateProjectionMatrix() - if (shaderMaterial) { updateShaderMatPxDensity() } + renderer.setSize(window.innerWidth, window.innerHeight) + composer.setSize(window.innerWidth, window.innerHeight) + camera.aspect = window.innerWidth / window.innerHeight + camera.updateProjectionMatrix() + if (shaderMaterial) { updateShaderMatPxDensity() } } \ No newline at end of file diff --git a/stars.js b/stars.js index d6d5427..a71ba56 100644 --- a/stars.js +++ b/stars.js @@ -8,78 +8,78 @@ const starfallCtx = starfallCanvas.getContext("2d") class Starfall { - constructor() { - this.pos = {x: 0, y: 0} - this.vel = {x: 0, y: 0} - } + constructor() { + this.pos = {x: 0, y: 0} + this.vel = {x: 0, y: 0} + } - generate() { - const dir = randomBool(0.5) - this.pos.x = dir ? -50 : pxWidth + 50 - this.pos.y = randomInt(-starfallCanvas.height / 2, starfallCanvas.height / 2) - this.vel.x = dir ? randomFloat(240, 580) : randomFloat(-580, -240) - this.vel.y = randomFloat(20, 80) - } + generate() { + const dir = randomBool(0.5) + this.pos.x = dir ? -50 : pxWidth + 50 + this.pos.y = randomInt(-starfallCanvas.height / 2, starfallCanvas.height / 2) + this.vel.x = dir ? randomFloat(240, 580) : randomFloat(-580, -240) + this.vel.y = randomFloat(20, 80) + } - draw() { + draw() { const LEN_X = this.vel.x / 15 const LEN_Y = this.vel.y / 15 - // very expensive but idk how to make it less expensive (thanks canvas) - drawPixelLine( - this.pos.x, - this.pos.y, - this.pos.x - LEN_X, - this.pos.y - LEN_Y - ) - } + // very expensive but idk how to make it less expensive (thanks canvas) + drawPixelLine( + this.pos.x, + this.pos.y, + this.pos.x - LEN_X, + this.pos.y - LEN_Y + ) + } - stepAnimation(dt) { - this.pos.x += this.vel.x * dt - this.pos.y += this.vel.y * dt - } + stepAnimation(dt) { + this.pos.x += this.vel.x * dt + this.pos.y += this.vel.y * dt + } } function drawPixelLine(fromX, fromY, toX, toY) { - const pxInflate = 0.1 + const pxInflate = 0.1 - const dx = Math.abs(toX - fromX) - const dy = Math.abs(toY - fromY) - const sx = fromX < toX ? 1 : -1 - const sy = fromY < toY ? 1 : -1 - let err = dx - dy + const dx = Math.abs(toX - fromX) + const dy = Math.abs(toY - fromY) + const sx = fromX < toX ? 1 : -1 + const sy = fromY < toY ? 1 : -1 + let err = dx - dy - let x = fromX - let y = fromY + let x = fromX + let y = fromY - starfallCtx.beginPath() + starfallCtx.beginPath() - const steps = Math.max(dx, dy) + const steps = Math.max(dx, dy) - for (let i = 0; i <= steps; i++) { - const alpha = i == 0 ? 1 : 0.1 * (1 - i / steps) - starfallCtx.fillStyle = `rgba(255, 255, 255, ${alpha})` + for (let i = 0; i <= steps; i++) { + const alpha = i == 0 ? 1 : 0.1 * (1 - i / steps) + starfallCtx.fillStyle = `rgba(255, 255, 255, ${alpha})` - starfallCtx.rect( - clampNearest(x * pxDensity, pxDensity) - 0.5, - clampNearest(y * pxDensity, pxDensity) - 0.5, - pxInflate + pxDensity, - pxInflate + pxDensity - ) + starfallCtx.rect( + clampNearest(x * pxDensity, pxDensity) - 0.5, + clampNearest(y * pxDensity, pxDensity) - 0.5, + pxInflate + pxDensity, + pxInflate + pxDensity + ) - const e2 = 2 * err - if (e2 > -dy) { - err -= dy - x += sx - } - if (e2 < dx) { - err += dx - y += sy - } + const e2 = 2 * err + if (e2 > -dy) { + err -= dy + x += sx + } + if (e2 < dx) { + err += dx + y += sy + } - starfallCtx.fill() - } + starfallCtx.fill() + } } @@ -92,53 +92,53 @@ function animateStarfalls() { let dt = (now - lastUpd) / MILLISEC lastUpd = now - if (!isAnimating) { return } + if (!isAnimating) { return } - starfallCtx.clearRect(0, 0, starfallCanvas.width, starfallCanvas.height) + starfallCtx.clearRect(0, 0, starfallCanvas.width, starfallCanvas.height) - let shouldGenerate = randomBool(0.01) + let shouldGenerate = randomBool(0.01) - if (shouldGenerate) { - let newStarfall = new Starfall() - newStarfall.generate() - allStarfalls.push(newStarfall) - } + if (shouldGenerate) { + let newStarfall = new Starfall() + newStarfall.generate() + allStarfalls.push(newStarfall) + } - for (let starfall of allStarfalls) { - if (starfall.pos.x < -50 || starfall.pos.x > pxWidth + 50) { - allStarfalls.splice(allStarfalls.indexOf(starfall), 1) - continue - } + for (let starfall of allStarfalls) { + if (starfall.pos.x < -50 || starfall.pos.x > pxWidth + 50) { + allStarfalls.splice(allStarfalls.indexOf(starfall), 1) + continue + } - starfall.stepAnimation(dt) - starfall.draw() - } + starfall.stepAnimation(dt) + starfall.draw() + } } function startStarfall() { - animateStarfalls() + animateStarfalls() - requestAnimationFrame(startStarfall) + requestAnimationFrame(startStarfall) } function addStars() { - let starNoise = document.getElementById("starNoise") - let randX = randomInt(0, 256) - let randY = randomInt(0, 256) + let starNoise = document.getElementById("starNoise") + let randX = randomInt(0, 256) + let randY = randomInt(0, 256) - debugPrint("Star pos", `[x: ${randX}, y: ${randY}]`) + debugPrint("Star pos", `[x: ${randX}, y: ${randY}]`) - starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))` - starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))` + starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))` + starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))` } function loadingScreenStars() { setLoadingProgress("Adding stars...") - addStars() + addStars() - setLoadingProgress("Starting starfall animation...") - startStarfall() + setLoadingProgress("Starting starfall animation...") + startStarfall() } \ No newline at end of file diff --git a/style.css b/style.css index 34e8b57..0694ba4 100644 --- a/style.css +++ b/style.css @@ -1,25 +1,25 @@ .synthSun { - width: calc(40px * var(--pxDensity)); - height: auto; - aspect-ratio: 1 / 1; - image-rendering: pixelated; - position: absolute; - top: round(60%, var(--pxDensityPx)); - left: round(50%, var(--pxDensityPx)); - transform: translate(-50%, -50%); + width: calc(40px * var(--pxDensity)); + height: auto; + aspect-ratio: 1 / 1; + image-rendering: pixelated; + position: absolute; + top: round(60%, var(--pxDensityPx)); + left: round(50%, var(--pxDensityPx)); + transform: translate(-50%, -50%); } .bgGradient { - image-rendering: pixelated; - width: calc(256px * var(--pxDensity)); - height: calc(164px * var(--pxDensity)); - aspect-ratio: auto; - position: absolute; - top: round(50%, var(--pxDensityPx)); - left: round(50%, var(--pxDensityPx)); - transform: translate(-50%, -50%); + image-rendering: pixelated; + width: calc(256px * var(--pxDensity)); + height: calc(164px * var(--pxDensity)); + aspect-ratio: auto; + position: absolute; + top: round(50%, var(--pxDensityPx)); + left: round(50%, var(--pxDensityPx)); + transform: translate(-50%, -50%); } #synthwaveCanvas { - position: absolute; - top: round(0%, var(--pxDensityPx)); - left: round(0%, var(--pxDensityPx)); + position: absolute; + top: round(0%, var(--pxDensityPx)); + left: round(0%, var(--pxDensityPx)); } \ No newline at end of file diff --git a/synthwaveEffect.js b/synthwaveEffect.js index 447f14d..32c122a 100644 --- a/synthwaveEffect.js +++ b/synthwaveEffect.js @@ -12,10 +12,10 @@ const renderPass = new THREE.RenderPass(scene, camera) composer.addPass(renderPass) const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { - minFilter: THREE.NearestFilter, - magFilter: THREE.NearestFilter, - format: THREE.RGBAFormat, - type: THREE.UNSIGNED_BYTE + minFilter: THREE.NearestFilter, + magFilter: THREE.NearestFilter, + format: THREE.RGBAFormat, + type: THREE.UNSIGNED_BYTE }) let shaderMaterial @@ -23,86 +23,86 @@ let shaderPass function defShaderMaterial() { - shaderMaterial = makeShaderMaterial() + shaderMaterial = makeShaderMaterial() - shaderPass = new THREE.ShaderPass(shaderMaterial) - composer.addPass(shaderPass) - shaderPass.material.uniforms.tDiffuse.value = renderTarget.texture + shaderPass = new THREE.ShaderPass(shaderMaterial) + composer.addPass(shaderPass) + shaderPass.material.uniforms.tDiffuse.value = renderTarget.texture } function makeShaderMaterial() { - return new THREE.ShaderMaterial({ - vertexShader: ` - varying vec2 vUv; + return new THREE.ShaderMaterial({ + vertexShader: ` + varying vec2 vUv; - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - } - `, - fragmentShader: ` - varying vec2 vUv; + void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); + } + `, + fragmentShader: ` + varying vec2 vUv; - uniform vec3 edgeColor; - uniform vec3 centerColor; - uniform sampler2D tDiffuse; - uniform float pxDensity; - uniform vec2 resolution; + uniform vec3 edgeColor; + uniform vec3 centerColor; + uniform sampler2D tDiffuse; + uniform float pxDensity; + uniform vec2 resolution; - float brightness(vec3 c) { - return (c.r + c.g + c.b) / 3.0; - } + float brightness(vec3 c) { + return (c.r + c.g + c.b) / 3.0; + } - void main() { - vec2 uv = vUv; + void main() { + vec2 uv = vUv; - vec2 screenPxCount = vec2(resolution.x / pxDensity, resolution.y / pxDensity); - //screenPxCount = vec2(256.0, 164.0); - vec2 p = floor(uv * screenPxCount) / screenPxCount; + vec2 screenPxCount = vec2(resolution.x / pxDensity, resolution.y / pxDensity); + //screenPxCount = vec2(256.0, 164.0); + vec2 p = floor(uv * screenPxCount) / screenPxCount; - vec4 color = texture2D(tDiffuse, p); + vec4 color = texture2D(tDiffuse, p); - float b = brightness(color.rgb); - float centerB = brightness(centerColor); - float alpha = floor(color.a); + float b = brightness(color.rgb); + float centerB = brightness(centerColor); + float alpha = floor(color.a); - if (b > centerB) { - gl_FragColor = vec4(edgeColor, color.a); - } - else if (color == vec4(0.0)) { - gl_FragColor = vec4(0.0); - } - else { - gl_FragColor = vec4(centerColor, color.a); - } - - //gl_FragColor = color; - } - `, - uniforms: { - edgeColor: { value: new THREE.Color(0x00b4f0) }, - centerColor: { value: new THREE.Color(0x323232) }, - tDiffuse: { value: null }, - pxDensity: { value: pxDensity }, - resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) } - } - }) + if (b > centerB) { + gl_FragColor = vec4(edgeColor, color.a); + } + else if (color == vec4(0.0)) { + gl_FragColor = vec4(0.0); + } + else { + gl_FragColor = vec4(centerColor, color.a); + } + + //gl_FragColor = color; + } + `, + uniforms: { + edgeColor: { value: new THREE.Color(0x00b4f0) }, + centerColor: { value: new THREE.Color(0x323232) }, + tDiffuse: { value: null }, + pxDensity: { value: pxDensity }, + resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) } + } + }) } function updateShaderMatPxDensity() { - shaderMaterial.uniforms.resolution.value = new THREE.Vector2(window.innerWidth, window.innerHeight) - shaderMaterial.uniforms.pxDensity.value = pxDensity + shaderMaterial.uniforms.resolution.value = new THREE.Vector2(window.innerWidth, window.innerHeight) + shaderMaterial.uniforms.pxDensity.value = pxDensity } // TODO: add pixelation shader if (!renderer) { - alert("Renderer failed to load, using static images instead.") - // TODO: add image logic - throw new Error("Renderer initialization failed.") + alert("Renderer failed to load, using static images instead.") + // TODO: add image logic + throw new Error("Renderer initialization failed.") } renderer.setSize(window.innerWidth, window.innerHeight) @@ -115,15 +115,15 @@ renderer.setClearColor(0x000000, 0) const geometry = new THREE.BufferGeometry() let meshVerts = [ - -1, 0, 1, - -1, 1, -1, - 1, 1, 1, - 1, 0, -1 + -1, 0, 1, + -1, 1, -1, + 1, 1, 1, + 1, 0, -1 ] let meshIndices = [ - 0, 1, 2, - 1, 2, 3 + 0, 1, 2, + 1, 2, 3 ] @@ -151,162 +151,162 @@ camera.rotation.x = 0.2 camera.lookAt(0, 0, 0) */ debugPrint( - "Camera transform", - `Pos: [x: ${camera.position.x}, y: ${camera.position.y}, z: ${camera.position.z}] + "Camera transform", + `Pos: [x: ${camera.position.x}, y: ${camera.position.y}, z: ${camera.position.z}] Rot: [x: ${camera.rotation.x}, y: ${camera.rotation.y}, z: ${camera.rotation.z}]` ) function hillCurve(x, width) { - return (Math.sin(Math.PI * (x + 1)) + 1) ** width + return (Math.sin(Math.PI * (x + 1)) + 1) ** width } function generateHill(width, length, segments, maxHeight, posOffsetZ = 0, prevHillVerts = []) { - let hillIndices = [] - let startPos = -width / 2 - let triCount = segments + 1 + let hillIndices = [] + let startPos = -width / 2 + let triCount = segments + 1 - let prevHillHeights = prevHillVerts.filter((_, index) => (index - 1) % 3 === 0) + let prevHillHeights = prevHillVerts.filter((_, index) => (index - 1) % 3 === 0) - let hillData = generateHillVerts( - triCount, - maxHeight, - width, - startPos, - prevHillHeights, - segments, - length, - posOffsetZ - ) - let hillVerts = hillData.verts - let hillUVs = hillData.uvs + let hillData = generateHillVerts( + triCount, + maxHeight, + width, + startPos, + prevHillHeights, + segments, + length, + posOffsetZ + ) + let hillVerts = hillData.verts + let hillUVs = hillData.uvs - for (let i = 0; i < segments; i++) { - hillIndices.push(i * 2, i * 2 + 2, i * 2 + 1) - hillIndices.push(i * 2 + 1, i * 2 + 2, i * 2 + 3) - } + for (let i = 0; i < segments; i++) { + hillIndices.push(i * 2, i * 2 + 2, i * 2 + 1) + hillIndices.push(i * 2 + 1, i * 2 + 2, i * 2 + 3) + } - const geometry = new THREE.BufferGeometry() + const geometry = new THREE.BufferGeometry() - geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(hillVerts), 3)) - geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(hillUVs), 2)) - geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(hillIndices), 1)) - geometry.computeVertexNormals() - geometry.computeBoundingBox() + geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(hillVerts), 3)) + geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(hillUVs), 2)) + geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(hillIndices), 1)) + geometry.computeVertexNormals() + geometry.computeBoundingBox() - const material = generateHillMat(segments, width, length) - const newMesh = new THREE.Mesh(geometry, material) + const material = generateHillMat(segments, width, length) + const newMesh = new THREE.Mesh(geometry, material) - newMesh.position.z = posOffsetZ + newMesh.position.z = posOffsetZ - return {mesh: newMesh, verts: hillVerts, indices: hillIndices} + return {mesh: newMesh, verts: hillVerts, indices: hillIndices} } function generateHillVerts( - triCount, - maxHeight, - width, - startPos, - prevHillHeights, - segments, - length + triCount, + maxHeight, + width, + startPos, + prevHillHeights, + segments, + length ) { - let hillVerts = [] - let hillUVs = [] + let hillVerts = [] + let hillUVs = [] - for (let i = 0; i < triCount; i++) { - let height = randomFloat(0, maxHeight) * hillCurve(i / triCount, 1.2) + for (let i = 0; i < triCount; i++) { + let height = randomFloat(0, maxHeight) * hillCurve(i / triCount, 1.2) - hillVerts.push(i / (triCount - 1) * width + startPos) + hillVerts.push(i / (triCount - 1) * width + startPos) - if (prevHillHeights.length / 2 != segments + 1) { hillVerts.push(0) } - else { hillVerts.push(prevHillHeights[i * 2 + 1]) } + if (prevHillHeights.length / 2 != segments + 1) { hillVerts.push(0) } + else { hillVerts.push(prevHillHeights[i * 2 + 1]) } - hillVerts.push(length / 2) + hillVerts.push(length / 2) - hillUVs.push(i / (triCount - 1), 0) + hillUVs.push(i / (triCount - 1), 0) - hillVerts.push( - i / (triCount - 1) * width + startPos, - height, - -length / 2 - ) - hillUVs.push(i / (triCount - 1), 1) - } + hillVerts.push( + i / (triCount - 1) * width + startPos, + height, + -length / 2 + ) + hillUVs.push(i / (triCount - 1), 1) + } - return {verts: hillVerts, uvs: hillUVs} + return {verts: hillVerts, uvs: hillUVs} } function generateHillMat(segments, width, length) { - //return new THREE.MeshBasicMaterial({ color: 0x00FF00, wireframe: false }) + //return new THREE.MeshBasicMaterial({ color: 0x00FF00, wireframe: false }) - const vertexShader = ` - varying vec2 vUv; - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - } - ` + const vertexShader = ` + varying vec2 vUv; + void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); + } + ` - const fragmentShader = ` - varying vec2 vUv; - uniform vec3 edgeColor; - uniform vec3 centerColor; - uniform int segmentCount; - uniform vec2 resolution; + const fragmentShader = ` + varying vec2 vUv; + uniform vec3 edgeColor; + uniform vec3 centerColor; + uniform int segmentCount; + uniform vec2 resolution; - void main() { - vec2 uv = vUv; - uv.x = fract(uv.x * float(segmentCount)); + void main() { + vec2 uv = vUv; + uv.x = fract(uv.x * float(segmentCount)); - float edgeThresholdX = 0.075; - float edgeThresholdY = 0.075; + float edgeThresholdX = 0.075; + float edgeThresholdY = 0.075; - if (resolution.x > resolution.y) { - edgeThresholdX *= resolution.y / resolution.x; - } - else { - edgeThresholdY *= resolution.x / resolution.y; - } + if (resolution.x > resolution.y) { + edgeThresholdX *= resolution.y / resolution.x; + } + else { + edgeThresholdY *= resolution.x / resolution.y; + } - float isEdge = 0.0; - - if (uv.y < edgeThresholdY || uv.y > (1.0 - edgeThresholdY)) { - isEdge = 1.0; - } - - if (uv.x < edgeThresholdX || uv.x > (1.0 - edgeThresholdX)) { - isEdge = 1.0; - } + float isEdge = 0.0; - vec3 color = mix(centerColor, edgeColor, isEdge); + if (uv.y < edgeThresholdY || uv.y > (1.0 - edgeThresholdY)) { + isEdge = 1.0; + } - gl_FragColor = vec4(color, 1.0); - } - ` + if (uv.x < edgeThresholdX || uv.x > (1.0 - edgeThresholdX)) { + isEdge = 1.0; + } - const material = new THREE.ShaderMaterial({ - vertexShader, - fragmentShader, - uniforms: { - edgeColor: { value: new THREE.Color(0x00b4f0) }, - centerColor: { value: new THREE.Color(0x323232) }, - segmentCount: { value: segments }, - resolution: { value: new THREE.Vector2(width / segments, length) } - } - }) + vec3 color = mix(centerColor, edgeColor, isEdge); - return material + gl_FragColor = vec4(color, 1.0); + } + ` + + const material = new THREE.ShaderMaterial({ + vertexShader, + fragmentShader, + uniforms: { + edgeColor: { value: new THREE.Color(0x00b4f0) }, + centerColor: { value: new THREE.Color(0x323232) }, + segmentCount: { value: segments }, + resolution: { value: new THREE.Vector2(width / segments, length) } + } + }) + + return material } let allHillMeshes = [] function addHillMesh(mesh) { - allHillMeshes.push(mesh) - scene.add(mesh) + allHillMeshes.push(mesh) + scene.add(mesh) } @@ -316,25 +316,25 @@ let lastHillVerts = [] let hasPreAnimated = false function preAnimateSynthwave(times) { - for (let i = 0; i < times; i++) { - let hillOffset = -(i * hillLength) + 0.02 + for (let i = 0; i < times; i++) { + let hillOffset = -(i * hillLength) + 0.02 - let newHill = generateHill( - 15, //camera.aspect * 10, - hillLength, - 25, - 4, - hillOffset, - lastHillVerts - ) + let newHill = generateHill( + 15, //camera.aspect * 10, + hillLength, + 25, + 4, + hillOffset, + lastHillVerts + ) - addHillMesh(newHill.mesh) - lastHillVerts = newHill.verts - hillSpawnOffset = hillOffset - } + addHillMesh(newHill.mesh) + lastHillVerts = newHill.verts + hillSpawnOffset = hillOffset + } - hasPreAnimated = true - debugPrint("Pre-animated synthwave complete") + hasPreAnimated = true + debugPrint("Pre-animated synthwave complete") } @@ -344,69 +344,69 @@ let tickMultiplier = 1 let distSinceLastHill = 0 function animateSynthwave(timestamp) { - let deltaTime = (timestamp - lastTime) / 1000 - lastTime = timestamp + let deltaTime = (timestamp - lastTime) / 1000 + lastTime = timestamp - let currentTickRate = 1 / deltaTime - tickMultiplier = tickRate / currentTickRate + let currentTickRate = 1 / deltaTime + tickMultiplier = tickRate / currentTickRate - if (!hasPreAnimated) { return } + if (!hasPreAnimated) { return } - if (!isAnimating) { - render() - return - } - - const moveDist = 0.0035 //0.05 * tickMultiplier - distSinceLastHill += moveDist + if (!isAnimating) { + render() + return + } - for (let hill of allHillMeshes) { - hill.position.z += moveDist - - const outOfBoundsCoord = 5 - if (hill.position.z - hill.geometry.boundingBox.min.y >= outOfBoundsCoord) { - scene.remove(hill) - allHillMeshes.splice(allHillMeshes.indexOf(hill), 1) - continue - } - } + const moveDist = 0.0035 //0.05 * tickMultiplier + distSinceLastHill += moveDist - if (distSinceLastHill >= hillLength) { + for (let hill of allHillMeshes) { + hill.position.z += moveDist - let hillZOffset = hillLength - distSinceLastHill + const outOfBoundsCoord = 5 + if (hill.position.z - hill.geometry.boundingBox.min.y >= outOfBoundsCoord) { + scene.remove(hill) + allHillMeshes.splice(allHillMeshes.indexOf(hill), 1) + continue + } + } - let newHill = generateHill( - 15, //camera.aspect * 10, - hillLength, - 25, - 4, - hillZOffset + 0.02 + hillSpawnOffset, - lastHillVerts - ) + if (distSinceLastHill >= hillLength) { - addHillMesh(newHill.mesh) - distSinceLastHill = -hillZOffset - lastHillVerts = newHill.verts - } + let hillZOffset = hillLength - distSinceLastHill - render() + let newHill = generateHill( + 15, //camera.aspect * 10, + hillLength, + 25, + 4, + hillZOffset + 0.02 + hillSpawnOffset, + lastHillVerts + ) + + addHillMesh(newHill.mesh) + distSinceLastHill = -hillZOffset + lastHillVerts = newHill.verts + } + + render() } function render() { - if (usePostProcessing) { - renderer.setRenderTarget(renderTarget) - renderer.render(scene, camera) + if (usePostProcessing) { + renderer.setRenderTarget(renderTarget) + renderer.render(scene, camera) - renderer.setRenderTarget(null) - composer.render() + renderer.setRenderTarget(null) + composer.render() - requestAnimationFrame(animateSynthwave) - } - else { - renderer.setRenderTarget(null) - renderer.render(scene, camera) + requestAnimationFrame(animateSynthwave) + } + else { + renderer.setRenderTarget(null) + renderer.render(scene, camera) - requestAnimationFrame(animateSynthwave) - } + requestAnimationFrame(animateSynthwave) + } } \ No newline at end of file diff --git a/tools/index.html b/tools/index.html index b140f0e..de96852 100644 --- a/tools/index.html +++ b/tools/index.html @@ -2,55 +2,55 @@ - - + + - - - - + + + + - - Byte Dice + + Byte Dice - - + + - - + + -
+

More to come...

- -
+ +
-
+
- - - - - - + + + + + + - - + + \ No newline at end of file diff --git a/toys/index.html b/toys/index.html index a6f46fb..910c24f 100644 --- a/toys/index.html +++ b/toys/index.html @@ -2,70 +2,70 @@ - - + + - - - - + + + + - - Byte Dice - Toys + + Byte Dice - Toys - - + + - - - + + + - - - - + + + + -
+
-
-
- -
-
- -
-
+
+
+ +
+
+ +
+
- -
+ +
-
+
- - - - - - + + + + + + - - + + diff --git a/toys/license/index.html b/toys/license/index.html index 4a2645c..f67cbbc 100644 --- a/toys/license/index.html +++ b/toys/license/index.html @@ -2,77 +2,77 @@ - - + + - - - - - - + + + + + + - - + + - - Byte Dice - Boykisser license + + Byte Dice - Boykisser license - - + + - - - + + + - - - - - - - + + + + + + + - - + + -
+
-
-
-

- Based on the original by Chilli!
- Boykisser picture presets by greenbandit2004.
-
- For takedown requests, please - submit an issue with the "Copyright" label in the Github repository for this website. -


- -

Basic


-
- - - - - +
+
+

+ Based on the original by Chilli!
+ Boykisser picture presets by greenbandit2004.
+
+ For takedown requests, please + submit an issue with the "Copyright" label in the Github repository for this website. +


-
+

Basic


+ + + + + + + +
03
-
-
+
+
- + -
+
+
-
+

Colors


-
+
- +

- +
-
- +
+
@@ -171,22 +171,22 @@
- -
+ +
-
+
- - + + - - - - - - + + + + + + - + diff --git a/toys/license/input.js b/toys/license/input.js index a1bf3c0..8edb310 100644 --- a/toys/license/input.js +++ b/toys/license/input.js @@ -95,12 +95,12 @@ async function importFromB64(b64) { try { let str = atob(b64) data = JSON.parse(str) - + let isValid = validateJSON(data) - + if (isValid != true) { alert("Invalid data string imported (Invalid fields). Full results:\n" + isValid.join("\n")); return } - + jsonData = deepOverride(jsonData, data) await updLicense() @@ -145,7 +145,7 @@ function makeOptionsTheSameAsJSON() { function validateJSON(obj) { let is_valid = ( typeof obj === "object" && - obj !== null && + obj !== null && typeof obj.bg === "object" && typeof obj.user === "string" && typeof obj.title === "string" && @@ -198,21 +198,21 @@ function exportData() { function generateLicense() { - const element = document.getElementById("licenseContainer") + const element = document.getElementById("licenseContainer") let dupe = element.cloneNode(true) - dupe.style.transform = "initial" + dupe.style.transform = "initial" dupe.style.left = "300vw" dupe.style.position = "absolute" dupe.style.margin = "initial" document.body.appendChild(dupe) - html2canvas(dupe).then(canvas => { - const link = document.createElement("a"); - link.download = "boykisserLicense.png"; - link.href = canvas.toDataURL("image/png"); - link.click(); - }); + html2canvas(dupe).then(canvas => { + const link = document.createElement("a"); + link.download = "boykisserLicense.png"; + link.href = canvas.toDataURL("image/png"); + link.click(); + }); console.log(dupe.getBoundingClientRect()) diff --git a/toys/license/license.css b/toys/license/license.css index 62d5ee5..c1b374d 100644 --- a/toys/license/license.css +++ b/toys/license/license.css @@ -6,122 +6,122 @@ } .sans { - font-family: "Comic Neue", serif; - font-weight: 400; - font-style: normal; + font-family: "Comic Neue", serif; + font-weight: 400; + font-style: normal; } .sans-bold { /* TODO: bold not working */ - font-family: "Comic Neue", serif; - font-weight: 700; - font-style: normal; + font-family: "Comic Neue", serif; + font-weight: 700; + font-style: normal; } .yellowTail { - font-family: "Yellowtail", serif; - font-weight: 400; - font-style: normal; + font-family: "Yellowtail", serif; + font-weight: 400; + font-style: normal; } h2 { - margin: 5px; + margin: 5px; } .sillyBar { - width: auto; - height: auto; - background-color: var(--licenseBorderCol); - border: 3px solid var(--licenseBorderCol); - border-radius: 8px; - align-self: center; - display: flex; - gap: 3px; + width: auto; + height: auto; + background-color: var(--licenseBorderCol); + border: 3px solid var(--licenseBorderCol); + border-radius: 8px; + align-self: center; + display: flex; + gap: 3px; } .sillyValue { - position: relative; + position: relative; width: calc(100% / 10); height: 100%; - aspect-ratio: 1 / 1; - display: block; + aspect-ratio: 1 / 1; + display: block; } .on { - background-image: url(/assets/scribble_32x32.png); + background-image: url(/assets/scribble_32x32.png); } .off { - background-image: none; - background-color: var(--licenseBgCol); + background-image: none; + background-color: var(--licenseBgCol); } .sillyValue:first-child { - border-radius: 5px 0px 0px 5px; + border-radius: 5px 0px 0px 5px; } .sillyValue:last-child { - border-radius: 0px 5px 5px 0px; + border-radius: 0px 5px 5px 0px; } #licenseContainer { - width: 600px; - height: 400px; - padding: 0px 20px 40px 20px; - font-size: 0.75rem; - box-sizing: border-box; - display: grid; - grid-template-columns: repeat(2, auto); - grid-template-rows: repeat(2, auto); + width: 600px; + height: 400px; + padding: 0px 20px 40px 20px; + font-size: 0.75rem; + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(2, auto); background-color: var(--licenseBgCol); - border: 10px var(--licenseBorderCol) solid; - border-radius: 32px; - color: var(--licenseTextCol); + border: 10px var(--licenseBorderCol) solid; + border-radius: 32px; + color: var(--licenseTextCol); } #picContainer { - width: 150px; - height: 150px; - display: block; - overflow: hidden; - background-color: transparent; - border-radius: 32px; + width: 150px; + height: 150px; + display: block; + overflow: hidden; + background-color: transparent; + border-radius: 32px; border: 10px var(--licenseBorderCol) solid; } #picValue { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; } #credits { - position: absolute; - bottom: 12px; - left: 0%; - margin: 0% 0% 0% 20px; - color: var(--licenseTextCol); - font-size: 0.6rem; + position: absolute; + bottom: 12px; + left: 0%; + margin: 0% 0% 0% 20px; + color: var(--licenseTextCol); + font-size: 0.6rem; } #signatureContainer, #DsignatureContainer { - display: inline-flex; - flex-direction: column; - margin: 5% 0% 0% 0%; + display: inline-flex; + flex-direction: column; + margin: 5% 0% 0% 0%; } #signatureValue { - margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */ - text-align: center; - font-size: 1.5rem; + margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */ + text-align: center; + font-size: 1.5rem; } #signHere { - border-top: var(--licenseBorderCol) solid 6px; - margin: 0%; - padding: 0% 25px; - text-align: center; + border-top: var(--licenseBorderCol) solid 6px; + margin: 0%; + padding: 0% 25px; + text-align: center; } #detailsContainer { - display: grid; - grid-template-columns: repeat(2, auto); + display: grid; + grid-template-columns: repeat(2, auto); } #titleValue { - grid-area: 1 / 1 / 2 / 3; - font-size: 2rem; - margin: 0% auto 0% auto; - height: max-content; - text-align: center; + grid-area: 1 / 1 / 2 / 3; + font-size: 2rem; + margin: 0% auto 0% auto; + height: max-content; + text-align: center; } #hashID { position: absolute; - bottom: 12px; - right: 0%; - margin: 0% 30px 0% 0%; - color: var(--licenseTextCol); - font-size: 0.6rem; + bottom: 12px; + right: 0%; + margin: 0% 30px 0% 0%; + color: var(--licenseTextCol); + font-size: 0.6rem; } \ No newline at end of file diff --git a/toys/license/license.js b/toys/license/license.js index 5393042..44a503b 100644 --- a/toys/license/license.js +++ b/toys/license/license.js @@ -31,7 +31,7 @@ class License { this.setImgValue(json.img) if (json.bg.type == "image") - { this.baseE.style.backgroundImage = `url("${json.bg.file}")` } + { this.baseE.style.backgroundImage = `url("${json.bg.file}")` } else { this.baseE.style.backgroundImage = "" } document.documentElement.style.setProperty("--licenseBgCol", json.bg.color) @@ -77,7 +77,7 @@ let license = new License() function prependZero(number) { - return number < 10 ? "0" + number : number + return number < 10 ? "0" + number : number } diff --git a/toys/license/options.css b/toys/license/options.css index 76b62bb..db7a4bd 100644 --- a/toys/license/options.css +++ b/toys/license/options.css @@ -1,259 +1,259 @@ #optionsContainer { - display: block; - margin: calc(2px * var(--pxDensity)) auto 0% auto; - width: max-content; - padding: calc(2px * var(--pxDensity)); - overflow-y: scroll; - max-width: min(600px, 100vw); - font-size: min(1.5rem, calc(4px * var(--pxDensity))); + display: block; + margin: calc(2px * var(--pxDensity)) auto 0% auto; + width: max-content; + padding: calc(2px * var(--pxDensity)); + overflow-y: scroll; + max-width: min(600px, 100vw); + font-size: min(1.5rem, calc(4px * var(--pxDensity))); box-sizing: border-box; } .optionsCredits { - margin: 0%; - max-width: calc(100% - (4px * var(--pxDensity))); + margin: 0%; + max-width: calc(100% - (4px * var(--pxDensity))); } .licenseFormContainer { display: grid; grid-template-columns: 40% 60%; } .licenseForm label { - 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); + 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%; - box-sizing: border-box; - 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%; + box-sizing: border-box; + width: round(auto, var(--pxDensity)); + height: calc(6px * var(--pxDensity)); font-weight: 800; } .licenseForm input[type="text"] { - font-family: "Roboto", sans-serif; - 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); + font-family: "Roboto", sans-serif; + 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)); - border: none; - font-size: inherit; - margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; - box-sizing: border-box; - width: round(auto, var(--pxDensity)); - height: calc(6px * var(--pxDensity)); - color: inherit; - display: inline-block; + padding: calc(1px * var(--pxDensity)); + border: none; + font-size: inherit; + margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; + width: round(auto, var(--pxDensity)); + height: calc(6px * var(--pxDensity)); + color: inherit; + display: inline-block; } .licenseForm input[type="text"]:hover { - filter: brightness(1.35); - cursor: pointer; + filter: brightness(1.35); + cursor: pointer; } .slider { - -webkit-appearance: none; - appearance: none; - background-color: var(--navBarBtn_Border); - box-shadow: none; - filter: none; - border: none; - font-size: inherit; - box-sizing: border-box; - width: 100%; - height: calc(1px * var(--pxDensity)); - margin: 0%; - outline: none; - padding: 0%; + -webkit-appearance: none; + appearance: none; + background-color: var(--navBarBtn_Border); + box-shadow: none; + filter: none; + border: none; + font-size: inherit; + box-sizing: border-box; + width: 100%; + height: calc(1px * var(--pxDensity)); + margin: 0%; + outline: none; + padding: 0%; } .slider:hover { - filter: brightness(1.35); - cursor: pointer; + filter: brightness(1.35); + cursor: pointer; } .slider::-moz-range-thumb { - -webkit-appearance: none; - appearance: none; - background-color: var(--navBar_Inner); - border: none; - cursor: pointer; - border-radius: 0%; - width: calc(3px * var(--pxDensity)); - height: calc(3px * var(--pxDensity)); + -webkit-appearance: none; + appearance: none; + background-color: var(--navBar_Inner); + border: none; + cursor: pointer; + border-radius: 0%; + width: calc(3px * var(--pxDensity)); + height: calc(3px * var(--pxDensity)); } .slider::-webkit-slider-thumb { -webkit-appearance: none; - appearance: none; - background-color: var(--navBar_Inner); - border: none; - cursor: pointer; - border-radius: 0%; - width: calc(3px * var(--pxDensity)); - height: calc(3px * var(--pxDensity)); + appearance: none; + background-color: var(--navBar_Inner); + border: none; + cursor: pointer; + border-radius: 0%; + width: calc(3px * var(--pxDensity)); + height: calc(3px * var(--pxDensity)); } .sliderDiv { - 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); + 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)); - border: none; - font-size: inherit; - margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; - box-sizing: border-box; + padding: calc(1px * var(--pxDensity)); + border: none; + font-size: inherit; + margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; width: 100%; - height: calc(6px * var(--pxDensity)); - color: inherit; - align-items: center; - display: flex; + height: calc(6px * var(--pxDensity)); + color: inherit; + align-items: center; + display: flex; } #sillyNumberValue { - display: inline; - 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; + 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)); - border: none; - font-size: inherit; - margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%; - box-sizing: border-box; - width: round(auto, var(--pxDensity)); - height: calc(6px * var(--pxDensity));; - aspect-ratio: 1 / 1; + padding: calc(1px * var(--pxDensity)); + border: none; + font-size: inherit; + margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; + width: round(auto, var(--pxDensity)); + height: calc(6px * var(--pxDensity));; + aspect-ratio: 1 / 1; } h1 { - 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); + 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)); - border: none; - margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; - box-sizing: border-box; - width: round(auto, var(--pxDensity)); - height: round(auto, var(--pxDensity)); - color: inherit; - font-size: inherit; - display: inline-block; + padding: calc(1px * var(--pxDensity)); + border: none; + margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; + width: round(auto, var(--pxDensity)); + height: round(auto, var(--pxDensity)); + color: inherit; + font-size: inherit; + display: inline-block; } .h1Top { - margin-top: 0%; + margin-top: 0%; } select { - 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); + 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)); - border: none; - font-size: inherit; - margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; - box-sizing: border-box; - width: 100%; - height: round(auto, var(--pxDensity)); - color: inherit; - display: inline-block; + padding: calc(1px * var(--pxDensity)); + border: none; + font-size: inherit; + margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; + width: 100%; + height: round(auto, var(--pxDensity)); + color: inherit; + display: inline-block; } select:hover { - filter: brightness(1.35); - cursor: pointer; + filter: brightness(1.35); + cursor: pointer; } input[type=file] { - /* height: max-content; - aspect-ratio: 1 / 1; - width: auto; - overflow: hidden; */ - display: none; + /* height: max-content; + aspect-ratio: 1 / 1; + width: auto; + overflow: hidden; */ + display: none; } #picInput, #bgTypeInput { height: calc(6px * var(--pxDensity)); - margin-right: calc(3px * var(--pxDensity)); + margin-right: calc(3px * var(--pxDensity)); } #picUploadLabel, #bgUploadLabel { - height: calc(6px * var(--pxDensity)); - aspect-ratio: 1 / 1; - width: auto; - background-image: url(/assets/icons/upload.svg); - display: inline-flex; + height: calc(6px * var(--pxDensity)); + aspect-ratio: 1 / 1; + width: auto; + background-image: url(/assets/icons/upload.svg); + display: inline-flex; margin-right: calc(2px * var(--pxDensity)); } #picUploadLabel:hover, #bgUploadLabel:hover { - filter: brightness(1.35); - cursor: pointer; + filter: brightness(1.35); + cursor: pointer; } #picUploadLabel:active, #bgUploadLabel:active { - filter: brightness(0.75); - transform: translateY(calc(1px * var(--pxDensity))); + filter: brightness(0.75); + transform: translateY(calc(1px * var(--pxDensity))); } #picUploadIcon, #bgUploadIcon { - height: calc(4px * var(--pxDensity)); - aspect-ratio: 1 / 1; - width: auto; - display: inline-block; - vertical-align: middle; + height: calc(4px * var(--pxDensity)); + aspect-ratio: 1 / 1; + width: auto; + display: inline-block; + vertical-align: middle; } form { - display: inline-block; + display: inline-block; } .generateButton { - 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); + 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)); */ - border: none; - margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; - box-sizing: border-box; - width: calc(100% - (4px * var(--pxDensity))); - height: calc(6px * var(--pxDensity)); - display: inline-flex; - justify-content: center; + /* padding: calc(1px * var(--pxDensity)); */ + border: none; + margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; + width: calc(100% - (4px * var(--pxDensity))); + height: calc(6px * var(--pxDensity)); + display: inline-flex; + justify-content: center; align-items: center; font-size: min(5vmin, 2vmax, 30px); color: #ffffff } .generateButtonIcon { - height: calc(4px * var(--pxDensity)); - aspect-ratio: 1 / 1; - width: auto; - display: inline-block; - margin: auto 0%; + height: calc(4px * var(--pxDensity)); + aspect-ratio: 1 / 1; + width: auto; + display: inline-block; + margin: auto 0%; } input[type="color"] { - 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); + 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: 0; - border: none; - font-size: inherit; - margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; - box-sizing: border-box; - width: round(auto, var(--pxDensity)); - height: calc(6px * var(--pxDensity)); - color: inherit; - display: inline-block; + padding: 0; + border: none; + font-size: inherit; + margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; + width: round(auto, var(--pxDensity)); + height: calc(6px * var(--pxDensity)); + color: inherit; + display: inline-block; } input[type="color"]::-moz-color-swatch { border: none; } input[type="color"]::-webkit-color-swatch-wrapper { - padding: 0; - border-radius: 0; + padding: 0; + border-radius: 0; } input[type="color"]::-webkit-color-swatch { - border: none; + border: none; } \ No newline at end of file diff --git a/toys/license/style.css b/toys/license/style.css index 3d179b2..eb4c938 100644 --- a/toys/license/style.css +++ b/toys/license/style.css @@ -1,24 +1,24 @@ .allContainer { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; gap: calc(4px * var(--pxDensity)); - height: calc(100vh - calc(25px * var(--pxDensity))); + height: calc(100vh - calc(25px * var(--pxDensity))); } .blackBorderRect { - background-color: #FFFFFF; - border: 10px #000000 solid; - border-radius: 32px; - color: #000000; + background-color: #FFFFFF; + border: 10px #000000 solid; + border-radius: 32px; + color: #000000; } a { - cursor: pointer; - color: #2222FF; - text-decoration: underline; - font-weight: normal; + cursor: pointer; + color: #2222FF; + text-decoration: underline; + font-weight: normal; } a:visited { - color: #551A8B; + color: #551A8B; } .mainDiv { - text-align: center; + text-align: center; } \ No newline at end of file diff --git a/toys/loading/index.html b/toys/loading/index.html index ddd2baa..2e9ab26 100644 --- a/toys/loading/index.html +++ b/toys/loading/index.html @@ -2,50 +2,49 @@ - - + + - - - - + + + + - - Byte Dice - Loading... + + Byte Dice - Loading... - - + + - - - + + + - - - - - - - + + + + + + + - - + + -
-
+
+
-
+
+ + + + - - - - - - - + + \ No newline at end of file diff --git a/toys/loading/script.js b/toys/loading/script.js index c6f9a49..dbb0b83 100644 --- a/toys/loading/script.js +++ b/toys/loading/script.js @@ -6,28 +6,28 @@ let loadingImg = undefined function clearLoadingScreenClutter() { - document.getElementById("fakeLoadingToggle").remove() - loadingImg = document.getElementById("loadingImg") + document.getElementById("fakeLoadingToggle").remove() + loadingImg = document.getElementById("loadingImg") } function periodicallyChangeTips() { - newTip() - setLoadingProgress("") + newTip() + setLoadingProgress("") } function changeLoadingImgSize() { - loadingImg.style.width = `calc(${32 * byteDiceSize}px * var(--pxDensity))` - loadingImg.style.height = `calc(${32 * byteDiceSize}px * var(--pxDensity))` + 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 + let code = e.keyCode - if (!(code >= 48 && code <= 57)) { return } + if (!(code >= 48 && code <= 57)) { return } - byteDiceSize = (code - 48) / 9 + 1 - changeLoadingImgSize() + byteDiceSize = (code - 48) / 9 + 1 + changeLoadingImgSize() } \ No newline at end of file diff --git a/toys/style.css b/toys/style.css index 4f4baad..c0e322e 100644 --- a/toys/style.css +++ b/toys/style.css @@ -1,47 +1,47 @@ .toyContainer { - border: none; - display: inline-grid; + border: none; + display: inline-grid; width: 25%; min-width: 100%; max-width: 512px; - grid-template-columns: 1fr; - grid-template-rows: calc(32px * var(--pxDensity)) 1fr; - color: inherit; + grid-template-columns: 1fr; + grid-template-rows: calc(32px * var(--pxDensity)) 1fr; + color: inherit; } .toyImg { - image-rendering: pixelated; - overflow: hidden; - width: 100%; - height: 100%; + image-rendering: pixelated; + overflow: hidden; + width: 100%; + height: 100%; object-fit: contain; - margin: auto auto; + margin: auto auto; } .toyTextContainer { - background-color: var(--navBar_SecondInner); - padding: calc(1px * var(--pxDensity)); - border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border); - text-align: left; - overflow-y: scroll; - overflow-x: hidden; - height: calc(16px * var(--pxDensity)); + background-color: var(--navBar_SecondInner); + padding: calc(1px * var(--pxDensity)); + border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border); + text-align: left; + overflow-y: scroll; + overflow-x: hidden; + height: calc(16px * var(--pxDensity)); font-size: min(5vmin, 2vmax, 25px); } h1 { - font-size: max(1.2em, 2.5vmin); - margin: 0%; - margin-bottom: calc(1px * var(--pxDensity)); + font-size: max(1.2em, 2.5vmin); + margin: 0%; + margin-bottom: calc(1px * var(--pxDensity)); } .desc { - font-size: max(1em, 2vmin); - margin: 0%; + font-size: max(1em, 2vmin); + margin: 0%; } button:hover { - filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); - cursor: pointer; + filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); + cursor: pointer; } button:active { - filter: brightness(0.85); - transform: translateY(calc(1px * var(--pxDensity))); + filter: brightness(0.85); + transform: translateY(calc(1px * var(--pxDensity))); } .toyUl { padding: calc(3px * var(--pxDensity)); @@ -53,9 +53,9 @@ button:active { margin: 0 auto; } .toyLi { - margin: 0; + margin: 0; } ul { - margin: 0%; - padding: 0%; + margin: 0%; + padding: 0%; } \ No newline at end of file