init

src/App.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import GamePlayer from '@/components/GamePlayer.vue'
+import ChoicePanel from '@/components/ChoicePanel.vue'
+import { useGameEngine } from '@/composables/useGameEngine'
+import { useGameStore } from '@/stores/gameStore'
+
+const store = useGameStore()
+const videoElRef = ref<HTMLVideoElement | null>(null)
+const loading = ref(true)
+
+const { loadGame, start, makeChoice } = useGameEngine(() => videoElRef.value)
+
+async function init() {
+  await loadGame('/scenes/demo.json')
+  loading.value = false
+  start()
+}
+
+function onVideoReady(el: HTMLVideoElement) {
+  videoElRef.value = el
+}
+
+function onChoose(index: number) {
+  makeChoice(index)
+}
+
+init()
+</script>
+
+<template>
+  <div class="app-container">
+    <div v-if="loading" class="loading">加载中...</div>
+    <template v-else>
+      <div class="game-screen">
+        <GamePlayer @video-ready="onVideoReady" />
+        <ChoicePanel :choices="store.choices" @choose="onChoose" />
+      </div>
+      <div v-if="store.gameEnded" class="game-end-overlay">
+        <div class="game-end-text">游戏结束</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #000;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style scoped>
+.app-container {
+  width: 100%;
+  height: 100%;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 18px;
+  color: #888;
+}
+
+.game-screen {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.game-end-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.game-end-text {
+  font-size: 36px;
+  letter-spacing: 4px;
+}
+</style>

src/components/ChoicePanel.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { Choice } from '@engine/types'
+
+const props = defineProps<{
+  choices: Choice[]
+}>()
+
+const emit = defineEmits<{
+  choose: [index: number]
+}>()
+</script>
+
+<template>
+  <div class="choice-panel" v-if="choices.length > 0">
+    <div class="choice-prompt">做出你的选择</div>
+    <div class="choice-list">
+      <button
+        v-for="(choice, index) in choices"
+        :key="index"
+        class="choice-btn"
+        @click="emit('choose', index)"
+      >
+        {{ choice.text }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.choice-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
+  padding: 40px 20px 30px;
+  z-index: 10;
+}
+
+.choice-prompt {
+  color: #ccc;
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: 16px;
+  letter-spacing: 2px;
+}
+
+.choice-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.choice-btn {
+  padding: 14px 24px;
+  font-size: 16px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.choice-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+</style>

src/components/GamePlayer.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const emit = defineEmits<{
+  videoReady: [el: HTMLVideoElement]
+}>()
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+onMounted(() => {
+  if (videoRef.value) {
+    emit('videoReady', videoRef.value)
+  }
+})
+
+defineExpose({ videoRef })
+</script>
+
+<template>
+  <div class="game-player">
+    <video ref="videoRef" class="player-video" preload="auto"></video>
+  </div>
+</template>
+
+<style scoped>
+.game-player {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.player-video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+</style>

src/composables/useGameEngine.ts

@@ -0,0 +1,53 @@
+import { onMounted, onUnmounted, watch } from 'vue'
+import { Engine } from '@engine/core/Engine'
+import type { GameData } from '@engine/types'
+import { useGameStore } from '@/stores/gameStore'
+
+export function useGameEngine(videoEl: () => HTMLVideoElement | null) {
+  const engine = new Engine()
+  const store = useGameStore()
+
+  async function loadGame(dataUrl: string) {
+    const resp = await fetch(dataUrl)
+    const data: GameData = await resp.json()
+    engine.sceneManager.load(data)
+    engine.stateManager.init(data.variables)
+  }
+
+  function start() {
+    engine.videoManager.attach(videoEl()!)
+
+    engine.on('sceneChange', (scene) => {
+      store.setScene(scene)
+      store.clearChoices()
+    })
+
+    engine.on('choiceRequest', (choiceList) => {
+      store.setChoices(choiceList)
+    })
+
+    engine.on('videoEnd', () => {})
+
+    engine.on('gameEnd', () => {
+      store.setGameEnded(true)
+    })
+
+    engine.start()
+  }
+
+  function makeChoice(index: number) {
+    const scene = store.currentScene
+    if (!scene?.choices) return
+    engine.makeChoice(scene.choices[index])
+  }
+
+  function destroy() {
+    engine.destroy()
+  }
+
+  onUnmounted(() => {
+    destroy()
+  })
+
+  return { loadGame, start, makeChoice, destroy, engine }
+}

src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')

src/stores/gameStore.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { ref, shallowRef } from 'vue'
+import type { SceneNode, Choice } from '@engine/types'
+
+export const useGameStore = defineStore('game', () => {
+  const currentScene = shallowRef<SceneNode | null>(null)
+  const choices = ref<Choice[]>([])
+  const gameEnded = ref(false)
+
+  function setScene(scene: SceneNode) {
+    currentScene.value = scene
+  }
+
+  function setChoices(list: Choice[]) {
+    choices.value = list
+  }
+
+  function clearChoices() {
+    choices.value = []
+  }
+
+  function setGameEnded(val: boolean) {
+    gameEnded.value = val
+  }
+
+  return { currentScene, choices, gameEnded, setScene, setChoices, clearChoices, setGameEnded }
+})

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}