From a5af2b51c7e84434f628dd546b63ff79a471a59d Mon Sep 17 00:00:00 2001
From: Pierce <pierce.tickle@gmail.com>
Date: Sat, 26 Feb 2022 00:20:56 -0500
Subject: [PATCH 1/2] POC for having conjugates change tempo

---
 src/cubing/twisty/views/TwistyAlgViewer.ts    | 26 ++++++++++++++++---
 .../cubing.js/twisty/twisty-alg-viewer.html   |  4 ++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/cubing/twisty/views/TwistyAlgViewer.ts b/src/cubing/twisty/views/TwistyAlgViewer.ts
index 92ed54ddf..361d675b5 100644
--- a/src/cubing/twisty/views/TwistyAlgViewer.ts
+++ b/src/cubing/twisty/views/TwistyAlgViewer.ts
@@ -31,6 +31,7 @@ class DataDown {
   earliestMoveIndex: number;
   twistyAlgViewer: TwistyAlgViewer;
   direction: ExperimentalIterationDirection;
+  type?: string;
 }
 
 class DataUp {
@@ -91,6 +92,10 @@ class TwistyAlgWrapperElem extends HTMLElementShim {
     this.classList.add(className);
   }
 
+  addClass(className: string) {
+    this.classList.add(className);
+  }
+
   addString(str: string) {
     this.queue.push(document.createTextNode(str));
   }
@@ -149,6 +154,9 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
   public traverseAlg(alg: Alg, dataDown: DataDown): DataUp {
     let moveCount = 0;
     const element = new TwistyAlgWrapperElem("twisty-alg-alg", alg); // TODO: pick a better class name.
+    if (dataDown.type) {
+      element.addClass(dataDown.type);
+    }
     let first = true;
     for (const unit of experimentalDirect(alg.units(), dataDown.direction)) {
       if (!first) {
@@ -293,6 +301,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
         earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
         twistyAlgViewer: dataDown.twistyAlgViewer,
         direction: dataDown.direction,
+        type: "setup",
       }),
     );
     moveCount += aLen;
@@ -302,6 +311,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
         earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
         twistyAlgViewer: dataDown.twistyAlgViewer,
         direction: dataDown.direction,
+        type: "execution",
       }),
     );
     element.addString("]");
@@ -366,13 +376,21 @@ class MoveHighlighter {
     this.moveCharIndexMap.set(charIndex, elem);
   }
 
-  set(move: Parsed<Move> | null): void {
+  set(move: Parsed<Move> | null, twistyPlayer: TwistyPlayer): void {
     const newElem = move
       ? this.moveCharIndexMap.get(move.startCharIndex) ?? null
       : null;
     if (this.currentElem === newElem) {
       return;
     }
+    if (newElem?.parentElement?.classList.contains('execution')) {
+      console.log('slow down');
+      twistyPlayer.tempoScale = 10;
+    } else {
+      console.log("reset to one")
+      console.log(newElem?.parentElement?.classList);
+      twistyPlayer.tempoScale = 1;
+    }
     this.currentElem?.classList.remove("twisty-alg-current-move");
     this.currentElem?.setCurrentMove(false);
     newElem?.classList.add("twisty-alg-current-move");
@@ -430,14 +448,16 @@ export class TwistyAlgViewer extends HTMLElementShim {
 
     twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener(
       (currentMoveInfo: CurrentMoveInfo) => {
+        // console.log('WPHT', currentMoveInfo);
         let moveInfo = currentMoveInfo.currentMoves[0];
         moveInfo ??= currentMoveInfo.movesStarting[0];
         moveInfo ??= currentMoveInfo.movesFinishing[0];
         if (!moveInfo) {
-          this.highlighter.set(null);
+          this.highlighter.set(null, twistyPlayer);
         } else {
           const mainCurrentMove = moveInfo.move; // TODO
-          this.highlighter.set(mainCurrentMove as Parsed<Move>);
+          // console.log('WPHT', mainCurrentMove);
+          this.highlighter.set(mainCurrentMove as Parsed<Move>, twistyPlayer);
         }
       },
     );
diff --git a/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html b/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html
index 7d7b2b4ff..86aa94922 100644
--- a/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html
+++ b/src/sites/experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html
@@ -28,7 +28,9 @@ <h1 style="text-align: center">
       </h1>
       <twisty-player
         id="main-player"
-        alg="([R, U])3 (U L)2' [M2': U2]"
+        alg="[R2: R U' R' U' R U R' F' R U R' U' R' F R]
+        [F2: R U' R' U' R U R' F' R U R' U' R' F R]
+        "
       ></twisty-player>
       <div class="alg-example">
         <twisty-alg-viewer for="main-player"></twisty-alg-viewer>

From 093c49d5ce387d181fd87acedcbd4f50bb49d9ed Mon Sep 17 00:00:00 2001
From: Pierce <pierce.tickle@gmail.com>
Date: Sat, 26 Feb 2022 13:35:50 -0500
Subject: [PATCH 2/2] remove console.logs

---
 src/cubing/twisty/views/TwistyAlgViewer.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/cubing/twisty/views/TwistyAlgViewer.ts b/src/cubing/twisty/views/TwistyAlgViewer.ts
index 361d675b5..8e99562d3 100644
--- a/src/cubing/twisty/views/TwistyAlgViewer.ts
+++ b/src/cubing/twisty/views/TwistyAlgViewer.ts
@@ -384,11 +384,8 @@ class MoveHighlighter {
       return;
     }
     if (newElem?.parentElement?.classList.contains('execution')) {
-      console.log('slow down');
       twistyPlayer.tempoScale = 10;
     } else {
-      console.log("reset to one")
-      console.log(newElem?.parentElement?.classList);
       twistyPlayer.tempoScale = 1;
     }
     this.currentElem?.classList.remove("twisty-alg-current-move");
@@ -448,7 +445,6 @@ export class TwistyAlgViewer extends HTMLElementShim {
 
     twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener(
       (currentMoveInfo: CurrentMoveInfo) => {
-        // console.log('WPHT', currentMoveInfo);
         let moveInfo = currentMoveInfo.currentMoves[0];
         moveInfo ??= currentMoveInfo.movesStarting[0];
         moveInfo ??= currentMoveInfo.movesFinishing[0];
@@ -456,7 +452,6 @@ export class TwistyAlgViewer extends HTMLElementShim {
           this.highlighter.set(null, twistyPlayer);
         } else {
           const mainCurrentMove = moveInfo.move; // TODO
-          // console.log('WPHT', mainCurrentMove);
           this.highlighter.set(mainCurrentMove as Parsed<Move>, twistyPlayer);
         }
       },