fixed

3 files changed, 184 insertions, 228 deletions

diff --git a/index.html b/index.html
index c13963a..2320cf2 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,7 @@
       <h1>Ludicrous Adventures of Ridiculous Shenanigans</h1>
       <h1>#1 CTF team</h1>
     </div>
-    <div class="bg"></div>
-    <div class="reduced"></div>
+    <div id="bg" class="bg"></div>
     <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
     <script src="script.js"></script>
   </body>
diff --git a/script.js b/script.js
index 26db3f7..6eee911 100644
--- a/script.js
+++ b/script.js
@@ -1,224 +1,193 @@
-particlesJS("bg", {
-  particles: {
-    number: {
-      value: 10000,
-      density: {
-        enable: true,
-        value_area: 800,
+window.onload = () =>
+  particlesJS("bg", {
+    particles: {
+      number: {
+        value: 10000,
+        density: {
+          enable: true,
+          value_area: 800,
+        },
       },
-    },
-    color: {
-      value: [
-        "#ff0000",
-        "#ff0d00",
-        "#ff1a00",
-        "#ff2600",
-        "#ff3300",
-        "#ff4000",
-        "#ff4d00",
-        "#ff5900",
-        "#ff6600",
-        "#ff7300",
-        "#ff8000",
-        "#ff8c00",
-        "#ff9900",
-        "#ffa600",
-        "#ffb300",
-        "#ffbf00",
-        "#ffcc00",
-        "#ffdd00",
-        "#ffea00",
-        "#fff700",
-        "#fbff00",
-        "#eeff00",
-        "#e1ff00",
-        "#d5ff00",
-        "#c8ff00",
-        "#bbff00",
-        "#aeff00",
-        "#a2ff00",
-        "#95ff00",
-        "#88ff00",
-        "#7bff00",
-        "#6fff00",
-        "#62ff00",
-        "#55ff00",
-        "#48ff00",
-        "#3cff00",
-        "#2fff00",
-        "#22ff00",
-        "#15ff00",
-        "#09ff00",
-        "#00ff04",
-        "#00ff11",
-        "#00ff1e",
-        "#00ff2b",
-        "#00ff37",
-        "#00ff44",
-        "#00ff51",
-        "#00ff5e",
-        "#00ff6a",
-        "#00ff77",
-        "#00ff88",
-        "#00ff95",
-        "#00ffa2",
-        "#00ffae",
-        "#00ffbb",
-        "#00ffc8",
-        "#00ffd5",
-        "#00ffe1",
-        "#00ffee",
-        "#00fffb",
-        "#00f7ff",
-        "#00eaff",
-        "#00ddff",
-        "#00d0ff",
-        "#00c4ff",
-        "#00b7ff",
-        "#00aaff",
-        "#009dff",
-        "#0091ff",
-        "#0084ff",
-        "#0077ff",
-        "#006aff",
-        "#005eff",
-        "#0051ff",
-        "#0044ff",
-        "#0037ff",
-        "#002bff",
-        "#001eff",
-        "#0011ff",
-        "#0004ff",
-        "#0900ff",
-        "#1500ff",
-        "#2200ff",
-        "#3300ff",
-        "#4000ff",
-        "#4d00ff",
-        "#5900ff",
-        "#6600ff",
-        "#7300ff",
-        "#8000ff",
-        "#8c00ff",
-        "#9900ff",
-        "#a600ff",
-        "#b300ff",
-        "#bf00ff",
-        "#cc00ff",
-        "#d900ff",
-        "#e600ff",
-        "#f200ff",
-        "#ff00ff",
-      ],
-    },
-    opacity: {
-      value: 1,
-      random: false,
-      anim: {
-        enable: true,
-        speed: 0.4,
-        opacity_min: 0,
-        sync: false,
+      color: {
+        value: [
+          "#ff0000",
+          "#ff0d00",
+          "#ff1a00",
+          "#ff2600",
+          "#ff3300",
+          "#ff4000",
+          "#ff4d00",
+          "#ff5900",
+          "#ff6600",
+          "#ff7300",
+          "#ff8000",
+          "#ff8c00",
+          "#ff9900",
+          "#ffa600",
+          "#ffb300",
+          "#ffbf00",
+          "#ffcc00",
+          "#ffdd00",
+          "#ffea00",
+          "#fff700",
+          "#fbff00",
+          "#eeff00",
+          "#e1ff00",
+          "#d5ff00",
+          "#c8ff00",
+          "#bbff00",
+          "#aeff00",
+          "#a2ff00",
+          "#95ff00",
+          "#88ff00",
+          "#7bff00",
+          "#6fff00",
+          "#62ff00",
+          "#55ff00",
+          "#48ff00",
+          "#3cff00",
+          "#2fff00",
+          "#22ff00",
+          "#15ff00",
+          "#09ff00",
+          "#00ff04",
+          "#00ff11",
+          "#00ff1e",
+          "#00ff2b",
+          "#00ff37",
+          "#00ff44",
+          "#00ff51",
+          "#00ff5e",
+          "#00ff6a",
+          "#00ff77",
+          "#00ff88",
+          "#00ff95",
+          "#00ffa2",
+          "#00ffae",
+          "#00ffbb",
+          "#00ffc8",
+          "#00ffd5",
+          "#00ffe1",
+          "#00ffee",
+          "#00fffb",
+          "#00f7ff",
+          "#00eaff",
+          "#00ddff",
+          "#00d0ff",
+          "#00c4ff",
+          "#00b7ff",
+          "#00aaff",
+          "#009dff",
+          "#0091ff",
+          "#0084ff",
+          "#0077ff",
+          "#006aff",
+          "#005eff",
+          "#0051ff",
+          "#0044ff",
+          "#0037ff",
+          "#002bff",
+          "#001eff",
+          "#0011ff",
+          "#0004ff",
+          "#0900ff",
+          "#1500ff",
+          "#2200ff",
+          "#3300ff",
+          "#4000ff",
+          "#4d00ff",
+          "#5900ff",
+          "#6600ff",
+          "#7300ff",
+          "#8000ff",
+          "#8c00ff",
+          "#9900ff",
+          "#a600ff",
+          "#b300ff",
+          "#bf00ff",
+          "#cc00ff",
+          "#d900ff",
+          "#e600ff",
+          "#f200ff",
+          "#ff00ff",
+        ],
       },
-    },
-    size: {
-      value: 5,
-      random: true,
-      anim: {
-        enable: true,
-        speed: 20,
-        size_min: 0,
-        sync: false,
+      opacity: {
+        value: 1,
+        random: false,
+        anim: {
+          enable: true,
+          speed: 0.4,
+          opacity_min: 0,
+          sync: false,
+        },
       },
-    },
-    line_linked: {
-      enable: false,
-    },
-    move: {
-      enable: true,
-      speed: 20,
-      direction: "none",
-      random: true,
-      straight: false,
-      out_mode: "out",
-      bounce: false,
-      attract: {
-        enable: false,
-        rotateX: 600,
-        rotateY: 1200,
+      size: {
+        value: 5,
+        random: true,
+        anim: {
+          enable: true,
+          speed: 20,
+          size_min: 0,
+          sync: false,
+        },
       },
-    },
-  },
-  interactivity: {
-    detect_on: "canvas",
-    events: {
-      onhover: {
-        enable: true,
-        mode: "bubble",
+      line_linked: {
+        enable: false,
       },
-      onclick: {
+      move: {
         enable: true,
-        mode: "push",
+        speed: 20,
+        direction: "none",
+        random: true,
+        straight: false,
+        out_mode: "out",
+        bounce: false,
+        attract: {
+          enable: false,
+          rotateX: 600,
+          rotateY: 1200,
+        },
       },
-      resize: true,
     },
-    modes: {
-      grab: {
-        distance: 400,
-        line_linked: {
-          opacity: 1,
+    interactivity: {
+      detect_on: "canvas",
+      events: {
+        onhover: {
+          enable: true,
+          mode: "bubble",
         },
+        onclick: {
+          enable: true,
+          mode: "push",
+        },
+        resize: true,
       },
-      bubble: {
-        distance: 100,
-        size: 1,
-        duration: 3,
-        opacity: 1,
-        speed: 3,
-      },
-      repulse: {
-        distance: 200,
-        duration: 0.4,
-      },
-      push: {
-        particles_nb: 4,
-      },
-      remove: {
-        particles_nb: 2,
+      modes: {
+        grab: {
+          distance: 400,
+          line_linked: {
+            opacity: 1,
+          },
+        },
+        bubble: {
+          distance: 100,
+          size: 1,
+          duration: 3,
+          opacity: 1,
+          speed: 3,
+        },
+        repulse: {
+          distance: 200,
+          duration: 0.4,
+        },
+        push: {
+          particles_nb: 4,
+        },
+        remove: {
+          particles_nb: 2,
+        },
       },
     },
-  },
-  retina_detect: true,
-});
-
-const timeout = 20000;
-
-// setTimeout(() => {
-//   generateObject();
-//   setInterval(() => {
-//     generateObject();
-//   }, timeout);
-// }, timeout);
-
-function generateObject() {
-  let whale = document.getElementById("whaleParty");
-  let petuniaBowl = document.getElementById("petuniaBowlParty");
-  let randomLeftOffset = Math.floor(Math.random() * 70) + 1,
-    randomSelector = Math.floor(Math.random() * 2) + 1,
-    current,
-    newObject;
-
-  if (randomSelector === 1) {
-    current = whale;
-    speak(whaleDialog);
-    console.log(whaleDialog);
-  } else {
-    current = petuniaBowl;
-    speak(flowerPotDialog);
-    console.log(flowerPotDialog);
-  }
-  newObject = current.cloneNode(true);
-  current.parentNode.replaceChild(newObject, current);
-  newObject.classList.add("dropObject");
-  newObject.style.left = randomLeftOffset.toString() + "%";
-}
+    retina_detect: true,
+  });
diff --git a/style.css b/style.css
index 29c55b9..5ca575f 100644
--- a/style.css
+++ b/style.css
@@ -14,7 +14,6 @@ html, body {
     transform: translate(-50%, -50%);
 }
 
-/* blink text */
 .blink {
     animation: blink .2s infinite;
 }
@@ -40,23 +39,12 @@ html, body {
     left: 0;
 }
 
-.reduced {
-    z-index: 2;
-    display: none;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-/* prefers reduced motion */
 @media (prefers-reduced-motion: reduce) {
     .blink {
         animation: none;
     }
 
-    .reduced {
-        display: unset;
+    .bg {
+        display: none;
     }
 }