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

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()

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)
+  }
 }

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)
     }
   }
 }

engine/systems/ChoiceSystem.ts

@@ -0,0 +1,75 @@
+import type { Choice } from '../types'
+
+export interface ChoiceTimerState {
+  total: number
+  remaining: number
+}
+
+type TimerUpdateCallback = (state: ChoiceTimerState) => void
+type TimeoutCallback = (choice: Choice) => void
+
+export class ChoiceSystem {
+  private timerId: ReturnType<typeof setInterval> | null = null
+  private timeoutId: ReturnType<typeof setTimeout> | null = null
+  private timeLimit = 0
+  private elapsed = 0
+  private tickMs = 100
+  private onUpdate: TimerUpdateCallback | null = null
+  private onTimeout: TimeoutCallback | null = null
+
+  start(choices: Choice[], onUpdate: TimerUpdateCallback, onTimeout: TimeoutCallback) {
+    this.clear()
+
+    const timed = choices.filter((c) => c.timeLimit && c.timeLimit > 0)
+    if (timed.length === 0) return
+
+    const maxLimit = Math.max(...timed.map((c) => c.timeLimit!))
+
+    this.timeLimit = maxLimit
+    this.elapsed = 0
+    this.onUpdate = onUpdate
+    this.onTimeout = onTimeout
+
+    const state: ChoiceTimerState = { total: maxLimit, remaining: maxLimit }
+    this.onUpdate(state)
+
+    this.timerId = setInterval(() => {
+      this.elapsed += this.tickMs
+      const remaining = Math.max(0, this.timeLimit - this.elapsed) / 1000
+      const nextState: ChoiceTimerState = {
+        total: this.timeLimit / 1000,
+        remaining: Math.ceil(remaining * 10) / 10,
+      }
+      this.onUpdate?.(nextState)
+    }, this.tickMs)
+
+    this.timeoutId = setTimeout(() => {
+      this.clear()
+      // Pick the first choice as default on timeout
+      if (choices.length > 0) {
+        this.onTimeout?.(choices[0])
+      }
+    }, this.timeLimit)
+  }
+
+  stop() {
+    this.clear()
+  }
+
+  private clear() {
+    if (this.timerId !== null) {
+      clearInterval(this.timerId)
+      this.timerId = null
+    }
+    if (this.timeoutId !== null) {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = null
+    }
+  }
+
+  destroy() {
+    this.clear()
+    this.onUpdate = null
+    this.onTimeout = null
+  }
+}

engine/systems/SaveSystem.ts

@@ -0,0 +1,72 @@
+import Dexie, { type Table } from 'dexie'
+import type { SaveData } from '../types'
+
+interface SaveRecord {
+  id?: number
+  slot: number
+  timestamp: number
+  currentScene: string
+  variables: string
+  flags: string
+  history: string
+}
+
+class SaveDB extends Dexie {
+  saves!: Table<SaveRecord, number>
+
+  constructor() {
+    super('MovieGameSaves')
+    this.version(1).stores({
+      saves: '++id, slot',
+    })
+  }
+}
+
+const db = new SaveDB()
+
+export class SaveSystem {
+  async save(slot: number, data: Omit<SaveData, 'slot' | 'thumbnail'>): Promise<void> {
+    const record: SaveRecord = {
+      slot,
+      timestamp: Date.now(),
+      currentScene: data.currentScene,
+      variables: JSON.stringify(data.variables),
+      flags: JSON.stringify(data.flags),
+      history: JSON.stringify(data.history),
+    }
+
+    const existing = await db.saves.where('slot').equals(slot).first()
+    if (existing) {
+      await db.saves.update(existing.id!, record)
+    } else {
+      await db.saves.add(record)
+    }
+  }
+
+  async load(slot: number): Promise<SaveData | null> {
+    const record = await db.saves.where('slot').equals(slot).first()
+    if (!record) return null
+
+    return {
+      slot: record.slot,
+      timestamp: record.timestamp,
+      currentScene: record.currentScene,
+      variables: JSON.parse(record.variables),
+      flags: JSON.parse(record.flags),
+      history: JSON.parse(record.history),
+    }
+  }
+
+  async listSlots(): Promise<{ slot: number; timestamp: number; sceneLabel: string }[]> {
+    const records = await db.saves.orderBy('slot').toArray()
+    return records.map((r) => ({
+      slot: r.slot,
+      timestamp: r.timestamp,
+      sceneLabel: r.currentScene,
+    }))
+  }
+
+  async delete(slot: number): Promise<void> {
+    await db.saves.where('slot').equals(slot).delete()
+  }
+}

engine/types.ts

@@ -66,6 +66,8 @@ export interface SaveData {
 export type EngineEvent =
   | 'sceneChange'
   | 'choiceRequest'
+  | 'choiceTimer'
   | 'gameEnd'
   | 'qteTrigger'
   | 'videoEnd'
+  | 'choiceTimeout'