From 86fd4806755e16dca4f93931738f793f265f5dcb Mon Sep 17 00:00:00 2001
From: davay <davay@defucc.me>
Date: Sun, 12 Mar 2023 12:30:30 +0700
Subject: [PATCH] feat: midi sync

---
 components/beat/control/transport.vue         |  2 +-
 .../circle/{controls.js => controls.ts}       |  4 ++--
 use/tempo.ts                                  | 19 +++++++++++--------
 3 files changed, 14 insertions(+), 11 deletions(-)
 rename content/practice/rhythm/circle/{controls.js => controls.ts} (88%)

diff --git a/components/beat/control/transport.vue b/components/beat/control/transport.vue
index 9a29733542..436bc51e11 100644
--- a/components/beat/control/transport.vue
+++ b/components/beat/control/transport.vue
@@ -33,7 +33,7 @@ g.transport(
   g.btn.cursor-pointer(
     transform="translate(0,150)"
     v-if="!tempo.stopped"
-    @click="tempo.stopped = true"
+    @click="tempo.stopped = Date.now()"
     )
       rect.border(
         v-tooltip.left="'Stop'"
diff --git a/content/practice/rhythm/circle/controls.js b/content/practice/rhythm/circle/controls.ts
similarity index 88%
rename from content/practice/rhythm/circle/controls.js
rename to content/practice/rhythm/circle/controls.ts
index 4c414ff725..3e7d51f983 100644
--- a/content/practice/rhythm/circle/controls.js
+++ b/content/practice/rhythm/circle/controls.ts
@@ -1,7 +1,7 @@
 import { useStorage } from "@vueuse/core";
-import { reactive } from 'vue'
+import { reactive, Ref } from 'vue'
 
-export const loops = useStorage('tempo-circle-loops', [
+export const loops: Ref = useStorage('tempo-circle-loops', [
 	{
 		over: 8,
 		under: 8,
diff --git a/use/tempo.ts b/use/tempo.ts
index 50012819cf..b241b222f0 100644
--- a/use/tempo.ts
+++ b/use/tempo.ts
@@ -147,27 +147,27 @@ export function useTempo() {
       }
       metro.counter++
 
-    }, "8n").start(0);
+    }, "8n").start(0)
 
     useRafFn(() => {
       //@ts-expect-error
-      tempo.position = Transport.position;
-      tempo.ticks = Transport.ticks;
+      tempo.position = Transport.position
+      tempo.ticks = Transport.ticks
       tempo.progress = metro.loop.progress
     })
 
     onKeyStroke(" ", (ev) => {
       const elem = ev.target as HTMLElement
-      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return;
+      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return
       ev.preventDefault()
-      tempo.playing = !tempo.playing;
+      tempo.playing = !tempo.playing
     });
 
     onKeyStroke("Enter", (ev) => {
       const elem = ev.target as HTMLElement
-      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return;
-      ev.preventDefault();
-      tempo.stopped = Date.now();
+      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return
+      ev.preventDefault()
+      tempo.stopped = Date.now()
     });
 
   });
@@ -211,6 +211,9 @@ export function useTempo() {
   }
   );
 
+  watch(() => midi.playing, p => tempo.playing = p)
+  watch(() => midi.stopped, s => tempo.stopped = s)
+
   tempo.initialized = true
   return tempo;
 }