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

added stars to most pages for a less empty bg

Browse Source
This commit is contained in:
ByteDice
2026-06-28 15:15:40 +02:00
parent 2ff29e74d6
commit dcac48b1e8
12 changed files with 73 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
404.html
-42
View File
@@ -1,42 +0,0 @@
<!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 - 404</title>
</head>
<body>
<div id="mainDiv">
<h3 style="text-align: center; margin: 20px auto; max-width: min(600px, 90vw);">404 - Page not found.<br>
But you found this page, so... good job, I guess?<br><br>
Have a picture of a cat instead:<br>
<img src="/assets/boykissers/boykisser.png" style="max-width: min(300px, 50vw); max-height: min(300px, 50vh); aspect-ratio: 1 / 1; border: 1vw solid black; border-radius: 15%;"><br>
Oh yeah, you go to the homepage by pressing the button with 3 dots in the bottom.<br>
It's supposed to represent a 3-dice roll.
</h3>
<div id="navBarContainer" data-alt="byte"></div>
</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_404.js"></script>
</body>
</html>
data/navBar.json
-6
View File
@@ -1,10 +1,4 @@
[
{
"icon": "discord_8x8.png",
"action": "navigate",
"actionValue": "https://discord.com",
"disabled": true
},
{
"icon": "youtube_8x8.png",
"action": "navigate",
global/globalScript.js
+4 -1
View File
@@ -99,6 +99,7 @@ function toggleGrid(offX = 0, offY = 0) {
let repeatCountY = window.innerHeight / pxDensity
ctx.strokeStyle = "#ff0000"
ctx.strokeSize = 1
ctx.beginPath()
for (x = 0; x < repeatCountX; x++) {
@@ -172,7 +173,9 @@ document.addEventListener("DOMContentLoaded", async function() {
switch (CURRENT_PAGE) {
case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
case (PAGES.LICENSE): onLoadLicense(); break
case (PAGES.LICENSE): onLoadLicense(); loadingScreenStars(); break
case (PAGES.TOYS): loadingScreenStars(); break
case (PAGES.LIBS): loadingScreenStars(); break
}
if (navBarPresent) {
global/globalStyle.css
+10
View File
@@ -99,4 +99,14 @@ canvas {
}
.switch input:checked + .switchDecor:before {
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%);
}
index.html
+1 -1
View File
@@ -66,7 +66,7 @@
<!-- local -->
<script src="script.js"></script>
<script src="synthwaveEffect.js"></script>
<script src="starfall.js"></script>
<script src="stars.js"></script>
</body>
</html>
libs/index.html
+4
View File
@@ -28,6 +28,9 @@
<body>
<div id="mainDiv">
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
<canvas id="starfallCanvas"></canvas>
<div id="navBarContainer" data-alt="byte, noAnim, testtube"></div>
<ul class="libUl">
@@ -57,6 +60,7 @@
<!-- local -->
<script src="script.js"></script>
<script src="/stars.js"></script>
</body>
</html>
libs/test/index.html
+5 -1
View File
@@ -28,9 +28,12 @@
<body>
<div id="mainDiv">
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
<canvas id="starfallCanvas"></canvas>
<div id="navBarContainer" data-alt="byte, noAnim, return"></div>
<div class="encased" style="margin: calc(3px * var(--pxDensity)); max-width: 30em">
<div class="borderedRect" 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>
@@ -64,6 +67,7 @@
<!-- local -->
<script src="../script.js"></script>
<script src="/stars.js"></script>
</body>
</html>
script.js
-12
View File
@@ -14,18 +14,6 @@ function loadingScreenSynthwave() {
}
function addStars() {
let starNoise = document.getElementById("starNoise")
let randX = randomInt(0, 256)
let randY = randomInt(0, 256)
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))`
}
function onResizeSynthwave() {
renderer.setSize(window.innerWidth, window.innerHeight)
composer.setSize(window.innerWidth, window.innerHeight)
starfall.js → stars.js
+41 -9
View File
@@ -2,6 +2,8 @@ const starfallCanvas = document.getElementById("starfallCanvas")
starfallCanvas.width = window.innerWidth
starfallCanvas.height = window.innerHeight
let lastUpd = Date.now()
const starfallCtx = starfallCanvas.getContext("2d")
@@ -15,23 +17,26 @@ class Starfall {
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(3, 6) : randomFloat(-6, -3)
this.vel.y = randomFloat(0.25, 1)
this.vel.x = dir ? randomFloat(240, 580) : randomFloat(-580, -240)
this.vel.y = randomFloat(20, 80)
}
draw() {
// very expensive but idk how to make it less expensive
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 - (this.vel.x * 5),
this.pos.y - (this.vel.y * 5)
this.pos.x - LEN_X,
this.pos.y - LEN_Y
)
}
stepAnimation() {
this.pos.x += this.vel.x
this.pos.y += this.vel.y
stepAnimation(dt) {
this.pos.x += this.vel.x * dt
this.pos.y += this.vel.y * dt
}
}
@@ -81,6 +86,12 @@ function drawPixelLine(fromX, fromY, toX, toY) {
let allStarfalls = []
function animateStarfalls() {
let now = Date.now()
const MILLISEC = 1000
let dt = (now - lastUpd) / MILLISEC
lastUpd = now
if (!isAnimating) { return }
starfallCtx.clearRect(0, 0, starfallCanvas.width, starfallCanvas.height)
@@ -99,7 +110,7 @@ function animateStarfalls() {
continue
}
starfall.stepAnimation()
starfall.stepAnimation(dt)
starfall.draw()
}
}
@@ -109,4 +120,25 @@ function startStarfall() {
animateStarfalls()
requestAnimationFrame(startStarfall)
}
function addStars() {
let starNoise = document.getElementById("starNoise")
let randX = randomInt(0, 256)
let randY = randomInt(0, 256)
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))`
}
function loadingScreenStars() {
setLoadingProgress("Adding stars...")
addStars()
setLoadingProgress("Starting starfall animation...")
startStarfall()
}
style.css
-10
View File
@@ -8,16 +8,6 @@
left: round(50%, var(--pxDensityPx));
transform: translate(-50%, -50%);
}
#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%);
}
.bgGradient {
image-rendering: pixelated;
width: calc(256px * var(--pxDensity));
toys/index.html
+4
View File
@@ -28,6 +28,9 @@
<body>
<div id="mainDiv">
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
<canvas id="starfallCanvas"></canvas>
<div class="toyUl">
<div class="toyLi">
<button onclick="slideTransition('/toys/license', event)" class="toyContainer borderedRect">
@@ -63,6 +66,7 @@
<!-- local -->
<script src="script.js"></script>
<script src="/stars.js"></script>
</body>
</html>
toys/license/index.html
+4
View File
@@ -50,6 +50,9 @@
<!-- Proof that I am Byte Dice? Check the commit history. -->
<div id="mainDiv">
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
<canvas id="starfallCanvas"></canvas>
<div class="allContainer">
<div id="optionsContainer" class="borderedRect">
<h1 class="optionsCredits h1Top">
@@ -208,6 +211,7 @@
<!-- local -->
<script src="script.js"></script>
<script src="/stars.js"></script>
</body>
</html>