diff --git a/assets/icons/return_8x8.png b/assets/icons/return_8x8.png new file mode 100644 index 0000000..b00402b Binary files /dev/null and b/assets/icons/return_8x8.png differ diff --git a/assets/icons/testtube_8x8.png b/assets/icons/testtube_8x8.png new file mode 100644 index 0000000..51bb708 Binary files /dev/null and b/assets/icons/testtube_8x8.png differ diff --git a/assets/js.png b/assets/js.png new file mode 100644 index 0000000..9f14862 Binary files /dev/null and b/assets/js.png differ diff --git a/data/loadingScreenTips.json b/data/loadingScreenTips.json index 2a027bc..648b4e4 100644 --- a/data/loadingScreenTips.json +++ b/data/loadingScreenTips.json @@ -48,7 +48,7 @@ "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.", - "If you ever feel useless, remember that 'queue' can be spellt as 'Q'. The 4 vowels next to eachother are utterly useless.", + "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.", "Do penguins have knees? I don't know, but now you're thinking about it.", diff --git a/data/navBar.json b/data/navBar.json index cc2777e..5dc7d68 100644 --- a/data/navBar.json +++ b/data/navBar.json @@ -25,15 +25,35 @@ "disabled": false } }, + { + "hidden": true, + "alt": { + "name": "testtube", + "icon": "testtube_8x8.png", + "action": "navigate", + "actionValue": "/libs/test", + "disabled": false + } + }, + { + "hidden": true, + "alt": { + "name": "return", + "icon": "return_8x8.png", + "action": "navigate", + "actionValue": "../", + "disabled": false + } + }, { "icon": "pauseAnimation_8x8.png", "action": "function", "actionValue": "pauseAnimBtn('auto')", "iconId": "animationToggle", - "disabled": false, + "hidden": false, "alt": { - "name": "playDisabled", - "disabled": true - } + "name": "noAnim", + "hidden": true + } } ] \ No newline at end of file diff --git a/global/globalScript.js b/global/globalScript.js index b4d18f3..71c5400 100644 --- a/global/globalScript.js +++ b/global/globalScript.js @@ -4,8 +4,8 @@ const PAGES = { SYNTHWAVE: 1, TOYS: 2, LICENSE: 3, - SC_TRACKER: 4, - LOADING: 5 + LOADING: 4, + LIBS: 5 } const CONSOLE_COLORS = { red: "color: #FF0000;", @@ -126,6 +126,7 @@ function pauseAnimBtn(state) { } let pauseBtn = document.getElementById("animationToggle") + if (pauseBtn == undefined) { return; } if (state == "true") { isAnimating = true @@ -181,6 +182,7 @@ document.addEventListener("DOMContentLoaded", async function() { if (CURRENT_PAGE == PAGES.LOADING) { clearLoadingScreenClutter() + setLoadingProgress("") setInterval(periodicallyChangeTips, 60 * 1000) return } diff --git a/global/globalStyle.css b/global/globalStyle.css index f6f82e4..bde121a 100644 --- a/global/globalStyle.css +++ b/global/globalStyle.css @@ -63,7 +63,7 @@ canvas { 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)); + /*height: calc(6px * var(--pxDensity));*/ } .switch { position: relative; diff --git a/global/navBar.js b/global/navBar.js index 1a89df9..7f8fc82 100644 --- a/global/navBar.js +++ b/global/navBar.js @@ -6,9 +6,9 @@ navBarPresent = true function onLoadNavBar() { const container = document.getElementById("navBarContainer") const altString = container.dataset.alt || "" - alts = altString.replace(" ", "").split(",") + alts = altString.replaceAll(" ", "").split(",") - debugPrint("Navbar alts", alts); + debugPrint("Navbar alts", alts.join(", ")); if (!container) { return } diff --git a/libs/index.html b/libs/index.html new file mode 100644 index 0000000..7d7e43b --- /dev/null +++ b/libs/index.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + Byte Dice - Libs + + + + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/libs/script.js b/libs/script.js new file mode 100644 index 0000000..0a452dc --- /dev/null +++ b/libs/script.js @@ -0,0 +1 @@ +CURRENT_PAGE = PAGES.LIBS \ No newline at end of file diff --git a/libs/style.css b/libs/style.css new file mode 100644 index 0000000..4c3df23 --- /dev/null +++ b/libs/style.css @@ -0,0 +1,68 @@ +.libContainer { + 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; +} +.libImg { + image-rendering: pixelated; + overflow: hidden; + width: 100%; + height: 100%; + object-fit: contain; + 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; + 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))); +} +h1 { + font-size: max(1.2em, 2.5vmin); + margin: 0%; + margin-bottom: calc(1px * var(--pxDensity)); +} +.desc { + 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; +} +button:active { + filter: brightness(0.85); + transform: translateY(calc(1px * var(--pxDensity))); +} +.libUl { + padding: calc(3px * var(--pxDensity)); + display: grid; + grid-template-columns: 1fr 1fr; + gap: calc(6px * var(--pxDensity)) +} +@media (max-width: 1024px) { + .libUl { grid-template-columns: 1fr !important; } +} +.libLi { + margin: 0; +} +ul { + margin: 0%; + padding: 0%; +} \ No newline at end of file diff --git a/libs/test/calendar_test.js b/libs/test/calendar_test.js new file mode 100644 index 0000000..1849d77 --- /dev/null +++ b/libs/test/calendar_test.js @@ -0,0 +1,168 @@ +//const libCCss = `//#file { ./lib_style.css }` +const libCss = ` +:root { + --c-a-cell-width: 0px; /* automatically set */ + --c-a-cell-height: 0px; /* automatically set */ + + --c-width: 700px; + --c-height: 400px; + --c-cell-x-count: 7; + --c-cell-y-count: 7; + --c-time-width: 50px; + --c-date-height: 1.5em; + + --c-s-grid-line-width: 2px; + --c-s-grid-line-color: #000000; +} + +div.c-base { + background-color: darkgray; + display: grid; + grid-template-columns: var(--c-time-width) 1fr; + grid-template-rows: var(--c-date-height) 1fr; + width: var(--c-width); + height: var(--c-height); + padding-bottom: 0.5em; +} + +ul.c-ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul.c-times { + display: grid; + grid-template-rows: repeat(var(--c-cell-y-count), 1fr); + grid-template-columns: 1fr; + margin: -0.5em 0; +} + +ul.c-dates { + display: grid; + grid-template-columns: repeat(var(--c-cell-x-count), 1fr); + grid-template-rows: 1fr; + text-align: center; +} + +div.c-grid { + background: /* Grid lines */ + repeating-linear-gradient( + 0deg, + var(--c-s-grid-line-color), + var(--c-s-grid-line-color) var(--c-s-grid-line-width), + transparent var(--c-s-grid-line-width), + transparent calc((var(--c-height) / var(--c-cell-y-count))) + ), + repeating-linear-gradient( + 90deg, + var(--c-s-grid-line-color), + var(--c-s-grid-line-color) var(--c-s-grid-line-width), + transparent var(--c-s-grid-line-width), + transparent calc((var(--c-width) / var(--c-cell-x-count))) + ); + + background-size: calc(100% / var(--c-cell-x-count)) + calc(100% / var(--c-cell-y-count)); + + display: grid; + grid-template-columns: repeat(var(--c-cell-x-count), 1fr); + grid-template-rows: 1fr; +} +`; + + +class CalendarSettings { + // Not implemented +} + + +/** + * A calendar-style element. + */ +class Calendar { + debug = false; + + /** + * Creates a calendar object. + * + * @param {number} cellCountX How many cells on the X axis + * @param {number} cellCountY How many cells on the Y axis + * @param {[string]} timeItems A list of strings that is rendered to the left of the grid (usually timestamps) + * @param {[string]} dateItems A list of strings that is rendered above the grid (usually dates) + */ + constructor(cellCountX, cellCountY, timeItems, dateItems) { + this.cellCount = { x: cellCountX, y: cellCountY }; + this.timeItems = timeItems; + this.dateItems = dateItems; + } + + /** + * Adds the calendar element to the document. This method also generates the calendar element. + * + * @param {HTMLElement} child An optional HTML element where the calendar resides in. No value makes it use the . + */ + attachElement(child = null) { + console.log("Attached calendar to HTML page."); + child.appendChild(this.#generateElement()); + } + + /** + * Adds pre-made CSS to the document. This CSS can be partially overridden or can be skipped completely. + */ + attachCss() { + let s = document.createElement("style"); + s.textContent = libCss; + document.head.insertBefore(s, document.head.firstChild); + } + + + #generateElement() { + let c = document.createElement("div"); + c.className = "c-base"; + + let cEmpty = document.createElement("div"); + cEmpty.style.display = "inline-block"; + + let cDates = document.createElement("ul"); + cDates.className = "c-dates c-ul"; + + let cTimes = document.createElement("ul"); + cTimes.className = "c-times c-ul"; + + let cGrid = document.createElement("div"); + cGrid.className = "c-grid"; + + if (this.debug) { + let s = "red solid 1px"; + cDates.style.outline = s; + cTimes.style.outline = s; + cGrid.style.outline = "blue solid 1px"; + } + + let all = [cEmpty, cDates, cTimes, cGrid]; + for (let el of all) { c.appendChild(el); } + + this.#generateDates(cDates); + this.#generateTimes(cTimes); + + return c; + } + + #generateDates(el) { + for (let i of this.dateItems) { + let li = document.createElement("li"); + li.innerText = i; + el.appendChild(li); + } + } + + #generateTimes(el) { + for (let i of this.timeItems) { + let li = document.createElement("li"); + li.className = "c-time"; + li.innerText = i; + el.appendChild(li); + } + } +} \ No newline at end of file diff --git a/libs/test/index.html b/libs/test/index.html new file mode 100644 index 0000000..52b062e --- /dev/null +++ b/libs/test/index.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + Byte Dice - Libs [EXPERIMENTAL] + + + + + + + + + + + + + + + +
+ + +
+

+ WARNING +

+ These are experimental/testing libraries. Do not expect them to function. Do not expect them to stay functioning. Do not expect them stay as a whole. Do not expect their advertising to be correct. Do not expect anything from them. +
+ +
+ + +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index f169dad..84a20f6 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -3,21 +3,36 @@ https://www.bytedice.net 1.00 - 2025-01-28 + 2025-09-08 https://www.bytedice.net/toys 0.67 - 2025-01-28 + 2025-11-14 + + + https://www.bytedice.net/libs + 0.67 + 2025-11-14 https://www.bytedice.net/404.html 0.67 2025-01-25 + + https://www.bytedice.net/toys/loading + 0.33 + 2025-11-14 + https://www.bytedice.net/toys/license 0.33 - 2025-07-02 + 2025-11-14 + + + https://www.bytedice.net/libs/test + 0.33 + 2025-11-14 \ No newline at end of file diff --git a/toys/index.html b/toys/index.html index 6536041..2122c12 100644 --- a/toys/index.html +++ b/toys/index.html @@ -28,9 +28,9 @@
- + -
-
  • +
    • +
  • +
    • diff --git a/toys/license/index.html b/toys/license/index.html index c6a2083..a3e9c85 100644 --- a/toys/license/index.html +++ b/toys/license/index.html @@ -191,7 +191,7 @@

    Original by Chilli
    Remade by Byte Dice at bytedice.net/toys

    - +
    diff --git a/toys/sc-tracker/index.html b/toys/sc-tracker/index.html deleted file mode 100644 index 1f55a38..0000000 --- a/toys/sc-tracker/index.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - - - - - - - Byte Dice - Super Credit Tracker - - - - - - - - - - - - - - - - - - - - - - - - -
    - - -
    - -
    - - - - - - - - - - - - - - \ No newline at end of file diff --git a/toys/sc-tracker/script.js b/toys/sc-tracker/script.js deleted file mode 100644 index f1382df..0000000 --- a/toys/sc-tracker/script.js +++ /dev/null @@ -1 +0,0 @@ -CURRENT_PAGE = PAGES.SC_TRACKER \ No newline at end of file diff --git a/toys/sc-tracker/style.css b/toys/sc-tracker/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/toys/style.css b/toys/style.css index bb7c9ed..f60734a 100644 --- a/toys/style.css +++ b/toys/style.css @@ -1,8 +1,7 @@ .toyContainer { border: none; - width: calc(64px * var(--pxDensity)); - /* height: calc(48px * var(--pxDensity)); */ display: grid; + width: 100%; grid-template-columns: 1fr; grid-template-rows: calc(32px * var(--pxDensity)) 1fr; color: inherit; @@ -10,9 +9,10 @@ .toyImg { image-rendering: pixelated; overflow: hidden; - max-width: calc(62px * var(--pxDensity)); - height: calc(32px * var(--pxDensity)); - margin: 0% auto; + width: 100%; + height: 100%; + object-fit: contain; + margin: auto auto; } .toyTextContainer { background-color: var(--navBar_SecondInner); @@ -40,8 +40,14 @@ button:active { filter: brightness(0.85); transform: translateY(calc(1px * var(--pxDensity))); } +.toyUl { + padding: calc(3px * var(--pxDensity)); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: calc(6px * var(--pxDensity)) +} .toyLi { - margin: calc(3px * var(--pxDensity)); + margin: 0; } ul { margin: 0%;