fix up debug manager

app/website/src/store/useDebugManager.ts

@@ -1,27 +1,55 @@
 import {computed, ref} from 'vue';
-import {type ManagerEventMap, type ManagerState} from 'earwurm';
+import {type ManagerEventMap} from 'earwurm';
 
 import {useEarwurmStore} from './useEarwurmStore';
 
 type ErrorResponse = Parameters<ManagerEventMap['error']>[0];
 
+const MAX_HISTORY_LENGTH = 20;
+
 const {manager, activeStacks} = useEarwurmStore();
 
-const stateHistoryRef = ref<ManagerState[]>([]);
+const stateHistoryRef = ref([manager.state]);
 const errorHistoryRef = ref<ErrorResponse[]>([]);
 
-const unlockedRef = ref(false);
-const playingRef = ref(false);
+// TODO: Update these to be more accurate.
+// Currently, these do not update on the right events.
+const unlockHistoryRef = ref([manager.unlocked]);
+const playHistoryRef = ref([manager.playing]);
+
+function updateUnlockHistory() {
+  const currentLength = unlockHistoryRef.value.length;
+
+  if (manager.unlocked === unlockHistoryRef.value[currentLength - 1]) {
+    return;
+  }
+
+  const newHistory = [...unlockHistoryRef.value, manager.unlocked];
+  unlockHistoryRef.value = newHistory.slice(MAX_HISTORY_LENGTH * -1);
+}
+
+function updatePlayHistory() {
+  const currentLength = playHistoryRef.value.length;
+
+  if (manager.playing === playHistoryRef.value[currentLength - 1]) {
+    return;
+  }
+
+  const newHistory = [...playHistoryRef.value, manager.playing];
+  playHistoryRef.value = newHistory.slice(MAX_HISTORY_LENGTH * -1);
+}
 
 manager.on('state', (current) => {
-  stateHistoryRef.value = [...stateHistoryRef.value, current];
-  unlockedRef.value = manager.unlocked;
-  playingRef.value = manager.playing;
+  const newState = [...stateHistoryRef.value, current];
+  stateHistoryRef.value = newState.slice(MAX_HISTORY_LENGTH * -1);
+
+  updateUnlockHistory();
+  updatePlayHistory();
 });
 
 manager.on('library', () => {
-  unlockedRef.value = manager.unlocked;
-  playingRef.value = manager.playing;
+  updateUnlockHistory();
+  updatePlayHistory();
 });
 
 manager.on('error', (response) => {
@@ -33,7 +61,7 @@ export function useDebugManager() {
     activeStacks,
     stateHistory: computed(() => stateHistoryRef.value),
     errorHistory: computed(() => errorHistoryRef.value),
-    unlocked: computed(() => unlockedRef.value),
-    playing: computed(() => playingRef.value),
+    unlockHistory: computed(() => unlockHistoryRef.value),
+    playHistory: computed(() => playHistoryRef.value),
   };
 }