初始化项目并上传代码
This commit is contained in:
226
docs/superpowers/plans/2026-03-17-conway-life-demo.md
Normal file
226
docs/superpowers/plans/2026-03-17-conway-life-demo.md
Normal file
@@ -0,0 +1,226 @@
|
||||
# Conway Life Demo Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Build a direct-open Conway's Game of Life demo page with a modern visualization style, preset patterns, canvas-based simulation, and a clean teaching-plus-exploration flow.
|
||||
|
||||
**Architecture:** Keep the page build-free and local-file friendly: semantic markup in `index.html`, visual styling in `styles.css`, and a single browser script in `app.js`. Put Conway engine logic and state helpers in testable pure functions exported from `app.js`, while the DOM/controller layer wires those functions to the canvas UI.
|
||||
|
||||
**Tech Stack:** HTML5, CSS3, vanilla JavaScript, Canvas API, Node.js built-in test runner (`node --test`)
|
||||
|
||||
---
|
||||
|
||||
Note: this workspace is not a git repository, so commit steps are intentionally omitted.
|
||||
|
||||
## File Structure
|
||||
|
||||
- Create: `index.html` - page structure, content sections, script/style includes
|
||||
- Create: `styles.css` - theme variables, layout, cards, control panel, responsive styling, animation polish
|
||||
- Create: `app.js` - Conway engine, preset definitions, state helpers, canvas rendering, UI events
|
||||
- Create: `tests/life-demo.test.js` - Node tests for pure simulation and state logic
|
||||
|
||||
## Chunk 1: Build and test the Conway engine
|
||||
|
||||
### Task 1: Create the failing engine tests
|
||||
|
||||
**Files:**
|
||||
- Create: `tests/life-demo.test.js`
|
||||
- Test: `tests/life-demo.test.js`
|
||||
|
||||
- [ ] **Step 1: Write the failing test**
|
||||
|
||||
```js
|
||||
const test = require('node:test');
|
||||
const assert = require('node:assert/strict');
|
||||
const {
|
||||
createEmptyGrid,
|
||||
stepGrid,
|
||||
stampPattern,
|
||||
PATTERNS,
|
||||
} = require('../app.js');
|
||||
|
||||
test('blinker rotates after one generation', () => {
|
||||
const grid = createEmptyGrid(5, 5);
|
||||
grid[2][1] = 1;
|
||||
grid[2][2] = 1;
|
||||
grid[2][3] = 1;
|
||||
|
||||
const next = stepGrid(grid);
|
||||
|
||||
assert.deepEqual(next[1], [0, 0, 1, 0, 0]);
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run test to verify it fails**
|
||||
|
||||
Run: `node --test tests/life-demo.test.js`
|
||||
Expected: FAIL because `app.js` or the exported functions do not exist yet.
|
||||
|
||||
- [ ] **Step 3: Write minimal implementation**
|
||||
|
||||
```js
|
||||
function createEmptyGrid(rows, cols) {
|
||||
return Array.from({ length: rows }, () => Array(cols).fill(0));
|
||||
}
|
||||
```
|
||||
|
||||
Implement the smallest export set needed to pass:
|
||||
- `createEmptyGrid(rows, cols)`
|
||||
- `countLiveNeighbors(grid, row, col)`
|
||||
- `stepGrid(grid)`
|
||||
- `stampPattern(grid, pattern, offsetRow, offsetCol)`
|
||||
- `PATTERNS` for `glider`, `pulsar`, and `gosperGliderGun`
|
||||
|
||||
- [ ] **Step 4: Run test to verify it passes**
|
||||
|
||||
Run: `node --test tests/life-demo.test.js`
|
||||
Expected: PASS for the engine tests.
|
||||
|
||||
## Chunk 2: Add state helpers and page shell
|
||||
|
||||
### Task 2: Add failing tests for state helpers
|
||||
|
||||
**Files:**
|
||||
- Modify: `tests/life-demo.test.js`
|
||||
- Modify: `app.js`
|
||||
- Create: `index.html`
|
||||
- Create: `styles.css`
|
||||
|
||||
- [ ] **Step 1: Write the failing test**
|
||||
|
||||
Add tests for:
|
||||
|
||||
```js
|
||||
test('createInitialState seeds the default preset and starts paused', () => {
|
||||
const state = createInitialState({
|
||||
rows: 20,
|
||||
cols: 20,
|
||||
defaultPattern: 'pulsar',
|
||||
});
|
||||
|
||||
assert.equal(state.running, false);
|
||||
assert.equal(state.selectedPattern, 'pulsar');
|
||||
assert.equal(state.generation, 0);
|
||||
assert.ok(state.liveCount > 0);
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run test to verify it fails**
|
||||
|
||||
Run: `node --test tests/life-demo.test.js`
|
||||
Expected: FAIL because `createInitialState` is not implemented yet.
|
||||
|
||||
- [ ] **Step 3: Write minimal implementation**
|
||||
|
||||
Implement pure helpers:
|
||||
- `cloneGrid(grid)`
|
||||
- `countLiveCells(grid)`
|
||||
- `createInitialState({ rows, cols, defaultPattern })`
|
||||
- `randomizeGrid(grid, probability)`
|
||||
- `toggleCell(grid, row, col, forcedValue)`
|
||||
|
||||
At the same time, scaffold:
|
||||
- `index.html` with Hero, Lab, Rules, and Presets sections
|
||||
- `styles.css` with the modern visualization theme variables and responsive grid
|
||||
|
||||
- [ ] **Step 4: Run test to verify it passes**
|
||||
|
||||
Run: `node --test tests/life-demo.test.js`
|
||||
Expected: PASS for the new state-helper tests.
|
||||
|
||||
## Chunk 3: Wire controls, canvas rendering, and preset switching
|
||||
|
||||
### Task 3: Add failing tests for UI-facing state transitions
|
||||
|
||||
**Files:**
|
||||
- Modify: `tests/life-demo.test.js`
|
||||
- Modify: `app.js`
|
||||
- Modify: `index.html`
|
||||
- Modify: `styles.css`
|
||||
|
||||
- [ ] **Step 1: Write the failing test**
|
||||
|
||||
Add tests for:
|
||||
|
||||
```js
|
||||
test('applyPreset replaces the grid, pauses playback, and resets generation', () => {
|
||||
const state = {
|
||||
...createInitialState({ rows: 25, cols: 25, defaultPattern: 'glider' }),
|
||||
running: true,
|
||||
generation: 12,
|
||||
};
|
||||
|
||||
const next = applyPreset(state, 'gosperGliderGun');
|
||||
|
||||
assert.equal(next.running, false);
|
||||
assert.equal(next.generation, 0);
|
||||
assert.equal(next.selectedPattern, 'gosperGliderGun');
|
||||
assert.ok(next.liveCount > state.liveCount);
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run test to verify it fails**
|
||||
|
||||
Run: `node --test tests/life-demo.test.js`
|
||||
Expected: FAIL because `applyPreset` is not implemented yet.
|
||||
|
||||
- [ ] **Step 3: Write minimal implementation**
|
||||
|
||||
Implement:
|
||||
- `applyPreset(state, patternName)`
|
||||
- `advanceState(state)`
|
||||
- `setSpeed(state, speed)`
|
||||
- `getSpeedLabel(speed)`
|
||||
|
||||
Then wire browser behavior:
|
||||
- draw the grid on a `canvas`
|
||||
- support play/pause, step, clear, randomize, reset preset, and speed controls
|
||||
- support click and drag painting on the canvas
|
||||
- update status text, generation count, live-count, and active preset styling
|
||||
|
||||
- [ ] **Step 4: Run test to verify it passes**
|
||||
|
||||
Run: `node --test tests/life-demo.test.js`
|
||||
Expected: PASS for the state-transition tests.
|
||||
|
||||
## Chunk 4: Polish visual details and run end-to-end verification
|
||||
|
||||
### Task 4: Finish presentation details and verify manually
|
||||
|
||||
**Files:**
|
||||
- Modify: `index.html`
|
||||
- Modify: `styles.css`
|
||||
- Modify: `app.js`
|
||||
- Test: `tests/life-demo.test.js`
|
||||
|
||||
- [ ] **Step 1: Refine the visuals**
|
||||
|
||||
Complete:
|
||||
- luminous background gradients and grid accents
|
||||
- polished cards and control panel surfaces
|
||||
- hover/focus states
|
||||
- responsive stacking for smaller screens
|
||||
- subtle canvas/section entrance motion
|
||||
|
||||
- [ ] **Step 2: Run automated tests**
|
||||
|
||||
Run: `node --test tests/life-demo.test.js`
|
||||
Expected: PASS with zero failures.
|
||||
|
||||
- [ ] **Step 3: Run manual verification**
|
||||
|
||||
Open: `index.html`
|
||||
|
||||
Verify:
|
||||
- page opens directly without a dev server
|
||||
- pulsar loads by default and the simulation starts paused
|
||||
- controls behave correctly
|
||||
- each preset loads and pauses correctly
|
||||
- editing by click/drag works
|
||||
- desktop and narrow layouts both remain usable
|
||||
|
||||
- [ ] **Step 4: Record any gaps**
|
||||
|
||||
If a browser-only issue appears, fix it and rerun:
|
||||
- `node --test tests/life-demo.test.js`
|
||||
- manual browser verification of `index.html`
|
||||
105
docs/superpowers/specs/2026-03-17-conway-life-demo-design.md
Normal file
105
docs/superpowers/specs/2026-03-17-conway-life-demo-design.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# Conway Life Demo Design
|
||||
|
||||
Date: 2026-03-17
|
||||
Status: Approved
|
||||
|
||||
## Goal
|
||||
|
||||
Build a pure HTML/CSS/JS demo page for Conway's Game of Life that opens directly from `index.html`, balances teaching and interaction, and presents the simulation with a modern visualization aesthetic.
|
||||
|
||||
## Audience and Use Case
|
||||
|
||||
- Learners seeing cellular automata for the first time
|
||||
- Users who want to experiment by drawing patterns and watching them evolve
|
||||
- Anyone who wants a polished, shareable standalone demo page
|
||||
|
||||
## Product Direction
|
||||
|
||||
- Topic: Conway's Game of Life
|
||||
- Page type: balanced demo page
|
||||
- Delivery: direct-open HTML/CSS/JS page
|
||||
- Feature scope: enhanced version with preset patterns
|
||||
- Visual style: modern visualization
|
||||
- Default state: load a preset pattern and remain paused
|
||||
|
||||
## Layout
|
||||
|
||||
### 1. Hero
|
||||
|
||||
- Full-width first screen with an atmospheric simulation-inspired background
|
||||
- Title, short explanatory subtitle, and a clear entry action that scrolls to the lab
|
||||
- Visual treatment based on luminous grid lines, soft glow, and scientific/data-art styling
|
||||
|
||||
### 2. Main Lab
|
||||
|
||||
- Large simulation canvas as the primary focus
|
||||
- Side control panel on desktop; stacked layout on mobile
|
||||
- Status area showing running/paused state and current speed
|
||||
|
||||
### 3. Rules Section
|
||||
|
||||
- Three compact rule cards explaining survival, birth, and death
|
||||
- Short copy only; no heavy educational text blocks
|
||||
- Small visual motifs to keep the explanation approachable
|
||||
|
||||
### 4. Preset Pattern Section
|
||||
|
||||
- Presets: glider, pulsar, and Gosper glider gun
|
||||
- Clicking a preset loads it into the simulation and pauses playback
|
||||
- Section doubles as both a teaching aid and a quick demo launcher
|
||||
|
||||
## Interaction Design
|
||||
|
||||
### Controls
|
||||
|
||||
- Start/Pause
|
||||
- Step one generation
|
||||
- Clear
|
||||
- Randomize
|
||||
- Reset to selected preset
|
||||
- Speed adjustment
|
||||
|
||||
### Canvas Interaction
|
||||
|
||||
- Click a cell to toggle it
|
||||
- Drag to paint cells continuously
|
||||
- Keep the simulation paused when loading or editing presets so the user stays in control
|
||||
|
||||
### Simulation Rules
|
||||
|
||||
- Classic Conway rules
|
||||
- Finite grid with non-wrapping edges
|
||||
- Default opening preset: pulsar
|
||||
|
||||
## Visual System
|
||||
|
||||
- Deep dark background with cool white text
|
||||
- Cyan and acid-green highlights for live-state emphasis
|
||||
- Semi-transparent panels, subtle borders, soft bloom, and layered gradients
|
||||
- Refined motion: gentle glow, state transitions, and staggered reveal rather than flashy arcade effects
|
||||
|
||||
## Technical Approach
|
||||
|
||||
- Use `canvas` for the simulation surface to keep updates smooth and visually polished
|
||||
- Keep simulation rules in pure functions so they can be tested outside the browser
|
||||
- Keep page assets local so `index.html` can open directly without a build step
|
||||
|
||||
## Responsiveness
|
||||
|
||||
- Desktop: wide lab layout with canvas first and controls beside it
|
||||
- Mobile: stacked layout with the canvas above controls
|
||||
- Preset cards become horizontally scrollable on narrower screens
|
||||
|
||||
## Usability Details
|
||||
|
||||
- Disable actions when they should not apply, such as disabling step while running
|
||||
- Show the active preset and speed tier clearly
|
||||
- Short helper copy explaining that each cell looks at its eight neighbors
|
||||
|
||||
## Verification Targets
|
||||
|
||||
- Conway rule updates are correct
|
||||
- Start/pause and single-step work as expected
|
||||
- Presets load correctly
|
||||
- Editing cells updates the simulation state correctly
|
||||
- Layout remains usable after resizing
|
||||
49
docs/项目结构图与运行入口说明.md
Normal file
49
docs/项目结构图与运行入口说明.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# 项目结构图与运行入口说明（1 分钟版）
|
||||
|
||||
## 一、项目结构图
|
||||
|
||||
```text
|
||||
test/
|
||||
├─ index.html # 页面入口（直接在浏览器打开）
|
||||
├─ styles.css # 页面样式
|
||||
├─ app.js # 生命游戏核心引擎 + UI 交互控制
|
||||
├─ tests/
|
||||
│ └─ life-demo.test.js # Node 测试（核心规则与状态逻辑）
|
||||
└─ docs/
|
||||
└─ 项目结构图与运行入口说明.md # 本说明文档
|
||||
```
|
||||
|
||||
## 二、运行入口
|
||||
|
||||
### 1) 浏览器入口（交互演示）
|
||||
|
||||
- 入口文件：`index.html`
|
||||
- 加载脚本：`index.html` 底部通过 `<script src="./app.js"></script>` 引入引擎与交互逻辑。
|
||||
- 打开方式：双击 `index.html`（或在浏览器中打开本地文件）。
|
||||
|
||||
### 2) 脚本初始化入口
|
||||
|
||||
- `app.js` 在 `DOMContentLoaded` 后执行 `initDemo()`，完成：
|
||||
- 初始状态创建（默认预设、网格尺寸、暂停状态）
|
||||
- 画布渲染与动画循环
|
||||
- 控件事件绑定（开始/暂停、单步、清空、随机、重置预设、速度滑条）
|
||||
- 画布点击/拖拽绘制
|
||||
|
||||
## 三、关键代码定位
|
||||
|
||||
- 预设图案定义：`app.js:4`
|
||||
- 交互初始化入口：`app.js:368`
|
||||
- 开始/暂停等主控事件：`app.js:430`
|
||||
- Node 导出（供测试复用）：`app.js:540`
|
||||
- 测试起始位置：`tests/life-demo.test.js:14`
|
||||
|
||||
## 四、测试入口
|
||||
|
||||
- 测试文件：`tests/life-demo.test.js`
|
||||
- 推荐命令（当前环境可用）：
|
||||
|
||||
```bash
|
||||
node tests/life-demo.test.js
|
||||
```
|
||||
|
||||
> 说明：在当前受限环境下，`node --test tests/life-demo.test.js` 可能因子进程权限报 `EPERM`，但直接执行测试文件可正常完成 9 项测试。
|
||||
Reference in New Issue
Block a user