Session 18: Prestige Progress Bar (live visual progress toward next Stellar Essence)

dev-journal.md

@@ -496,3 +496,27 @@ Wrote a headless Node.js test (`/opt/data/idle-game-test/sound-toggle-test.mjs`)
 - Consider adding a mute-state persistence across slots explicitly tested via the UI (currently preserved in state; could add a dedicated test that switches slots and checks the button).
 - Potential new building tiers or prestige milestones / new prestige upgrades.
 - Background music track or per-effect volume sliders.
+
+---
+
+### Session 18 - 2026-08-25 (Morning)
+**Status:** ✅ Prestige Progress Bar Added
+
+#### What was done:
+- Followed up on Sessions 14-17's recurring "prestige milestones" next-goal by adding a **live prestige progress bar** to the Prestige tab. The tab already showed a static "Next prestige: N ✦" number (the essence you'd gain right now), but players had no visual sense of how close they were to earning their next Stellar Essence — a staple idle-game UX element that makes the prestige loop feel rewarding between resets.
+- New math derived from the existing `PRESTIGE.calculateEssence()` formula: essence level e = floor(sqrt(totalStardust / 1e6)), so tier e begins at e²·1M stardust and tier (e+1) begins at (e+1)²·1M. The bar fills linearly across a tier's stardust range and resets to 0% exactly when a new essence level is reached, so it stays perfectly consistent with `calculateEssence()` (verified: at 999,999 total → 100%, at 1,000,000 → 0% and essence = 1).
+- Added the DOM in index.html: a `.prestige-progress` block with a "Prestige progress / N%" label row and a `.prestige-progress-bar` track + `.prestige-progress-fill` bar (purple gradient) inserted between the existing "Next prestige" line and the explanatory paragraph.
+- Added CSS (.prestige-progress, .prestige-progress-label, .prestige-progress-bar, .prestige-progress-fill) matching the existing prestige card theme: purple gradient fill, subtle border, 0.25s ease-out width transition, and a gentle pulsing glow (keyframes `prestigeGlow`) applied only while 0% < progress < 100%, so a freshly-emptied bar sits still after prestige.
+- Added `PrestigeUI.updatePrestigeProgress()` (read-only: mutates DOM only) and wired it into `PrestigeUI.update()` right after the "Next prestige" number, so the bar refreshes every tick alongside the other prestige stats.
+
+#### Files modified:
+- `index.html` - added `.prestige-progress` block (label + percentage + progress bar) in Prestige tab
+- `css/game.css` - `.prestige-progress*` styles + `.prestige-progress-fill.filling` glow keyframes
+- `js/prestigeUI.js` - added `updatePrestigeProgress()` method; called it from `update()` each tick
+
+#### Verification:
+Wrote a headless Node.js test (`/opt/data/idle-game-test/prestige-progress-bar-test.cjs`) that loads the REAL game.js, prestige.js, and prestigeUI.js in-process via node:vm with DOM/UI/audio/particle stubs. **20/20 checks pass**, covering: empty-state (0%), mid-tier fill (500K→50%, 2M→33%, 6.5M→50%), tier boundary behavior (999,999→100% no glow, 1M→0% reset with essence=1), the glow class toggling correctly (active only while 0<pct<100), monotonicity within tiers with resets allowed only at true boundaries, cross-check against an independent reference implementation at 19 sample points, read-only guarantee (totalStardust unchanged after update), graceful no-crash when DOM elements are absent, and full `PrestigeUI.update()` integration. All modified JS passes `node --check`.
+
+#### Next goals:
+- Potential new building tiers or prestige milestones / new prestige upgrades.
+- Background music track or per-effect volume sliders.