M10: Vue frontend — traits, shop, bench, opponents, strength meter

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/store.js

@@ -0,0 +1,41 @@
+import { reactive } from 'vue'
+import { newGame, doAction } from './api.js'
+
+export const store = reactive({
+  gameId: null,
+  state: null,
+  error: null,
+  selectedItem: null,
+
+  async start() {
+    this.error = null
+    const data = await newGame()
+    this.gameId = data.game_id
+    this.state = data
+  },
+
+  async act(action) {
+    this.error = null
+    try {
+      this.state = await doAction(this.gameId, action)
+    } catch (e) {
+      this.error = e.message
+      setTimeout(() => { if (this.error === e.message) this.error = null }, 2500)
+    }
+  },
+
+  buy(slot) { return this.act({ action: 'buy', slot }) },
+  sell(where, idx) { return this.act({ action: 'sell', where, idx }) },
+  reroll() { return this.act({ action: 'reroll' }) },
+  buyXp() { return this.act({ action: 'buy_xp' }) },
+  move(where, idx) { return this.act({ action: 'move', where, idx }) },
+  next() { return this.act({ action: 'next' }) },
+  pickAugment(choice) { return this.act({ action: 'pick_augment', choice }) },
+
+  equip(boardIdx) {
+    if (this.selectedItem === null) return
+    const itemIdx = this.selectedItem
+    this.selectedItem = null
+    return this.act({ action: 'equip', item_idx: itemIdx, board_idx: boardIdx })
+  },
+})