ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Added ./libs/ direcroty (and the pages).

Browse Source
This commit is contained in:
ByteDice
2025-11-14 19:43:15 +01:00
parent d4ad6a62d1
commit ef3088c3f1
20 changed files with 444 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/index.html
+62
View File
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Libs</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/libs">
<meta name="description" content="A list of JS libraries made by Byte Dice.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, library">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="A list of JS libraries made by Byte Dice.">
<meta property="og:url" content="https://bytedice.net/libs">
<meta property="og:type" content="website">
</head>
<body>
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte, noAnim, testtube"></div>
<ul class="libUl">
<li class="libLi">
<div class="libContainer borderedRect">
<img class="libImg" src="/assets/js.png" style="border-radius: 16px;">
<div class="libTextContainer">
<h1>Test</h1>
<p class="desc">Nothing here yet</p>
</div>
<div class="libSrcContainer">
&lt;script src="nothing here yet"&gt;&lt;/script&gt;
</div>
</div>
</li>
</ul>
</div>
<div id="loadingScreen"></div>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- local -->
<script src="script.js"></script>
</body>
</html>
libs/script.js
+1
View File
@@ -0,0 +1 @@
CURRENT_PAGE = PAGES.LIBS
libs/style.css
+68
View File
@@ -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%;
}
libs/test/calendar_test.js
+168
View File
@@ -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 <body>.
*/
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);
}
}
}
libs/test/index.html
+71
View File
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Libs [EXPERIMENTAL]</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/libs/test">
<meta name="description" content="A list of JS libraries made by Byte Dice. [EXPERIMENTAL]">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, library">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="A list of JS libraries made by Byte Dice. [EXPERIMENTAL]">
<meta property="og:url" content="https://bytedice.net/libs/test">
<meta property="og:type" content="website">
</head>
<body>
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte, noAnim, return"></div>
<div class="encased" style="margin: calc(3px * var(--pxDensity)); max-width: 30em">
<h1 style="margin-bottom: calc(1px * var(--pxDensity)); font-size: 2em; color: red; text-decoration: underline;">
WARNING
</h1>
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.
</div>
<div style="height: calc(1px * var(--pxDensity)); margin: 0 calc(3px * var(--pxDensity)); background-color: var(--navBarBtn_Border);"></div>
<ul class="libUl">
<li class="libLi">
<div class="libContainer borderedRect">
<img class="libImg" src="/assets/js.png" style="border-radius: 16px;">
<div class="libTextContainer">
<h1>Calendar Library</h1>
<p class="desc">A fully customizable calendar library. So customizable that you can barely call it a calendar library.</p>
</div>
<div class="libSrcContainer">
&lt;script src="https://www.bytedice.net/libs/test/calendar_test.js"&gt;&lt;/script&gt;
</div>
</div>
</li>
</ul>
</div>
<div id="loadingScreen"></div>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- local -->
<script src="../script.js"></script>
</body>
</html>