feat: cleaned up mouse behaviour and saving

src/BeatStore.ts

@@ -1,8 +1,9 @@
-import { type Beat, createBeat, deserialise as deserialiseBeat } from "@/Beat";
-import { inject, computed, type InjectionKey, ref, shallowRef, triggerRef, watch } from "vue";
+import { type Beat, createBeat, deserialise as deserialiseBeat, type BeatManager } from "@/Beat";
+import { inject, computed, type InjectionKey, ref, shallowRef, triggerRef, watch, onScopeDispose } from "vue";
 
-function defaultMainBeatGroup(): Beat {
+function defaultMainBeatGroup(manager: BeatManager): Beat {
     const defaultSettings = {
+        manager,
         barCount: 2,
         isLooping: false,
         timeSigUp: 8,
@@ -16,15 +17,23 @@ function defaultMainBeatGroup(): Beat {
 }
 
 export function createBeatStore() {
-    const beats = shallowRef<Beat[]>([ defaultMainBeatGroup() ]);
+    const saveDirty = ref(false);
+
+    const manager = {
+        notifyChange() {
+            saveDirty.value = true;
+        },
+    };
+
+    const beats = shallowRef<Beat[]>([ defaultMainBeatGroup(manager) ]);
     const activeBeatIndex = ref(0);
     const activeBeat = computed<Beat | null>(() => beats.value[activeBeatIndex.value] ?? null);
     const autoSave = ref(true);
-    const orientation = ref<'horizontal' | 'vertical'>('horizontal');
+    const orientation = ref<"horizontal" | "vertical">("horizontal");
 
     function resetActiveBeat(): void {
         const current = activeBeat.value;
-        beats.value[activeBeatIndex.value] = defaultMainBeatGroup();
+        beats.value[activeBeatIndex.value] = defaultMainBeatGroup(manager);
         current?.destroy();
         triggerRef(beats);
     }
@@ -37,7 +46,7 @@ export function createBeatStore() {
     }
 
     function addNewBeat(): void {
-        const newBeat = defaultMainBeatGroup();
+        const newBeat = defaultMainBeatGroup(manager);
         beats.value.push(newBeat);
         if (autoSave.value) {
             save("localStorage");
@@ -51,8 +60,9 @@ export function createBeatStore() {
             localStorage.setItem("drum-slayer-save", JSON.stringify({
                 beats: serials,
                 activeBeatIndex: activeBeatIndex.value,
-                orientation: orientation.value ?? 'horizontal',
+                orientation: orientation.value ?? "horizontal",
             }));
+            saveDirty.value = false;
         }
     }
 
@@ -62,7 +72,7 @@ export function createBeatStore() {
             && (typeof source.activeBeatIndex === "number" || typeof source.activeBeatIndex === "undefined")
             && typeof source.orientation === "string") {
             try {
-                source.beats.forEach((beat: any) => beats.value.push(deserialiseBeat(beat)));
+                source.beats.forEach((beat: any) => beats.value.push(deserialiseBeat(beat, manager)));
                 if (typeof source.activeBeatIndex === "number") {
                     activeBeatIndex.value = source.activeBeatIndex;
                 }
@@ -73,6 +83,7 @@ export function createBeatStore() {
         } else {
             resetActiveBeat();
         }
+        saveDirty.value = false;
     }
     
     function bakeAll(): void {
@@ -80,21 +91,35 @@ export function createBeatStore() {
     }
 
     watch([activeBeatIndex, orientation, beats], () => {
-        save('localStorage');
+        save("localStorage");
     });
 
-    const savedItem = localStorage.getItem('drum-slayer-save');
+    const savedItem = localStorage.getItem("drum-slayer-save");
     if (savedItem) {
         const serial = JSON.parse(savedItem);
-        beats.value = [defaultMainBeatGroup()];
+        beats.value = [defaultMainBeatGroup(manager)];
         loadFromSave(serial);
     }
 
+    const saveInterval = setInterval(() => saveDirty && save("localStorage"), 5 * 60 * 1000);
+
+    watch(saveDirty, () => console.log(saveDirty.value));
+
+    onScopeDispose(() => clearInterval(saveInterval));
+
+    window.addEventListener("beforeunload", (e) => {
+        if (saveDirty) {
+            e.preventDefault();
+            e.returnValue = true;
+        }
+    });
+
     return {
         beats,
         activeBeatIndex,
         activeBeat,
         autoSave,
+        saveDirty,
         orientation,
 
         save,
@@ -107,7 +132,7 @@ export function createBeatStore() {
 
 export type BeatStore = ReturnType<typeof createBeatStore>;
 
-export const BeatStoreKey = Symbol('BeatStore') as InjectionKey<BeatStore>;
+export const BeatStoreKey = Symbol("BeatStore") as InjectionKey<BeatStore>;
 
 export function useBeatStore(): BeatStore {
     return inject(BeatStoreKey, createBeatStore, true);