feat: add vim-chaser'

Author: ChenZiHong-Gavin

README.md

@@ -1,6 +1,6 @@
 # weekly-vibe-coding
 
-![Project Status: Active](https://img.shields.io/badge/status-active-success.svg) ![Progress](https://img.shields.io/badge/Ideas-10%2F100-blue)
+![Project Status: Active](https://img.shields.io/badge/status-active-success.svg) ![Progress](https://img.shields.io/badge/Ideas-12%2F100-blue)
 
 用提示词实现一百个idea。
 
@@ -17,6 +17,8 @@
     - [专题三：语音交互](#专题三语音交互)
     - [专题四：地理信息交互](#专题四地理信息交互)
     - [专题五：有审美的网站设计](#专题五有审美的网站设计)
+    - [专题六：数学小工具](#专题六数学小工具)
+    - [专题七：学习必备](#专题七学习必备)
   - [如何运行](#如何运行)
   - [贡献](#贡献)
   - [License](#license)
@@ -114,6 +116,9 @@
 
       <img width="400"  alt="image" src="https://github.com/user-attachments/assets/1d0f5935-3d33-4e2b-8bfd-413b64eb69df" />
 
+12. **[Vim Chaser](https://chenzihong-gavin.github.io/weekly-vibe-coding/vim-chaser/)** (`apps/vim-chaser`)
+    - 一个在「追逐、战斗、解谜」中不知不觉学会 Vim 的网页游戏。三种模式：🎯 冒险模式（10章63关故事驱动教学）、⚡ 极速模式（60秒计时追逐）、🏌️ Code Golf（最少按键挑战），覆盖 120+ Vim 命令。
+    - 技术栈：React + Vite + TypeScript + Tailwind CSS + Web Audio API
 
 
 ## 如何运行

apps/prompt-playground/src/components/AppsSection.tsx

@@ -5,6 +5,7 @@ import AppCard from "./AppCard";
 import diceVersePromptRaw from "@prompts/dice-verse.md?raw";
 import piMatchmakerPromptRaw from "@prompts/pi-matchmaker.md?raw";
 import airDrumMasterPromptRaw from "@prompts/air-drum-master.md?raw";
+import vimChaserPromptRaw from "@prompts/vim-chaser.md?raw";
 
 const categories = [
   {
@@ -134,6 +135,15 @@ const categories = [
         colorClass: "icon-teal",
         prompt: "",
       },
+      {
+        title: "Vim Chaser",
+        description: "在「追逐、解谜」中学会 Vim 的网页游戏。三种模式：冒险（10章63关）、极速（60秒追逐）、Code Golf（最少按键挑战），覆盖 120+ 命令。",
+        icon: "⌨️",
+        url: "https://chenzihong-gavin.github.io/weekly-vibe-coding/vim-chaser/",
+        status: "live" as const,
+        colorClass: "icon-green",
+        prompt: vimChaserPromptRaw,
+      },
     ],
   },
 ];

apps/prompt-playground/src/components/ProgressSection.tsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 import { Target, TrendingUp, Calendar, Zap } from "lucide-react";
 
 const ProgressSection = () => {
-  const progress = 7; // Current number of completed apps
+  const progress = 12; // Current number of completed apps
   const target = 100;
   const percentage = (progress / target) * 100;
 

apps/vim-chaser/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/vim-chaser/DESIGN.md

@@ -0,0 +1,306 @@
+# Vim Chaser — 游戏设计文档
+
+## 一句话
+
+**一个让你在「追逐、战斗、解谜」中不知不觉学会 Vim 的网页游戏。**
+
+---
+
+## 参考实现的问题
+
+| 问题 | 具体表现 |
+|------|---------|
+| 游戏性弱 | 本质是「教程幻灯片」— 12 个固定关卡，做完点下一步，没有挑战感 |
+| 反馈不足 | 只有一个"任务完成"弹窗，没有实时按键反馈、没音效、没连击感 |
+| 缺乏动机 | 没有分数、排行、成就、解锁机制，做完就结束了 |
+| 模式单一 | 只有教程模式，缺乏重玩价值 |
+
+---
+
+## 核心设计理念
+
+### 1. 「学 Vim」隐藏在「玩游戏」背后
+
+玩家的**主观体验**是在玩一个有趣的游戏，而不是在学习。
+Vim 命令是游戏的**操作方式**，而不是学习的**目标**。
+
+类比：
+- ❌ "请用 `w` 跳到下一个单词" → 教程
+- ✅ "敌人在三个单词之外，你需要快速到达那里" → 游戏
+
+### 2. 即时反馈 > 延迟反馈
+
+每一次按键都要有反馈：
+- **正确操作** → 视觉 + 音效 + 得分
+- **错误操作** → 屏幕抖动 + 提示
+- **连击** → 加速特效 + 倍率
+- **完美通关** → 爆炸级庆祝
+
+### 3. 渐进式难度
+
+不是 12 个平行的教程关卡，而是一条**有节奏的难度曲线**：
+- 前几关只用 `h j k l`，让玩家建立肌肉记忆
+- 然后引入 `w b e`，旧知识变成新挑战的基础
+- 最后组合使用，让玩家感受到"我变强了"
+
+---
+
+## 游戏模式
+
+### 🎯 模式 1: 冒险模式（Adventure）— 主线
+
+**核心玩法：** 在一个「代码世界」中冒险，每一关是一个「代码场景」。
+
+分为 **10 个章节**，共 84 关，覆盖 123+ 个 Vim 命令（详见 `VIM-CURRICULUM.md`）：
+
+| 章节 | 主题 | 教学内容 | 关卡数 |
+|------|------|---------|--------|
+| Ch.1 觉醒 | 基础移动 | `h j k l` `Esc` `:q` | 7 |
+| Ch.2 跳跃 | 词/行级移动 | `w b e W B E 0 $ ^` | 8 |
+| Ch.3 远征 | 行间跳跃 & 搜索 | `gg G { } H M L / ? n N * # f F t T ; ,` | 11 |
+| Ch.4 编辑 | 插入模式 & 基础编辑 | `i I a A o O s S C D r R J` | 9 |
+| Ch.5 组合 | Operator + Motion | `d{motion} c{motion} y{motion}` + 数字前缀 | 8 |
+| Ch.6 内功 | Text Objects | `iw aw i" a" i( a( i{ a{ it at ip ap` | 8 |
+| Ch.7 视界 | 可视模式 & 缩进 | `v V Ctrl+v >> << =` | 7 |
+| Ch.8 传承 | 寄存器 & 撤销 & 重复 | `"a "0 "+ u Ctrl+r . Ctrl+a Ctrl+x` | 9 |
+| Ch.9 奥义 | 宏 & 全局命令 | `q @ :s :%s :g :v` | 9 |
+| Ch.10 登峰 | 高级技巧 | `m % Ctrl+o gU gu zf zo zc` | 8 |
+
+**每关结构：**
+
+```
+┌─────────────────────────────────────┐
+│  📝 场景描述（1-2句，设定情境）       │
+│  🎯 目标（明确、可量化）              │
+│  ⭐ 评分标准（按步数/时间，1-3星）    │
+│  💡 新命令提示（首次出现时）          │
+│  🏆 隐藏挑战（可选，给高手的）        │
+└─────────────────────────────────────┘
+```
+
+**示例关卡：**
+
+> **Ch.1 关卡 3：「穿越注释丛林」**
+>
+> 场景：一段代码中有大量注释，光标在第 1 行，出口在第 8 行第 15 列。
+> 中间有"障碍"（高亮的红色区域），碰到会扣分。
+>
+> 目标：用 `h j k l` 导航到出口，避开障碍。
+>
+> ⭐ 3星：≤15 步 | ⭐⭐ 2星：≤25 步 | ⭐ 1星：完成即可
+
+---
+
+### ⚡ 模式 2: 极速模式（Speed Run）— 刷分
+
+**核心玩法：** 60秒内，屏幕上不断出现「目标」，用最少按键最快速度到达。
+
+- 初级只出现 `h j k l` 可达的目标
+- 随着等级提升，目标需要 `w / f` 等高级命令才能高效到达
+- **关键设计：** 用笨方法（一步步 h j k l）也能到，但会来不及拿高分
+  - 这就自然驱动玩家学习高级命令
+
+**反馈机制：**
+- 到达目标 → 💥 爆炸特效 + 音效 + "+10"浮动数字
+- 连续 3 次 → 🔥 进入 "ON FIRE" 状态，双倍得分
+- 用最优解到达 → ✨ "PERFECT" 字样 + 额外加分
+- 失误（碰到边界等）→ 屏幕边缘红色闪烁 + combo 中断
+
+---
+
+### 🧩 模式 3: 挑战模式（Challenge）— 解谜
+
+**核心玩法：** 给定初始代码和目标代码，用最少 Vim 操作完成变换。
+
+```
+初始状态：                目标状态：
+const x = 10;    →     const y = 20;
+```
+
+> 你的操作：`fxry$F1r2` — 6 次按键，⭐⭐⭐
+
+- 每道题有「高尔夫」性质 — 用最少按键数完成
+- 社区排行榜（本地存 localStorage）
+- 解题后展示「最优解」，教玩家更高效的方式
+
+---
+
+## 视觉设计
+
+### 整体风格：Retro Terminal（复古终端）
+
+- **主色调：** 深色背景 (#0a0e17) + 荧光绿主色 (#00ff9f)
+- **辅助色：** 琥珀色目标 (#ffbe0b)、红色危险 (#ff006e)、蓝色信息 (#3a86ff)
+- **字体：** 等宽字体（JetBrains Mono / Fira Code）
+- **氛围：** 像在一个老式终端里冒险，有 CRT 扫描线效果（可选）
+- **光标：** 块状光标，带发光效果，移动时有轨迹
+
+### 界面布局
+
+```
+┌──────────────────────────────────────────────────────┐
+│ [Logo] Vim Chaser     Ch.1 - 关卡 3/8     ⭐⭐☆    │
+├──────────────────────────────────────────────────────┤
+│                                                      │
+│  ┌─ 代码编辑器区域 ──────────────────────┐  ┌────┐  │
+│  │ 1│ // 穿越注释丛林                    │  │任务│  │
+│  │ 2│ function maze() {                  │  │面板│  │
+│  │ 3│   const path = "safe";  █←光标     │  │    │  │
+│  │ 4│   ████████ // 障碍                 │  │💡  │  │
+│  │ 5│   return exit; // ⭐←目标          │  │提示│  │
+│  │ 6│ }                                  │  │    │  │
+│  └───────────────────────────────────────┘  └────┘  │
+│                                                      │
+│  ┌─ 状态栏 ─────────────────────────────────────┐   │
+│  │ NORMAL │ 步数: 8 │ ⚡连击: 3x │ 时间: 45s   │   │
+│  └──────────────────────────────────────────────┘   │
+│                                                      │
+│  ┌─ 按键历史 ───────────────────────────────────┐   │
+│  │ j → j → l → l → l → j → j → ?               │   │
+│  └──────────────────────────────────────────────┘   │
+└──────────────────────────────────────────────────────┘
+```
+
+---
+
+## 反馈系统（核心差异化）
+
+### 按键级反馈（每次按键）
+
+| 事件 | 视觉反馈 | 音效 |
+|------|---------|------|
+| 有效移动 | 光标滑动动画 + 淡入淡出轨迹 | 轻柔 tick |
+| 到达目标 | 目标爆炸粒子 + 浮动得分 | 清脆 ding |
+| 撞墙/无效 | 屏幕微震 + 红色边框闪烁 | 低沉 buzz |
+| 进入连击 | 屏幕边缘渐变光晕 | 升调 |
+| 连击中断 | 光晕消散 | 降调 |
+| 完美操作 | "PERFECT" 大字 + 金色闪光 | 华丽音效 |
+| 关卡完成 | 全屏庆祝 + 星级评价 + 统计 | 胜利曲 |
+
+### 进度反馈
+
+- **经验值系统：** 每次操作获得 XP，累积升级
+- **称号系统：** Vim Novice → Vim Apprentice → Vim Master → Vim God
+- **解锁系统：** 通关解锁新模式、新主题皮肤
+- **统计面板：** 总按键数、最常用命令、平均通关速度
+
+### 教学反馈
+
+- **首次遇到新命令：** 优雅的弹出卡片，动画展示用法
+- **遇到困难时：** 5 秒无操作 → 温和提示；15 秒 → 详细提示
+- **通关后：** 展示"你的操作 vs 最优操作"的对比回放
+
+---
+
+## 技术方案
+
+### 技术栈
+
+- **框架：** React + TypeScript（单页应用，纯前端）
+- **构建：** Vite
+- **样式：** Tailwind CSS（沿用参考实现的选择）
+- **动画：** CSS Animations + Framer Motion（关键动画）
+- **音效：** Web Audio API（轻量，无需加载大文件）
+- **数据持久化：** localStorage（进度、设置、统计）
+- **无需后端**
+
+### 关键架构
+
+```
+src/
+├── components/          # 通用 UI 组件
+│   ├── CodeEditor.tsx   # 代码编辑器（核心渲染）
+│   ├── Cursor.tsx       # 光标组件（带动画）
+│   ├── StatusBar.tsx    # 底部状态栏
+│   ├── ScorePopup.tsx   # 浮动得分
+│   └── KeyHistory.tsx   # 按键历史
+├── engine/              # 游戏引擎
+│   ├── VimEngine.ts     # Vim 命令解析与执行
+│   ├── GameLoop.ts      # 游戏主循环
+│   ├── Scoring.ts       # 计分系统
+│   └── SoundEngine.ts   # 音效系统（Web Audio API）
+├── modes/               # 游戏模式
+│   ├── Adventure.tsx    # 冒险模式
+│   ├── SpeedRun.tsx     # 极速模式
+│   └── Challenge.tsx    # 挑战模式
+├── data/                # 关卡数据
+│   ├── chapters/        # 按章节组织
+│   └── challenges/      # 挑战题库
+├── hooks/               # 自定义 Hooks
+│   ├── useVimEngine.ts  # Vim 引擎 hook
+│   ├── useSound.ts      # 音效 hook
+│   └── useProgress.ts   # 进度管理 hook
+├── pages/               # 页面
+│   ├── Home.tsx         # 主页
+│   ├── Game.tsx         # 游戏页
+│   └── Stats.tsx        # 统计页
+└── styles/              # 样式
+    └── terminal.css     # 终端主题
+```
+
+### Vim 引擎设计
+
+参考实现的一大问题是 Vim 逻辑分散在 hook 的 useEffect 里，难以维护。
+新方案将 Vim 引擎独立为纯逻辑模块：
+
+```typescript
+// VimEngine — 纯函数，无副作用，易于测试
+class VimEngine {
+  state: EditorState;
+
+  // 处理按键，返回新状态 + 执行的命令
+  processKey(key: string): { newState: EditorState; command: VimCommand | null }
+
+  // 验证状态是否满足目标
+  checkGoal(goal: Goal): boolean
+}
+```
+
+---
+
+## 与参考实现的对比
+
+| 维度 | 参考实现 | Vim Chaser |
+|------|---------|------------|
+| 本质 | 教程幻灯片 | 游戏 |
+| 关卡数 | 12 个固定教程 | 30+ 冒险关卡 + 无限极速 + 题库 |
+| 反馈 | 完成弹窗 | 每按键反馈 + 音效 + 粒子 + 连击 |
+| 动机 | 学完了就学完了 | 星级、XP、称号、排行、解锁 |
+| 重玩性 | 无 | 刷星、刷分、刷最优解 |
+| 教学方式 | 直接告诉你按什么 | 在游戏情境中引导你发现 |
+| Vim 覆盖 | 基础 12 个命令 | 系统性覆盖，从基础到组合 |
+
+---
+
+## 开发优先级（MVP）
+
+### Phase 1 — 核心可玩（先做出来）
+
+1. ✅ Vim 引擎（h j k l w b e 0 $ gg G）
+2. ✅ 代码编辑器渲染（等宽网格、光标、高亮）
+3. ✅ 极速模式（最小可玩版本）
+4. ✅ 基础音效（Web Audio API 合成音）
+5. ✅ 按键反馈（视觉 + 音效）
+
+### Phase 2 — 冒险模式
+
+6. 关卡系统 + Ch.1（h j k l 教学）
+7. Ch.2-3 关卡
+8. 星级评价 + 进度保存
+9. 新命令教学卡片
+
+### Phase 3 — 打磨
+
+10. 挑战模式
+11. 统计面板
+12. 更多关卡
+13. 成就系统
+
+---
+
+## 名字和 Slogan
+
+**Vim Chaser**
+*Chase the cursor. Master the keys.*
+
+中文副标题：追逐光标，掌控按键。