From 99cb0a6b36ef0c33a0c46d74f5d00f73d0aace14 Mon Sep 17 00:00:00 2001
From: Eric Dauenhauer <eric@ericyd.com>
Date: Sat, 21 Jan 2023 14:34:47 -0600
Subject: [PATCH] Add countdown indicator to beata counter

---
 src/Metronome/controls/BeatCounter.tsx | 43 ++++++++++++++++++++------
 src/Metronome/index.tsx                |  4 ++-
 src/index.css                          | 16 ++++++++++
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/Metronome/controls/BeatCounter.tsx b/src/Metronome/controls/BeatCounter.tsx
index 3f9f068..d61caaf 100644
--- a/src/Metronome/controls/BeatCounter.tsx
+++ b/src/Metronome/controls/BeatCounter.tsx
@@ -4,7 +4,9 @@ import { ControlPanelItem } from './ControlPanelItem'
 
 type BeatCounterProps = {
   clock: Worker
-  beatsPerMeasure: number
+  beatsPerLoop: number
+  loopLengthSeconds: number
+  playing: boolean
 }
 export function BeatCounter(props: BeatCounterProps) {
   const [currentTick, setCurrentTick] = useState(0)
@@ -24,17 +26,40 @@ export function BeatCounter(props: BeatCounterProps) {
     return () => {
       props.clock.removeEventListener('message', clockMessageHandler)
     }
-  }, [props.clock, props.beatsPerMeasure])
+  }, [props.clock])
 
   return (
     <ControlPanelItem>
-      <span className="text-2xl pr-2">
-        {/* `+ 1` to convert "computer numbers" to "musician numbers"  */}
-        {(currentTick % props.beatsPerMeasure) + 1}
-      </span>
-      <span className="text-l">
-        . {Math.floor(currentTick / props.beatsPerMeasure) + 1}
-      </span>
+      <svg
+        version="1.1"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        className="block h-10 w-10"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r={9}
+          fill="none"
+          className={`stroke-black stroke-2`}
+          style={{
+            animationName: 'circle-stroke-shrink-9-radius',
+            strokeDasharray: 56.55,
+            // this is "x2" because the animation is designed to shrink, and then regrow the stroke.
+            // see index.css for more details.
+            animationDuration: `${props.loopLengthSeconds * 2}s`,
+            animationTimingFunction: 'linear',
+            animationDelay: '0s',
+            animationIterationCount: 'infinite',
+            animationDirection: 'normal',
+            animationFillMode: 'none',
+            animationPlayState: props.playing ? 'running' : 'paused',
+          }}
+        />
+        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fontSize="0.65em">
+          {props.beatsPerLoop - currentTick}
+        </text>
+      </svg>
     </ControlPanelItem>
   )
 }
diff --git a/src/Metronome/index.tsx b/src/Metronome/index.tsx
index 344910c..0ea7eac 100644
--- a/src/Metronome/index.tsx
+++ b/src/Metronome/index.tsx
@@ -188,7 +188,9 @@ export const Metronome: React.FC<Props> = ({ clock }) => {
           <div className="flex flex-col items-center">
             <BeatCounter
               clock={clock}
-              beatsPerMeasure={timeSignature.beatsPerMeasure}
+              beatsPerLoop={timeSignature.beatsPerMeasure * measuresPerLoop}
+              loopLengthSeconds={loopLengthSeconds}
+              playing={playing}
             />
 
             <TimeSignatureControl
diff --git a/src/index.css b/src/index.css
index a90f074..8126f48 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,3 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+This is defined here instead of tailwind.config.js because the usage of this keyframe (in BeatCounter)
+is programmatically adjusted and the Tailwind compiler can't generate the classes properly
+*/
+@keyframes circle-stroke-shrink-9-radius {
+  0% {
+    stroke-dashoffset: 0;
+  }
+
+  100% {
+    /* this is 2x the circumfrence for a circle with radius 9.
+    this looks nice because first the circle will shrink to 0% stroke,
+    then it will grow to 100%. It is smoother than flashing to a full stroke each loop. */
+    stroke-dashoffset: 113.1;
+  }
+}
\ No newline at end of file