Optimize rain, fix crash

index.js

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

randomThemer.js

@@ -1,8 +1,8 @@
 function rain() {
     var html = ""
 
-    html += `<div class="rainStuff"><div class="rainContainer">`
     html += `<link rel="stylesheet" type="text/css" href="/themes/rain.css">`
+    html += `<div class="rainStuff"><div class="rainContainer">`
 
     var amount = 7
 
@@ -13,39 +13,40 @@ function rain() {
     for (let index = 0; index < amount; index++) {
         html += `
         .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-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++) {
-            randos.push(Math.round(Math.random() * 100))
+        
+        var pos = 0
+
+        if (index % 2 == 0) {
+            pos = Math.random() * 30
+        } else {
+            pos = (Math.random() * 30) + 70
         }
 
+        pos = Math.round(pos)
+
         html += `@keyframes rainAnim${index} {    `
-
-        for (let index = 0; index < 5; index++) {
             html += `
-        ${index * 3}0% {
-            top: 110vh;
-            right: ${randos[index]}%;
-            visibility: hidden;
-        }
-
-        ${index * 3}0.1% {
-            top: -10vh;
-            right: ${randos[index + 1]}%;
-            visibility: hidden;
-        }
-        ${index * 3}0.2% {
+        0% {
+            top: -20vh;
+            right: ${pos}%;
             visibility: visible;
         }
-        `
-        }
-        // console.log(html)
 
-        html += `90.3% { visibility: hidden; }`
+        90% {
+            top: 110vh;
+            right: ${pos}%;
+            visibility: visible;
+        }
+        90.1% {
+            visibility: hidden;
+        }
+        `
 
         html += `}`
 

static/themes/rain.css

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