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