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/src/App.vue
+++ b/src/App.vue
@@ -2,15 +2,19 @@
 import { ref } from 'vue'
 import GamePlayer from '@/components/GamePlayer.vue'
 import ChoicePanel from '@/components/ChoicePanel.vue'
+import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'

 const store = useGameStore()
-const videoElRef = ref<HTMLVideoElement | null>(null)
+const videoElA = ref<HTMLVideoElement | null>(null)
+const videoElB = ref<HTMLVideoElement | null>(null)
 const loading = ref(true)
 const started = ref(false)
+const showMenu = ref(false)

-const { loadGame, start, makeChoice } = useGameEngine(() => videoElRef.value)
+const { loadGame, start, makeChoice, saveGame, loadGameFromSlot, refreshSaves } =
+  useGameEngine(() => [videoElA.value, videoElB.value])

 async function init() {
  await loadGame('/scenes/demo.json')
@@ -22,14 +26,31 @@ function handleStart() {
  start()
 }

-function onVideoReady(el: HTMLVideoElement) {
-  videoElRef.value = el
+function onVideoReady(elA: HTMLVideoElement, elB: HTMLVideoElement) {
+  videoElA.value = elA
+  videoElB.value = elB
 }

 function onChoose(index: number) {
  makeChoice(index)
 }

+function toggleMenu() {
+  showMenu.value = !showMenu.value
+  if (showMenu.value) {
+    refreshSaves()
+  }
+}
+
+async function onSave(slot: number) {
+  await saveGame(slot)
+}
+
+async function onLoad(slot: number) {
+  await loadGameFromSlot(slot)
+  showMenu.value = false
+}
+
 init()
 </script>

@@ -39,7 +60,15 @@ init()
    <template v-else>
      <div class="game-screen">
        <GamePlayer @video-ready="onVideoReady" />
-        <ChoicePanel :choices="store.choices" @choose="onChoose" />
+        <ChoicePanel
+          :choices="store.choices"
+          :timer-total="store.timerTotal"
+          :timer-remaining="store.timerRemaining"
+          @choose="onChoose"
+        />
+        <button v-if="started && !store.gameEnded" class="menu-trigger" @click="toggleMenu">
+          菜单
+        </button>
      </div>
      <div v-if="!started" class="start-overlay">
        <button class="start-btn" @click="handleStart">开始游戏</button>
@@ -47,6 +76,13 @@ init()
      <div v-if="store.gameEnded" class="game-end-overlay">
        <div class="game-end-text">游戏结束</div>
      </div>
+      <SaveLoadMenu
+        v-if="showMenu"
+        :saves="store.saves"
+        @save="onSave"
+        @load="onLoad"
+        @close="showMenu = false"
+      />
    </template>
  </div>
 </template>
@@ -94,6 +130,26 @@ html, body {
  height: 100%;
 }

+.menu-trigger {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 20;
+  padding: 8px 16px;
+  font-size: 13px;
+  color: #aaa;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.menu-trigger:hover {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+
 .game-end-overlay {
  position: fixed;
  inset: 0;
--- a/src/components/ChoicePanel.vue
+++ b/src/components/ChoicePanel.vue
@@ -3,15 +3,35 @@ import type { Choice } from '@engine/types'

 const props = defineProps<{
  choices: Choice[]
+  timerTotal: number
+  timerRemaining: number
 }>()

 const emit = defineEmits<{
  choose: [index: number]
 }>()
+
+function timerPercent(): number {
+  if (props.timerTotal <= 0) return 0
+  return (props.timerRemaining / props.timerTotal) * 100
+}
+
+function timerClass(): string {
+  if (props.timerRemaining <= 3) return 'danger'
+  return ''
+}
 </script>

 <template>
  <div class="choice-panel" v-if="choices.length > 0">
+    <div class="timer-bar" v-if="timerTotal > 0">
+      <div
+        class="timer-fill"
+        :class="timerClass()"
+        :style="{ width: timerPercent() + '%' }"
+      ></div>
+      <span class="timer-text">{{ timerRemaining.toFixed(1) }}s</span>
+    </div>
    <div class="choice-prompt">做出你的选择</div>
    <div class="choice-list">
      <button
@@ -33,10 +53,38 @@ const emit = defineEmits<{
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
-  padding: 40px 20px 30px;
+  padding: 20px 20px 30px;
  z-index: 10;
 }

+.timer-bar {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 2px;
+  margin-bottom: 16px;
+  position: relative;
+  overflow: hidden;
+}
+
+.timer-fill {
+  height: 100%;
+  background: rgba(255, 255, 255, 0.6);
+  transition: width 0.1s linear;
+  border-radius: 2px;
+}
+
+.timer-fill.danger {
+  background: #e74c3c;
+}
+
+.timer-text {
+  position: absolute;
+  top: -18px;
+  right: 0;
+  font-size: 12px;
+  color: #aaa;
+}
+
 .choice-prompt {
  color: #ccc;
  font-size: 14px;
--- a/src/components/GamePlayer.vue
+++ b/src/components/GamePlayer.vue
@@ -2,39 +2,40 @@
 import { ref, onMounted } from 'vue'

 const emit = defineEmits<{
-  videoReady: [el: HTMLVideoElement]
+  videoReady: [elA: HTMLVideoElement, elB: HTMLVideoElement]
 }>()

-const videoRef = ref<HTMLVideoElement | null>(null)
+const videoARef = ref<HTMLVideoElement | null>(null)
+const videoBRef = ref<HTMLVideoElement | null>(null)

 onMounted(() => {
-  if (videoRef.value) {
-    emit('videoReady', videoRef.value)
+  if (videoARef.value && videoBRef.value) {
+    emit('videoReady', videoARef.value, videoBRef.value)
  }
 })

-defineExpose({ videoRef })
+defineExpose({ videoARef, videoBRef })
 </script>

 <template>
  <div class="game-player">
-    <video ref="videoRef" class="player-video" preload="auto"></video>
+    <video ref="videoARef" class="player-video" preload="auto"></video>
+    <video ref="videoBRef" class="player-video" preload="auto"></video>
  </div>
 </template>

 <style scoped>
 .game-player {
+  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  overflow: hidden;
 }

 .player-video {
  max-width: 100%;
  max-height: 100%;
-  object-fit: contain;
+  will-change: opacity;
 }
 </style>
--- a/src/components/SaveLoadMenu.vue
+++ b/src/components/SaveLoadMenu.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { SlotInfo } from '@/stores/gameStore'
+
+const props = defineProps<{
+  saves: SlotInfo[]
+}>()
+
+const emit = defineEmits<{
+  save: [slot: number]
+  load: [slot: number]
+  close: []
+}>()
+
+const maxSlots = 5
+</script>
+
+<template>
+  <div class="save-overlay" @click.self="emit('close')">
+    <div class="save-panel">
+      <h2 class="save-title">存档 / 读档</h2>
+
+      <div class="slot-list">
+        <div
+          v-for="slot in maxSlots"
+          :key="slot"
+          class="save-slot"
+        >
+          <div class="slot-label">存档 {{ slot }}</div>
+          <div class="slot-info" v-if="saves.find(s => s.slot === slot)">
+            {{ saves.find(s => s.slot === slot)!.sceneLabel }}
+          </div>
+          <div class="slot-info empty" v-else>空</div>
+          <div class="slot-actions">
+            <button class="slot-btn save-btn" @click="emit('save', slot)">保存</button>
+            <button
+              class="slot-btn load-btn"
+              :disabled="!saves.find(s => s.slot === slot)"
+              @click="emit('load', slot)"
+            >
+              读取
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <button class="close-btn" @click="emit('close')">关闭</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.save-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.save-panel {
+  background: #1a1a2e;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 32px;
+  min-width: 400px;
+  max-width: 500px;
+}
+
+.save-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+  color: #ddd;
+}
+
+.slot-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.save-slot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+.slot-label {
+  font-size: 14px;
+  color: #aaa;
+  white-space: nowrap;
+}
+
+.slot-info {
+  flex: 1;
+  font-size: 13px;
+  color: #ccc;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slot-info.empty {
+  color: #555;
+}
+
+.slot-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.slot-btn {
+  padding: 6px 14px;
+  font-size: 13px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.08);
+  color: #ddd;
+  transition: background 0.2s;
+}
+
+.slot-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.slot-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.close-btn {
+  display: block;
+  margin: 24px auto 0;
+  padding: 10px 32px;
+  font-size: 14px;
+  color: #888;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.close-btn:hover {
+  color: #ccc;
+  background: rgba(255, 255, 255, 0.1);
+}
+</style>
--- a/src/composables/useGameEngine.ts
+++ b/src/composables/useGameEngine.ts
@@ -1,10 +1,12 @@
 import { onUnmounted } from 'vue'
 import { Engine } from '@engine/core/Engine'
+import { SaveSystem } from '@engine/systems/SaveSystem'
 import type { GameData } from '@engine/types'
 import { useGameStore } from '@/stores/gameStore'

-export function useGameEngine(videoEl: () => HTMLVideoElement | null) {
+export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVideoElement | null]) {
  const engine = new Engine()
+  const saveSystem = new SaveSystem()
  const store = useGameStore()

  async function loadGame(dataUrl: string) {
@@ -15,21 +17,33 @@ export function useGameEngine(videoEl: () => HTMLVideoElement | null) {
  }

  function start() {
-    engine.videoManager.attach(videoEl()!)
+    const [elA, elB] = videoEls()
+    engine.videoManager.attach(elA!, elB!)

    engine.on('sceneChange', (scene) => {
      store.setScene(scene)
      store.clearChoices()
+      store.clearTimer()
    })

    engine.on('choiceRequest', (choiceList) => {
      store.setChoices(choiceList)
    })

+    engine.on('choiceTimer', (timerState) => {
+      store.setTimer(timerState.total, timerState.remaining)
+    })
+
+    engine.on('choiceTimeout', () => {
+      store.clearChoices()
+      store.clearTimer()
+    })
+
    engine.on('videoEnd', () => {})

    engine.on('gameEnd', () => {
      store.setGameEnded(true)
+      engine.choiceSystem.stop()
    })

    engine.start()
@@ -38,9 +52,41 @@ export function useGameEngine(videoEl: () => HTMLVideoElement | null) {
  function makeChoice(index: number) {
    const scene = store.currentScene
    if (!scene?.choices) return
+    engine.choiceSystem.stop()
+    store.clearTimer()
    engine.makeChoice(scene.choices[index])
  }

+  async function saveGame(slot: number) {
+    const state = engine.stateManager
+    await saveSystem.save(slot, {
+      timestamp: Date.now(),
+      currentScene: store.currentScene?.id ?? '',
+      variables: state.variables,
+      flags: [...state.flags],
+      history: state.history,
+    })
+    await refreshSaves()
+  }
+
+  async function loadGameFromSlot(slot: number): Promise<boolean> {
+    const data = await saveSystem.load(slot)
+    if (!data) return false
+
+    store.setGameEnded(false)
+    engine.resumeScene(data.currentScene, {
+      variables: data.variables,
+      flags: data.flags,
+      history: data.history,
+    })
+    return true
+  }
+
+  async function refreshSaves() {
+    const list = await saveSystem.listSlots()
+    store.setSaves(list)
+  }
+
  function destroy() {
    engine.destroy()
  }
@@ -49,5 +95,5 @@ export function useGameEngine(videoEl: () => HTMLVideoElement | null) {
    destroy()
  })

-  return { loadGame, start, makeChoice, destroy, engine }
+  return { loadGame, start, makeChoice, saveGame, loadGameFromSlot, refreshSaves, engine, saveSystem }
 }
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@@ -2,10 +2,19 @@ import { defineStore } from 'pinia'
 import { ref, shallowRef } from 'vue'
 import type { SceneNode, Choice } from '@engine/types'

+export interface SlotInfo {
+  slot: number
+  timestamp: number
+  sceneLabel: string
+}
+
 export const useGameStore = defineStore('game', () => {
  const currentScene = shallowRef<SceneNode | null>(null)
  const choices = ref<Choice[]>([])
  const gameEnded = ref(false)
+  const timerTotal = ref(0)
+  const timerRemaining = ref(0)
+  const saves = ref<SlotInfo[]>([])

  function setScene(scene: SceneNode) {
    currentScene.value = scene
@@ -23,5 +32,23 @@ export const useGameStore = defineStore('game', () => {
    gameEnded.value = val
  }

-  return { currentScene, choices, gameEnded, setScene, setChoices, clearChoices, setGameEnded }
+  function setTimer(total: number, remaining: number) {
+    timerTotal.value = total
+    timerRemaining.value = remaining
+  }
+
+  function clearTimer() {
+    timerTotal.value = 0
+    timerRemaining.value = 0
+  }
+
+  function setSaves(list: SlotInfo[]) {
+    saves.value = list
+  }
+
+  return {
+    currentScene, choices, gameEnded, timerTotal, timerRemaining, saves,
+    setScene, setChoices, clearChoices, setGameEnded,
+    setTimer, clearTimer, setSaves,
+  }
 })