feat: playback bar component, save system improvements, demo and roadmap updates

src/composables/useGameEngine.ts

@@ -15,10 +15,14 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
     ;(window as any).__store = store
   }
 
-  engine.setChapterUnlockHandler(async (chapterId) => {
-    await saveSystem.unlockChapter(chapterId)
-    store.addUnlockedChapter(chapterId)
-  })
+    engine.setChapterUnlockHandler(async (chapterId) => {
+      await saveSystem.unlockChapter(chapterId)
+      store.addUnlockedChapter(chapterId)
+    })
+
+    engine.setMarkWatchedHandler(async (sceneId) => {
+      await saveSystem.markWatched(sceneId)
+    })
 
   engine.on('sceneChange', (scene) => {
     store.setScene(scene)
@@ -116,11 +120,28 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
   }
 
   function startChapter(chapterId: string) {
-    ensureVideo()
+    const [elA, elB] = videoEls()
+    if (elA && elB) engine.videoManager.attach(elA, elB)
     store.setGameEnded(false)
     engine.startChapter(chapterId)
   }
 
+  function skipScene() {
+    engine.skipCurrentScene()
+  }
+
+  function setSpeed(rate: number) {
+    engine.videoManager.setPlaybackRate(rate)
+  }
+
+  function getSpeed(): number {
+    return engine.videoManager.getPlaybackRate()
+  }
+
+  async function isSceneWatched(sceneId: string): Promise<boolean> {
+    return await saveSystem.isWatched(sceneId)
+  }
+
   function makeChoice(index: number) {
     const scene = store.currentScene
     if (!scene?.choices) return
@@ -184,6 +205,10 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
     makeChoice,
     clickHotspot,
     startChapter,
+    skipScene,
+    setSpeed,
+    getSpeed,
+    isSceneWatched,
     saveGame,
     loadGameFromSlot,
     refreshSaves,