Maxim Dolgolyov
77ebe9e3e4
PLAN.md + 5 subplans + CONTEXT.md Strategy: Incremental | Mode: Automated | Execution: Direct Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
47 lines
2.2 KiB
Markdown
47 lines
2.2 KiB
Markdown
# Feature Context: Lab.html Split
|
|
|
|
## Current State
|
|
|
|
- lab.html: 5180L total
|
|
- Lines 10-866: inline `<style>` block (856L)
|
|
- Lines 868-4303: HTML body with 39 sim-panels
|
|
- Lines 4304-4326: external script tags (engine modules)
|
|
- Lines 4327-5152: inline `<script>` block (825L glue)
|
|
- Lines 5153+: more script tags
|
|
- 39 engine modules already extracted in `frontend/js/labs/*.js`
|
|
- `lab-init.js` (543L) is the orchestrator
|
|
- 265 hardcoded brand colors throughout
|
|
- 1017 inline `style=` attributes
|
|
|
|
## Key Discoveries
|
|
|
|
- Each sim has a `<div id="sim-X" class="sim-proj-wrap" style="display:none">` pattern
|
|
- Sim activation likely via `sim-switcher` element + JS that toggles display
|
|
- Lab has its own large CSS scope that doesn't conflict with ls.css (verify)
|
|
|
|
## Cross-Phase Dependencies
|
|
|
|
- **Phase 1** (extract style) — independent
|
|
- **Phase 2** (extract glue) — independent of Phase 1
|
|
- **Phase 3** (token purification) — can run after Phase 1 (CSS file becomes purification target)
|
|
- **Phase 4** (hash-router) — needs Phase 2 (router code in lab-glue.js easier to extend than inline)
|
|
- **Phase 5** (template lazy) — needs Phase 4 (router triggers template activation)
|
|
|
|
## Temporary Workarounds
|
|
|
|
(пусто — заполняется implementer'ом)
|
|
|
|
## Implementation Notes
|
|
|
|
### Что НЕ трогаем
|
|
|
|
- `frontend/js/labs/*.js` engine-классы (CollisionSim, ProjectileSim и т.д.) — они работают
|
|
- `frontend/js/labs/lab-init.js` — orchestrator, может расширяться, но не переписываться целиком
|
|
- `<canvas>` элементы и их id — engine-классы binds к ним по id
|
|
|
|
### Безопасные паттерны (из прошлой работы)
|
|
|
|
- Extract `<style>` → external file: добавить `<link rel="stylesheet">` в head, скопировать содержимое в .css, удалить inline. Проверить визуал curl-200 + spot-check styles.
|
|
- Extract `<script>` → external file: добавить `<script src=>` ПОСЛЕ engine-modules, переместить glue. Watch for global-leak (если inline relies on top-level vars).
|
|
- Token purification: replace `#9B5DE5` → `var(--violet)`, keep tints (`rgba(...)`), keep curated palettes.
|