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

aligned eerything to be pixel-perfect

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-12 09:38:33 +01:00
parent dc61e02c60
commit 7eede71229
10 changed files with 84 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
globalScript.js
+35
View File
@@ -2,10 +2,45 @@ function randomFloat(min, max) {
return Math.random() * (max - min) + min;
}
function randomIntFrom0(max) {
return Math.floor(Math.random() * max)
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min) + min)
}
function showGrid() {
let canvasEl = document.createElement("canvas")
canvasEl.width = window.innerWidth
canvasEl.height = window.innerHeight
canvasEl.style.position = "absolute"
canvasEl.style.top = "0%"
canvasEl.style.left = "0%"
canvasEl.style.pointerEvents = "none"
let ctx = canvasEl.getContext("2d")
document.body.appendChild(canvasEl)
let repeatCountX = window.innerWidth / pxDensity
let repeatCountY = window.innerHeight / pxDensity
ctx.strokeStyle = "#ff0000"
ctx.beginPath()
for (x = 0; x < repeatCountX; x++) {
ctx.moveTo(x * pxDensity, 0)
ctx.lineTo(x * pxDensity, window.innerHeight)
}
for (y = 0; y < repeatCountY; y++) {
ctx.moveTo(0, y * pxDensity)
ctx.lineTo(window.innerWidth, y * pxDensity)
}
ctx.stroke()
}
globalStyle.css
+1
View File
@@ -4,6 +4,7 @@
--navBarBtn_Inner: #474747;
--navBarBtn_Border: #232323;
--pxDensity: 1;
--pxDensityPx: 1px;
}
html {
index.html
+1 -1
View File
@@ -52,9 +52,9 @@
<script src="/globalScript.js"></script>
<script src="/pxDensity.js"></script>
<script src="/loadingScreen.js"></script>
<script src="/synthwaveEffect.js"></script>
<script src="/script.js"></script>
<script src="/loadingScreen.js"></script>
</body>
</html>
loadingScreen.css
+1 -1
View File
@@ -26,7 +26,7 @@
border: none;
text-align: left;
position: absolute;
bottom: 0%;
top: 0%;
left: 0%;
cursor: pointer;
}
loadingScreen.js
+30 -25
View File
@@ -1,9 +1,35 @@
let isLoading = true
let loadingScreenEl = document.createElement("div")
loadingScreenEl.className = "bgDiv"
let loadingImg = `<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">`
let closeText = `
<button class="loadingCornerText pxFont" onclick="stopShowingLoading()">
Press ESC to instantly close theloading screen<br>Click me to never see it again.
</button>
`
let tips = [
"Just don't die.",
"Did you know this is a tip?",
"Is thisn't not very un-understandable?",
"m".repeat(200),
"Bad at a game? Just press the \"get good at games\" button!"
]
let loadingText = `<p class="loadingText">Loading...<br>Tip: ${tips[randomIntFrom0(tips.length)]}</p>`
loadingScreenEl.innerHTML = loadingImg + closeText + loadingText
const showLoading = localStorage["showLoading"] || "true"
document.addEventListener("DOMContentLoaded", function() {
if (showLoading != "true") { return }
document.body.appendChild(loadingScreenEl)
const loadDur = randomFloat(3, 6) * 1000
const loadDur = randomFloat(3000, 6000)
setTimeout(function() {
removeLoadingScreen()
@@ -12,6 +38,9 @@ document.addEventListener("DOMContentLoaded", function() {
function removeLoadingScreen() {
if (!isLoading) { return }
isLoading = false
const fadeOutDur = 0.5
loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
@@ -32,27 +61,3 @@ document.addEventListener("keydown", function(event) {
removeLoadingScreen()
}
})
let loadingScreenEl = document.createElement("div")
loadingScreenEl.className = "bgDiv"
let loadingImg = `<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">`
let closeText = `
<button class="loadingCornerText pxFont" onclick="stopShowingLoading()">
Press ESC to instantly close theloading screen<br>Click me to never see it again.
</button>
`
let tips = [
"Just don't die.",
"This is a tip.",
"Is thisn't not very un-understandable?"
]
let loadingText = `<p class="loadingText">Loading...<br>Tip: ${tips[randomIntFrom0(tips.length)]}</p>`
loadingScreenEl.innerHTML = loadingImg + closeText + loadingText
const showLoading = localStorage["showLoading"] || true
navBar.css
+1 -3
View File
@@ -15,19 +15,18 @@ li {
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
padding: 0%;
display: inline-block;
position: relative;
margin-bottom: calc(4px * var(--pxDensity));
position: absolute;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
font-size: 0px;
}
.navBtn {
background-color: transparent;
display: inline-flex;
padding: 0%;
border: none;
position: relative;
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
}
.navBtn:hover {
@@ -50,5 +49,4 @@ li {
image-rendering: pixelated;
position: absolute;
margin: calc(2px * var(--pxDensity));
pointer-events: none;
}
pxDensity.js
+1
View File
@@ -7,6 +7,7 @@ document.addEventListener("DOMContentLoaded", function() {
document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight))
document.documentElement.style.setProperty("--pxDensityPx", `${Math.max(densityWidth, densityHeight)}px`)
pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity")
pxDensityDefined = true
script.js
+2 -2
View File
@@ -3,6 +3,6 @@ document.addEventListener("DOMContentLoaded", function() {
let randX = randomInt(0, 256)
let randY = randomInt(0, 256)
starNoise.style.top = `calc(${randX}px * var(--pxDensity))`
starNoise.style.left = `calc(${randY}px * var(--pxDensity))`
starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))`
starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))`
}, false)
style.css
+2 -2
View File
@@ -14,8 +14,8 @@ body {
aspect-ratio: 1 / 1;
image-rendering: pixelated;
position: absolute;
top: 60%;
left: 50%;
top: round(60%, var(--pxDensityPx));
left: round(50%, var(--pxDensityPx));
transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 100px #C1AB00)
}
synthwaveEffect.js
+8 -1
View File
@@ -1,6 +1,7 @@
let canvas = document.getElementById("synthwave")
let ctx = canvas.getContext("2d")
let hills = []
let isAnimating = true
canvas.width = window.innerWidth
canvas.height = window.innerHeight
@@ -92,11 +93,13 @@ let iters = 0
let previousHill = undefined
function animateSynthWave() {
if (!isAnimating) { return }
ctx.clearRect(0, 0, canvas.width, canvas.height)
if (iters >= iterToNewHill) {
let hillInstance = new Hill(canvas.width / 2, canvas.height / 3 * 2, [0, 180, 240], 25, canvas.width, 325)
hillInstance.generate(25, 50, 100)
hillInstance.generate(25, canvas.height / 24, 100)
hills.unshift(hillInstance)
iters = 0
}
@@ -141,5 +144,9 @@ function animateSynthWave() {
document.addEventListener("DOMContentLoaded", function() {
for (i = 0; i < 350; i++) {
animateSynthWave()
}
setInterval( animateSynthWave, 1000 / 24)
}, false)