From b33ce4a0d70016ad77180909c4277d63c1e5664c Mon Sep 17 00:00:00 2001
From: sophie <sofija@duck.com>
Date: Sat, 27 Jul 2024 04:22:44 +0300
Subject: [PATCH] i added particles!

---
 website/index.html           |  6 ++-
 website/scripts/particles.ts | 88 ++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 website/scripts/particles.ts
diff --git a/website/index.html b/website/index.html
index 57f4180..23e8cac 100644
--- a/website/index.html
+++ b/website/index.html
@@ -2,6 +2,8 @@ __TEMPLATE_HEAD__
 
 <script type="module" src="scripts/blog.js"></script>
 <script type="module" src="scripts/status_cafe.js"></script>
+<script type="module" src="scripts/particles.js"></script>
+
 <script>
     window.addEventListener("load", () => {
         const stickers = document.getElementById("stickers");
@@ -20,6 +22,7 @@ __TEMPLATE_HEAD__
 </head>
 
 <body class="repeating-bg">
+
     <div class="order">
         <div class="paper details">
             <h1><span class="emoji">☹️☹️☹️</span>.ovh</h1>
@@ -28,7 +31,8 @@ __TEMPLATE_HEAD__
             <p>I love to play games with peeps! My favorite games recently have been Minecraft and Stardew Valley! DM me
                 if you wanna play with me ^w^
             </p>
-            <p><a href="https://files.sad.ovh/public/midis">Did you know that I have a 6 gigabyte big MiDi collection? (empty password/username)</a></p>
+            <p><a href="https://files.sad.ovh/public/midis">Did you know that I have a 6 gigabyte big MiDi collection?
+                    (empty password/username)</a></p>
             <p>
                 DNI:
                 <br>
diff --git a/website/scripts/particles.ts b/website/scripts/particles.ts
new file mode 100644
index 0000000..fc574b4
--- /dev/null
+++ b/website/scripts/particles.ts
@@ -0,0 +1,88 @@
+class Particle {
+  x: number;
+  y: number;
+  timeExisting: number = 0;
+  element: HTMLSpanElement;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+    const element = document.createElement("span");
+    element.style.position = "absolute";
+    element.style.left = this.x + "px";
+    element.style.top = this.y + "px";
+    element.style.color = "white";
+    element.style.fontSize = "30px";
+    element.style.transform = `rotate(${getRandomArbitrary(-90, 90)}deg)`;
+    element.style.userSelect = "none";
+    element.style.pointerEvents = "none";
+    element.innerText =
+      Math.random() < 0.5 ? "-" : Math.random() < 0.5 ? "+" : "*";
+    element.id = "particle_" + Math.random();
+    document.body.appendChild(element);
+    this.element = document.getElementById(element.id)!;
+    particles.push(this);
+  }
+
+  render() {
+    this.y += 2;
+    this.x -= getRandomArbitrary(-4, 4);
+    this.element.style.left = this.x + "px";
+    this.element.style.top = this.y + "px";
+    this.timeExisting += 1;
+
+    if (document.body.scrollHeight < this.y) {
+      this.kill(true);
+    }
+    if (this.timeExisting > 20) {
+      this.kill();
+    }
+  }
+  kill(forceKill = false) {
+    if (forceKill) {
+      document.body.removeChild(this.element);
+      particles = particles.filter((z) => z.element.id !== this.element.id);
+    } else {
+      const opacity = Math.abs(this.timeExisting - 30);
+      this.element.style.opacity = (opacity / 10) + "";
+      this.element.style.fontSize = (opacity * 3)+"px";
+
+      if (opacity <= 0) {
+        document.body.removeChild(this.element);
+        particles = particles.filter((z) => z.element.id !== this.element.id);
+      }
+    }
+  }
+}
+
+function getRandomArbitrary(min: number, max: number) {
+  return Math.random() * (max - min) + min;
+}
+
+let particles: Particle[] = [];
+
+let lastRenderTimestamp = 0;
+let lastMoveTimestamp = 0;
+
+function particleRenderLoop(timestamp: number) {
+  if (timestamp - lastRenderTimestamp < 100) {
+    window.requestAnimationFrame(particleRenderLoop);
+    return;
+  }
+  lastRenderTimestamp = timestamp;
+  for (const particle of particles) {
+    particle.render();
+  }
+  window.requestAnimationFrame(particleRenderLoop);
+}
+document.addEventListener("mousemove", (event) => {
+  if (Date.now() - lastMoveTimestamp < 50) {
+    return;
+  }
+  lastMoveTimestamp = Date.now();
+  new Particle(
+    event.pageX + (Math.random() * 10 - 20),
+    event.pageY + (Math.random() * 10 - 20)
+  );
+});
+window.requestAnimationFrame(particleRenderLoop);
