fix: getting logo interaction working with touch

Author: maxelkins

website/src/components/HdiLogo.astro

@@ -90,7 +90,9 @@
   // so CSS transitions on color have existing elements to animate between.
   function applyClasses() {
     logoPre.querySelectorAll<HTMLElement>(".hero-logo-letter").forEach((el) => {
-      el.classList.toggle("hovered", el.dataset.key === hoveredKey);
+      const key = el.dataset.key!;
+      el.classList.toggle("hovered", key === hoveredKey);
+      el.classList.toggle("pressed", pressedKeys.has(key));
     });
   }
 
@@ -102,12 +104,24 @@
     return col < 6 ? "h" : col < 12 ? "d" : col < 18 ? "i" : null;
   }
 
+  function keyFromTouch(touch: Touch): string | null {
+    const rect = logoPre.getBoundingClientRect();
+    const col = Math.floor((touch.clientX - rect.left) / (rect.width / 19));
+    return col < 6 ? "h" : col < 12 ? "d" : col < 18 ? "i" : null;
+  }
+
   // Mouse
   logoPre.addEventListener("mousemove", (e) => {
     const key = keyFromMouse(e);
-    if (key === hoveredKey) return;
-    hoveredKey = key;
-    applyClasses(); // class-only update — preserves spans so transition fires
+    if (key !== hoveredKey) {
+      hoveredKey = key;
+      applyClasses();
+    }
+    if (e.buttons === 1) {
+      pressedKeys.clear();
+      if (key) pressedKeys.add(key);
+      render();
+    }
   });
   logoPre.addEventListener("mouseleave", () => {
     if (hoveredKey === null) return;
@@ -127,6 +141,43 @@
     render();
   });
 
+  // Touch
+  logoPre.addEventListener(
+    "touchstart",
+    (e) => {
+      e.preventDefault();
+      pressedKeys.clear();
+      for (const touch of e.touches) {
+        const key = keyFromTouch(touch);
+        if (key) pressedKeys.add(key);
+      }
+      render();
+    },
+    { passive: false },
+  );
+  logoPre.addEventListener(
+    "touchmove",
+    (e) => {
+      e.preventDefault();
+      pressedKeys.clear();
+      for (const touch of e.touches) {
+        const key = keyFromTouch(touch);
+        if (key) pressedKeys.add(key);
+      }
+      render();
+    },
+    { passive: false },
+  );
+  document.addEventListener("touchend", () => {
+    if (pressedKeys.size === 0) return;
+    pressedKeys.clear();
+    render();
+  });
+  document.addEventListener("touchcancel", () => {
+    pressedKeys.clear();
+    render();
+  });
+
   // Keyboard — skip when focus is in a text input to avoid interfering with typing
   const KEYS = new Set(["h", "d", "i"]);
   const isTextField = (t: EventTarget | null) =>
@@ -163,6 +214,9 @@
       &.hovered {
         color: var(--mauve);
       }
+      &.pressed {
+        color: var(--mauve);
+      }
     }
   }
 </style>