Add random color effect

diff --git a/index.html b/index.html
index c251fcd0cb730967b52fddfdea92311eeba05041..eadad86591f7114cadda922d7e871c1a858bd0b3 100644 (file)
--- 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);