From 999a1db2e7f9c33bcba959a5c5fbccddd1ea829b Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 25 Nov 2021 08:17:34 -0800
Subject: [PATCH] Hack on choreo

---
 packages/webamp/demo/js/choreography.ts | 132 +++++++++++++++++++-----
 packages/webamp/js/components/Skin.tsx  |   3 +-
 2 files changed, 111 insertions(+), 24 deletions(-)

diff --git a/packages/webamp/demo/js/choreography.ts b/packages/webamp/demo/js/choreography.ts
index fb1278be..b464e57e 100644
--- a/packages/webamp/demo/js/choreography.ts
+++ b/packages/webamp/demo/js/choreography.ts
@@ -15,34 +15,120 @@ const BANDS: Slider[] = [
   14000,
   16000,
 ];
+
+function activateId(id: string) {
+  document.getElementById(id)!.classList.add("active");
+}
+
+function deactivateId(id: string) {
+  document.getElementById(id)!.classList.remove("active");
+}
+
+function hoverPlButton(id: string, i: number) {
+  const elements = document.querySelector(id)!.childNodes;
+  elements[i]!.classList.add("hover");
+}
+
+function unhoverPlButton(id: string, i: number) {
+  const elements = document.querySelector(id)!.childNodes;
+  elements[i]!.classList.remove("hover");
+}
+
+function handleBeat(beat: number) {
+  switch (beat) {
+    case 1:
+      activateId("previous");
+      break;
+    case 2:
+      deactivateId("previous");
+      activateId("play");
+      break;
+    case 3:
+      deactivateId("play");
+      activateId("pause");
+      break;
+    case 4:
+      deactivateId("pause");
+      activateId("stop");
+      break;
+    case 5:
+      deactivateId("stop");
+      activateId("next");
+      break;
+    case 6:
+      deactivateId("next");
+      activateId("eject");
+      break;
+    case 7:
+      deactivateId("eject");
+      activateId("shuffle");
+      break;
+    case 8:
+      deactivateId("shuffle");
+      activateId("repeat");
+      break;
+    case 17:
+      document.getElementById("playlist-add-menu")!.click();
+      break;
+    // TODO: Triplet?
+    case 18: {
+      hoverPlButton("#playlist-add-menu ul", 2);
+      break;
+    }
+    case 19:
+      unhoverPlButton("#playlist-add-menu ul", 2);
+      hoverPlButton("#playlist-add-menu ul", 1);
+      break;
+
+    case 20:
+      unhoverPlButton("#playlist-add-menu ul", 1);
+      hoverPlButton("#playlist-add-menu ul", 0);
+      break;
+
+    case 21:
+      unhoverPlButton("#playlist-add-menu ul", 0);
+      document.getElementById("playlist-add-menu")!.click();
+      document.getElementById("playlist-remove-menu")!.click();
+      break;
+    case 22:
+      hoverPlButton("#playlist-remove-menu ul", 3);
+      break;
+    case 23:
+      unhoverPlButton("#playlist-remove-menu ul", 3);
+      hoverPlButton("#playlist-remove-menu ul", 2);
+      break;
+
+    case 24:
+      unhoverPlButton("#playlist-remove-menu ul", 2);
+      hoverPlButton("#playlist-remove-menu ul", 1);
+      break;
+    case 25:
+      unhoverPlButton("#playlist-remove-menu ul", 1);
+      hoverPlButton("#playlist-remove-menu ul", 0);
+      break;
+    case 26:
+      hoverPlButton("#playlist-remove-menu ul", 0);
+      document.getElementById("playlist-remove-menu ul")!.click();
+      break;
+  }
+}
 export function choreograph(webamp: Webamp) {
   let frameNum = 0;
+  let lastBeat = 16;
   function tick() {
     frameNum += 1;
-    batch(() => {
-      for (const [i, band] of BANDS.entries()) {
-        const value = (Math.sin(i + frameNum / 60) + 1) * 50;
-        webamp.store.dispatch({ type: "SET_BAND_VALUE", band, value });
-      }
-    });
-    if (frameNum === 200 || frameNum === 400) {
-      document.getElementById("previous")?.classList.add("active");
-      document.getElementById("playlist-add-menu")?.click();
-      document
-        .querySelector("#playlist-add-menu ul")
-        .firstChild.classList.add("hover");
+    const beat = Math.floor(frameNum / 30);
+    if (beat !== lastBeat) {
+      lastBeat = beat;
+      handleBeat(beat);
     }
-    if (frameNum === 400 || frameNum === 600) {
-      document.getElementById("playlist-remove-menu")?.click();
-    }
-    if (frameNum === 600 || frameNum === 800) {
-      document.getElementById("playlist-selection-menu")?.click();
-    }
-    if (frameNum === 800 || frameNum === 1000) {
-      document.getElementById("playlist-misc-menu")?.click();
-    }
-    if (frameNum === 1000 || frameNum === 1200) {
-      document.getElementById("playlist-list-menu")?.click();
+    if (beat > 8 && beat <= 16) {
+      batch(() => {
+        for (const [i, band] of BANDS.entries()) {
+          const value = (Math.sin(i + frameNum / 60) + 1) * 50;
+          webamp.store.dispatch({ type: "SET_BAND_VALUE", band, value });
+        }
+      });
     }
     window.requestAnimationFrame(tick);
   }
diff --git a/packages/webamp/js/components/Skin.tsx b/packages/webamp/js/components/Skin.tsx
index 1a004843..e6f9be5b 100644
--- a/packages/webamp/js/components/Skin.tsx
+++ b/packages/webamp/js/components/Skin.tsx
@@ -59,7 +59,8 @@ const getCssRules = createSelector(
       const imageUrl =
         skinImages[imageName] || skinImages[FALLBACKS[imageName]];
       if (imageUrl) {
-        imageSelectors[imageName].forEach((selector) => {
+        imageSelectors[imageName].forEach((_selector) => {
+          const selector = _selector; // .replace(":active", ".active");
           cssRules.push(
             `${CSS_PREFIX} ${selector} {background-image: url(${imageUrl})}`
           );