init

src/composables/useGameEngine.ts

@@ -0,0 +1,53 @@
+import { onMounted, onUnmounted, watch } from 'vue'
+import { Engine } from '@engine/core/Engine'
+import type { GameData } from '@engine/types'
+import { useGameStore } from '@/stores/gameStore'
+
+export function useGameEngine(videoEl: () => HTMLVideoElement | null) {
+  const engine = new Engine()
+  const store = useGameStore()
+
+  async function loadGame(dataUrl: string) {
+    const resp = await fetch(dataUrl)
+    const data: GameData = await resp.json()
+    engine.sceneManager.load(data)
+    engine.stateManager.init(data.variables)
+  }
+
+  function start() {
+    engine.videoManager.attach(videoEl()!)
+
+    engine.on('sceneChange', (scene) => {
+      store.setScene(scene)
+      store.clearChoices()
+    })
+
+    engine.on('choiceRequest', (choiceList) => {
+      store.setChoices(choiceList)
+    })
+
+    engine.on('videoEnd', () => {})
+
+    engine.on('gameEnd', () => {
+      store.setGameEnded(true)
+    })
+
+    engine.start()
+  }
+
+  function makeChoice(index: number) {
+    const scene = store.currentScene
+    if (!scene?.choices) return
+    engine.makeChoice(scene.choices[index])
+  }
+
+  function destroy() {
+    engine.destroy()
+  }
+
+  onUnmounted(() => {
+    destroy()
+  })
+
+  return { loadGame, start, makeChoice, destroy, engine }
+}