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

engine/core/Engine.ts

@@ -25,11 +25,16 @@ export class Engine {
   private justCameFromImage = false
   private loopActive = false
   private onUnlockChapter: ((chapterId: string) => void) | null = null
+  private onMarkWatched: ((sceneId: string) => void) | null = null
 
   setChapterUnlockHandler(handler: (chapterId: string) => void) {
     this.onUnlockChapter = handler
   }
 
+  setMarkWatchedHandler(handler: (sceneId: string) => void) {
+    this.onMarkWatched = handler
+  }
+
   constructor() {
     this.sceneManager = new SceneManager()
     this.videoManager = new VideoManager()
@@ -277,6 +282,8 @@ export class Engine {
   }
 
   private onVideoEnd(scene: SceneNode) {
+    this.onMarkWatched?.(scene.id)
+
     if (this.loopActive) return
 
     const validChoices = this.getValidChoices(scene)
@@ -348,6 +355,13 @@ export class Engine {
     this.emit('gameEnd')
   }
 
+  skipCurrentScene() {
+    const scene = this.currentScene
+    if (!scene) return
+    this.videoManager.getActiveVideoElement()?.pause()
+    this.onVideoEnd(scene)
+  }
+
   startChapter(chapterId: string) {
     const chapter = this.sceneManager.getChapter(chapterId)
     if (!chapter) return

engine/core/VideoManager.ts

@@ -155,6 +155,15 @@ export class VideoManager {
     this.active.currentTime = time
   }
 
+  setPlaybackRate(rate: number) {
+    if (this.elA) this.elA.playbackRate = rate
+    if (this.elB) this.elB.playbackRate = rate
+  }
+
+  getPlaybackRate(): number {
+    return this.active?.playbackRate ?? 1
+  }
+
   setMuted(muted: boolean) {
     if (this.elA) this.elA.muted = muted
     if (this.elB) this.elB.muted = muted

engine/systems/SaveSystem.ts

@@ -16,15 +16,22 @@ interface UnlockRecord {
   chapterId: string
 }
 
+interface WatchedRecord {
+  sceneId: string
+  timestamp: number
+}
+
 class SaveDB extends Dexie {
   saves!: Table<SaveRecord, number>
   unlocks!: Table<UnlockRecord, string>
+  watched!: Table<WatchedRecord, string>
 
   constructor() {
     super('MovieGameSaves')
-    this.version(3).stores({
+    this.version(4).stores({
       saves: '++id, slot',
       unlocks: 'chapterId',
+      watched: 'sceneId',
     })
   }
 }
@@ -96,4 +103,21 @@ export class SaveSystem {
     const records = await db.unlocks.toArray()
     return records.map((r) => r.chapterId)
   }
+
+  async markWatched(sceneId: string) {
+    const exists = await db.watched.get(sceneId)
+    if (!exists) {
+      await db.watched.put({ sceneId, timestamp: Date.now() })
+    }
+  }
+
+  async isWatched(sceneId: string): Promise<boolean> {
+    const record = await db.watched.get(sceneId)
+    return !!record
+  }
+
+  async getWatchedSceneIds(): Promise<string[]> {
+    const records = await db.watched.toArray()
+    return records.map((r) => r.sceneId)
+  }
 }

engine/types.ts

@@ -17,6 +17,7 @@ export interface SceneNode {
   bgmDuckLevel?: number
   bgmDuckFade?: number
   videoMuted?: boolean
+  skippable?: boolean
 }
 
 export interface Choice {