feat: 实现游戏核心功能与前端界面

- 添加游戏核心系统：战斗、任务、日志、随机数生成等 - 实现前端主界面、HUD、底部导航和各类卡片组件 - 添加用户认证系统与游戏存档持久化 - 配置项目基础架构与开发环境 - 补充文档说明与Docker部署支持
2026-04-28 22:16:58 +08:00
parent 2e1b58bada
commit e783e6e533
124 changed files with 9759 additions and 1 deletions
@@ -0,0 +1,66 @@
+import type { OverlayPanel } from '../types';
+import type { GameView } from '@tinywaste/game-core';
+import { getActiveQuestCount, getSupplyCounts } from '../hudModel';
+
+export function BottomDock({
+  activePanel,
+  onOpenPanel,
+  view,
+}: {
+  activePanel: OverlayPanel | null;
+  onOpenPanel: (panel: OverlayPanel) => void;
+  view: GameView;
+}) {
+  const supplyCounts = getSupplyCounts(view);
+  const activeQuestCount = getActiveQuestCount(view);
+
+  return (
+    <footer className="command-dock">
+      <div className="operator-card">
+        <div className="operator-emblem">{view.player.name.slice(0, 1)}</div>
+        <div className="operator-copy">
+          <span>ACTIVE SURVIVOR</span>
+          <strong>{view.player.name}</strong>
+        </div>
+      </div>
+
+      <div className="dock-nav-groups">
+        <div className="dock-tabs">
+          <button className="dock-tab active">Shelter</button>
+          <button
+            className={`dock-tab ${activePanel === 'blueprints' ? 'active' : ''}`}
+            onClick={() => onOpenPanel('blueprints')}
+          >
+            Crafting
+          </button>
+          <button
+            className={`dock-tab ${activePanel === 'logs' ? 'active' : ''}`}
+            onClick={() => onOpenPanel('logs')}
+          >
+            Logs
+          </button>
+          <button
+            className={`dock-tab ${activePanel === 'inventory' ? 'active' : ''}`}
+            onClick={() => onOpenPanel('inventory')}
+          >
+            Inventory
+          </button>
+          <button
+            className={`dock-tab ${activePanel === 'missions' ? 'active' : ''}`}
+            onClick={() => onOpenPanel('missions')}
+          >
+            Missions
+          </button>
+        </div>
+
+        <div className="dock-metrics">
+          <span>水 {supplyCounts.water}</span>
+          <span>食物 {supplyCounts.food}</span>
+          <span>药品 {supplyCounts.medicine}</span>
+          <span>材料 {supplyCounts.material}</span>
+          <span>任务 {activeQuestCount}</span>
+        </div>
+      </div>
+    </footer>
+  );
+}