From cfdf0cae9a78f6f8aad928571c4298d721816b3e Mon Sep 17 00:00:00 2001
From: Ben Foxall <benfoxall@gmail.com>
Date: Sun, 23 Jun 2024 12:20:39 +0100
Subject: [PATCH] Add homepage confetti effect for 50th Remote Hack celebration

---
 _hacks/50.md          |  1 +
 _layouts/default.html |  4 +++
 assets/confetti.js    | 61 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 assets/confetti.js

diff --git a/_hacks/50.md b/_hacks/50.md
index cf08549..ebf31be 100644
--- a/_hacks/50.md
+++ b/_hacks/50.md
@@ -2,4 +2,5 @@
 hack_number: 50
 date: 2024-06-29
 upcoming: true
+celebrate: true
 ---
diff --git a/_layouts/default.html b/_layouts/default.html
index 5d8cec5..aaf2869 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -96,6 +96,10 @@ <h1 class="⭐️">
     {% endif %}
   </main>
 
+  {% if page.celebrate %}
+  <script src="/assets/confetti.js"></script>
+  {% endif %}
+
   </body>
 
 </html>
diff --git a/assets/confetti.js b/assets/confetti.js
new file mode 100644
index 0000000..cc4fa2e
--- /dev/null
+++ b/assets/confetti.js
@@ -0,0 +1,61 @@
+// Confetti effect implementation
+(function() {
+  // Check for prefers-reduced-motion
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (prefersReducedMotion) {
+    return;
+  }
+
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  document.body.appendChild(canvas);
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  const confettis = [];
+  const colors = ['#FFC0CB', '#FFD700', '#8A2BE2', '#00FF00', '#FF4500', '#00BFFF'];
+
+  function createConfetti() {
+    const x = Math.floor(Math.random() * canvas.width);
+    const y = Math.floor(Math.random() * canvas.height);
+    const color = colors[Math.floor(Math.random() * colors.length)];
+    const size = Math.random() * (15 - 5) + 5;
+    const speed = Math.random() * (5 - 2) + 2;
+    const angle = Math.random() * 360;
+    confettis.push({x, y, color, size, speed, angle});
+  }
+
+  function drawConfetti() {
+    confettis.forEach((confetti, index) => {
+      ctx.beginPath();
+      ctx.arc(confetti.x, confetti.y, confetti.size, 0, 2 * Math.PI);
+      ctx.fillStyle = confetti.color;
+      ctx.fill();
+
+      // Update confetti position
+      confetti.y += confetti.speed;
+      confetti.x += Math.cos(confetti.angle) * confetti.speed;
+
+      // Remove confetti that are out of the screen
+      if (confetti.y > canvas.height) {
+        confettis.splice(index, 1);
+      }
+    });
+  }
+
+  function update() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawConfetti();
+    requestAnimationFrame(update);
+  }
+
+  // Create confettis every 100ms
+  setInterval(createConfetti, 100);
+
+  // Stop creating confettis after 5 seconds
+  setTimeout(() => {
+    clearInterval(createConfetti);
+  }, 5000);
+
+  update();
+})();