made a page to generate crafting trees (TODO: docs + testing)

This commit is contained in:
2026-07-19 00:47:00 +02:00
parent 0fb8cc4974
commit 1f9e0e2b04
11 changed files with 497 additions and 26 deletions
+3 -1
View File
@@ -5,7 +5,8 @@ const PAGES = {
TOYS: 2,
LICENSE: 3,
LOADING: 4,
LIBS: 5
LIBS: 5,
CRAFTING: 6
}
const CONSOLE_COLORS = {
red: "color: #FF0000;",
@@ -189,6 +190,7 @@ document.addEventListener("DOMContentLoaded", async function () {
case (PAGES.LICENSE): loadingScreenStars(); await loadingScreenLicense(); break
case (PAGES.TOYS): loadingScreenStars(); break
case (PAGES.LIBS): loadingScreenStars(); break
case (PAGES.CRAFTING): loadingScreenCrafting(); break
}
if (navBarPresent) {
+40
View File
@@ -64,6 +64,9 @@ canvas {
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
width: round(auto, var(--pxDensity));
/*height: calc(6px * var(--pxDensity));*/
border: none;
color: #ffffff;
font-size: inherit;
}
.switch {
position: relative;
@@ -109,4 +112,41 @@ canvas {
aspect-ratio: 1 / 1;
image-rendering: pixelated;
transform: translate(-50%, -50%);
}
button {
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));*/
border: none;
color: #ffffff;
font-size: inherit;
}
button:hover {
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)));
}
button:disabled, button[disabled] {
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;
}
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;
}
+3 -21
View File
@@ -20,27 +20,9 @@ li {
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;
}
button:active {
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;
}
.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;
}
.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;
margin: 0%;
box-shadow: none;
width: auto;
}
.navBtnImg {
width: calc(12px * var(--pxDensity));