xiaoshuai
9b63424740
- src/: HyperFrames 封装 CLI(hv)、组件、品牌样式、音频(TTS/混音)工具 - projects/: 各项目 project.yaml 与文案 - interactive/: 井字棋演示页 - .gitignore: 忽略 node_modules、构建产物与 HyperFrames 运行期缓存
56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
# interactive —— 交互网页
|
|
|
|
和 `projects/`（视频）并列的另一类产物：**网页，不是视频**。
|
|
|
|
这里不经过 `hv` 时间轴、不经过渲染引擎、不依赖 ffmpeg。
|
|
代码里没有 `data-start` / `data-duration` / `window.__timelines`。
|
|
|
|
## 能复用什么
|
|
|
|
| 框架里的东西 | 网页里怎么用 |
|
|
|---|---|
|
|
| `src/brand/tokens.css` | 色板、字体回退链、`--u` 基准单位，**直接相对路径引入，零拷贝** |
|
|
| `src/brand/base.css` | reset、排版原子（`.panel` / `.display` / `.headline`）、`--u` 缩放写法 |
|
|
| `src/vendor/three.js` | 离线可用，不依赖 CDN（交互 3D 时用） |
|
|
|
|
**只需要覆盖两处「视频专用」的设置：**
|
|
|
|
1. `--u`：视频里对应固定的 1920x1080 舞台，网页里改成
|
|
```css
|
|
:root { --u: calc(100vmin / 1080); } /* 同一个「短边 / 1080」比例 */
|
|
```
|
|
所有 `calc(N * var(--u))` 的写法原样继续有效。
|
|
2. `base.css` 把 `body` 写死成固定像素 + `overflow:hidden`（视频不能有滚动条），
|
|
网页要反过来覆盖掉。
|
|
|
|
## 代码结构
|
|
|
|
和视频组件是同一个套路，**两边可以互相搬**：
|
|
|
|
```
|
|
状态 唯一真值，一个对象
|
|
↓
|
|
规则（纯函数） old -> new，不碰 DOM、不改传进来的对象
|
|
↓
|
|
渲染（纯函数） state -> DOM ← 视频里对应 render(t)
|
|
↓
|
|
驱动 状态从哪来 ← 视频里是 tl.time()，网页里是点击
|
|
```
|
|
|
|
确定性铁律（画面必须是时间的纯函数）**只约束视频渲染**。
|
|
网页不导视频，状态、事件、`requestAnimationFrame` 都可以正常用。
|
|
|
|
## 跑起来
|
|
|
|
任何静态服务器都行，**根目录必须是仓库根**（因为页面用 `../../src/brand/` 相对引用）：
|
|
|
|
```bash
|
|
cd /hermes/AshuaiXsinfo
|
|
python3 -m http.server 8000
|
|
# 打开 http://localhost:8000/interactive/tictactoe/
|
|
```
|
|
|
|
## 目录
|
|
|
|
- `tictactoe/` —— 井字棋，用来验证可行性。单文件，无构建，无依赖
|