ManpreetS2/system-down-simulator

# 系统 Down 《System Down》是一款交互式事件响应策略游戏，在游戏中，你将扮演一家处于成长期的软件公司的值班工程师。真实的基础设施事件会逐一出现，你的每一个决定都需要在系统健康、公司营收、客户信任、工程预算和响应时间之间进行权衡。 我将 System Down 作为一个作品集项目开发，旨在将产品设计、React/TypeScript 工程开发以及现实世界的系统可靠性概念结合成一个精美的浏览器体验——它一半是运维仪表板，一半是基于决策的策略游戏。 ## 概述 在 System Down 中，你将完成一整轮值班。各种事件会伴随着严重程度标签、警报文本和可观察到的症状出现。你需要在倒计时内选择如何响应，同时仪表板会进行实时更新。当值班结束时——无论是你解决了所有事件，还是因为健康度、信任度或预算崩溃——你都会获得一份复盘报告，其中包含评分、工程师职级、时间线以及个性化建议。 这款游戏旨在让非技术玩家也能轻松理解，同时又保留了真实的云、DevOps、可靠性以及事件管理的专业术语。 ## 游戏玩法概念 1. 选择难度并开始你的值班。 2. 阅读当前事件的警报和症状。 3. 在计时器结束前，从四个响应选项中选择一个。 4. 查看结果：指标变化、分数影响以及工程学解释。 5. 继续处理剩余的事件。 6. 查看你值班结束后的复盘报告，并尝试打破你的最高分。 如果计时器归零且未作出响应，将自动应用失败惩罚。一次糟糕的决策通常不会致命——事件之间的恢复机制是特意设计的——但如果健康度、信任度或预算降为零，值班就会提前结束。 ## 核心功能 - **12 个真实事件**，包括生产环境部署失败、数据库过载、支付服务商宕机、SSL 证书过期、流量峰值、内存泄漏、错误的缓存失效、区域性云服务中断、凭证泄露、API 限流风暴、损坏的部署配置以及拒绝服务洪泛攻击 - **每个事件有四种行动选项**，每种行动都有对应的风险等级、修复时间以及基于概率的成败结果 - **延迟后果**，某些选择的后果会在值班后期显现 - **实时运维仪表板**，显示公司指标（健康度、信任度、营收、预算、活跃用户、营收损失率）和基础设施遥测数据（CPU、内存、数据库延迟、错误率、请求量、正常运行时间） - **倒计时压力**，只要事件未解决，指标就会持续下降 - **注重学习反馈**，每次决策后都会解释发生了什么、为什么发生，以及经验丰富的响应者会怎么做 - **三个难度级别**，会影响计时器、初始资源、后果严重程度和值班时长 - **值班结束后的复盘报告**，包含评分（F–S）、职级（实习生 → 首席工程师）、准确率、响应时间、节省/损失的营收、最明智和最糟糕的决策、时间线以及建议 - **成就系统**，最高分、声音偏好和上次选择的难度会保存在 `localStorage` 中 - **响应式布局**，完美适配桌面端、平板和移动端 - **键盘快捷键**，方便在事件发生时快速响应 - **无后端** —— 整个游戏完全在浏览器本地运行 ## 技术栈 | 领域 | 选择 | | --- | --- | | UI | React 18 | | 语言 | TypeScript (严格模式) | | 构建工具 | Vite | | 图标 | Lucide React | | 样式 | 自定义 CSS 设计系统 | | 图表 | 轻量级 SVG 迷你图（无图表库） | | 数据持久化 | 浏览器 `localStorage` | | 音频 | Web Audio API (合成音效，无音频文件) | 没有服务器、数据库、身份验证或第三方 API 依赖。 ## 安装说明 ``` git clone https://github.com/ManpreetS2/system-down-simulator.git cd system-down-simulator npm install ``` ## 本地开发 ``` npm run dev ``` 打开 Vite 打印的 URL（通常是 `http://localhost:5173`）。 ## 生产环境构建 ``` npm run build npm run preview ``` `npm run build` 会使用 TypeScript 进行类型检查，并将生产环境的打包文件输出到 `dist/` 目录。 可选的确定性引擎冒烟测试： ``` npx tsx scripts/engine-smoke.ts ``` ## 游戏说明 1. 在开始界面，选择 **Junior**、**Engineer** 或 **Senior**。 2. 如果你是新手，请查看 **How to Play**。 3. 点击 **Start Shift**。 4. 当事件发生时，阅读严重程度、警报和症状。 5. 选择一个响应（或按 `1`–`4`）。 6. 阅读结果面板，然后继续处理下一个事件。 7. 值班结束后，查看复盘报告、重新开始或返回主页。 ### 键盘控制 | 按键 | 操作 | | --- | --- | | `1` – `4` | 在当前事件期间选择响应 1–4 | | `Enter` | 在结果面板后继续 | | 鼠标 / 触控 | 完整的导航和所有按钮 | ### 难度级别 | 难度 | 值班时长 | 计时器 | 压力 | | --- | --- | --- | --- | | Junior | 6 个事件 | 较长 | 较轻的后果，更多初始预算 | | Engineer | 8 个事件 | 平衡 | 默认平衡 | | Senior | 10 个事件 | 较短 | 严厉的后果，资源更紧张 | ## 事件响应学习元素 System Down 在保证可玩性的同时，也具有明确的教育意义： - 正确答案并不总是显而易见的——快速的选项可能伴随着风险；安全的选项可能会比较慢或成本较高 - 结果面板会用通俗的语言解释为什么某个选择有效或失败 - 每个事件都包含建议的资深响应者处理方式 - 复盘报告的建议会根据超时、高风险操作、开支、信任度下降和响应速度进行动态调整 - 场景涵盖了部署、数据库、安全、流量、第三方供应商和配置问题 ## 项目架构 ``` src/ data/ # Incidents, difficulty configs, achievements (structured content) game/ # Reducer engine, report/grading, React hook wiring components/ # Start screen, dashboard, incident/result panels, postmortem utils/ # Formatting, localStorage helpers, synthesized sound types.ts # Shared TypeScript models index.css # Design system and responsive layout scripts/ engine-smoke.ts # Deterministic engine checks (timeouts, game-over, delays) ``` 游戏内容存放在数据文件中。组件负责渲染状态；位于 `src/game/engine.ts` 的 reducer 负责管理计时器、指标消耗、事件解决、延迟后果以及胜负条件。这种分离设计使得平衡性调整和添加新事件，比将结果逻辑埋在 UI 代码中要容易得多。 ## 我学到了什么 - 将完整的游戏循环建模为一个具有明确阶段（`idle` → `incident` → `result` → `over`）的单一 reducer，可以保持计时、计分和 UI 状态的一致性 - 将事件内容与表现层分离，使得平衡性调整和内容扩展变得切实可行 - 概率性结果和延迟后果即使不需要后端也能创造出可重复游玩的价值 - 构建自定义的深色运维中心 UI 需要仔细处理视觉层级，不仅要靠颜色来传达严重程度，还需要通过响应式堆叠布局来代替直接缩小桌面面板 - 一旦涉及实时消耗和计时器，清理定时器间隔并防止重复操作就变得至关重要 ## 挑战与设计决策 - **平衡难度：** 一个糟糕的决定应该让人感到刺痛，但不应该总是直接导致游戏结束。我们对事件之间的恢复机制和难度乘数进行了调整，使得 Junior 难度具有教学意义，而 Senior 难度则充满惩罚性。 - **模糊的选择：** 每个事件都有一条“最佳实践”路径，但高风险的捷径有时也会成功。这反映了真实事件中的权衡，而不是直接给正确答案贴上标签。 - **仪表板质感与减少干扰：** 指标会动态变化，基础架构数值会发生偏移，但过渡效果保持克制，因此界面看起来仍然像一个专业的指挥中心。 - **仅限客户端持久化：** 最高分、成就、音效和难度仅使用 `localStorage` —— 对于作品集展示来说已经足够，无需账户或密钥。 ## 未来改进 - 事件编辑器 / 社区场景的 JSON mod 格式 - 双事件同时并发分流处理 - 每日固定种子值班及可分享的积分卡 - 值班中途的资源消费（承包商、监控升级） - 色盲调色板审查和本地化 - 将值班时间线导出为 Markdown 格式的复盘草稿 - 提供托管实机演示，并在 README 中加入截图素材 ## 作者 **Manpreet Singh** De Anza College 计算机科学专业学生 作为作品集项目进行设计和开发，旨在探索 React、TypeScript、状态管理、交互式游戏系统、响应式界面设计以及事件响应概念。 ## 许可证 本项目基于 [MIT 许可证](LICENSE) 授权。

标签：React, Syscalls, TypeScript, 可靠性, 安全插件, 库, 应急响应, 策略游戏, 自动化攻击, 运维