convert all indents to tabs
This commit is contained in:
+4
-4
@@ -1,6 +1,6 @@
|
||||
---
|
||||
deployment:
|
||||
tasks:
|
||||
# $DEPLOYPATH needs to be initialized
|
||||
- source ~/.bash_profile
|
||||
- /bin/cp -R * $DEPLOYPATH
|
||||
tasks:
|
||||
# $DEPLOYPATH needs to be initialized
|
||||
- source ~/.bash_profile
|
||||
- /bin/cp -R * $DEPLOYPATH
|
||||
@@ -1 +0,0 @@
|
||||
.vscode/
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"editor.tabSize": 2,
|
||||
"editor.insertSpaces": false,
|
||||
"editor.detectIndentation": false
|
||||
}
|
||||
+68
-68
@@ -1,70 +1,70 @@
|
||||
[
|
||||
"Just don't die.",
|
||||
"15% | 20% | 25% | no tip :(",
|
||||
"Is thisn't not un-veryn't un-understandable?",
|
||||
"mmmmmmmmmmmmmmmmmmmmmicrowave sounds.",
|
||||
"Bad at a game? Skill issue, git gud.",
|
||||
"I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)",
|
||||
"There's a really good song that goes like \"do do do do do do do do do.\"",
|
||||
"The real tip was the friends you made along the way.",
|
||||
"Nothing suspicious here... keep scrolling.",
|
||||
"Did you know that... uh... hold on, let me think... I don't know, I forgot.",
|
||||
"Remember that one task you're avoiding? Yeah, keep avoiding it and stay on this epic website.",
|
||||
"I use Gentoo, btw. (Take that, Arch users!)",
|
||||
"This tip took 3 hours to write.",
|
||||
"Water is wet.",
|
||||
"Why is it called a 'loading screen' if the screen has already loaded?",
|
||||
"Look at you go, reading these tips like a pro so I didn't waste my time!",
|
||||
"If this ever reappears, pretend to be extremely surprised.",
|
||||
"Private tip. Anyone who reads will be executed on the spot.",
|
||||
"Why do we park on driveways and drive on parkways?",
|
||||
"If a progress bar ever stops, yell \"MOVE!\" as loud as you can.",
|
||||
"You are now breathing manually.",
|
||||
"If you're reading this, congratulations, you can read!",
|
||||
"bytedice.net/toys",
|
||||
"Loading...",
|
||||
"Bees communicate through twerking.",
|
||||
"Stop breathing! you're addicted!",
|
||||
"How do wireless signals work?",
|
||||
"A wise person once said something important. This is not that.",
|
||||
"Why do they call it oven when you of in the cold food and of out hot eat the food?",
|
||||
"Sometimes when I think really hard, I get an idea. Most of the time, I don't.",
|
||||
"Why is it called a 'building' if it's already built?",
|
||||
"Run.",
|
||||
"Rubber duckies are geniuses. Don't believe me? Talk to one yourself.",
|
||||
"It works on my machine.",
|
||||
"If you think about it, sandwiches are just edible plates.",
|
||||
"The word \"Loading\" backward is \"gnidaoL\". I don't know what that means.",
|
||||
"This tip is non-edible.",
|
||||
"Shoes are technically portable floors.",
|
||||
"Why did Isaac Newton ruin the world by inventing gravity and thus disabling our flight?",
|
||||
"It's better to pee in the shower than to shower in the pee.",
|
||||
"Why does your nose run but your feet smell?",
|
||||
"Fish.", "VGhpcyBpcyBub3QgYW4gQVJHLi4uIG9yIGlzIGl0PyAqVlNhdWNlIG11c2ljIHN0YXJ0cyBwbGF5aW5nLio=",
|
||||
"Don't trust stairs. They're always up to something.",
|
||||
"You can't fail at life if you define success as simply existing.",
|
||||
"You've never seen your neighbors bring in their groceries, have you?",
|
||||
"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.",
|
||||
"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.",
|
||||
"Shork gumey.",
|
||||
"You just lost the game.",
|
||||
"H",
|
||||
"A sandwich walks into a bar. The bartender says, 'Sorry, we don't serve food here.'",
|
||||
"This website is sponsored by bytedice.net!",
|
||||
"Waffles are pancakes with abs.",
|
||||
"Opening the fridge again will not spawn more food.",
|
||||
"A spoon is just a tiny bowl on a stick.",
|
||||
"What's red and smells like blue paint? Red paint.",
|
||||
"Ɛ:",
|
||||
":3",
|
||||
"Is it gay to be homosexual?",
|
||||
"Rust. No, not C++ or Java. Rust. Only Rust.",
|
||||
"My eyes are up here, buddy.",
|
||||
"The word 'bed' looks like a bed.",
|
||||
"The word 'queue' is just the letter Q followed silent letters standing in a queue.",
|
||||
"Press escape then write `:q!` to exit VIM."
|
||||
"Just don't die.",
|
||||
"15% | 20% | 25% | no tip :(",
|
||||
"Is thisn't not un-veryn't un-understandable?",
|
||||
"mmmmmmmmmmmmmmmmmmmmmicrowave sounds.",
|
||||
"Bad at a game? Skill issue, git gud.",
|
||||
"I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)",
|
||||
"There's a really good song that goes like \"do do do do do do do do do.\"",
|
||||
"The real tip was the friends you made along the way.",
|
||||
"Nothing suspicious here... keep scrolling.",
|
||||
"Did you know that... uh... hold on, let me think... I don't know, I forgot.",
|
||||
"Remember that one task you're avoiding? Yeah, keep avoiding it and stay on this epic website.",
|
||||
"I use Gentoo, btw. (Take that, Arch users!)",
|
||||
"This tip took 3 hours to write.",
|
||||
"Water is wet.",
|
||||
"Why is it called a 'loading screen' if the screen has already loaded?",
|
||||
"Look at you go, reading these tips like a pro so I didn't waste my time!",
|
||||
"If this ever reappears, pretend to be extremely surprised.",
|
||||
"Private tip. Anyone who reads will be executed on the spot.",
|
||||
"Why do we park on driveways and drive on parkways?",
|
||||
"If a progress bar ever stops, yell \"MOVE!\" as loud as you can.",
|
||||
"You are now breathing manually.",
|
||||
"If you're reading this, congratulations, you can read!",
|
||||
"bytedice.net/toys",
|
||||
"Loading...",
|
||||
"Bees communicate through twerking.",
|
||||
"Stop breathing! you're addicted!",
|
||||
"How do wireless signals work?",
|
||||
"A wise person once said something important. This is not that.",
|
||||
"Why do they call it oven when you of in the cold food and of out hot eat the food?",
|
||||
"Sometimes when I think really hard, I get an idea. Most of the time, I don't.",
|
||||
"Why is it called a 'building' if it's already built?",
|
||||
"Run.",
|
||||
"Rubber duckies are geniuses. Don't believe me? Talk to one yourself.",
|
||||
"It works on my machine.",
|
||||
"If you think about it, sandwiches are just edible plates.",
|
||||
"The word \"Loading\" backward is \"gnidaoL\". I don't know what that means.",
|
||||
"This tip is non-edible.",
|
||||
"Shoes are technically portable floors.",
|
||||
"Why did Isaac Newton ruin the world by inventing gravity and thus disabling our flight?",
|
||||
"It's better to pee in the shower than to shower in the pee.",
|
||||
"Why does your nose run but your feet smell?",
|
||||
"Fish.", "VGhpcyBpcyBub3QgYW4gQVJHLi4uIG9yIGlzIGl0PyAqVlNhdWNlIG11c2ljIHN0YXJ0cyBwbGF5aW5nLio=",
|
||||
"Don't trust stairs. They're always up to something.",
|
||||
"You can't fail at life if you define success as simply existing.",
|
||||
"You've never seen your neighbors bring in their groceries, have you?",
|
||||
"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.",
|
||||
"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.",
|
||||
"Shork gumey.",
|
||||
"You just lost the game.",
|
||||
"H",
|
||||
"A sandwich walks into a bar. The bartender says, 'Sorry, we don't serve food here.'",
|
||||
"This website is sponsored by bytedice.net!",
|
||||
"Waffles are pancakes with abs.",
|
||||
"Opening the fridge again will not spawn more food.",
|
||||
"A spoon is just a tiny bowl on a stick.",
|
||||
"What's red and smells like blue paint? Red paint.",
|
||||
"Ɛ:",
|
||||
":3",
|
||||
"Is it gay to be homosexual?",
|
||||
"Rust. No, not C++ or Java. Rust. Only Rust.",
|
||||
"My eyes are up here, buddy.",
|
||||
"The word 'bed' looks like a bed.",
|
||||
"The word 'queue' is just the letter Q followed silent letters standing in a queue.",
|
||||
"Press escape then write `:q!` to exit VIM."
|
||||
]
|
||||
+30
-30
@@ -1,24 +1,24 @@
|
||||
[
|
||||
{
|
||||
"icon": "youtube_8x8.png",
|
||||
"action": "navigate",
|
||||
"actionValue": "https://youtube.com/@ByteDice"
|
||||
},
|
||||
{
|
||||
"icon": "github_8x8.png",
|
||||
"action": "navigate",
|
||||
"actionValue": "https://github.com/ByteDice"
|
||||
},
|
||||
{
|
||||
"hidden": true,
|
||||
"alt": {
|
||||
"name": "byte",
|
||||
"icon": "dice3_8x8.png",
|
||||
"action": "navigate",
|
||||
"actionValue": "/",
|
||||
"disabled": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "youtube_8x8.png",
|
||||
"action": "navigate",
|
||||
"actionValue": "https://youtube.com/@ByteDice"
|
||||
},
|
||||
{
|
||||
"icon": "github_8x8.png",
|
||||
"action": "navigate",
|
||||
"actionValue": "https://github.com/ByteDice"
|
||||
},
|
||||
{
|
||||
"hidden": true,
|
||||
"alt": {
|
||||
"name": "byte",
|
||||
"icon": "dice3_8x8.png",
|
||||
"action": "navigate",
|
||||
"actionValue": "/",
|
||||
"disabled": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"hidden": true,
|
||||
"alt": {
|
||||
@@ -39,15 +39,15 @@
|
||||
"disabled": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "pauseAnimation_8x8.png",
|
||||
"action": "function",
|
||||
"actionValue": "pauseAnimBtn('auto')",
|
||||
"iconId": "animationToggle",
|
||||
"hidden": false,
|
||||
"alt": {
|
||||
"name": "noAnim",
|
||||
"hidden": true
|
||||
{
|
||||
"icon": "pauseAnimation_8x8.png",
|
||||
"action": "function",
|
||||
"actionValue": "pauseAnimBtn('auto')",
|
||||
"iconId": "animationToggle",
|
||||
"hidden": false,
|
||||
"alt": {
|
||||
"name": "noAnim",
|
||||
"hidden": true
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
+142
-149
@@ -1,17 +1,17 @@
|
||||
const PAGES = {
|
||||
_404: -1,
|
||||
null: 0,
|
||||
SYNTHWAVE: 1,
|
||||
TOYS: 2,
|
||||
LICENSE: 3,
|
||||
LOADING: 4,
|
||||
_404: -1,
|
||||
null: 0,
|
||||
SYNTHWAVE: 1,
|
||||
TOYS: 2,
|
||||
LICENSE: 3,
|
||||
LOADING: 4,
|
||||
LIBS: 5
|
||||
}
|
||||
const CONSOLE_COLORS = {
|
||||
red: "color: #FF0000;",
|
||||
green: "color: #00FF00",
|
||||
white: "color: #FFFFFF;",
|
||||
debugTitle: "color: #00FF00;",
|
||||
red: "color: #FF0000;",
|
||||
green: "color: #00FF00",
|
||||
white: "color: #FFFFFF;",
|
||||
debugTitle: "color: #00FF00;",
|
||||
}
|
||||
|
||||
let CURRENT_PAGE = PAGES.null
|
||||
@@ -21,131 +21,124 @@ let gridVisible = false
|
||||
let navBarPresent = false
|
||||
|
||||
function randomFloat(min, max) {
|
||||
return Math.random() * (max - min) + min
|
||||
return Math.random() * (max - min) + min
|
||||
}
|
||||
|
||||
|
||||
function randomIntFrom0(max) {
|
||||
return Math.floor(Math.random() * max)
|
||||
return Math.floor(Math.random() * max)
|
||||
}
|
||||
|
||||
|
||||
function randomInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
}
|
||||
|
||||
|
||||
function randomBool(probability) {
|
||||
return Math.random() <= probability
|
||||
return Math.random() <= probability
|
||||
}
|
||||
|
||||
|
||||
function clampNearest(n, mul) {
|
||||
if(n > 0)
|
||||
return Math.ceil(n / mul) * mul
|
||||
else if( n < 0)
|
||||
return Math.floor(n / mul) * mul
|
||||
else
|
||||
return 0
|
||||
if (n > 0) { return Math.ceil(n / mul) * mul }
|
||||
else if (n < 0) { return Math.floor(n / mul) * mul }
|
||||
else { return 0 }
|
||||
}
|
||||
|
||||
|
||||
function lerp(x, y, t) {
|
||||
return x + t * (y - x)
|
||||
return x + t * (y - x)
|
||||
}
|
||||
|
||||
|
||||
function debugPrint(title, value) {
|
||||
if (!title) {
|
||||
console.error(
|
||||
`error[A0000]: this function takes 1 argument but 0 arguments were supplied
|
||||
--> unknown:0:0
|
||||
|
|
||||
0 | debugPrint()
|
||||
| ^^^^^^^^^^-- argument #1 of type \`Any\` is missing`
|
||||
)
|
||||
return
|
||||
}
|
||||
if (!title) {
|
||||
console.error("debugPrint() takes 2 arguments")
|
||||
return
|
||||
}
|
||||
|
||||
if (value) {
|
||||
console.log(`%c${title}:\n%c${value}`, CONSOLE_COLORS.debugTitle, CONSOLE_COLORS.white)
|
||||
}
|
||||
else {
|
||||
console.log(`%c${title}`, CONSOLE_COLORS.debugTitle)
|
||||
}
|
||||
if (value) {
|
||||
console.log(`%c${title}:\n%c${value}`, CONSOLE_COLORS.debugTitle, CONSOLE_COLORS.white)
|
||||
}
|
||||
else {
|
||||
console.log(`%c${title}`, CONSOLE_COLORS.debugTitle)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toggleGrid(offX = 0, offY = 0) {
|
||||
if (gridVisible) {
|
||||
document.getElementById("gridCanvas").remove()
|
||||
gridVisible = false
|
||||
return
|
||||
}
|
||||
if (gridVisible) {
|
||||
document.getElementById("gridCanvas").remove()
|
||||
gridVisible = false
|
||||
return
|
||||
}
|
||||
|
||||
let canvasEl = document.createElement("canvas")
|
||||
canvasEl.id = "gridCanvas"
|
||||
canvasEl.width = window.innerWidth
|
||||
canvasEl.height = window.innerHeight
|
||||
canvasEl.style.position = "absolute"
|
||||
canvasEl.style.top = `${offY * pxDensity}px`
|
||||
canvasEl.style.left = `${offX * pxDensity}px`
|
||||
canvasEl.style.pointerEvents = "none"
|
||||
let canvasEl = document.createElement("canvas")
|
||||
canvasEl.id = "gridCanvas"
|
||||
canvasEl.width = window.innerWidth
|
||||
canvasEl.height = window.innerHeight
|
||||
canvasEl.style.position = "absolute"
|
||||
canvasEl.style.top = `${offY * pxDensity}px`
|
||||
canvasEl.style.left = `${offX * pxDensity}px`
|
||||
canvasEl.style.pointerEvents = "none"
|
||||
|
||||
let ctx = canvasEl.getContext("2d")
|
||||
let ctx = canvasEl.getContext("2d")
|
||||
|
||||
document.body.appendChild(canvasEl)
|
||||
document.body.appendChild(canvasEl)
|
||||
|
||||
let repeatCountX = window.innerWidth / pxDensity
|
||||
let repeatCountY = window.innerHeight / pxDensity
|
||||
let repeatCountX = window.innerWidth / pxDensity
|
||||
let repeatCountY = window.innerHeight / pxDensity
|
||||
|
||||
ctx.strokeStyle = "#ff0000"
|
||||
ctx.strokeStyle = "#ff0000"
|
||||
ctx.strokeSize = 1
|
||||
ctx.beginPath()
|
||||
ctx.beginPath()
|
||||
|
||||
for (x = 0; x < repeatCountX; x++) {
|
||||
ctx.moveTo(x * pxDensity, 0)
|
||||
ctx.lineTo(x * pxDensity, window.innerHeight)
|
||||
}
|
||||
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)
|
||||
}
|
||||
for (y = 0; y < repeatCountY; y++) {
|
||||
ctx.moveTo(0, y * pxDensity)
|
||||
ctx.lineTo(window.innerWidth, y * pxDensity)
|
||||
}
|
||||
|
||||
ctx.stroke()
|
||||
ctx.stroke()
|
||||
|
||||
gridVisible = true
|
||||
gridVisible = true
|
||||
}
|
||||
|
||||
|
||||
function pauseAnimBtn(state) {
|
||||
if (state == "auto") {
|
||||
if (localStorage["isAnimating"] == "true") { localStorage["isAnimating"] = "false" }
|
||||
else { localStorage["isAnimating"] = "true" }
|
||||
if (state == "auto") {
|
||||
if (localStorage["isAnimating"] == "true") { localStorage["isAnimating"] = "false" }
|
||||
else { localStorage["isAnimating"] = "true" }
|
||||
|
||||
state = localStorage["isAnimating"]
|
||||
}
|
||||
state = localStorage["isAnimating"]
|
||||
}
|
||||
|
||||
let pauseBtn = document.getElementById("animationToggle")
|
||||
let pauseBtn = document.getElementById("animationToggle")
|
||||
if (pauseBtn == undefined) { return; }
|
||||
|
||||
if (state == "true") {
|
||||
isAnimating = true
|
||||
pauseBtn.src = "/assets/icons/pauseAnimation_8x8.png"
|
||||
}
|
||||
else {
|
||||
isAnimating = false
|
||||
pauseBtn.src = "/assets/icons/playAnimation_8x8.png"
|
||||
}
|
||||
if (state == "true") {
|
||||
isAnimating = true
|
||||
pauseBtn.src = "/assets/icons/pauseAnimation_8x8.png"
|
||||
}
|
||||
else {
|
||||
isAnimating = false
|
||||
pauseBtn.src = "/assets/icons/playAnimation_8x8.png"
|
||||
}
|
||||
|
||||
localStorage["isAnimating"] = isAnimating
|
||||
localStorage["isAnimating"] = isAnimating
|
||||
}
|
||||
|
||||
|
||||
function setVh() {
|
||||
document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px")
|
||||
document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px")
|
||||
}
|
||||
|
||||
|
||||
function getEngine() {
|
||||
if ("MozAppearance" in document.documentElement.style)
|
||||
{ return "gecko" }
|
||||
@@ -172,86 +165,86 @@ document.addEventListener("DOMContentLoaded", async function () {
|
||||
let engine = getEngine()
|
||||
if (!["gecko", "blink"].includes(engine))
|
||||
{ alert("Your web browser is not supported, expect major issues.\nRendering engine: " + engine) }
|
||||
|
||||
|
||||
setLoadingProgress("Fetching tips...")
|
||||
|
||||
await loadTips()
|
||||
await loadTips()
|
||||
|
||||
newTip()
|
||||
newTip()
|
||||
|
||||
setLoadingProgress("Calculating pixel density...")
|
||||
calcPixelDensity()
|
||||
setLoadingProgress("Calculating pixel density...")
|
||||
calcPixelDensity()
|
||||
|
||||
if (densityWidth > densityHeight) { debugPrint("pxDensity", `Width, ${pxDensity}`) }
|
||||
else { debugPrint("pxDensity", `Height, ${pxDensity}`) }
|
||||
if (densityWidth > densityHeight) { debugPrint("pxDensity", `Width, ${pxDensity}`) }
|
||||
else { debugPrint("pxDensity", `Height, ${pxDensity}`) }
|
||||
|
||||
if (navBarPresent) {
|
||||
setLoadingProgress("adding navBar...")
|
||||
await loadNavBarJson()
|
||||
onLoadNavBar()
|
||||
}
|
||||
if (navBarPresent) {
|
||||
setLoadingProgress("adding navBar...")
|
||||
await loadNavBarJson()
|
||||
onLoadNavBar()
|
||||
}
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
|
||||
case (PAGES.LICENSE): loadingScreenStars(); await loadingScreenLicense(); break
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
|
||||
case (PAGES.LICENSE): loadingScreenStars(); await loadingScreenLicense(); break
|
||||
case (PAGES.TOYS): loadingScreenStars(); break
|
||||
case (PAGES.LIBS): loadingScreenStars(); break
|
||||
}
|
||||
|
||||
if (navBarPresent) {
|
||||
pauseAnimBtn(localStorage["isAnimating"] || "true")
|
||||
debugPrint("isAnimating", isAnimating)
|
||||
}
|
||||
}
|
||||
|
||||
if (CURRENT_PAGE == PAGES.LOADING) {
|
||||
clearLoadingScreenClutter()
|
||||
if (navBarPresent) {
|
||||
pauseAnimBtn(localStorage["isAnimating"] || "true")
|
||||
debugPrint("isAnimating", isAnimating)
|
||||
}
|
||||
|
||||
if (CURRENT_PAGE == PAGES.LOADING) {
|
||||
clearLoadingScreenClutter()
|
||||
setLoadingProgress("")
|
||||
setInterval(periodicallyChangeTips, 60 * 1000)
|
||||
return
|
||||
}
|
||||
setInterval(periodicallyChangeTips, 60 * 1000)
|
||||
return
|
||||
}
|
||||
|
||||
if (fakeLoading != "true") {
|
||||
removeLoadingScreen(true)
|
||||
}
|
||||
else {
|
||||
setLoadingProgress("Cleaning up...")
|
||||
loadingComplete = true
|
||||
if (fakeLoadingComplete) {
|
||||
removeLoadingScreen()
|
||||
}
|
||||
}
|
||||
if (fakeLoading != "true") {
|
||||
removeLoadingScreen(true)
|
||||
}
|
||||
else {
|
||||
setLoadingProgress("Cleaning up...")
|
||||
loadingComplete = true
|
||||
if (fakeLoadingComplete) {
|
||||
removeLoadingScreen()
|
||||
}
|
||||
}
|
||||
}, false)
|
||||
|
||||
|
||||
window.addEventListener("resize", function() {
|
||||
setVh()
|
||||
calcPixelDensity()
|
||||
setVh()
|
||||
calcPixelDensity()
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): onResizeSynthwave()
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): onResizeSynthwave()
|
||||
case (PAGES.LICENSE): scaleDisplayLicense()
|
||||
}
|
||||
}
|
||||
|
||||
// unoptimal but works well enough
|
||||
if (gridVisible) {
|
||||
toggleGrid()
|
||||
toggleGrid()
|
||||
}
|
||||
// unoptimal but works well enough
|
||||
if (gridVisible) {
|
||||
toggleGrid()
|
||||
toggleGrid()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
if ("scrollRestoration" in history) {
|
||||
history.scrollRestoration = "manual";
|
||||
history.scrollRestoration = "manual";
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener("pageshow", (event) => {
|
||||
if (event.persisted) {
|
||||
// reload page to clear unwanted cache.
|
||||
// for some reason the loading screen stays
|
||||
// permanently open without this.
|
||||
window.location.reload()
|
||||
}
|
||||
if (event.persisted) {
|
||||
// reload page to clear unwanted cache.
|
||||
// for some reason the loading screen stays
|
||||
// permanently open without this.
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
|
||||
let prevAnimationState = isAnimating
|
||||
@@ -270,27 +263,27 @@ async function sha256(text) {
|
||||
|
||||
/*
|
||||
document.addEventListener("visibilitychange", function() {
|
||||
if (document.hidden) {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
else {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
if (document.hidden) {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
else {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener("blur", function() {
|
||||
if (document.visibilityState === "visible") {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
if (document.visibilityState === "visible") {
|
||||
prevAnimationState = isAnimating
|
||||
isAnimating = false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener("focus", function() {
|
||||
if (!document.hidden) {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
if (!document.hidden) {
|
||||
isAnimating = prevAnimationState
|
||||
}
|
||||
})
|
||||
*/
|
||||
+78
-78
@@ -1,112 +1,112 @@
|
||||
:root {
|
||||
--navBar_Inner: #43608D;
|
||||
--navBar_Border: #2F3E56;
|
||||
--navBar_SecondInner: #344b6c;
|
||||
--navBarBtn_Inner: #474747;
|
||||
--navBarBtn_Border: #232323;
|
||||
--brightBlue: #569cd6;
|
||||
--pxDensity: 1;
|
||||
--pxDensityPx: 1px;
|
||||
--bottomPxMargin: 1px;
|
||||
--navBar_Inner: #43608D;
|
||||
--navBar_Border: #2F3E56;
|
||||
--navBar_SecondInner: #344b6c;
|
||||
--navBarBtn_Inner: #474747;
|
||||
--navBarBtn_Border: #232323;
|
||||
--brightBlue: #569cd6;
|
||||
--pxDensity: 1;
|
||||
--pxDensityPx: 1px;
|
||||
--bottomPxMargin: 1px;
|
||||
}
|
||||
html {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
background-color: #323232;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
background-color: #323232;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
body {
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background-color: #323232;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
margin: 0%;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background-color: #323232;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
margin: 0%;
|
||||
width: 100vw;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
.pxFont {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: min(5vmin, 2vmax, 1rem)
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: min(5vmin, 2vmax, 1rem)
|
||||
}
|
||||
@keyframes slide-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
.borderedRect {
|
||||
background-color: var(--navBar_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
|
||||
background-color: var(--navBar_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
|
||||
|
||||
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
padding: 0%;
|
||||
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
padding: 0%;
|
||||
}
|
||||
.invisible {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
}
|
||||
.encased {
|
||||
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);
|
||||
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));*/
|
||||
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));*/
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(4px * var(--pxDensity));
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(4px * var(--pxDensity));
|
||||
}
|
||||
.switch input {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.switchDecor {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--navBarBtn_Border);
|
||||
transition: 0.2s steps(2, end);
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--navBarBtn_Border);
|
||||
transition: 0.2s steps(2, end);
|
||||
}
|
||||
.switchDecor:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: calc(2px * var(--pxDensity));
|
||||
width: calc(2px * var(--pxDensity));
|
||||
left: calc(1px * var(--pxDensity));
|
||||
bottom: calc(1px * var(--pxDensity));
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
transition: 0.2s steps(2, end);
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: calc(2px * var(--pxDensity));
|
||||
width: calc(2px * var(--pxDensity));
|
||||
left: calc(1px * var(--pxDensity));
|
||||
bottom: calc(1px * var(--pxDensity));
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
transition: 0.2s steps(2, end);
|
||||
}
|
||||
.switch input:checked + .switchDecor {
|
||||
background-color: var(--brightBlue);
|
||||
background-color: var(--brightBlue);
|
||||
}
|
||||
.switch input:checked + .switchDecor:before {
|
||||
transform: translateX(calc(4px * var(--pxDensity)));
|
||||
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%);
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: calc(512px * var(--pxDensity));
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
image-rendering: pixelated;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
+33
-33
@@ -1,43 +1,43 @@
|
||||
.bgDiv {
|
||||
background-color: #323232;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
background-color: #323232;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100vw;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
.loadingImg {
|
||||
position: absolute;
|
||||
top: round(50%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(32px * var(--pxDensity));
|
||||
height: calc(32px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
top: round(50%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(32px * var(--pxDensity));
|
||||
height: calc(32px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
@keyframes fade-out {
|
||||
0% {opacity: 100%;}
|
||||
100% {opacity: 0%;}
|
||||
0% {opacity: 100%;}
|
||||
100% {opacity: 0%;}
|
||||
}
|
||||
#loadingCornerText {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#loadingText {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: calc(50vw - min(45vw, 250px));
|
||||
width: min(90vw, 500px);
|
||||
text-align: center;
|
||||
font-size: min(5vmin, 2vmax, 25px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: calc(50vw - min(45vw, 250px));
|
||||
width: min(90vw, 500px);
|
||||
text-align: center;
|
||||
font-size: min(5vmin, 2vmax, 25px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
}
|
||||
+45
-45
@@ -7,22 +7,22 @@ let fakeLoadingComplete = false
|
||||
|
||||
loadingScreenEl.className = "bgDiv"
|
||||
loadingScreenEl.innerHTML = `
|
||||
<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png" id="loadingImg">
|
||||
<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png" id="loadingImg">
|
||||
|
||||
<div style="margin-left: calc(3px * var(--pxDensity)); display: flex;" id="fakeLoadingToggle">
|
||||
<p class="encased" style="height: 100%; font-size: min(5vmin, 2vmax, 25px)">
|
||||
Use extended loading screen?<br>
|
||||
<small style="margin: 0px; font-size: min(5vmin, 2vmax, 10px)">(For immersion)</small>
|
||||
</p>
|
||||
<div class="encased" style="height: inherit; display: flex;">
|
||||
<label class="switch" style="margin: auto;">
|
||||
<input type="checkbox" name="fakeLoadingToggle" onclick="setShowLoading(this.checked)" ${localStorage["fakeLoading"] != "true" ? "" : "checked"}>
|
||||
<span class="switchDecor"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: calc(3px * var(--pxDensity)); display: flex;" id="fakeLoadingToggle">
|
||||
<p class="encased" style="height: 100%; font-size: min(5vmin, 2vmax, 25px)">
|
||||
Use extended loading screen?<br>
|
||||
<small style="margin: 0px; font-size: min(5vmin, 2vmax, 10px)">(For immersion)</small>
|
||||
</p>
|
||||
<div class="encased" style="height: inherit; display: flex;">
|
||||
<label class="switch" style="margin: auto;">
|
||||
<input type="checkbox" name="fakeLoadingToggle" onclick="setShowLoading(this.checked)" ${localStorage["fakeLoading"] != "true" ? "" : "checked"}>
|
||||
<span class="switchDecor"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
|
||||
<p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
|
||||
`
|
||||
|
||||
|
||||
@@ -32,9 +32,9 @@ let tipsJson
|
||||
|
||||
|
||||
async function loadTips() {
|
||||
let tipsText = await fetch("/data/loadingScreenTips.json").then(response => response.text())
|
||||
tipsJson = JSON.parse(tipsText)
|
||||
console.log(tipsJson)
|
||||
let tipsText = await fetch("/data/loadingScreenTips.json").then(response => response.text())
|
||||
tipsJson = JSON.parse(tipsText)
|
||||
console.log(tipsJson)
|
||||
}
|
||||
|
||||
|
||||
@@ -43,54 +43,54 @@ let selectedTip = "undefined"
|
||||
|
||||
|
||||
function newTip() {
|
||||
if (randomIntFrom0(1000) == 0) {
|
||||
// If you snitch the code for this easter egg
|
||||
// then I'll permanently remove the easter egg.
|
||||
selectedTip = `You like kissing boys, don't you?<br>
|
||||
<img src="/assets/boykissers/boykisser_64x64.png"
|
||||
style="aspect-ratio: 1 / 1; width: min-content; height: min-content;">`
|
||||
}
|
||||
else {
|
||||
selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
|
||||
}
|
||||
if (randomIntFrom0(1000) == 0) {
|
||||
// If you snitch the code for this easter egg
|
||||
// then I'll permanently remove the easter egg.
|
||||
selectedTip = `You like kissing boys, don't you?<br>
|
||||
<img src="/assets/boykissers/boykisser_64x64.png"
|
||||
style="aspect-ratio: 1 / 1; width: min-content; height: min-content;">`
|
||||
}
|
||||
else {
|
||||
selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
|
||||
}
|
||||
|
||||
debugPrint("new tip", selectedTip)
|
||||
}
|
||||
debugPrint("new tip", selectedTip)
|
||||
}
|
||||
|
||||
|
||||
function setLoadingProgress(newText) {
|
||||
loadingScreenProgress.innerHTML = `Loading...<br>${newText}<br><br>Tip: ${selectedTip}`
|
||||
loadingScreenProgress.innerHTML = `Loading...<br>${newText}<br><br>Tip: ${selectedTip}`
|
||||
}
|
||||
|
||||
function startLoadingScreen() {
|
||||
loadingScreenProgress.innerHTML = `Loading...<br><br>Tip: ${selectedTip}`
|
||||
|
||||
const loadDur = randomFloat(2000, 4000)
|
||||
debugPrint("loadDur initial", loadDur)
|
||||
debugPrint("loadDur initial", loadDur)
|
||||
|
||||
setTimeout(function() {
|
||||
if (loadingComplete) { removeLoadingScreen() }
|
||||
fakeLoadingComplete = true
|
||||
}, loadDur)
|
||||
if (loadingComplete) { removeLoadingScreen() }
|
||||
fakeLoadingComplete = true
|
||||
}, loadDur)
|
||||
}
|
||||
|
||||
|
||||
function removeLoadingScreen() {
|
||||
if (!isLoading) { return }
|
||||
if (!isLoading) { return }
|
||||
|
||||
setLoadingProgress("Done!")
|
||||
setLoadingProgress("Done!")
|
||||
|
||||
isLoading = false
|
||||
isLoading = false
|
||||
const fadeOutDur = 0.5
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.left = "100vw"
|
||||
newTip()
|
||||
}, fadeOutDur * 1000)
|
||||
}, 500)
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreenEl.style.left = "100vw"
|
||||
newTip()
|
||||
}, fadeOutDur * 1000)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
|
||||
|
||||
+36
-36
@@ -1,57 +1,57 @@
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
margin: calc(1px * var(--pxDensity));
|
||||
margin-bottom: calc(2px * var(--pxDensity));
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
margin: calc(1px * var(--pxDensity));
|
||||
margin-bottom: calc(2px * var(--pxDensity));
|
||||
}
|
||||
|
||||
.navBar {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 0px;
|
||||
width: max-content;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 0px;
|
||||
width: max-content;
|
||||
}
|
||||
.navBtn {
|
||||
background-color: transparent;
|
||||
display: inline-flex;
|
||||
padding: 0%;
|
||||
border: none;
|
||||
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
background-color: transparent;
|
||||
display: inline-flex;
|
||||
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;
|
||||
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)));
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
.navBtnImg {
|
||||
width: calc(12px * var(--pxDensity));
|
||||
height: calc(12px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
margin: 0%;
|
||||
width: calc(12px * var(--pxDensity));
|
||||
height: calc(12px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
margin: 0%;
|
||||
}
|
||||
.navBtnIcon {
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(8px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
margin: calc(2px * var(--pxDensity));
|
||||
width: calc(8px * var(--pxDensity));
|
||||
height: calc(8px * var(--pxDensity));
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
margin: calc(2px * var(--pxDensity));
|
||||
}
|
||||
+51
-51
@@ -4,76 +4,76 @@ let alts
|
||||
navBarPresent = true
|
||||
|
||||
function onLoadNavBar() {
|
||||
const container = document.getElementById("navBarContainer")
|
||||
const altString = container.dataset.alt || ""
|
||||
alts = altString.replaceAll(" ", "").split(",")
|
||||
const container = document.getElementById("navBarContainer")
|
||||
const altString = container.dataset.alt || ""
|
||||
alts = altString.replaceAll(" ", "").split(",")
|
||||
|
||||
debugPrint("Navbar alts", alts.join(", "));
|
||||
debugPrint("Navbar alts", alts.join(", "));
|
||||
|
||||
if (!container) { return }
|
||||
if (!container) { return }
|
||||
|
||||
const navBarAligner = document.createElement("div")
|
||||
navBarAligner.className = "navBarAligner"
|
||||
const navBarAligner = document.createElement("div")
|
||||
navBarAligner.className = "navBarAligner"
|
||||
|
||||
const navBar = document.createElement("ul")
|
||||
navBar.className = "navBar borderedRect"
|
||||
const navBar = document.createElement("ul")
|
||||
navBar.className = "navBar borderedRect"
|
||||
|
||||
|
||||
for (let btn of navBarJson) {
|
||||
createdBtn = createNavBarBtn(
|
||||
btn["icon"] || "",
|
||||
btn["action"] || "",
|
||||
btn["actionValue"] || "",
|
||||
btn["iconId"] || "",
|
||||
btn["alt"] || "",
|
||||
btn["disabled"] || false,
|
||||
btn["hidden"] || false
|
||||
)
|
||||
for (let btn of navBarJson) {
|
||||
createdBtn = createNavBarBtn(
|
||||
btn["icon"] || "",
|
||||
btn["action"] || "",
|
||||
btn["actionValue"] || "",
|
||||
btn["iconId"] || "",
|
||||
btn["alt"] || "",
|
||||
btn["disabled"] || false,
|
||||
btn["hidden"] || false
|
||||
)
|
||||
|
||||
if (createdBtn != null) {
|
||||
navBar.appendChild(createdBtn)
|
||||
}
|
||||
}
|
||||
if (createdBtn != null) {
|
||||
navBar.appendChild(createdBtn)
|
||||
}
|
||||
}
|
||||
|
||||
navBarAligner.appendChild(navBar)
|
||||
container.appendChild(navBarAligner)
|
||||
navBarAligner.appendChild(navBar)
|
||||
container.appendChild(navBarAligner)
|
||||
}
|
||||
|
||||
function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false, hidden = false) {
|
||||
if (alts.includes(alt["name"])) {
|
||||
icon = alt["icon"] || icon || ""
|
||||
action = alt["action"] || action || ""
|
||||
actionValue = alt["actionValue"] || actionValue || ""
|
||||
iconId = alt["iconId"] || iconId || ""
|
||||
if (alts.includes(alt["name"])) {
|
||||
icon = alt["icon"] || icon || ""
|
||||
action = alt["action"] || action || ""
|
||||
actionValue = alt["actionValue"] || actionValue || ""
|
||||
iconId = alt["iconId"] || iconId || ""
|
||||
|
||||
disabled = alt["disabled"] === undefined ? disabled : alt["disabled"] || false;
|
||||
hidden = alt["hidden"] || false;
|
||||
}
|
||||
disabled = alt["disabled"] === undefined ? disabled : alt["disabled"] || false;
|
||||
hidden = alt["hidden"] || false;
|
||||
}
|
||||
|
||||
let onClick
|
||||
switch (action) {
|
||||
case "navigate": onClick = `slideTransition('${actionValue}', event)`; break
|
||||
case "function": onClick = `${actionValue}`; break
|
||||
default: ""
|
||||
}
|
||||
let onClick
|
||||
switch (action) {
|
||||
case "navigate": onClick = `slideTransition('${actionValue}', event)`; break
|
||||
case "function": onClick = `${actionValue}`; break
|
||||
default: ""
|
||||
}
|
||||
|
||||
if (hidden) { return null; }
|
||||
if (hidden) { return null; }
|
||||
|
||||
let btn = document.createElement("li")
|
||||
let btn = document.createElement("li")
|
||||
|
||||
btn.innerHTML = `
|
||||
<button onclick="${onClick}" class="navBtn" ${disabled == true ? "disabled" : ""}>
|
||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
||||
<img class="navBtnIcon" draggable="false" src="/assets/icons/${icon}" id="${iconId}">
|
||||
</button>
|
||||
`
|
||||
btn.innerHTML = `
|
||||
<button onclick="${onClick}" class="navBtn" ${disabled == true ? "disabled" : ""}>
|
||||
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
|
||||
<img class="navBtnIcon" draggable="false" src="/assets/icons/${icon}" id="${iconId}">
|
||||
</button>
|
||||
`
|
||||
|
||||
return btn;
|
||||
return btn;
|
||||
}
|
||||
|
||||
async function loadNavBarJson() {
|
||||
let navBarText = await fetch("/data/navBar.json").then(response => response.text())
|
||||
navBarJson = JSON.parse(navBarText)
|
||||
console.log(navBarJson)
|
||||
let navBarText = await fetch("/data/navBar.json").then(response => response.text())
|
||||
navBarJson = JSON.parse(navBarText)
|
||||
console.log(navBarJson)
|
||||
}
|
||||
|
||||
|
||||
+7
-7
@@ -8,15 +8,15 @@ let densityWidth = document.documentElement.clientWidth / pxWidth
|
||||
let densityHeight = document.documentElement.clientHeight / pxHeight
|
||||
|
||||
function calcPixelDensity() {
|
||||
densityWidth = document.documentElement.clientWidth / pxWidth
|
||||
densityHeight = document.documentElement.clientHeight / pxHeight
|
||||
densityWidth = document.documentElement.clientWidth / pxWidth
|
||||
densityHeight = document.documentElement.clientHeight / pxHeight
|
||||
|
||||
let widest = Math.max(densityWidth, densityHeight)
|
||||
let widest = Math.max(densityWidth, densityHeight)
|
||||
|
||||
document.documentElement.style.setProperty("--pxDensity", widest)
|
||||
document.documentElement.style.setProperty("--pxDensityPx", `${widest}px`)
|
||||
document.documentElement.style.setProperty("--pxDensity", widest)
|
||||
document.documentElement.style.setProperty("--pxDensityPx", `${widest}px`)
|
||||
|
||||
pxDensity = widest
|
||||
pxDensity = widest
|
||||
|
||||
pxDensityDefined = true
|
||||
pxDensityDefined = true
|
||||
}
|
||||
+32
-32
@@ -2,48 +2,48 @@ let loadingScreen = document.getElementById("loadingScreen")
|
||||
let mainDiv = document.getElementById("mainDiv")
|
||||
|
||||
function slideTransition(url, event) {
|
||||
const ctrlPressed = event.ctrlKey
|
||||
let dur = 500
|
||||
let loadingTime = randomFloat(500, 1500)
|
||||
const ctrlPressed = event.ctrlKey
|
||||
let dur = 500
|
||||
let loadingTime = randomFloat(500, 1500)
|
||||
|
||||
if (localStorage["fakeLoading"] != "true") { dur = 500; loadingTime = 0; }
|
||||
if (localStorage["fakeLoading"] != "true") { dur = 500; loadingTime = 0; }
|
||||
|
||||
debugPrint("loadDur transition", loadingTime)
|
||||
debugPrint("loadDur transition", loadingTime)
|
||||
|
||||
const slideLeft = `slide-left ${dur / 1000}s cubic-bezier(0, 0, 0, 1.46) forwards`
|
||||
const slideLeft = `slide-left ${dur / 1000}s cubic-bezier(0, 0, 0, 1.46) forwards`
|
||||
|
||||
loadingScreen.style.animation = slideLeft
|
||||
loadingScreen.style.pointerEvents = "auto"
|
||||
mainDiv.style.animation = slideLeft
|
||||
loadingScreen.style.animation = slideLeft
|
||||
loadingScreen.style.pointerEvents = "auto"
|
||||
mainDiv.style.animation = slideLeft
|
||||
|
||||
setLoadingProgress(`Loading URL "${url}"`)
|
||||
setLoadingProgress(`Loading URL "${url}"`)
|
||||
|
||||
setTimeout(function() {
|
||||
setLoadingProgress("Done!")
|
||||
setTimeout(function() {
|
||||
if (ctrlPressed) {
|
||||
window.open(url, "_blank")
|
||||
}
|
||||
else if (url.startsWith("http")) {
|
||||
window.open(url, "_blank").focus()
|
||||
}
|
||||
else {
|
||||
document.location = url
|
||||
}
|
||||
setTimeout(function() {
|
||||
setLoadingProgress("Done!")
|
||||
setTimeout(function() {
|
||||
if (ctrlPressed) {
|
||||
window.open(url, "_blank")
|
||||
}
|
||||
else if (url.startsWith("http")) {
|
||||
window.open(url, "_blank").focus()
|
||||
}
|
||||
else {
|
||||
document.location = url
|
||||
}
|
||||
|
||||
resetLoadingScreen()
|
||||
}, loadingTime)
|
||||
}, dur + loadingTime)
|
||||
resetLoadingScreen()
|
||||
}, loadingTime)
|
||||
}, dur + loadingTime)
|
||||
}
|
||||
|
||||
function resetLoadingScreen() {
|
||||
const fadeOutDur = 0.5
|
||||
const fadeOutDur = 0.5
|
||||
|
||||
loadingScreen.style.left = "0vw"
|
||||
loadingScreen.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
mainDiv.style.animation = "none"
|
||||
loadingScreen.style.left = "0vw"
|
||||
loadingScreen.style.animation = `fade-out ${fadeOutDur}s forwards`
|
||||
mainDiv.style.animation = "none"
|
||||
|
||||
setTimeout(function() {
|
||||
loadingScreen.style.left = "100vw"
|
||||
}, fadeOutDur * 1000)
|
||||
setTimeout(function() {
|
||||
loadingScreen.style.left = "100vw"
|
||||
}, fadeOutDur * 1000)
|
||||
}
|
||||
+39
-39
@@ -2,64 +2,64 @@
|
||||
<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">
|
||||
<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="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>
|
||||
<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="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 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">
|
||||
<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="mainDiv">
|
||||
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
|
||||
<canvas id="starfallCanvas"></canvas>
|
||||
|
||||
<div id="navBarContainer" data-alt="byte, testtube"></div>
|
||||
<div id="navBarContainer" data-alt="byte, testtube"></div>
|
||||
|
||||
<ul class="libUl">
|
||||
<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="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">
|
||||
<script src="nothing here yet"></script>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="loadingScreen"></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>
|
||||
<!-- 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>
|
||||
<!-- local -->
|
||||
<script src="script.js"></script>
|
||||
<script src="/stars.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
+33
-33
@@ -1,54 +1,54 @@
|
||||
.libContainer {
|
||||
border: none;
|
||||
display: grid;
|
||||
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;
|
||||
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%;
|
||||
image-rendering: pixelated;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
margin: auto auto;
|
||||
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;
|
||||
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)));
|
||||
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));
|
||||
font-size: max(1.2em, 2.5vmin);
|
||||
margin: 0%;
|
||||
margin-bottom: calc(1px * var(--pxDensity));
|
||||
}
|
||||
.desc {
|
||||
font-size: max(1em, 2vmin);
|
||||
margin: 0%;
|
||||
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;
|
||||
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)));
|
||||
filter: brightness(0.85);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
}
|
||||
.libUl {
|
||||
padding: calc(3px * var(--pxDensity));
|
||||
@@ -60,9 +60,9 @@ button:active {
|
||||
.libUl { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
.libLi {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
CURRENT_PAGE = PAGES.SYNTHWAVE
|
||||
|
||||
function loadingScreenSynthwave() {
|
||||
setLoadingProgress("Adding stars...")
|
||||
addStars()
|
||||
setLoadingProgress("Adding stars...")
|
||||
addStars()
|
||||
|
||||
setLoadingProgress("Starting starfall animation...")
|
||||
startStarfall()
|
||||
setLoadingProgress("Starting starfall animation...")
|
||||
startStarfall()
|
||||
|
||||
setLoadingProgress("Starting synthwave animation...")
|
||||
defShaderMaterial()
|
||||
preAnimateSynthwave(25)
|
||||
animateSynthwave(0)
|
||||
setLoadingProgress("Starting synthwave animation...")
|
||||
defShaderMaterial()
|
||||
preAnimateSynthwave(25)
|
||||
animateSynthwave(0)
|
||||
}
|
||||
|
||||
|
||||
function onResizeSynthwave() {
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
composer.setSize(window.innerWidth, window.innerHeight)
|
||||
camera.aspect = window.innerWidth / window.innerHeight
|
||||
camera.updateProjectionMatrix()
|
||||
if (shaderMaterial) { updateShaderMatPxDensity() }
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
composer.setSize(window.innerWidth, window.innerHeight)
|
||||
camera.aspect = window.innerWidth / window.innerHeight
|
||||
camera.updateProjectionMatrix()
|
||||
if (shaderMaterial) { updateShaderMatPxDensity() }
|
||||
}
|
||||
@@ -8,78 +8,78 @@ const starfallCtx = starfallCanvas.getContext("2d")
|
||||
|
||||
|
||||
class Starfall {
|
||||
constructor() {
|
||||
this.pos = {x: 0, y: 0}
|
||||
this.vel = {x: 0, y: 0}
|
||||
}
|
||||
constructor() {
|
||||
this.pos = {x: 0, y: 0}
|
||||
this.vel = {x: 0, y: 0}
|
||||
}
|
||||
|
||||
generate() {
|
||||
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(240, 580) : randomFloat(-580, -240)
|
||||
this.vel.y = randomFloat(20, 80)
|
||||
}
|
||||
generate() {
|
||||
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(240, 580) : randomFloat(-580, -240)
|
||||
this.vel.y = randomFloat(20, 80)
|
||||
}
|
||||
|
||||
draw() {
|
||||
draw() {
|
||||
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 - LEN_X,
|
||||
this.pos.y - LEN_Y
|
||||
)
|
||||
}
|
||||
// very expensive but idk how to make it less expensive (thanks canvas)
|
||||
drawPixelLine(
|
||||
this.pos.x,
|
||||
this.pos.y,
|
||||
this.pos.x - LEN_X,
|
||||
this.pos.y - LEN_Y
|
||||
)
|
||||
}
|
||||
|
||||
stepAnimation(dt) {
|
||||
this.pos.x += this.vel.x * dt
|
||||
this.pos.y += this.vel.y * dt
|
||||
}
|
||||
stepAnimation(dt) {
|
||||
this.pos.x += this.vel.x * dt
|
||||
this.pos.y += this.vel.y * dt
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function drawPixelLine(fromX, fromY, toX, toY) {
|
||||
const pxInflate = 0.1
|
||||
const pxInflate = 0.1
|
||||
|
||||
const dx = Math.abs(toX - fromX)
|
||||
const dy = Math.abs(toY - fromY)
|
||||
const sx = fromX < toX ? 1 : -1
|
||||
const sy = fromY < toY ? 1 : -1
|
||||
let err = dx - dy
|
||||
const dx = Math.abs(toX - fromX)
|
||||
const dy = Math.abs(toY - fromY)
|
||||
const sx = fromX < toX ? 1 : -1
|
||||
const sy = fromY < toY ? 1 : -1
|
||||
let err = dx - dy
|
||||
|
||||
let x = fromX
|
||||
let y = fromY
|
||||
let x = fromX
|
||||
let y = fromY
|
||||
|
||||
starfallCtx.beginPath()
|
||||
starfallCtx.beginPath()
|
||||
|
||||
const steps = Math.max(dx, dy)
|
||||
const steps = Math.max(dx, dy)
|
||||
|
||||
for (let i = 0; i <= steps; i++) {
|
||||
const alpha = i == 0 ? 1 : 0.1 * (1 - i / steps)
|
||||
starfallCtx.fillStyle = `rgba(255, 255, 255, ${alpha})`
|
||||
for (let i = 0; i <= steps; i++) {
|
||||
const alpha = i == 0 ? 1 : 0.1 * (1 - i / steps)
|
||||
starfallCtx.fillStyle = `rgba(255, 255, 255, ${alpha})`
|
||||
|
||||
starfallCtx.rect(
|
||||
clampNearest(x * pxDensity, pxDensity) - 0.5,
|
||||
clampNearest(y * pxDensity, pxDensity) - 0.5,
|
||||
pxInflate + pxDensity,
|
||||
pxInflate + pxDensity
|
||||
)
|
||||
starfallCtx.rect(
|
||||
clampNearest(x * pxDensity, pxDensity) - 0.5,
|
||||
clampNearest(y * pxDensity, pxDensity) - 0.5,
|
||||
pxInflate + pxDensity,
|
||||
pxInflate + pxDensity
|
||||
)
|
||||
|
||||
const e2 = 2 * err
|
||||
if (e2 > -dy) {
|
||||
err -= dy
|
||||
x += sx
|
||||
}
|
||||
if (e2 < dx) {
|
||||
err += dx
|
||||
y += sy
|
||||
}
|
||||
const e2 = 2 * err
|
||||
if (e2 > -dy) {
|
||||
err -= dy
|
||||
x += sx
|
||||
}
|
||||
if (e2 < dx) {
|
||||
err += dx
|
||||
y += sy
|
||||
}
|
||||
|
||||
starfallCtx.fill()
|
||||
}
|
||||
starfallCtx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -92,53 +92,53 @@ function animateStarfalls() {
|
||||
let dt = (now - lastUpd) / MILLISEC
|
||||
lastUpd = now
|
||||
|
||||
if (!isAnimating) { return }
|
||||
if (!isAnimating) { return }
|
||||
|
||||
starfallCtx.clearRect(0, 0, starfallCanvas.width, starfallCanvas.height)
|
||||
starfallCtx.clearRect(0, 0, starfallCanvas.width, starfallCanvas.height)
|
||||
|
||||
let shouldGenerate = randomBool(0.01)
|
||||
let shouldGenerate = randomBool(0.01)
|
||||
|
||||
if (shouldGenerate) {
|
||||
let newStarfall = new Starfall()
|
||||
newStarfall.generate()
|
||||
allStarfalls.push(newStarfall)
|
||||
}
|
||||
if (shouldGenerate) {
|
||||
let newStarfall = new Starfall()
|
||||
newStarfall.generate()
|
||||
allStarfalls.push(newStarfall)
|
||||
}
|
||||
|
||||
for (let starfall of allStarfalls) {
|
||||
if (starfall.pos.x < -50 || starfall.pos.x > pxWidth + 50) {
|
||||
allStarfalls.splice(allStarfalls.indexOf(starfall), 1)
|
||||
continue
|
||||
}
|
||||
for (let starfall of allStarfalls) {
|
||||
if (starfall.pos.x < -50 || starfall.pos.x > pxWidth + 50) {
|
||||
allStarfalls.splice(allStarfalls.indexOf(starfall), 1)
|
||||
continue
|
||||
}
|
||||
|
||||
starfall.stepAnimation(dt)
|
||||
starfall.draw()
|
||||
}
|
||||
starfall.stepAnimation(dt)
|
||||
starfall.draw()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function startStarfall() {
|
||||
animateStarfalls()
|
||||
animateStarfalls()
|
||||
|
||||
requestAnimationFrame(startStarfall)
|
||||
requestAnimationFrame(startStarfall)
|
||||
}
|
||||
|
||||
|
||||
function addStars() {
|
||||
let starNoise = document.getElementById("starNoise")
|
||||
let randX = randomInt(0, 256)
|
||||
let randY = randomInt(0, 256)
|
||||
let starNoise = document.getElementById("starNoise")
|
||||
let randX = randomInt(0, 256)
|
||||
let randY = randomInt(0, 256)
|
||||
|
||||
debugPrint("Star pos", `[x: ${randX}, y: ${randY}]`)
|
||||
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))`
|
||||
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()
|
||||
addStars()
|
||||
|
||||
setLoadingProgress("Starting starfall animation...")
|
||||
startStarfall()
|
||||
setLoadingProgress("Starting starfall animation...")
|
||||
startStarfall()
|
||||
}
|
||||
@@ -1,25 +1,25 @@
|
||||
.synthSun {
|
||||
width: calc(40px * var(--pxDensity));
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
top: round(60%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(40px * var(--pxDensity));
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
image-rendering: pixelated;
|
||||
position: absolute;
|
||||
top: round(60%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.bgGradient {
|
||||
image-rendering: pixelated;
|
||||
width: calc(256px * var(--pxDensity));
|
||||
height: calc(164px * var(--pxDensity));
|
||||
aspect-ratio: auto;
|
||||
position: absolute;
|
||||
top: round(50%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -50%);
|
||||
image-rendering: pixelated;
|
||||
width: calc(256px * var(--pxDensity));
|
||||
height: calc(164px * var(--pxDensity));
|
||||
aspect-ratio: auto;
|
||||
position: absolute;
|
||||
top: round(50%, var(--pxDensityPx));
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
#synthwaveCanvas {
|
||||
position: absolute;
|
||||
top: round(0%, var(--pxDensityPx));
|
||||
left: round(0%, var(--pxDensityPx));
|
||||
position: absolute;
|
||||
top: round(0%, var(--pxDensityPx));
|
||||
left: round(0%, var(--pxDensityPx));
|
||||
}
|
||||
+240
-240
@@ -12,10 +12,10 @@ const renderPass = new THREE.RenderPass(scene, camera)
|
||||
composer.addPass(renderPass)
|
||||
|
||||
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
|
||||
minFilter: THREE.NearestFilter,
|
||||
magFilter: THREE.NearestFilter,
|
||||
format: THREE.RGBAFormat,
|
||||
type: THREE.UNSIGNED_BYTE
|
||||
minFilter: THREE.NearestFilter,
|
||||
magFilter: THREE.NearestFilter,
|
||||
format: THREE.RGBAFormat,
|
||||
type: THREE.UNSIGNED_BYTE
|
||||
})
|
||||
|
||||
let shaderMaterial
|
||||
@@ -23,86 +23,86 @@ let shaderPass
|
||||
|
||||
|
||||
function defShaderMaterial() {
|
||||
shaderMaterial = makeShaderMaterial()
|
||||
shaderMaterial = makeShaderMaterial()
|
||||
|
||||
shaderPass = new THREE.ShaderPass(shaderMaterial)
|
||||
composer.addPass(shaderPass)
|
||||
shaderPass.material.uniforms.tDiffuse.value = renderTarget.texture
|
||||
shaderPass = new THREE.ShaderPass(shaderMaterial)
|
||||
composer.addPass(shaderPass)
|
||||
shaderPass.material.uniforms.tDiffuse.value = renderTarget.texture
|
||||
}
|
||||
|
||||
|
||||
function makeShaderMaterial() {
|
||||
return new THREE.ShaderMaterial({
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
return new THREE.ShaderMaterial({
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
varying vec2 vUv;
|
||||
|
||||
uniform vec3 edgeColor;
|
||||
uniform vec3 centerColor;
|
||||
uniform sampler2D tDiffuse;
|
||||
uniform float pxDensity;
|
||||
uniform vec2 resolution;
|
||||
uniform vec3 edgeColor;
|
||||
uniform vec3 centerColor;
|
||||
uniform sampler2D tDiffuse;
|
||||
uniform float pxDensity;
|
||||
uniform vec2 resolution;
|
||||
|
||||
float brightness(vec3 c) {
|
||||
return (c.r + c.g + c.b) / 3.0;
|
||||
}
|
||||
float brightness(vec3 c) {
|
||||
return (c.r + c.g + c.b) / 3.0;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 uv = vUv;
|
||||
void main() {
|
||||
vec2 uv = vUv;
|
||||
|
||||
vec2 screenPxCount = vec2(resolution.x / pxDensity, resolution.y / pxDensity);
|
||||
//screenPxCount = vec2(256.0, 164.0);
|
||||
vec2 p = floor(uv * screenPxCount) / screenPxCount;
|
||||
vec2 screenPxCount = vec2(resolution.x / pxDensity, resolution.y / pxDensity);
|
||||
//screenPxCount = vec2(256.0, 164.0);
|
||||
vec2 p = floor(uv * screenPxCount) / screenPxCount;
|
||||
|
||||
vec4 color = texture2D(tDiffuse, p);
|
||||
vec4 color = texture2D(tDiffuse, p);
|
||||
|
||||
float b = brightness(color.rgb);
|
||||
float centerB = brightness(centerColor);
|
||||
float alpha = floor(color.a);
|
||||
float b = brightness(color.rgb);
|
||||
float centerB = brightness(centerColor);
|
||||
float alpha = floor(color.a);
|
||||
|
||||
if (b > centerB) {
|
||||
gl_FragColor = vec4(edgeColor, color.a);
|
||||
}
|
||||
else if (color == vec4(0.0)) {
|
||||
gl_FragColor = vec4(0.0);
|
||||
}
|
||||
else {
|
||||
gl_FragColor = vec4(centerColor, color.a);
|
||||
}
|
||||
|
||||
//gl_FragColor = color;
|
||||
}
|
||||
`,
|
||||
uniforms: {
|
||||
edgeColor: { value: new THREE.Color(0x00b4f0) },
|
||||
centerColor: { value: new THREE.Color(0x323232) },
|
||||
tDiffuse: { value: null },
|
||||
pxDensity: { value: pxDensity },
|
||||
resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
|
||||
}
|
||||
})
|
||||
if (b > centerB) {
|
||||
gl_FragColor = vec4(edgeColor, color.a);
|
||||
}
|
||||
else if (color == vec4(0.0)) {
|
||||
gl_FragColor = vec4(0.0);
|
||||
}
|
||||
else {
|
||||
gl_FragColor = vec4(centerColor, color.a);
|
||||
}
|
||||
|
||||
//gl_FragColor = color;
|
||||
}
|
||||
`,
|
||||
uniforms: {
|
||||
edgeColor: { value: new THREE.Color(0x00b4f0) },
|
||||
centerColor: { value: new THREE.Color(0x323232) },
|
||||
tDiffuse: { value: null },
|
||||
pxDensity: { value: pxDensity },
|
||||
resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function updateShaderMatPxDensity() {
|
||||
shaderMaterial.uniforms.resolution.value = new THREE.Vector2(window.innerWidth, window.innerHeight)
|
||||
shaderMaterial.uniforms.pxDensity.value = pxDensity
|
||||
shaderMaterial.uniforms.resolution.value = new THREE.Vector2(window.innerWidth, window.innerHeight)
|
||||
shaderMaterial.uniforms.pxDensity.value = pxDensity
|
||||
}
|
||||
|
||||
|
||||
// TODO: add pixelation shader
|
||||
|
||||
if (!renderer) {
|
||||
alert("Renderer failed to load, using static images instead.")
|
||||
// TODO: add image logic
|
||||
throw new Error("Renderer initialization failed.")
|
||||
alert("Renderer failed to load, using static images instead.")
|
||||
// TODO: add image logic
|
||||
throw new Error("Renderer initialization failed.")
|
||||
}
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
@@ -115,15 +115,15 @@ renderer.setClearColor(0x000000, 0)
|
||||
const geometry = new THREE.BufferGeometry()
|
||||
|
||||
let meshVerts = [
|
||||
-1, 0, 1,
|
||||
-1, 1, -1,
|
||||
1, 1, 1,
|
||||
1, 0, -1
|
||||
-1, 0, 1,
|
||||
-1, 1, -1,
|
||||
1, 1, 1,
|
||||
1, 0, -1
|
||||
]
|
||||
|
||||
let meshIndices = [
|
||||
0, 1, 2,
|
||||
1, 2, 3
|
||||
0, 1, 2,
|
||||
1, 2, 3
|
||||
]
|
||||
|
||||
|
||||
@@ -151,162 +151,162 @@ camera.rotation.x = 0.2
|
||||
camera.lookAt(0, 0, 0) */
|
||||
|
||||
debugPrint(
|
||||
"Camera transform",
|
||||
`Pos: [x: ${camera.position.x}, y: ${camera.position.y}, z: ${camera.position.z}]
|
||||
"Camera transform",
|
||||
`Pos: [x: ${camera.position.x}, y: ${camera.position.y}, z: ${camera.position.z}]
|
||||
Rot: [x: ${camera.rotation.x}, y: ${camera.rotation.y}, z: ${camera.rotation.z}]`
|
||||
)
|
||||
|
||||
function hillCurve(x, width) {
|
||||
return (Math.sin(Math.PI * (x + 1)) + 1) ** width
|
||||
return (Math.sin(Math.PI * (x + 1)) + 1) ** width
|
||||
}
|
||||
|
||||
|
||||
function generateHill(width, length, segments, maxHeight, posOffsetZ = 0, prevHillVerts = []) {
|
||||
let hillIndices = []
|
||||
let startPos = -width / 2
|
||||
let triCount = segments + 1
|
||||
let hillIndices = []
|
||||
let startPos = -width / 2
|
||||
let triCount = segments + 1
|
||||
|
||||
let prevHillHeights = prevHillVerts.filter((_, index) => (index - 1) % 3 === 0)
|
||||
let prevHillHeights = prevHillVerts.filter((_, index) => (index - 1) % 3 === 0)
|
||||
|
||||
let hillData = generateHillVerts(
|
||||
triCount,
|
||||
maxHeight,
|
||||
width,
|
||||
startPos,
|
||||
prevHillHeights,
|
||||
segments,
|
||||
length,
|
||||
posOffsetZ
|
||||
)
|
||||
let hillVerts = hillData.verts
|
||||
let hillUVs = hillData.uvs
|
||||
let hillData = generateHillVerts(
|
||||
triCount,
|
||||
maxHeight,
|
||||
width,
|
||||
startPos,
|
||||
prevHillHeights,
|
||||
segments,
|
||||
length,
|
||||
posOffsetZ
|
||||
)
|
||||
let hillVerts = hillData.verts
|
||||
let hillUVs = hillData.uvs
|
||||
|
||||
for (let i = 0; i < segments; i++) {
|
||||
hillIndices.push(i * 2, i * 2 + 2, i * 2 + 1)
|
||||
hillIndices.push(i * 2 + 1, i * 2 + 2, i * 2 + 3)
|
||||
}
|
||||
for (let i = 0; i < segments; i++) {
|
||||
hillIndices.push(i * 2, i * 2 + 2, i * 2 + 1)
|
||||
hillIndices.push(i * 2 + 1, i * 2 + 2, i * 2 + 3)
|
||||
}
|
||||
|
||||
const geometry = new THREE.BufferGeometry()
|
||||
const geometry = new THREE.BufferGeometry()
|
||||
|
||||
geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(hillVerts), 3))
|
||||
geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(hillUVs), 2))
|
||||
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(hillIndices), 1))
|
||||
geometry.computeVertexNormals()
|
||||
geometry.computeBoundingBox()
|
||||
geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(hillVerts), 3))
|
||||
geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(hillUVs), 2))
|
||||
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(hillIndices), 1))
|
||||
geometry.computeVertexNormals()
|
||||
geometry.computeBoundingBox()
|
||||
|
||||
const material = generateHillMat(segments, width, length)
|
||||
const newMesh = new THREE.Mesh(geometry, material)
|
||||
const material = generateHillMat(segments, width, length)
|
||||
const newMesh = new THREE.Mesh(geometry, material)
|
||||
|
||||
newMesh.position.z = posOffsetZ
|
||||
newMesh.position.z = posOffsetZ
|
||||
|
||||
return {mesh: newMesh, verts: hillVerts, indices: hillIndices}
|
||||
return {mesh: newMesh, verts: hillVerts, indices: hillIndices}
|
||||
}
|
||||
|
||||
|
||||
function generateHillVerts(
|
||||
triCount,
|
||||
maxHeight,
|
||||
width,
|
||||
startPos,
|
||||
prevHillHeights,
|
||||
segments,
|
||||
length
|
||||
triCount,
|
||||
maxHeight,
|
||||
width,
|
||||
startPos,
|
||||
prevHillHeights,
|
||||
segments,
|
||||
length
|
||||
) {
|
||||
let hillVerts = []
|
||||
let hillUVs = []
|
||||
let hillVerts = []
|
||||
let hillUVs = []
|
||||
|
||||
for (let i = 0; i < triCount; i++) {
|
||||
let height = randomFloat(0, maxHeight) * hillCurve(i / triCount, 1.2)
|
||||
for (let i = 0; i < triCount; i++) {
|
||||
let height = randomFloat(0, maxHeight) * hillCurve(i / triCount, 1.2)
|
||||
|
||||
hillVerts.push(i / (triCount - 1) * width + startPos)
|
||||
hillVerts.push(i / (triCount - 1) * width + startPos)
|
||||
|
||||
if (prevHillHeights.length / 2 != segments + 1) { hillVerts.push(0) }
|
||||
else { hillVerts.push(prevHillHeights[i * 2 + 1]) }
|
||||
if (prevHillHeights.length / 2 != segments + 1) { hillVerts.push(0) }
|
||||
else { hillVerts.push(prevHillHeights[i * 2 + 1]) }
|
||||
|
||||
hillVerts.push(length / 2)
|
||||
hillVerts.push(length / 2)
|
||||
|
||||
hillUVs.push(i / (triCount - 1), 0)
|
||||
hillUVs.push(i / (triCount - 1), 0)
|
||||
|
||||
hillVerts.push(
|
||||
i / (triCount - 1) * width + startPos,
|
||||
height,
|
||||
-length / 2
|
||||
)
|
||||
hillUVs.push(i / (triCount - 1), 1)
|
||||
}
|
||||
hillVerts.push(
|
||||
i / (triCount - 1) * width + startPos,
|
||||
height,
|
||||
-length / 2
|
||||
)
|
||||
hillUVs.push(i / (triCount - 1), 1)
|
||||
}
|
||||
|
||||
return {verts: hillVerts, uvs: hillUVs}
|
||||
return {verts: hillVerts, uvs: hillUVs}
|
||||
}
|
||||
|
||||
|
||||
function generateHillMat(segments, width, length) {
|
||||
//return new THREE.MeshBasicMaterial({ color: 0x00FF00, wireframe: false })
|
||||
//return new THREE.MeshBasicMaterial({ color: 0x00FF00, wireframe: false })
|
||||
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`
|
||||
|
||||
const fragmentShader = `
|
||||
varying vec2 vUv;
|
||||
uniform vec3 edgeColor;
|
||||
uniform vec3 centerColor;
|
||||
uniform int segmentCount;
|
||||
uniform vec2 resolution;
|
||||
const fragmentShader = `
|
||||
varying vec2 vUv;
|
||||
uniform vec3 edgeColor;
|
||||
uniform vec3 centerColor;
|
||||
uniform int segmentCount;
|
||||
uniform vec2 resolution;
|
||||
|
||||
void main() {
|
||||
vec2 uv = vUv;
|
||||
uv.x = fract(uv.x * float(segmentCount));
|
||||
void main() {
|
||||
vec2 uv = vUv;
|
||||
uv.x = fract(uv.x * float(segmentCount));
|
||||
|
||||
float edgeThresholdX = 0.075;
|
||||
float edgeThresholdY = 0.075;
|
||||
float edgeThresholdX = 0.075;
|
||||
float edgeThresholdY = 0.075;
|
||||
|
||||
if (resolution.x > resolution.y) {
|
||||
edgeThresholdX *= resolution.y / resolution.x;
|
||||
}
|
||||
else {
|
||||
edgeThresholdY *= resolution.x / resolution.y;
|
||||
}
|
||||
if (resolution.x > resolution.y) {
|
||||
edgeThresholdX *= resolution.y / resolution.x;
|
||||
}
|
||||
else {
|
||||
edgeThresholdY *= resolution.x / resolution.y;
|
||||
}
|
||||
|
||||
float isEdge = 0.0;
|
||||
|
||||
if (uv.y < edgeThresholdY || uv.y > (1.0 - edgeThresholdY)) {
|
||||
isEdge = 1.0;
|
||||
}
|
||||
|
||||
if (uv.x < edgeThresholdX || uv.x > (1.0 - edgeThresholdX)) {
|
||||
isEdge = 1.0;
|
||||
}
|
||||
float isEdge = 0.0;
|
||||
|
||||
vec3 color = mix(centerColor, edgeColor, isEdge);
|
||||
if (uv.y < edgeThresholdY || uv.y > (1.0 - edgeThresholdY)) {
|
||||
isEdge = 1.0;
|
||||
}
|
||||
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
}
|
||||
`
|
||||
if (uv.x < edgeThresholdX || uv.x > (1.0 - edgeThresholdX)) {
|
||||
isEdge = 1.0;
|
||||
}
|
||||
|
||||
const material = new THREE.ShaderMaterial({
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
uniforms: {
|
||||
edgeColor: { value: new THREE.Color(0x00b4f0) },
|
||||
centerColor: { value: new THREE.Color(0x323232) },
|
||||
segmentCount: { value: segments },
|
||||
resolution: { value: new THREE.Vector2(width / segments, length) }
|
||||
}
|
||||
})
|
||||
vec3 color = mix(centerColor, edgeColor, isEdge);
|
||||
|
||||
return material
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
}
|
||||
`
|
||||
|
||||
const material = new THREE.ShaderMaterial({
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
uniforms: {
|
||||
edgeColor: { value: new THREE.Color(0x00b4f0) },
|
||||
centerColor: { value: new THREE.Color(0x323232) },
|
||||
segmentCount: { value: segments },
|
||||
resolution: { value: new THREE.Vector2(width / segments, length) }
|
||||
}
|
||||
})
|
||||
|
||||
return material
|
||||
}
|
||||
|
||||
|
||||
let allHillMeshes = []
|
||||
|
||||
function addHillMesh(mesh) {
|
||||
allHillMeshes.push(mesh)
|
||||
scene.add(mesh)
|
||||
allHillMeshes.push(mesh)
|
||||
scene.add(mesh)
|
||||
}
|
||||
|
||||
|
||||
@@ -316,25 +316,25 @@ let lastHillVerts = []
|
||||
let hasPreAnimated = false
|
||||
|
||||
function preAnimateSynthwave(times) {
|
||||
for (let i = 0; i < times; i++) {
|
||||
let hillOffset = -(i * hillLength) + 0.02
|
||||
for (let i = 0; i < times; i++) {
|
||||
let hillOffset = -(i * hillLength) + 0.02
|
||||
|
||||
let newHill = generateHill(
|
||||
15, //camera.aspect * 10,
|
||||
hillLength,
|
||||
25,
|
||||
4,
|
||||
hillOffset,
|
||||
lastHillVerts
|
||||
)
|
||||
let newHill = generateHill(
|
||||
15, //camera.aspect * 10,
|
||||
hillLength,
|
||||
25,
|
||||
4,
|
||||
hillOffset,
|
||||
lastHillVerts
|
||||
)
|
||||
|
||||
addHillMesh(newHill.mesh)
|
||||
lastHillVerts = newHill.verts
|
||||
hillSpawnOffset = hillOffset
|
||||
}
|
||||
addHillMesh(newHill.mesh)
|
||||
lastHillVerts = newHill.verts
|
||||
hillSpawnOffset = hillOffset
|
||||
}
|
||||
|
||||
hasPreAnimated = true
|
||||
debugPrint("Pre-animated synthwave complete")
|
||||
hasPreAnimated = true
|
||||
debugPrint("Pre-animated synthwave complete")
|
||||
}
|
||||
|
||||
|
||||
@@ -344,69 +344,69 @@ let tickMultiplier = 1
|
||||
let distSinceLastHill = 0
|
||||
|
||||
function animateSynthwave(timestamp) {
|
||||
let deltaTime = (timestamp - lastTime) / 1000
|
||||
lastTime = timestamp
|
||||
let deltaTime = (timestamp - lastTime) / 1000
|
||||
lastTime = timestamp
|
||||
|
||||
let currentTickRate = 1 / deltaTime
|
||||
tickMultiplier = tickRate / currentTickRate
|
||||
let currentTickRate = 1 / deltaTime
|
||||
tickMultiplier = tickRate / currentTickRate
|
||||
|
||||
if (!hasPreAnimated) { return }
|
||||
if (!hasPreAnimated) { return }
|
||||
|
||||
if (!isAnimating) {
|
||||
render()
|
||||
return
|
||||
}
|
||||
|
||||
const moveDist = 0.0035 //0.05 * tickMultiplier
|
||||
distSinceLastHill += moveDist
|
||||
if (!isAnimating) {
|
||||
render()
|
||||
return
|
||||
}
|
||||
|
||||
for (let hill of allHillMeshes) {
|
||||
hill.position.z += moveDist
|
||||
|
||||
const outOfBoundsCoord = 5
|
||||
if (hill.position.z - hill.geometry.boundingBox.min.y >= outOfBoundsCoord) {
|
||||
scene.remove(hill)
|
||||
allHillMeshes.splice(allHillMeshes.indexOf(hill), 1)
|
||||
continue
|
||||
}
|
||||
}
|
||||
const moveDist = 0.0035 //0.05 * tickMultiplier
|
||||
distSinceLastHill += moveDist
|
||||
|
||||
if (distSinceLastHill >= hillLength) {
|
||||
for (let hill of allHillMeshes) {
|
||||
hill.position.z += moveDist
|
||||
|
||||
let hillZOffset = hillLength - distSinceLastHill
|
||||
const outOfBoundsCoord = 5
|
||||
if (hill.position.z - hill.geometry.boundingBox.min.y >= outOfBoundsCoord) {
|
||||
scene.remove(hill)
|
||||
allHillMeshes.splice(allHillMeshes.indexOf(hill), 1)
|
||||
continue
|
||||
}
|
||||
}
|
||||
|
||||
let newHill = generateHill(
|
||||
15, //camera.aspect * 10,
|
||||
hillLength,
|
||||
25,
|
||||
4,
|
||||
hillZOffset + 0.02 + hillSpawnOffset,
|
||||
lastHillVerts
|
||||
)
|
||||
if (distSinceLastHill >= hillLength) {
|
||||
|
||||
addHillMesh(newHill.mesh)
|
||||
distSinceLastHill = -hillZOffset
|
||||
lastHillVerts = newHill.verts
|
||||
}
|
||||
let hillZOffset = hillLength - distSinceLastHill
|
||||
|
||||
render()
|
||||
let newHill = generateHill(
|
||||
15, //camera.aspect * 10,
|
||||
hillLength,
|
||||
25,
|
||||
4,
|
||||
hillZOffset + 0.02 + hillSpawnOffset,
|
||||
lastHillVerts
|
||||
)
|
||||
|
||||
addHillMesh(newHill.mesh)
|
||||
distSinceLastHill = -hillZOffset
|
||||
lastHillVerts = newHill.verts
|
||||
}
|
||||
|
||||
render()
|
||||
}
|
||||
|
||||
|
||||
function render() {
|
||||
if (usePostProcessing) {
|
||||
renderer.setRenderTarget(renderTarget)
|
||||
renderer.render(scene, camera)
|
||||
if (usePostProcessing) {
|
||||
renderer.setRenderTarget(renderTarget)
|
||||
renderer.render(scene, camera)
|
||||
|
||||
renderer.setRenderTarget(null)
|
||||
composer.render()
|
||||
renderer.setRenderTarget(null)
|
||||
composer.render()
|
||||
|
||||
requestAnimationFrame(animateSynthwave)
|
||||
}
|
||||
else {
|
||||
renderer.setRenderTarget(null)
|
||||
renderer.render(scene, camera)
|
||||
requestAnimationFrame(animateSynthwave)
|
||||
}
|
||||
else {
|
||||
renderer.setRenderTarget(null)
|
||||
renderer.render(scene, camera)
|
||||
|
||||
requestAnimationFrame(animateSynthwave)
|
||||
}
|
||||
requestAnimationFrame(animateSynthwave)
|
||||
}
|
||||
}
|
||||
+34
-34
@@ -2,55 +2,55 @@
|
||||
<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">
|
||||
<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="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</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
|
||||
<title>Byte Dice</title>
|
||||
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net">
|
||||
|
||||
<!--
|
||||
<meta name="description" content="A small website served as a place to find content related to Byte Dice.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
|
||||
<meta name="author" content="Byte Dice">
|
||||
<meta name="description" content="A small website served as a place to find content related to Byte Dice.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
|
||||
<meta name="author" content="Byte Dice">
|
||||
|
||||
<meta property="og:title" content="Byte Dice">
|
||||
<meta property="og:description" content="A small website served as a place to find content related to Byte Dice.">
|
||||
<meta property="og:url" content="https://bytedice.net/">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="/assets/backgrounds/embedImage.png">
|
||||
<meta property="og:image:width" content="1280">
|
||||
<meta property="og:image:height" content="720">
|
||||
<meta property="og:title" content="Byte Dice">
|
||||
<meta property="og:description" content="A small website served as a place to find content related to Byte Dice.">
|
||||
<meta property="og:url" content="https://bytedice.net/">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="/assets/backgrounds/embedImage.png">
|
||||
<meta property="og:image:width" content="1280">
|
||||
<meta property="og:image:height" content="720">
|
||||
-->
|
||||
|
||||
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainDiv">
|
||||
<div id="mainDiv">
|
||||
<h1>More to come...</h1>
|
||||
<div id="navBarContainer"></div>
|
||||
</div>
|
||||
<div id="navBarContainer"></div>
|
||||
</div>
|
||||
|
||||
<div id="loadingScreen"></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>
|
||||
<!-- 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>
|
||||
<!-- local -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+49
-49
@@ -2,70 +2,70 @@
|
||||
<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">
|
||||
<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="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 - Toys</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
|
||||
<title>Byte Dice - Toys</title>
|
||||
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net/toys">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net/toys">
|
||||
|
||||
<meta name="description" content="A list of fun web-based tools made by Byte Dice.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
|
||||
<meta name="author" content="Byte Dice">
|
||||
<meta name="description" content="A list of fun web-based tools made by Byte Dice.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
|
||||
<meta name="author" content="Byte Dice">
|
||||
|
||||
<meta property="og:title" content="Byte Dice">
|
||||
<meta property="og:description" content="A list of fun web-based tools made by Byte Dice.">
|
||||
<meta property="og:url" content="https://bytedice.net/toys">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Byte Dice">
|
||||
<meta property="og:description" content="A list of fun web-based tools made by Byte Dice.">
|
||||
<meta property="og:url" content="https://bytedice.net/toys">
|
||||
<meta property="og:type" content="website">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainDiv">
|
||||
<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">
|
||||
<img class="toyImg" src="/assets/boykisserLicense.png">
|
||||
<div class="toyTextContainer">
|
||||
<h1>Boykisser License Generator</h1>
|
||||
<p class="desc">Automatically generates a "Boykissser license" for you. Free of charge and very silly.</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toyLi">
|
||||
<button onclick="slideTransition('/toys/loading', event)" class="toyContainer borderedRect">
|
||||
<img class="toyImg" src="/assets/byte_dice_fancy_64x64.png">
|
||||
<div class="toyTextContainer">
|
||||
<h1>Loading Screen</h1>
|
||||
<p class="desc">The same loading screen as the website uses but less clutter and infinite. (Loading the rest of the description...)</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toyUl">
|
||||
<div class="toyLi">
|
||||
<button onclick="slideTransition('/toys/license', event)" class="toyContainer borderedRect">
|
||||
<img class="toyImg" src="/assets/boykisserLicense.png">
|
||||
<div class="toyTextContainer">
|
||||
<h1>Boykisser License Generator</h1>
|
||||
<p class="desc">Automatically generates a "Boykissser license" for you. Free of charge and very silly.</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toyLi">
|
||||
<button onclick="slideTransition('/toys/loading', event)" class="toyContainer borderedRect">
|
||||
<img class="toyImg" src="/assets/byte_dice_fancy_64x64.png">
|
||||
<div class="toyTextContainer">
|
||||
<h1>Loading Screen</h1>
|
||||
<p class="desc">The same loading screen as the website uses but less clutter and infinite. (Loading the rest of the description...)</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navBarContainer" data-alt="byte"></div>
|
||||
</div>
|
||||
<div id="navBarContainer" data-alt="byte"></div>
|
||||
</div>
|
||||
|
||||
<div id="loadingScreen"></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>
|
||||
<!-- 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>
|
||||
<!-- local -->
|
||||
<script src="script.js"></script>
|
||||
<script src="/stars.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
+81
-81
@@ -2,77 +2,77 @@
|
||||
<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">
|
||||
<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="stylesheet" href="license.css">
|
||||
<link rel="stylesheet" href="options.css">
|
||||
<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="stylesheet" href="license.css">
|
||||
<link rel="stylesheet" href="options.css">
|
||||
|
||||
<!-- fonts -->
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
|
||||
</style>
|
||||
<!-- fonts -->
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
|
||||
</style>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
|
||||
<title>Byte Dice - Boykisser license</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
|
||||
<title>Byte Dice - Boykisser license</title>
|
||||
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net/toys/license">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net/toys/license">
|
||||
|
||||
<meta name="description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, Boykisser, license, generator, silly">
|
||||
<meta name="author" content="Byte Dice">
|
||||
<meta name="description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, Boykisser, license, generator, silly">
|
||||
<meta name="author" content="Byte Dice">
|
||||
|
||||
<meta property="og:title" content="Byte Dice - Boykisser license">
|
||||
<meta property="og:description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
|
||||
<meta property="og:url" content="https://bytedice.net/toys/license">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="/assets/boykisserLicense.png">
|
||||
<meta property="og:image:width" content="600">
|
||||
<meta property="og:image:height" content="399">
|
||||
<meta property="og:title" content="Byte Dice - Boykisser license">
|
||||
<meta property="og:description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
|
||||
<meta property="og:url" content="https://bytedice.net/toys/license">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="/assets/boykisserLicense.png">
|
||||
<meta property="og:image:width" content="600">
|
||||
<meta property="og:image:height" content="399">
|
||||
|
||||
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainDiv">
|
||||
<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">
|
||||
Based on the <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778', event)">original</a> by Chilli!<br>
|
||||
Boykisser picture presets by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
|
||||
<br>
|
||||
For takedown requests, please
|
||||
<a onclick="slideTransition('https://github.com/ByteDice/ByteDiceWeb/issues', event)">submit an issue</a> with the "Copyright" label in the Github repository for this website.
|
||||
</h1><br>
|
||||
|
||||
<h1>Basic</h1><br>
|
||||
<form class="licenseForm licenseFormContainer">
|
||||
<label for="titleInput" >Title</label ><input type="text" id="titleInput" name="titleInput" value="Boykisser License">
|
||||
<label for="authorInput" >User</label ><input type="text" id="authorInput" name="authorInput" value="Byte Dice">
|
||||
<label for="createdInput" >Issued</label ><input type="text" id="createdInput" name="createdInput" value="2025-01-01">
|
||||
<label for="expireInput" >Expires</label ><input type="text" id="expireInput" name="expireInput" value="NEVER!!!">
|
||||
<label for="identityInput">Identity</label ><input type="text" id="identityInput" name="identityInput" value="any pronouns">
|
||||
<div class="allContainer">
|
||||
<div id="optionsContainer" class="borderedRect">
|
||||
<h1 class="optionsCredits h1Top">
|
||||
Based on the <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778', event)">original</a> by Chilli!<br>
|
||||
Boykisser picture presets by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
|
||||
<br>
|
||||
For takedown requests, please
|
||||
<a onclick="slideTransition('https://github.com/ByteDice/ByteDiceWeb/issues', event)">submit an issue</a> with the "Copyright" label in the Github repository for this website.
|
||||
</h1><br>
|
||||
|
||||
<label for="sillyInput">Silliness</label><div style="display: inline-flex">
|
||||
<h1>Basic</h1><br>
|
||||
<form class="licenseForm licenseFormContainer">
|
||||
<label for="titleInput" >Title</label ><input type="text" id="titleInput" name="titleInput" value="Boykisser License">
|
||||
<label for="authorInput" >User</label ><input type="text" id="authorInput" name="authorInput" value="Byte Dice">
|
||||
<label for="createdInput" >Issued</label ><input type="text" id="createdInput" name="createdInput" value="2025-01-01">
|
||||
<label for="expireInput" >Expires</label ><input type="text" id="expireInput" name="expireInput" value="NEVER!!!">
|
||||
<label for="identityInput">Identity</label ><input type="text" id="identityInput" name="identityInput" value="any pronouns">
|
||||
|
||||
<label for="sillyInput">Silliness</label><div style="display: inline-flex">
|
||||
<div id="sillyNumberValue">03</div><div class="sliderDiv">
|
||||
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput"></div>
|
||||
</div>
|
||||
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput"></div>
|
||||
</div>
|
||||
|
||||
<label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
|
||||
<label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
|
||||
|
||||
<label for="picInput">Picture</label><div style="display: inline-flex;">
|
||||
<label for="picInput">Picture</label><div style="display: inline-flex;">
|
||||
<select id="picInput" name="picInput">
|
||||
<option value="boykisser" >Boykisser</option>
|
||||
<option value="bi-kisser" >Bi-kisser</option>
|
||||
@@ -81,14 +81,14 @@
|
||||
<option value="trans-kisser" >Trans-kisser</option>
|
||||
<option value="bytedice" >Byte Dice</option>
|
||||
<option value="custom" id="customPic">Custom (upload)</option>
|
||||
</select>
|
||||
</select>
|
||||
<label for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="bgUploadIcon" draggable="false"></label>
|
||||
<input type="file" id="picUpload" name="picUpload" accept=".png,.jpg,.jpeg,.webp">
|
||||
</div>
|
||||
</form><br>
|
||||
</form><br>
|
||||
|
||||
<h1>Colors</h1><br>
|
||||
<form class="licenseForm licenseFormContainer">
|
||||
<form class="licenseForm licenseFormContainer">
|
||||
<label for="bgTypeInput" name="bgTypeInput">BG Type</label><div style="display: inline-flex;">
|
||||
<select id="bgTypeInput", name="bgTypeInput">
|
||||
<option value="color">Solid Color</option>
|
||||
@@ -98,21 +98,21 @@
|
||||
<input type="file" id="bgUpload" name="bgUpload" accept=".png,.jpg,.jpeg,.webp">
|
||||
</div>
|
||||
|
||||
<label for="bgColInput" >Background</label><input type="color" id="bgColInput" name="bgColInput" value="#FFFFFF">
|
||||
<label for="bgColInput" >Background</label><input type="color" id="bgColInput" name="bgColInput" value="#FFFFFF">
|
||||
<label for="borderColInput">Borders</label ><input type="color" id="borderColInput" name="borderColInput" value="#000000">
|
||||
<label for="textColInput" >Text</label ><input type="color" id="textColInput" name="textColInput" value="#000000">
|
||||
</form><br>
|
||||
|
||||
<!--<h1>Advanced</h1><br>
|
||||
<form class="licenseForm">
|
||||
<label for="soon2">Soon...</label><input type="text" name="soon2" value="Does nothing"><br>
|
||||
<\!--
|
||||
license border radius
|
||||
pic border radius
|
||||
title gradient (2 colors + direction) or flag
|
||||
license bg-image/bg-gradient
|
||||
-\->
|
||||
</form>-->
|
||||
<!--<h1>Advanced</h1><br>
|
||||
<form class="licenseForm">
|
||||
<label for="soon2">Soon...</label><input type="text" name="soon2" value="Does nothing"><br>
|
||||
<\!--
|
||||
license border radius
|
||||
pic border radius
|
||||
title gradient (2 colors + direction) or flag
|
||||
license bg-image/bg-gradient
|
||||
-\->
|
||||
</form>-->
|
||||
|
||||
<div style="display: flex; gap: calc(1px * var(--pxDensity))">
|
||||
<button id="generateButton" class="generateButton navBtn" onclick="generateLicense()">
|
||||
@@ -125,8 +125,8 @@
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: inline-flex; justify-content: center;">
|
||||
<div id="licenseAnchor" style="display: inline-block; transform-origin: center;">
|
||||
<div id="licenseContainer" class="blackBorderRect sans">
|
||||
@@ -171,22 +171,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navBarContainer" data-alt="byte"></div>
|
||||
</div>
|
||||
<div id="navBarContainer" data-alt="byte"></div>
|
||||
</div>
|
||||
|
||||
<div id="loadingScreen"></div>
|
||||
<div id="loadingScreen"></div>
|
||||
|
||||
<!-- libs -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
||||
<!-- libs -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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 -->
|
||||
<!-- local -->
|
||||
<script src="script.js"></script>
|
||||
<script src="license.js"></script>
|
||||
<script src="input.js"></script>
|
||||
|
||||
+12
-12
@@ -95,12 +95,12 @@ async function importFromB64(b64) {
|
||||
try {
|
||||
let str = atob(b64)
|
||||
data = JSON.parse(str)
|
||||
|
||||
|
||||
let isValid = validateJSON(data)
|
||||
|
||||
|
||||
if (isValid != true)
|
||||
{ alert("Invalid data string imported (Invalid fields). Full results:\n" + isValid.join("\n")); return }
|
||||
|
||||
|
||||
jsonData = deepOverride(jsonData, data)
|
||||
|
||||
await updLicense()
|
||||
@@ -145,7 +145,7 @@ function makeOptionsTheSameAsJSON() {
|
||||
function validateJSON(obj) {
|
||||
let is_valid = (
|
||||
typeof obj === "object" &&
|
||||
obj !== null &&
|
||||
obj !== null &&
|
||||
typeof obj.bg === "object" &&
|
||||
typeof obj.user === "string" &&
|
||||
typeof obj.title === "string" &&
|
||||
@@ -198,21 +198,21 @@ function exportData() {
|
||||
|
||||
|
||||
function generateLicense() {
|
||||
const element = document.getElementById("licenseContainer")
|
||||
const element = document.getElementById("licenseContainer")
|
||||
let dupe = element.cloneNode(true)
|
||||
dupe.style.transform = "initial"
|
||||
dupe.style.transform = "initial"
|
||||
dupe.style.left = "300vw"
|
||||
dupe.style.position = "absolute"
|
||||
dupe.style.margin = "initial"
|
||||
|
||||
document.body.appendChild(dupe)
|
||||
|
||||
html2canvas(dupe).then(canvas => {
|
||||
const link = document.createElement("a");
|
||||
link.download = "boykisserLicense.png";
|
||||
link.href = canvas.toDataURL("image/png");
|
||||
link.click();
|
||||
});
|
||||
html2canvas(dupe).then(canvas => {
|
||||
const link = document.createElement("a");
|
||||
link.download = "boykisserLicense.png";
|
||||
link.href = canvas.toDataURL("image/png");
|
||||
link.click();
|
||||
});
|
||||
|
||||
console.log(dupe.getBoundingClientRect())
|
||||
|
||||
|
||||
+75
-75
@@ -6,122 +6,122 @@
|
||||
}
|
||||
|
||||
.sans {
|
||||
font-family: "Comic Neue", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: "Comic Neue", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
.sans-bold { /* TODO: bold not working */
|
||||
font-family: "Comic Neue", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-family: "Comic Neue", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
.yellowTail {
|
||||
font-family: "Yellowtail", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: "Yellowtail", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
h2 {
|
||||
margin: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
.sillyBar {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: var(--licenseBorderCol);
|
||||
border: 3px solid var(--licenseBorderCol);
|
||||
border-radius: 8px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: var(--licenseBorderCol);
|
||||
border: 3px solid var(--licenseBorderCol);
|
||||
border-radius: 8px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
.sillyValue {
|
||||
position: relative;
|
||||
position: relative;
|
||||
width: calc(100% / 10);
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: block;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: block;
|
||||
}
|
||||
.on {
|
||||
background-image: url(/assets/scribble_32x32.png);
|
||||
background-image: url(/assets/scribble_32x32.png);
|
||||
}
|
||||
.off {
|
||||
background-image: none;
|
||||
background-color: var(--licenseBgCol);
|
||||
background-image: none;
|
||||
background-color: var(--licenseBgCol);
|
||||
}
|
||||
.sillyValue:first-child {
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
}
|
||||
.sillyValue:last-child {
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
}
|
||||
#licenseContainer {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
padding: 0px 20px 40px 20px;
|
||||
font-size: 0.75rem;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
padding: 0px 20px 40px 20px;
|
||||
font-size: 0.75rem;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
background-color: var(--licenseBgCol);
|
||||
border: 10px var(--licenseBorderCol) solid;
|
||||
border-radius: 32px;
|
||||
color: var(--licenseTextCol);
|
||||
border: 10px var(--licenseBorderCol) solid;
|
||||
border-radius: 32px;
|
||||
color: var(--licenseTextCol);
|
||||
}
|
||||
#picContainer {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
border: 10px var(--licenseBorderCol) solid;
|
||||
}
|
||||
#picValue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
#credits {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 0%;
|
||||
margin: 0% 0% 0% 20px;
|
||||
color: var(--licenseTextCol);
|
||||
font-size: 0.6rem;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 0%;
|
||||
margin: 0% 0% 0% 20px;
|
||||
color: var(--licenseTextCol);
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
#signatureContainer, #DsignatureContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: 5% 0% 0% 0%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: 5% 0% 0% 0%;
|
||||
}
|
||||
#signatureValue {
|
||||
margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#signHere {
|
||||
border-top: var(--licenseBorderCol) solid 6px;
|
||||
margin: 0%;
|
||||
padding: 0% 25px;
|
||||
text-align: center;
|
||||
border-top: var(--licenseBorderCol) solid 6px;
|
||||
margin: 0%;
|
||||
padding: 0% 25px;
|
||||
text-align: center;
|
||||
}
|
||||
#detailsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
}
|
||||
#titleValue {
|
||||
grid-area: 1 / 1 / 2 / 3;
|
||||
font-size: 2rem;
|
||||
margin: 0% auto 0% auto;
|
||||
height: max-content;
|
||||
text-align: center;
|
||||
grid-area: 1 / 1 / 2 / 3;
|
||||
font-size: 2rem;
|
||||
margin: 0% auto 0% auto;
|
||||
height: max-content;
|
||||
text-align: center;
|
||||
}
|
||||
#hashID {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 0%;
|
||||
margin: 0% 30px 0% 0%;
|
||||
color: var(--licenseTextCol);
|
||||
font-size: 0.6rem;
|
||||
bottom: 12px;
|
||||
right: 0%;
|
||||
margin: 0% 30px 0% 0%;
|
||||
color: var(--licenseTextCol);
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
@@ -31,7 +31,7 @@ class License {
|
||||
this.setImgValue(json.img)
|
||||
|
||||
if (json.bg.type == "image")
|
||||
{ this.baseE.style.backgroundImage = `url("${json.bg.file}")` }
|
||||
{ this.baseE.style.backgroundImage = `url("${json.bg.file}")` }
|
||||
else { this.baseE.style.backgroundImage = "" }
|
||||
|
||||
document.documentElement.style.setProperty("--licenseBgCol", json.bg.color)
|
||||
@@ -77,7 +77,7 @@ let license = new License()
|
||||
|
||||
|
||||
function prependZero(number) {
|
||||
return number < 10 ? "0" + number : number
|
||||
return number < 10 ? "0" + number : number
|
||||
}
|
||||
|
||||
|
||||
|
||||
+181
-181
@@ -1,259 +1,259 @@
|
||||
#optionsContainer {
|
||||
display: block;
|
||||
margin: calc(2px * var(--pxDensity)) auto 0% auto;
|
||||
width: max-content;
|
||||
padding: calc(2px * var(--pxDensity));
|
||||
overflow-y: scroll;
|
||||
max-width: min(600px, 100vw);
|
||||
font-size: min(1.5rem, calc(4px * var(--pxDensity)));
|
||||
display: block;
|
||||
margin: calc(2px * var(--pxDensity)) auto 0% auto;
|
||||
width: max-content;
|
||||
padding: calc(2px * var(--pxDensity));
|
||||
overflow-y: scroll;
|
||||
max-width: min(600px, 100vw);
|
||||
font-size: min(1.5rem, calc(4px * var(--pxDensity)));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.optionsCredits {
|
||||
margin: 0%;
|
||||
max-width: calc(100% - (4px * var(--pxDensity)));
|
||||
margin: 0%;
|
||||
max-width: calc(100% - (4px * var(--pxDensity)));
|
||||
}
|
||||
.licenseFormContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
}
|
||||
.licenseForm label {
|
||||
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);
|
||||
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%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
font-weight: 800;
|
||||
}
|
||||
.licenseForm input[type="text"] {
|
||||
font-family: "Roboto", sans-serif;
|
||||
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);
|
||||
font-family: "Roboto", sans-serif;
|
||||
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));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
.licenseForm input[type="text"]:hover {
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--navBarBtn_Border);
|
||||
box-shadow: none;
|
||||
filter: none;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: calc(1px * var(--pxDensity));
|
||||
margin: 0%;
|
||||
outline: none;
|
||||
padding: 0%;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--navBarBtn_Border);
|
||||
box-shadow: none;
|
||||
filter: none;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: calc(1px * var(--pxDensity));
|
||||
margin: 0%;
|
||||
outline: none;
|
||||
padding: 0%;
|
||||
}
|
||||
.slider:hover {
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--navBar_Inner);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 0%;
|
||||
width: calc(3px * var(--pxDensity));
|
||||
height: calc(3px * var(--pxDensity));
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--navBar_Inner);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 0%;
|
||||
width: calc(3px * var(--pxDensity));
|
||||
height: calc(3px * var(--pxDensity));
|
||||
}
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--navBar_Inner);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 0%;
|
||||
width: calc(3px * var(--pxDensity));
|
||||
height: calc(3px * var(--pxDensity));
|
||||
appearance: none;
|
||||
background-color: var(--navBar_Inner);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 0%;
|
||||
width: calc(3px * var(--pxDensity));
|
||||
height: calc(3px * var(--pxDensity));
|
||||
}
|
||||
.sliderDiv {
|
||||
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);
|
||||
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));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: calc(6px * var(--pxDensity));
|
||||
color: inherit;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: calc(6px * var(--pxDensity));
|
||||
color: inherit;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
#sillyNumberValue {
|
||||
display: inline;
|
||||
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);
|
||||
display: inline;
|
||||
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));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
h1 {
|
||||
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);
|
||||
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));
|
||||
border: none;
|
||||
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: round(auto, var(--pxDensity));
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
display: inline-block;
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border: none;
|
||||
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: round(auto, var(--pxDensity));
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
.h1Top {
|
||||
margin-top: 0%;
|
||||
margin-top: 0%;
|
||||
}
|
||||
select {
|
||||
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);
|
||||
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));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: round(auto, var(--pxDensity));
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: round(auto, var(--pxDensity));
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
select:hover {
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=file] {
|
||||
/* height: max-content;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
overflow: hidden; */
|
||||
display: none;
|
||||
/* height: max-content;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
overflow: hidden; */
|
||||
display: none;
|
||||
}
|
||||
#picInput, #bgTypeInput {
|
||||
height: calc(6px * var(--pxDensity));
|
||||
margin-right: calc(3px * var(--pxDensity));
|
||||
margin-right: calc(3px * var(--pxDensity));
|
||||
}
|
||||
#picUploadLabel, #bgUploadLabel {
|
||||
height: calc(6px * var(--pxDensity));
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
background-image: url(/assets/icons/upload.svg);
|
||||
display: inline-flex;
|
||||
height: calc(6px * var(--pxDensity));
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
background-image: url(/assets/icons/upload.svg);
|
||||
display: inline-flex;
|
||||
margin-right: calc(2px * var(--pxDensity));
|
||||
}
|
||||
#picUploadLabel:hover, #bgUploadLabel:hover {
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
filter: brightness(1.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
#picUploadLabel:active, #bgUploadLabel:active {
|
||||
filter: brightness(0.75);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
filter: brightness(0.75);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
}
|
||||
#picUploadIcon, #bgUploadIcon {
|
||||
height: calc(4px * var(--pxDensity));
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: calc(4px * var(--pxDensity));
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
.generateButton {
|
||||
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);
|
||||
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)); */
|
||||
border: none;
|
||||
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - (4px * var(--pxDensity)));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
/* padding: calc(1px * var(--pxDensity)); */
|
||||
border: none;
|
||||
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - (4px * var(--pxDensity)));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: min(5vmin, 2vmax, 30px);
|
||||
color: #ffffff
|
||||
}
|
||||
.generateButtonIcon {
|
||||
height: calc(4px * var(--pxDensity));
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: auto 0%;
|
||||
height: calc(4px * var(--pxDensity));
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: auto 0%;
|
||||
}
|
||||
input[type="color"] {
|
||||
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);
|
||||
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: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
input[type="color"]::-moz-color-swatch {
|
||||
border: none;
|
||||
}
|
||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
+13
-13
@@ -1,24 +1,24 @@
|
||||
.allContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(4px * var(--pxDensity));
|
||||
height: calc(100vh - calc(25px * var(--pxDensity)));
|
||||
height: calc(100vh - calc(25px * var(--pxDensity)));
|
||||
}
|
||||
.blackBorderRect {
|
||||
background-color: #FFFFFF;
|
||||
border: 10px #000000 solid;
|
||||
border-radius: 32px;
|
||||
color: #000000;
|
||||
background-color: #FFFFFF;
|
||||
border: 10px #000000 solid;
|
||||
border-radius: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #2222FF;
|
||||
text-decoration: underline;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
color: #2222FF;
|
||||
text-decoration: underline;
|
||||
font-weight: normal;
|
||||
}
|
||||
a:visited {
|
||||
color: #551A8B;
|
||||
color: #551A8B;
|
||||
}
|
||||
.mainDiv {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
+31
-32
@@ -2,50 +2,49 @@
|
||||
<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">
|
||||
<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="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 - Loading...</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
|
||||
<title>Byte Dice - Loading...</title>
|
||||
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net/toys/loading">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net/toys/loading">
|
||||
|
||||
<meta name="description" content="An infinite decorative loading screen.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
|
||||
<meta name="author" content="Byte Dice">
|
||||
<meta name="description" content="An infinite decorative loading screen.">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
|
||||
<meta name="author" content="Byte Dice">
|
||||
|
||||
<meta property="og:title" content="Byte Dice">
|
||||
<meta property="og:description" content="An infinite decorative loading screen.">
|
||||
<meta property="og:url" content="https://bytedice.net/toys/loading">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="/assets/backgrounds/embedImage.png">
|
||||
<meta property="og:image:width" content="1280">
|
||||
<meta property="og:image:height" content="720">
|
||||
<meta property="og:title" content="Byte Dice">
|
||||
<meta property="og:description" content="An infinite decorative loading screen.">
|
||||
<meta property="og:url" content="https://bytedice.net/toys/loading">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="/assets/backgrounds/embedImage.png">
|
||||
<meta property="og:image:width" content="1280">
|
||||
<meta property="og:image:height" content="720">
|
||||
|
||||
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainDiv">
|
||||
</div>
|
||||
<div id="mainDiv">
|
||||
</div>
|
||||
|
||||
<div id="loadingScreen"></div>
|
||||
<div id="loadingScreen"></div>
|
||||
|
||||
<!-- global -->
|
||||
<script src="/global/globalScript.js"></script>
|
||||
<script src="/global/pxDensity.js"></script>
|
||||
<script src="/global/loadingScreen.js"></script>
|
||||
|
||||
<!-- global -->
|
||||
<script src="/global/globalScript.js"></script>
|
||||
<script src="/global/pxDensity.js"></script>
|
||||
<script src="/global/loadingScreen.js"></script>
|
||||
|
||||
<!-- local -->
|
||||
<script src="script.js"></script>
|
||||
<!-- local -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+10
-10
@@ -6,28 +6,28 @@ let loadingImg = undefined
|
||||
|
||||
|
||||
function clearLoadingScreenClutter() {
|
||||
document.getElementById("fakeLoadingToggle").remove()
|
||||
loadingImg = document.getElementById("loadingImg")
|
||||
document.getElementById("fakeLoadingToggle").remove()
|
||||
loadingImg = document.getElementById("loadingImg")
|
||||
}
|
||||
|
||||
|
||||
function periodicallyChangeTips() {
|
||||
newTip()
|
||||
setLoadingProgress("")
|
||||
newTip()
|
||||
setLoadingProgress("")
|
||||
}
|
||||
|
||||
|
||||
function changeLoadingImgSize() {
|
||||
loadingImg.style.width = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
|
||||
loadingImg.style.height = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
|
||||
loadingImg.style.width = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
|
||||
loadingImg.style.height = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
|
||||
}
|
||||
|
||||
|
||||
window.onkeydown = function(e) { // keycodes 48..57 = 0-9
|
||||
let code = e.keyCode
|
||||
let code = e.keyCode
|
||||
|
||||
if (!(code >= 48 && code <= 57)) { return }
|
||||
if (!(code >= 48 && code <= 57)) { return }
|
||||
|
||||
byteDiceSize = (code - 48) / 9 + 1
|
||||
changeLoadingImgSize()
|
||||
byteDiceSize = (code - 48) / 9 + 1
|
||||
changeLoadingImgSize()
|
||||
}
|
||||
+29
-29
@@ -1,47 +1,47 @@
|
||||
.toyContainer {
|
||||
border: none;
|
||||
display: inline-grid;
|
||||
border: none;
|
||||
display: inline-grid;
|
||||
width: 25%;
|
||||
min-width: 100%;
|
||||
max-width: 512px;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: calc(32px * var(--pxDensity)) 1fr;
|
||||
color: inherit;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: calc(32px * var(--pxDensity)) 1fr;
|
||||
color: inherit;
|
||||
}
|
||||
.toyImg {
|
||||
image-rendering: pixelated;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
image-rendering: pixelated;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
margin: auto auto;
|
||||
margin: auto auto;
|
||||
}
|
||||
.toyTextContainer {
|
||||
background-color: var(--navBar_SecondInner);
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border);
|
||||
text-align: left;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: calc(16px * var(--pxDensity));
|
||||
background-color: var(--navBar_SecondInner);
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border);
|
||||
text-align: left;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: calc(16px * var(--pxDensity));
|
||||
font-size: min(5vmin, 2vmax, 25px);
|
||||
}
|
||||
h1 {
|
||||
font-size: max(1.2em, 2.5vmin);
|
||||
margin: 0%;
|
||||
margin-bottom: calc(1px * var(--pxDensity));
|
||||
font-size: max(1.2em, 2.5vmin);
|
||||
margin: 0%;
|
||||
margin-bottom: calc(1px * var(--pxDensity));
|
||||
}
|
||||
.desc {
|
||||
font-size: max(1em, 2vmin);
|
||||
margin: 0%;
|
||||
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;
|
||||
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)));
|
||||
filter: brightness(0.85);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
}
|
||||
.toyUl {
|
||||
padding: calc(3px * var(--pxDensity));
|
||||
@@ -53,9 +53,9 @@ button:active {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.toyLi {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
}
|
||||
Reference in New Issue
Block a user