more

Author: leafo

static/coffee/main/addy.js

@@ -42,6 +42,8 @@ style.textContent = `
   .balloon {
     position: absolute;
     animation: float 15s ease-in-out infinite;
+    cursor: pointer;
+    pointer-events: auto;
   }
   .balloon-string {
     width: 1px;
@@ -57,6 +59,7 @@ style.textContent = `
     position: relative;
     margin: 0 auto;
     font-weight: bold;
+    animation: inflate 0.5s ease-out;
   }
   .balloon-body::before,
   .balloon-body::after {
@@ -105,6 +108,10 @@ style.textContent = `
     0% { transform: translateY(0) rotate(0deg); }
     100% { transform: translateY(-100vh) rotate(720deg); }
   }
+  @keyframes inflate {
+    0% { transform: scale(0); }
+    100% { transform: scale(1); }
+  }
   @media (max-width: 600px) {
     .banner-letter {
       font-size: 16px;
@@ -164,6 +171,99 @@ function createBalloon() {
     balloonBody.style.backgroundColor = `hsl(${hue}, 100%, 70%)`;
 
     effectsContainer.appendChild(balloon);
+
+    // Add click event listener to pop the balloon
+    balloon.addEventListener('click', () => {
+        popBalloon(balloon);
+    });
+}
+
+// Function to pop a balloon
+function popBalloon(balloon) {
+    // Play pop sound
+    const popSound = new Audio(`data:audio/mp3;base64,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
+OFBITF0EqeAGChllhdJaLJYZas/7BSoE6GQDTIootUJkS7C7pokJFFpyIibThFFdslR3LBVBOhqG
+2JiFcjjCl1kcY0Mqu21n6xrLxsj6JkakaDgPHpVf7C87mFGVlh5kbWe1Jo4kVMmVCz8tupMgs19T
+yMaRACSAFoUIlZ0M7x+2Q4YGvlTVlDAwaDlMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVf/7YMT1AA7VQTvssG3p1qRnvaMOXFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/7QMT2gNBFSzfspG9g
+YodiUPCNHVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
+VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV`);
+    popSound.play();
+
+    // Create pop effect
+    const popEffect = document.createElement('div');
+    popEffect.style.position = 'absolute';
+    popEffect.style.left = balloon.style.left;
+    popEffect.style.top = balloon.style.top;
+    popEffect.style.width = '60px';
+    popEffect.style.height = '60px';
+    popEffect.style.borderRadius = '50%';
+    popEffect.style.backgroundColor = balloon.querySelector('.balloon-body').style.backgroundColor;
+    popEffect.style.opacity = '0.7';
+    popEffect.style.animation = 'pop 0.3s ease-out forwards';
+
+    effectsContainer.appendChild(popEffect);
+
+    // Remove the balloon
+    balloon.remove();
+
+    // Remove the pop effect after animation
+    setTimeout(() => {
+        popEffect.remove();
+    }, 300);
 }
 
 // Function to create a single confetti
@@ -190,11 +290,12 @@ function createConfettiEffect() {
     }
 }
 
-
 // Function to stop the effect
 function stopEffect() {
     effectsContainer.remove();
     document.removeEventListener('keydown', escapeKeyHandler);
+    clearInterval(createConfettiEffect);
+    clearInterval(createBalloon);
 }
 
 // Event listener for Escape key
@@ -208,10 +309,10 @@ function escapeKeyHandler(event) {
 export function startBirthday() {
     document.addEventListener('keydown', escapeKeyHandler);
 
-
     createBirthdayBanner();
     for (let i = 0; i < 5; i++) {
         createBalloon();
     }
     setInterval(createConfettiEffect, 200);
+    setInterval(createBalloon, 5000);
 }