From 5c674593fb38869407b45deb7214a8dc8780f8b2 Mon Sep 17 00:00:00 2001 From: Byte Dice Date: Wed, 2 Jul 2025 14:43:00 +0200 Subject: [PATCH] QOL update --- data/navBar.json | 5 +--- global/globalStyle.css | 49 ++++++++++++++++++++++++++++++++++++++ global/loadingScreen.js | 30 +++++++++++------------ global/navBar.js | 20 ++++++++++++---- global/screenTransition.js | 7 ++++-- sitemap.xml | 10 ++++---- toys/license/index.html | 10 ++++---- toys/license/options.css | 4 ++-- toys/license/style.css | 2 +- 9 files changed, 98 insertions(+), 39 deletions(-) diff --git a/data/navBar.json b/data/navBar.json index 61c9900..cc2777e 100644 --- a/data/navBar.json +++ b/data/navBar.json @@ -16,10 +16,7 @@ "actionValue": "https://github.com/ByteDice" }, { - "icon": "powerplates_8x8.png", - "action": "navigate", - "actionValue": "/powerplates", - "disabled": true, + "hidden": true, "alt": { "name": "byte", "icon": "dice3_8x8.png", diff --git a/global/globalStyle.css b/global/globalStyle.css index 91a7fa6..5126dcb 100644 --- a/global/globalStyle.css +++ b/global/globalStyle.css @@ -4,6 +4,7 @@ --navBar_SecondInner: #344b6c; --navBarBtn_Inner: #474747; --navBarBtn_Border: #232323; + --brightBlue: #569cd6; --pxDensity: 1; --pxDensityPx: 1px; --bottomPxMargin: 1px; @@ -50,4 +51,52 @@ canvas { 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); + + 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: 60px; + height: 34px; +} +.switch input { + 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); +} +.switchDecor:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: var(--navBarBtn_Inner); + transition: 0.2s steps(2, end); +} +.switch input:checked + .switchDecor { + background-color: var(--brightBlue); +} +.switch input:checked + .switchDecor:before { + transform: translateX(26px); } \ No newline at end of file diff --git a/global/loadingScreen.js b/global/loadingScreen.js index 92146ef..2af2d66 100644 --- a/global/loadingScreen.js +++ b/global/loadingScreen.js @@ -9,9 +9,18 @@ loadingScreenEl.className = "bgDiv" loadingScreenEl.innerHTML = ` - +
+

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

+
+ +
+

Loading...
Loading files...

Tip: Tip loading...

` @@ -57,11 +66,6 @@ function setLoadingProgress(newText) { function startLoadingScreen() { loadingScreenProgress.innerHTML = `Loading...

Tip: ${selectedTip}` - if (fakeLoading != "true") { - let cText = document.getElementById("loadingCornerText") - if (cText) { cText.remove() } - } - const loadDur = randomFloat(2000, 4000) debugPrint("loadDur initial", loadDur) @@ -72,7 +76,7 @@ function startLoadingScreen() { } -function removeLoadingScreen(rmCornerText = false) { +function removeLoadingScreen() { if (!isLoading) { return } setLoadingProgress("Done!") @@ -85,18 +89,14 @@ function removeLoadingScreen(rmCornerText = false) { setTimeout(function() { loadingScreenEl.style.left = "100vw" - if (rmCornerText) { - let cText = document.getElementById("loadingCornerText") - if (cText) { cText.remove() } - } newTip() }, fadeOutDur * 1000) }, 500) } -function stopShowingLoading() { - localStorage["fakeLoading"] = false +function setShowLoading(state) { + localStorage["fakeLoading"] = state } diff --git a/global/navBar.js b/global/navBar.js index b772a38..e083297 100644 --- a/global/navBar.js +++ b/global/navBar.js @@ -6,6 +6,8 @@ function onLoadNavBar() { const altString = container.dataset.alt || "" alts = altString.replace(" ", "").split(",") + debugPrint("Navbar alts", alts); + if (!container) { return } const navBarAligner = document.createElement("div") @@ -16,21 +18,26 @@ function onLoadNavBar() { for (let btn of navBarJson) { - navBar.appendChild(createNavBarBtn( + createdBtn = createNavBarBtn( btn["icon"] || "", btn["action"] || "", btn["actionValue"] || "", btn["iconId"] || "", btn["alt"] || "", - btn["disabled"] || false - )) + btn["disabled"] || false, + btn["hidden"] || false + ) + + if (createdBtn != null) { + navBar.appendChild(createdBtn) + } } navBarAligner.appendChild(navBar) container.appendChild(navBarAligner) } -function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false) { +function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false, hidden = false) { if (alts.includes(alt["name"])) { icon = alt["icon"] || icon || "" action = alt["action"] || action || "" @@ -38,6 +45,7 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", iconId = alt["iconId"] || iconId || "" disabled = alt["disabled"] === undefined ? disabled : alt["disabled"] || false; + hidden = alt["hidden"] || false; } let onClick @@ -47,6 +55,8 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", default: "" } + if (hidden) { return null; } + let btn = document.createElement("li") btn.innerHTML = ` @@ -56,7 +66,7 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", ` - return btn + return btn; } async function loadNavBarJson() { diff --git a/global/screenTransition.js b/global/screenTransition.js index 8da77ac..71cb7e6 100644 --- a/global/screenTransition.js +++ b/global/screenTransition.js @@ -3,8 +3,11 @@ let mainDiv = document.getElementById("mainDiv") function slideTransition(url, event) { const ctrlPressed = event.ctrlKey - const dur = 500 - const loadingTime = randomFloat(500, 1500) + let dur = 500 + let loadingTime = randomFloat(500, 1500) + + if (localStorage["fakeLoading"] != "true") { dur = 500; loadingTime = 0; } + debugPrint("loadDur transition", loadingTime) const slideLeft = `slide-left ${dur / 1000}s cubic-bezier(0, 0, 0, 1.46) forwards` diff --git a/sitemap.xml b/sitemap.xml index ccc6f9f..f169dad 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -5,16 +5,16 @@ 1.00 2025-01-28 - - https://www.bytedice.net/404.html - 0.67 - 2025-01-25 - https://www.bytedice.net/toys 0.67 2025-01-28 + + https://www.bytedice.net/404.html + 0.67 + 2025-01-25 + https://www.bytedice.net/toys/license 0.33 diff --git a/toys/license/index.html b/toys/license/index.html index f13d704..527d77b 100644 --- a/toys/license/index.html +++ b/toys/license/index.html @@ -61,7 +61,7 @@

Basic


-
+
@@ -91,16 +91,16 @@

Extra


-
-
+ +

Advanced


-
-
+ +