feat: engine improvements, new scenes, videos, subtitles, hotspot component and docs update

src/composables/useGameEngine.ts

@@ -27,6 +27,8 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
       store.setScene(scene)
       store.clearChoices()
       store.clearTimer()
+      store.clearHotspots()
+      store.setIsImageScene(scene.type === 'image')
       saveGame(0)
     })
 
@@ -43,6 +45,14 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
       store.clearTimer()
     })
 
+    engine.on('hotspotRequest', (list) => {
+      store.setHotspots(list)
+    })
+
+    engine.on('hotspotUpdate', (list) => {
+      store.setHotspots(list)
+    })
+
     engine.on('videoEnd', () => {
       try {
         const video = engine.videoManager.getActiveVideoElement()
@@ -83,14 +93,14 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
 
   function start() {
     const [elA, elB] = videoEls()
-    engine.videoManager.attach(elA!, elB!)
+    if (elA && elB) engine.videoManager.attach(elA, elB)
     registerEvents()
     engine.start()
   }
 
   async function resumeAutoSave(): Promise<boolean> {
     const [elA, elB] = videoEls()
-    engine.videoManager.attach(elA!, elB!)
+    if (elA && elB) engine.videoManager.attach(elA, elB)
     registerEvents()
     return await loadGameFromSlot(0)
   }
@@ -103,6 +113,15 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
     engine.makeChoice(scene.choices[index])
   }
 
+  function clickHotspot(hotspotId: string) {
+    const scene = store.currentScene
+    if (!scene?.hotspots) return
+    const hs = scene.hotspots.find((h) => h.id === hotspotId)
+    if (hs) {
+      engine.clickHotspot(hs)
+    }
+  }
+
   async function saveGame(slot: number) {
     const state = engine.stateManager
     const currentScene = store.currentScene
@@ -144,5 +163,5 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
     destroy()
   })
 
-  return { loadGame, start, resumeAutoSave, makeChoice, saveGame, loadGameFromSlot, refreshSaves, engine, saveSystem }
+  return { loadGame, start, resumeAutoSave, makeChoice, clickHotspot, saveGame, loadGameFromSlot, refreshSaves, engine, saveSystem }
 }