Optimize rain, fix crash

This commit is contained in:
bingus_violet 2024-06-23 16:09:39 -05:00
parent 01e6f8abd4
commit beaa2406d1
3 changed files with 29 additions and 27 deletions

View file

@ -1,7 +1,6 @@
const express = require('express'), const express = require('express'),
path = require('path'), path = require('path'),
fs = require('fs'), fs = require('fs'),
pageUpdater = require('./pageUpdater.js'),
WebSocket = require("ws") WebSocket = require("ws")
var app = express() var app = express()
@ -28,6 +27,8 @@ if (!fs.existsSync(announcementFile)) {
fs.writeFileSync(announcementFile, ``) fs.writeFileSync(announcementFile, ``)
} }
const pageUpdater = require('./pageUpdater.js')
var constants = JSON.parse(fs.readFileSync(path.join(__dirname, 'constants.json'))) var constants = JSON.parse(fs.readFileSync(path.join(__dirname, 'constants.json')))
app.listen(PORT, () => { app.listen(PORT, () => {

View file

@ -1,8 +1,8 @@
function rain() { function rain() {
var html = "" var html = ""
html += `<div class="rainStuff"><div class="rainContainer">`
html += `<link rel="stylesheet" type="text/css" href="/themes/rain.css">` html += `<link rel="stylesheet" type="text/css" href="/themes/rain.css">`
html += `<div class="rainStuff"><div class="rainContainer">`
var amount = 7 var amount = 7
@ -13,39 +13,40 @@ function rain() {
for (let index = 0; index < amount; index++) { for (let index = 0; index < amount; index++) {
html += ` html += `
.rainDrop:nth-of-type(${index + 1}) { .rainDrop:nth-of-type(${index + 1}) {
animation: rainAnim${index} ${(Math.random() * 0.3) + (2)}s linear; animation: rainAnim${index} ${((Math.round(Math.random() * 10) / 10) * 0.3) + 0.6}s linear;
animation-delay: ${Math.round(Math.random() * 200) / 100}s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-delay: ${Math.round(Math.random() * 100) / 100}s; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
} }
` `
var randos = []
for (let index = 0; index < 11; index++) { var pos = 0
randos.push(Math.round(Math.random() * 100))
if (index % 2 == 0) {
pos = Math.random() * 30
} else {
pos = (Math.random() * 30) + 70
} }
pos = Math.round(pos)
html += `@keyframes rainAnim${index} { ` html += `@keyframes rainAnim${index} { `
for (let index = 0; index < 5; index++) {
html += ` html += `
${index * 3}0% { 0% {
top: 110vh; top: -20vh;
right: ${randos[index]}%; right: ${pos}%;
visibility: hidden;
}
${index * 3}0.1% {
top: -10vh;
right: ${randos[index + 1]}%;
visibility: hidden;
}
${index * 3}0.2% {
visibility: visible; visibility: visible;
} }
`
}
// console.log(html)
html += `90.3% { visibility: hidden; }` 90% {
top: 110vh;
right: ${pos}%;
visibility: visible;
}
90.1% {
visibility: hidden;
}
`
html += `}` html += `}`

View file

@ -12,9 +12,9 @@
.rainContainer { .rainContainer {
height: 100vh; height: 100vh;
width: 80vw; width: 95vw;
top: 0px; top: 0px;
left: 10vw; left: 2.5vw;
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
} }