Add uber state log devtool

components/WotwDevtools/Tab/UberStateLog.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="pa-5">
+    <template v-if="!randoIpcConnected"> Randomizer IPC not connected </template>
+    <template v-else>
+      <v-data-table :items="changes" :headers="headers" dense />
+
+      <div class="mt-4 d-flex">
+        <v-btn text @click="changes = []">
+          <v-icon left>mdi-delete-outline</v-icon>
+          Clear
+        </v-btn>
+        <v-spacer />
+        <v-checkbox v-model="ignoreGroup3" dense label="Ignore Group 3" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    data: () => ({
+      ignoreGroup3: true,
+      changes: [],
+      headers: [
+        { text: 'Group', value: 'group', align: 'left' },
+        { text: 'State', value: 'state', align: 'left' },
+        { text: 'Prev. Value', value: 'previousValue', align: 'left' },
+        { text: 'Value', value: 'value', align: 'left' },
+      ],
+    }),
+    computed: {
+      ...mapState('electron', ['randoIpcConnected']),
+    },
+    mounted() {
+      window.electronApi.invoke('devtools.enableSendingAllUberStateUpdates')
+
+      window.electronApi.on('game.uberStateChanged', (_event, change) => {
+        if (this.ignoreGroup3 && change.group === 3) {
+          return
+        }
+
+        this.changes.unshift(change)
+      })
+    },
+    beforeDestroy() {
+      window.electronApi.invoke('devtools.disableSendingAllUberStateUpdates')
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tree-item {
+    cursor: pointer;
+
+    .not-loaded {
+      opacity: 0.5;
+    }
+  }
+
+  .sticky {
+    position: sticky;
+    top: 1em;
+  }
+
+  .disabled {
+    opacity: 0.5;
+  }
+</style>

electron/src/api.ts

@@ -50,6 +50,6 @@ export const registerUIIpcApi = () => {
 
 export const getElectronUrl = (to: string) => {
   return process.env.WEBPACK_DEV_SERVER_URL
-    ? `http://localhost:3000${to}`
+    ? `http://localhost:3000#${to}`
     : `app://./index.html#${to}`
 }

electron/src/api/devtools.js

@@ -17,4 +17,12 @@ export default {
   async setGameObjectActive(event, path, instanceId, active) {
     return await RandoIPCService.emit('set_game_object_active', { path, instance_id: instanceId, value: active })
   },
+
+  enableSendingAllUberStateUpdates() {
+    RandoIPCService.shouldSendAllUberStateUpdates = true
+  },
+
+  disableSendingAllUberStateUpdates() {
+    RandoIPCService.shouldSendAllUberStateUpdates = false
+  },
 }

electron/src/lib/RandoIPCService.ts

@@ -33,10 +33,6 @@ interface QueuedRequest {
 const outgoingRequestHandlers: { [requestId: number]: { resolve?: (arg?: any) => any; promise?: Promise<any> } } = {}
 const outgoingRequestQueue: QueuedRequest[] = []
 
-const notifyUberStateChangedThrottled: (state: number, group: number, value: number) => void = throttle((state: number, group: number, value: number) => {
-  uiIpc.queueSend('game.uberStateChanged', { state, group, value })
-}, 500)
-
 const makeRequest = (method: string, payload: any): Request => ({
   type: 'request',
   method,
@@ -55,6 +51,8 @@ const events = {
 }
 
 export class RandoIPCService {
+  static shouldSendAllUberStateUpdates = false
+
   static get events() {
     return events
   }
@@ -145,11 +143,15 @@ export class RandoIPCService {
         break
       }
       case 'notify_on_uber_state_changed': {
-        const { group, state, value } = request.payload
+        const { group, state, value, previous_value } = request.payload
         if (group === 34543 && state === 11226 && value) {
           uiIpc.queueSend('game.gameFinished')
         }
 
+        if (RandoIPCService.shouldSendAllUberStateUpdates) {
+          uiIpc.queueSend('game.uberStateChanged', {group, state, value, previousValue: previous_value})
+        }
+
         LocalTrackerWebSocketService.reportUberState({ group, state, value })
         break
       }

pages/electron/dev/index.vue

@@ -4,11 +4,13 @@
       <v-tab>Hierarchy</v-tab>
       <v-tab>Areas.wotw map</v-tab>
       <v-tab>TAS</v-tab>
+      <v-tab>Uber State Log</v-tab>
     </v-tabs>
 
     <WotwDevtoolsTabHierarchy v-if="tab === 0" />
     <WotwDevtoolsTabAreasWotwMap v-else-if="tab === 1" />
     <WotwDevtoolsTabTAS v-else-if="tab === 2" />
+    <WotwDevtoolsTabUberStateLog v-else-if="tab === 3" />
   </div>
 </template>