From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 8 Mar 2024 06:53:27 +0000 (-0800)
Subject: Add random color effect
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=96090cb1a4d1c4f3cf62fc1c79be5c2e165887a7;p=ard.is

Add random color effect
---

diff --git a/index.html b/index.html
index c251fcd..eadad86 100644
--- a/index.html
+++ b/index.html
@@ -157,9 +157,26 @@
 
     // Add hidden effect
     const button = document.createElement('button');
+    const highlightStyle = document.createElement('style');
+    document.head.appendChild(highlightStyle);
     button.addEventListener('click', e => {
-      // Placeholder until I can implement something cooler
       e.target.textContent = '!';
+
+      if (CSS.highlights !== undefined) {
+        const textNode = document.querySelector('pre').childNodes[0];
+        const highlights = Array.from({ length: 10 }, () => []);
+        for (let i = 0; i < ascii.length; i += 2) {
+          const range = new Range();
+          range.setStart(textNode, i);
+          range.setEnd(textNode, Math.min(i + 2, ascii.length));
+          highlights[Math.floor(Math.random() * 10)].push(range);
+        }
+        highlightStyle.textContent = '';
+        highlights.forEach((highlight, i) => {
+          CSS.highlights.set(`c${i}`, new Highlight(...highlight));
+          highlightStyle.textContent += `::highlight(c${i}){color:hsl(${i * 36}deg 50% 50%)}`;
+        });
+      }
     });
     setTimeout(() => {
       asciiContainer.insertAdjacentElement('beforeend', button);