🕵️‍♂️ Vibe Coder：逆向工程的复活

**Vibe Coder** 是一款专为开发者打造的多大20人房间的多人社交推理游戏——可以把它想象成开发者版的 _Among Us_，只不过你是在 VS Code 里写 Python。开发者必须通过单元测试，而系统自动分配的隐藏“冒名顶替者”则会暗中破坏代码。 ## 📖 背景：逆向工程的 Wayback Machine 之旅 Vibe Coder（最初名为 Code Mafia）的原始仓库已经无法访问，但这个创意实在太棒了，不能让它就此埋没。**在此向最初的创作者 Ahmad J. 和 Rayyan K. 致以最崇高的敬意，感谢他们设计了如此出色的游戏。** 为了让它重获新生，我通过 **Wayback Machine** 找到了原始的压缩生产环境打包文件（`.js` 和 `.css`）。基于这些压缩过的资源，我对整个应用进行了逆向工程： 1. **数据提取：** 从被压缩的逻辑代码中解密并提取了核心的 Python 代码块、测试用例以及破坏机制。 2. **UI 重构：** 将原始的 CSS 变量和像素风类名转换为了现代化的、CSS 优先的 Tailwind 架构。 3. **状态与网络通信：** 梳理了被压缩的状态机，并使用严格类型的 Zustand store 和自定义的 PartyKit WebSocket 服务器对其进行了重构。 随后，我利用最前沿的 Web 技术（并加入了一些幽默元素），从零开始**完全重建并优化了整个架构**。 ## 🏗️ 现代化技术栈 该项目不仅复刻了游戏，还将其现代化以运行在最新的 Web 标准上： - **Next.js 16.2 & React 19：** 启用了全新的 React Compiler 进行构建。完全不需要 `useMemo` 或 `useCallback` 样板代码——只有纯粹且经过优化的渲染。 - **基于 PartyKit 的 WebSockets：** 使用稳定且支持边缘计算的就绪 WebSocket 服务器（`party/server.ts`）替换了传统的网络层，通过单一统一的协议多路复用 JSON 游戏状态和 Yjs 更新。 - **Yjs CRDTs：** 由 Yjs 和 `y-monaco` 驱动的协同编码。为了绕过 Cloudflare 的二进制截断崩溃问题，我们实现了一个自定义的 **多路复用 JSON Provider**，将 Yjs 更新封装到我们的主 WebSocket 数据流中。 - **浏览器内 Python 执行：** 使用 **Pyodide** (WebAssembly) 在客户端浏览器中完全编译和运行 Python 代码及单元测试。零延迟、零服务器成本，并且绝对没有远程代码执行 (RCE) 漏洞。 - **样式：** 升级到了全新的 CSS 优先的 **Tailwind v4** 引擎，在保留了复古像素风美感的同时，大幅提升了构建性能。 - **UI 与状态：** 使用 Framer Motion 实现流畅的过渡效果，Monaco Editor 提供 IDE 体验，Zustand 负责管理可预测且可同步的客户端状态。 ## 🚀 快速开始（本地开发） 由于该项目需要同时运行 Next.js 前端和 PartyKit WebSocket 服务器，因此我们使用一条命令即可处理所有事务。 ### 1. 安装依赖 ``` npm install ``` ### 2. 环境配置 将示例环境文件复制到 `.env.local`： ``` cp .env.example .env.local ``` ### 3. 运行开发服务器 使用 `dev` 命令可同时启动 Next.js 应用（端口 3000）和 PartyKit 服务器（端口 1999）。 ``` npm run dev ``` 在浏览器中打开 [http://localhost:3000](http://localhost:3000)。你可以打开几个无痕模式窗口，或者邀请本地网络上的朋友来测试多人游戏大厅！ ## 🚢 部署与 CI/CD Vibe Coder 采用了精简的单体仓库部署架构。其后端被推送到 **PartyKit**，前端则托管在 **Vercel** 上。 ### 1. Vercel 配置 为了让 Vercel 在其构建过程中能够自动部署你的 PartyKit 后端，你必须提供一个无头部署 token： - **本地生成 token：** npx partykit token generate - **添加到 Vercel**：将此 token 作为 `PARTYKIT_TOKEN` 保存到你的 Vercel 项目环境变量中。 - **后端 URL**：将你的生产环境后端 URL 添加为 `NEXT_PUBLIC_PARTYKIT_HOST`（例如 `vibecoder.username.partykit.dev`）。 ### 2. 自定义 NPM 脚本 `package.json` 经过了优化，旨在保护生产数据的同时实现平滑的沙箱测试： - `npm run build`：**(Vercel 默认)** 自动优先部署 PartyKit 生产环境，然后再构建 Next.js 前端。 - `npm run party:staging`：手动将你的 WebSocket 服务器部署到专门的预发布 URL 以进行测试。 - `npm run build:dev`：用于本地测试的防御性脚本。它会构建 Next.js 前端，并将后端推送到预发布环境而不是生产环境。 ## 🛠️ 项目结构 - **`/app`**：Next.js 16 App Router 的 UI 和页面逻辑。 - **`/components`**：可复用的 React 19 组件，包括 Monaco 编辑器集成。 - **`/party`**：PartyKit WebSocket 服务器逻辑（`server.ts`），它充当了一个多路复用流量调度器，通过单一可靠的 JSON 连接路由高层游戏事件和 Yjs 编辑器更新。 - **`/store`**：Zustand 全局状态管理，支持实时同步。 - **`/lib/gameData.ts`**：逆向工程得出的 Python 关卡、测试和破坏任务。 ## 📜 License 本项目在 [PolyForm Noncommercial License 1.0.0](LICENSE) 协议下采用**源码可见**模式。 - **非商业用途：** 你可以自由地将本软件用于个人、教育或非营利目的的使用、修改和分发。 - **商业用途：** 未经作者明确许可，严禁将本软件用于商业用途。 - **所有权：** 未明确授予的所有权利均归作者所有。

用 💻 和 ☕ 构建。
原概念由 Ahmad J. & Rayyan K. 设计

标签：Next.js, React, Syscalls, WebAssembly, Web前端开发, 多人在线游戏, 实时协作, 社交推理, 自定义脚本