Rendering and HUD

Rendering and HUD [CURRENT]

Engine: Phaser 3 on a single WebGL canvas (migrated off Kaboom.js 2026-06-06 via a compat shim, src/compat/kaboomShim.js, that re-exposes the old k.* drawing API on Phaser so the scenes work unchanged). All art is procedural canvas generation — no PNG assets. The player is an animated character drawn from procedural primitives (idle bob + walk cycle); monsters/tiles are procedural sprites/rects.

Square play window (user design 2026-06-08/09): the world renders inside a centered square of side min(viewport-width, height). The area outside the square is fully occluded (opaque "bezel", no world bleed) and becomes dedicated UI gutters that house the HUD and touch controls — so the play area stays clean and the SAME layout works in landscape (gutters left/right) and portrait (gutters top/bottom). Shared geometry: render/playWindow.js (the square + the occlusion) and render/hudLayout.js (the per-cluster gutter anchors, used by both SP and MP so they can't drift).

The HUD (placed in the gutters) includes:

• Minimap / radar (right gutter in landscape / top gutter in portrait): the shrinking safe zone, extraction portals, nearby monsters/players, and your position over the faint downsampled terrain you've explored (fog of war — see Map and Biomes). Tap it to cycle zoom — full map → 2× → 4× player-centred (each tap zooms in closer, then wraps back to the full map). Zoom is tap-only in both modes; the M key is the sound-mute toggle.
• Team HP bars (gutter): live per-monster HP from the snapshot, so combat damage to your reserves is visible. The run timer, objective line, chain HUD, and biome chip share the gutters.
• Danger warning: outside the safe zone a zone-death danger bar (top of the play window) fills amber→red with a pulsing "DANGER — Ns to death" countdown (and "RECOVERING" while it drains back in safety), alongside a pulsing red screen border + "OUTSIDE SAFE ZONE".
• Combat overlay: a per-monster accent dot, HP-level color-coded HP + energy bars (green→amber→red by fraction), status chips, and attack buttons showing energy cost. The accent is a single neutral colour — elements are not colour-coded (theme.elementColor returns one neutral tone regardless of element; see Monsters Stats and Elements).
• Extraction portals: a procedural rift of spirit-light that rises out of the ground when it spawns (ground rupture + dust → swirling teal vortex with a white-hot core, pulsing rim, upward light beam, and orbiting motes). Shared renderer src/render/portal.js (SP + online); the rise is driven by each portal's spawn age. [CURRENT]
• Cosmetics (visual only — no gameplay effect): a Cosmetics store with two tabs — Spirit Chains (chain-ring skins, render/chainCosmetics.js) and Player Character (render/characterCosmetics.js) — each skin sets an accent + cloak tint AND a body model (a genuinely different figure, not just a recolour): cloak, knight, mage, automaton, wisp, warden (horned beast), seraph (winged), diver (deep-sea helm), monarch (crowned), corvid (plague-doctor), drawn vector-only in render/character.js. Economy (CN-9): some skins are free, the rest are earned with gold/essence — un-owned earned skins show a price + lock in the store, and equipping is gated on ownership. The equipped skin is per-client (localStorage). For yourself the character skin sets your accent rim-light/eyes + cloak + body model in both SP and MP. In MP both your chain skin AND your character body model are broadcast (the server relays each player's skinId + charId in snapshots), so rivals see each other's actual figure and chain — but a rival's accent/cloak is overridden to a red threat-accent for readability, so you recognise their silhouette without losing the friend/foe cue. [CURRENT] — buying works in both SP and MP (the MP purchase is server-authoritative).
• Mobile: the touch controls live in the gutter outside the square — a floating movement joystick that only activates from the control gutter (left band in landscape, bottom band in portrait), plus a THROW button and pause; tappable combat buttons; an HTML nickname input (real soft keyboard); and PWA install (manifest + icons + service worker).