Add drop-shadow color change effect

diff --git a/index.html b/index.html
index d9e0d6a58dc13e57657f05866ff895f2c8b899dd..5260540290e210340a9dfc664413f7dfd65a5403 100644 (file)
--- a/index.html
+++ b/index.html
@@ -56,12 +56,13 @@
     #ascii-container {
       --xOffset: 1px;
       --yOffset: 1px;
+      --color: 216deg;
       font-family: monospace;
       font-size: clamp(1rem, 2.5dvi, 2rem);
       position: relative;
       transition: translate 200ms, filter 200ms;
       translate: var(--xOffset) var(--yOffset);
-      filter: drop-shadow(calc(var(--xOffset) * -1) calc(var(--yOffset) * -1) 4px hsl(216deg 50% 50%));
+      filter: drop-shadow(calc(var(--xOffset) * -1) calc(var(--yOffset) * -1) 4px hsl(var(--color) 50% 50%));
     }
 
     #ascii-container .effect {
@@ -89,6 +90,11 @@
         animation: flicker 1s linear var(--delay) infinite alternate;
       }
 
+      &.background {
+        left: 2.5ch;
+        bottom: 2.4ch;
+      }
+
       &.color {
         left: 17.5ch;
         bottom: 0;
@@ -177,6 +183,7 @@
       const currentFrame = Math.floor((timestamp - start) / msPerFrame);
       if (currentFrame >= frames.length) {
         asciiContainer.textContent = ascii;
+        asciiContainer.insertAdjacentElement('beforeend', backgroundEffect);
         asciiContainer.insertAdjacentElement('beforeend', colorEffect);
         asciiContainer.insertAdjacentElement('beforeend', translateEffect);
         return;
@@ -192,6 +199,15 @@
     }
 
     // Add hidden effect
+    const backgroundEffect = document.createElement('button');
+    backgroundEffect.classList.add('effect', 'background');
+    backgroundEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
+    backgroundEffect.addEventListener('click', e => {
+      e.target.textContent = '!';
+      asciiContainer.style.setProperty('--color', `${Math.floor(Math.random() * 360)}deg`);
+    });
+
+    // Add hidden effect 2
     const colorEffect = document.createElement('button');
     colorEffect.classList.add('effect', 'color');
     colorEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
@@ -217,7 +233,7 @@
       }
     });
 
-    // Add hidden effect 2
+    // Add hidden effect 3
     const translateEffect = document.createElement('button');
     translateEffect.classList.add('effect', 'translate');
     translateEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);