Auto-select the default AI for a creature when creating its statblock

src/components/Statblock.vue

@@ -60,7 +60,7 @@
       <button v-if="subject.perspective === POV.Third" @click.stop="subject.perspective = POV.Second">Second-person</button>
       <button v-if="subject.perspective === POV.First" @click.stop="subject.perspective = POV.Third">Third-person</button>
       <button v-if="subject.perspective === POV.Second" @click.stop="subject.perspective = POV.First">First-person</button>
-      <select @change="subject.ai = ais[$event.target.selectedIndex]">
+      <select @change="subject.ai = ais[$event.target.selectedIndex]" class="ai-picker">
         <option v-for="(ai, index) in ais" :key="'ai-' + index">{{ ai.name }}</option>
       </select>
     </div>
@@ -71,7 +71,7 @@
 import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
 import { Creature } from '@/game/creature'
 import { POV } from '@/game/language'
-import { NoAI, RandomAI, VoreAI } from '@/game/ai'
+import { NoAI, RandomAI, VoreAI, AI } from '@/game/ai'
 import { Stats, Stat, StatIcons, StatDescs, Vigor, VigorIcons, VigorDescs, VoreStatDescs, VoreStatIcons, VisibleStatus } from '@/game/combat'
 import ContainerView from './ContainerView.vue'
 import tippy, { delegate, createSingleton } from 'tippy.js'
@@ -156,6 +156,10 @@ export default class Statblock extends Vue {
     createSingleton(tippyInstances, { delay: 500, touch: ["hold", 500] })
 
     this.statusChanged([])
+
+    const picker = this.$el.querySelector(".ai-picker") as HTMLSelectElement
+    console.log(this.$data.ais.indexOf(this.subject.ai))
+    picker.selectedIndex = this.$data.ais.findIndex((ai: AI) => ai.name === this.subject.ai.name)
   }
 }
 </script>