feat: P1 core - seamless video switching, conditional branches, save/load

- VideoManager: A/B dual-buffered video with crossfade transitions and candidate preloading - Engine: condition-based choice filtering, ChoiceSystem timer, resumeScene for save/load - SceneManager: getCandidateUrls for preloading next scenes - SaveSystem: Dexie.js IndexedDB multi-slot save/load - ChoiceSystem: timed choices with countdown and auto-default on timeout - GamePlayer: dual video elements with crossfade CSS - ChoicePanel: timer progress bar and countdown text - SaveLoadMenu: save/load UI component - App.vue: menu trigger, dual video refs, save/load integration - gameStore: timer state, saves list - demo.json: conditional choice example (secret ending, requires trust >= 80) - ROADMAP: mark P1 as completed
2026-06-07 16:48:52 +08:00
parent 42181fe185
commit 937e45c203
16 changed files with 763 additions and 71 deletions
--- a/engine/core/Engine.ts
+++ b/engine/core/Engine.ts
@@ -2,6 +2,7 @@ import type { SceneNode, Choice, EngineEvent } from '../types'
 import { SceneManager } from './SceneManager'
 import { VideoManager } from './VideoManager'
 import { StateManager } from './StateManager'
+import { ChoiceSystem } from '../systems/ChoiceSystem'

 type EventHandler = (...args: any[]) => void

@@ -9,15 +10,18 @@ export class Engine {
  sceneManager: SceneManager
  videoManager: VideoManager
  stateManager: StateManager
+  choiceSystem: ChoiceSystem

  private currentScene: SceneNode | null = null
  private events: Map<EngineEvent, Set<EventHandler>> = new Map()
-  private ended: boolean = false
+  private ended = false
+  private isInitialScene = true

  constructor() {
    this.sceneManager = new SceneManager()
    this.videoManager = new VideoManager()
    this.stateManager = new StateManager()
+    this.choiceSystem = new ChoiceSystem()
  }

  on(event: EngineEvent, handler: EventHandler) {
@@ -35,6 +39,7 @@ export class Engine {

  start() {
    this.ended = false
+    this.isInitialScene = true
    const startScene = this.sceneManager.getStartScene()
    this.goToScene(startScene)
  }
@@ -46,18 +51,42 @@ export class Engine {
      this.stateManager.apply(scene.onEnter)
    }

+    const preloadUrls = this.sceneManager.getCandidateUrls(
+      scene,
+      (conds) => conds ? this.stateManager.evaluate(conds) : true
+    )
+
    this.videoManager.onEnd(() => {
      this.emit('videoEnd', scene)
      this.onVideoEnd(scene)
    })

-    this.videoManager.play(scene.videoUrl)
+    if (this.isInitialScene) {
+      this.isInitialScene = false
+      this.videoManager.playInitial(scene.videoUrl, preloadUrls)
+    } else {
+      this.videoManager.switchTo(scene.videoUrl, preloadUrls)
+    }
+
    this.emit('sceneChange', scene)
  }

  private onVideoEnd(scene: SceneNode) {
-    if (scene.choices && scene.choices.length > 0) {
-      this.emit('choiceRequest', scene.choices)
+    const validChoices = this.getValidChoices(scene)
+
+    if (validChoices.length > 0) {
+      this.emit('choiceRequest', validChoices)
+
+      this.choiceSystem.start(
+        validChoices,
+        (timerState) => {
+          this.emit('choiceTimer', timerState)
+        },
+        (defaultChoice) => {
+          this.emit('choiceTimeout', defaultChoice)
+          this.makeChoice(defaultChoice)
+        }
+      )
    } else if (scene.nextScene) {
      const next = this.sceneManager.getScene(scene.nextScene)
      if (next) {
@@ -70,6 +99,13 @@ export class Engine {
    }
  }

+  getValidChoices(scene: SceneNode): Choice[] {
+    if (!scene.choices) return []
+    return scene.choices.filter((c) =>
+      !c.conditions || this.stateManager.evaluate(c.conditions)
+    )
+  }
+
  makeChoice(choice: Choice) {
    if (!this.currentScene) return

@@ -96,6 +132,36 @@ export class Engine {
    this.emit('gameEnd')
  }

+  resumeScene(sceneId: string, savedState: { variables: Record<string, number>; flags: string[]; history: any[] }) {
+    this.stateManager.variables = { ...savedState.variables }
+    this.stateManager.flags = new Set(savedState.flags)
+    this.stateManager.history = [...savedState.history]
+
+    const scene = this.sceneManager.getScene(sceneId)
+    if (!scene) {
+      this.endGame()
+      return
+    }
+
+    this.ended = false
+    this.isInitialScene = false
+
+    const preloadUrls = this.sceneManager.getCandidateUrls(
+      scene,
+      (conds) => conds ? this.stateManager.evaluate(conds) : true
+    )
+
+    this.videoManager.switchTo(scene.videoUrl, preloadUrls)
+
+    this.videoManager.onEnd(() => {
+      this.emit('videoEnd', scene)
+      this.onVideoEnd(scene)
+    })
+
+    this.currentScene = scene
+    this.emit('sceneChange', scene)
+  }
+
  destroy() {
    this.videoManager.detach()
    this.events.clear()
--- a/engine/core/SceneManager.ts
+++ b/engine/core/SceneManager.ts
@@ -1,4 +1,4 @@
-import type { GameData, SceneNode } from '../types'
+import type { GameData, SceneNode, Choice, Condition } from '../types'

 export class SceneManager {
  private scenes: Record<string, SceneNode> = {}
@@ -22,4 +22,30 @@ export class SceneManager {
  getAllSceneIds(): string[] {
    return Object.keys(this.scenes)
  }
+
+  getCandidateTargetIds(scene: SceneNode, evaluateCondition: (conds?: Condition[]) => boolean): string[] {
+    const targets: string[] = []
+
+    if (scene.choices) {
+      for (const choice of scene.choices) {
+        if (!choice.conditions || evaluateCondition(choice.conditions)) {
+          if (!targets.includes(choice.targetScene)) {
+            targets.push(choice.targetScene)
+          }
+        }
+      }
+    }
+
+    if (scene.nextScene && !targets.includes(scene.nextScene)) {
+      targets.push(scene.nextScene)
+    }
+
+    return targets
+  }
+
+  getCandidateUrls(scene: SceneNode, evaluateCondition: (conds?: Condition[]) => boolean): string[] {
+    return this.getCandidateTargetIds(scene, evaluateCondition)
+      .map(id => this.scenes[id]?.videoUrl)
+      .filter((url): url is string => !!url)
+  }
 }
--- a/engine/core/VideoManager.ts
+++ b/engine/core/VideoManager.ts
@@ -2,53 +2,134 @@ type VideoEndCallback = () => void
 type TimeUpdateCallback = (time: number) => void

 export class VideoManager {
-  private videoEl: HTMLVideoElement | null = null
+  private elA: HTMLVideoElement | null = null
+  private elB: HTMLVideoElement | null = null
+  private activeSlot: 'A' | 'B' = 'A'
+  private crossFadeMs = 300
  private onEndCallback: VideoEndCallback | null = null
  private onTimeCallback: TimeUpdateCallback | null = null
-  private lastSrc: string = ''
+  private currentSrc = ''
+  private preloaded: Map<'A' | 'B', string> = new Map()
+  private switching = false

-  attach(videoEl: HTMLVideoElement) {
-    this.videoEl = videoEl
-    videoEl.addEventListener('ended', this.handleEnded)
-    videoEl.addEventListener('timeupdate', this.handleTimeUpdate)
+  private get active(): HTMLVideoElement {
+    return this.activeSlot === 'A' ? this.elA! : this.elB!
+  }
+
+  private get inactive(): HTMLVideoElement {
+    return this.activeSlot === 'A' ? this.elB! : this.elA!
+  }
+
+  private get inactiveKey(): 'A' | 'B' {
+    return this.activeSlot === 'A' ? 'B' : 'A'
+  }
+
+  attach(elA: HTMLVideoElement, elB: HTMLVideoElement) {
+    this.elA = elA
+    this.elB = elB
+    for (const el of [elA, elB]) {
+      el.addEventListener('ended', this.handleEnded)
+      el.addEventListener('timeupdate', this.handleTimeUpdate)
+      el.style.position = 'absolute'
+      el.style.inset = '0'
+      el.style.width = '100%'
+      el.style.height = '100%'
+      el.style.objectFit = 'contain'
+      el.style.transition = 'none'
+    }
+    elB.style.opacity = '0'
  }

  detach() {
-    if (!this.videoEl) return
-    this.videoEl.removeEventListener('ended', this.handleEnded)
-    this.videoEl.removeEventListener('timeupdate', this.handleTimeUpdate)
-    this.videoEl = null
+    for (const el of [this.elA, this.elB]) {
+      if (!el) continue
+      el.removeEventListener('ended', this.handleEnded)
+      el.removeEventListener('timeupdate', this.handleTimeUpdate)
+      el.pause()
+      el.removeAttribute('src')
+    }
+    this.elA = null
+    this.elB = null
  }

-  play(src: string) {
-    if (!this.videoEl) return
-    if (this.lastSrc !== src) {
-      this.videoEl.src = src
-      this.lastSrc = src
-      if (this.videoEl.readyState >= 1) {
-        this.videoEl.currentTime = 0
-        this.videoEl.play().catch(() => {})
-      } else {
-        const onReady = () => {
-          if (this.videoEl) {
-            this.videoEl.currentTime = 0
-            this.videoEl.play().catch(() => {})
-          }
-        }
-        this.videoEl.addEventListener('loadedmetadata', onReady, { once: true })
-      }
-    } else {
-      this.videoEl.currentTime = 0
-      this.videoEl.play().catch(() => {})
+  playInitial(src: string, preloadUrls: string[]) {
+    if (!this.elA) return
+    this.currentSrc = src
+    this.activeSlot = 'A'
+    this.preloaded.set('A', src)
+    this.elA.src = src
+    this.elA.style.opacity = '1'
+    this.elB!.style.opacity = '0'
+
+    this.waitReady(this.elA).then(() => {
+      this.elA!.currentTime = 0
+      this.elA!.play().catch(() => {})
+    })
+
+    if (preloadUrls.length > 0) {
+      const next = preloadUrls[0]
+      this.preloaded.set('B', next)
+      this.elB!.src = next
+      this.elB!.load()
    }
  }

-  pause() {
-    this.videoEl?.pause()
+  switchTo(src: string, preloadUrls: string[]) {
+    if (!this.elA || this.switching) return
+
+    const inKey = this.inactiveKey
+    const alreadyPreloaded = this.preloaded.get(inKey)
+
+    if (alreadyPreloaded === src) {
+      this.doCrossFade(src, preloadUrls)
+    } else {
+      this.preloaded.set(inKey, src)
+      this.inactive.src = src
+      this.waitReady(this.inactive).then(() => {
+        this.doCrossFade(src, preloadUrls)
+      })
+    }
+  }
+
+  private doCrossFade(src: string, preloadUrls: string[]) {
+    const active = this.active
+    const inactive = this.inactive
+    const inKey = this.inactiveKey
+
+    this.currentSrc = src
+    this.switching = true
+
+    inactive.currentTime = 0
+    inactive.play().catch(() => {})
+
+    active.style.transition = `opacity ${this.crossFadeMs}ms ease`
+    inactive.style.transition = `opacity ${this.crossFadeMs}ms ease`
+    active.style.opacity = '0'
+    inactive.style.opacity = '1'
+
+    setTimeout(() => {
+      active.pause()
+      active.style.transition = 'none'
+      inactive.style.transition = 'none'
+      this.activeSlot = inKey
+      this.preloaded.set(inKey, src)
+      this.switching = false
+
+      if (preloadUrls.length > 0) {
+        const nextInactive = this.inactive
+        const nextKey = this.inactiveKey
+        const candidate = preloadUrls[0]
+        if (candidate !== src) {
+          this.preloaded.set(nextKey, candidate)
+          nextInactive.src = candidate
+          nextInactive.load()
+        }
+      }
+    }, this.crossFadeMs + 50)
  }

  getCurrentTime(): number {
-    return this.videoEl?.currentTime ?? 0
+    return this.active?.currentTime ?? 0
  }

  onEnd(cb: VideoEndCallback) {
@@ -59,13 +140,21 @@ export class VideoManager {
    this.onTimeCallback = cb
  }

+  private waitReady(el: HTMLVideoElement): Promise<void> {
+    if (el.readyState >= 2) return Promise.resolve()
+    return new Promise((resolve) => {
+      el.addEventListener('canplay', () => resolve(), { once: true })
+      el.load()
+    })
+  }
+
  private handleEnded = () => {
    this.onEndCallback?.()
  }

  private handleTimeUpdate = () => {
-    if (this.videoEl) {
-      this.onTimeCallback?.(this.videoEl.currentTime)
+    if (this.active) {
+      this.onTimeCallback?.(this.active.currentTime)
    }
  }
 }