Stephen
a404e42ca8
完成项目基础搭建：配置 Vite 开发构建环境，集成 Phaser 3 与虚拟摇杆插件，实现地图漫游、景点触发、拍立得弹窗、进度存档等核心功能，添加占位资源与批量生成脚本，配置项目元数据与忽略规则。
67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
/**
|
||
* @fileoverview DOM UI 层管理器（dom-layer）。
|
||
*
|
||
* 文件用途：
|
||
* - 挂载并协调全部 DOM UI 组件（封面 / 拍立得弹窗 / HUD / 纪念页 / 竖屏提示）。
|
||
*
|
||
* 核心职责：
|
||
* 1. 组件生命周期：mount 后由各组件自行监听 eventBus 事件驱动显示；
|
||
* 2. 维护 inputReleased 标志：封面"开始旅行"放行输入（MapScene 可能晚于
|
||
* 事件创建，需在 create 时回查该标志，避免输入锁死）；
|
||
* 3. 组件互斥由组件自身在 show/hide 时控制，层管理器只负责装配。
|
||
*
|
||
* 主要流程：
|
||
* main.js 调用 mountUi() → 各组件挂载到 #ui 容器 → TitleOverlay 首屏
|
||
* 显示 → 用户交互 → 各组件 show/hide 并通过 eventBus 通知 Phaser 层。
|
||
*/
|
||
|
||
import { eventBus } from '../event-bus.js';
|
||
import * as gameState from '../game-state.js';
|
||
import { TitleOverlay } from './TitleOverlay.js';
|
||
import { PhotoModal } from './PhotoModal.js';
|
||
import { Hud } from './Hud.js';
|
||
import { CompleteOverlay } from './CompleteOverlay.js';
|
||
import { initRotateHint } from './rotate-hint.js';
|
||
|
||
/**
|
||
* 游戏输入是否已被 UI 放行（封面页"开始旅行"后为 true）。
|
||
*
|
||
* @type {boolean}
|
||
*/
|
||
export let inputReleased = false;
|
||
|
||
/**
|
||
* 放行游戏输入并广播 ui:closed（MapScene create 晚于事件时回查本标志）。
|
||
*
|
||
* @returns {void}
|
||
*/
|
||
export function releaseInput() {
|
||
inputReleased = true;
|
||
}
|
||
|
||
/**
|
||
* 装配 DOM UI 层：创建根节点并挂载全部组件。
|
||
*
|
||
* @returns {void}
|
||
*/
|
||
export function mountUi() {
|
||
const root = document.getElementById('ui');
|
||
|
||
// 事件桥上暴露放行动作，供封面页调用。
|
||
eventBus.on('ui:release-input', () => releaseInput());
|
||
|
||
const hud = new Hud(root);
|
||
const title = new TitleOverlay(root);
|
||
const photoModal = new PhotoModal(root);
|
||
const complete = new CompleteOverlay(root);
|
||
|
||
// 组件装配后初始化：封面首屏显示（覆盖资源加载过程），其余待事件驱动。
|
||
title.show({
|
||
hasSave: gameState.hasSave(),
|
||
snapshot: gameState.loadProgress(),
|
||
});
|
||
hud.init();
|
||
|
||
initRotateHint();
|
||
}
|