From 196ec39175161cb531485a58471bd2767e1b7e27 Mon Sep 17 00:00:00 2001 From: Daddy32 Date: Fri, 12 Dec 2025 22:42:47 +0100 Subject: [PATCH] Document UI extraction and file layout --- README.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 9639549..df319ce 100644 --- a/README.md +++ b/README.md @@ -12,15 +12,22 @@ Physilinks is a browser-based physics linking game built with Matter.js. Match a ## Tech notes - **Engine**: Matter.js (via CDN). Canvas rendering with custom overlays for HUD, pause, game over, and score popups. -- **Scenes**: Defined in `main.js` as an array of presets (config + `createBodies` factory). Applying a scene updates gravity, spawn rate, ball radius, palette, link constraints (stiffness/stretch/damping/width), and static bodies, then restarts the game. +- **Scenes**: Defined in `scenes.js` as an array of presets (config + `createBodies` factory). Applying a scene updates gravity, spawn rate, ball radius, palette, link constraints (stiffness/stretch/damping/width), and static bodies, then restarts the game. - **Physics entities**: Falling balls (`Bodies.circle`) with gentle restitution/friction; static boundaries/obstacles per scene. The top is open; sides and floor are static bodies. - **Input**: Pointer/touch events mapped to scene coords; chain state tracks bodies and a dashed preview line to the pointer. Undo by dragging back to the previous node. -- **Scoring**: `10 × length²` per cleared chain. Score popup rendered as DOM element near release point. +- **Scoring**: `10 × length²` per cleared chain. Score popup rendered as DOM element near release point (via UI module). - **Persistence**: Per-scene high score stored in `localStorage` under `physilinks-highscore-`; loaded on scene change; HUD shows current scene's best. -- **Game loop**: Single Matter runner started once. Pause sets `engine.timing.timeScale = 0` and stops spawning; resume resets time scale and spawner. Game over stops spawner, freezes physics, and shows overlay. +- **Game loop**: Single Matter runner controlled in `main.js`. Pause/game over stop the runner and spawner and zero `engine.timing.timeScale` so physics and rotating obstacles freeze; resume restarts the runner and spawner. - **Lose detection**: Spawned balls monitor entry; if they remain near the spawn zone with negligible velocity after a short delay, the run is over. +## File structure +- `index.html`: Shell layout and HUD overlays; loads Matter.js plus game scripts. +- `styles.css`: Styling for canvas, HUD, overlays, and score popups. +- `scenes.js`: Scene presets and per-scene static body factories. +- `ui.js`: DOM access, HUD updates, overlays, popups, and control/selector wiring. +- `main.js`: Physics setup, state machine, chain interaction, spawning, scene application, and pause/restart logic. + ## Development quick start - No build step. Open `index.html` directly in the browser. -- Key files: `index.html` (layout), `styles.css` (styling), `main.js` (game logic). -- Adjust or add scenes in `main.js` by extending the `scenes` array with config and a `createBodies(width, height)` function. +- Key files: `index.html` (layout), `styles.css` (styling), `ui.js` (DOM/HUD), `main.js` (physics/game logic), `scenes.js` (scene data). +- Adjust or add scenes in `scenes.js` by extending the `scenes` array with config and a `createBodies(width, height)` function.