Tooltips now show three lines: name (bold), description (gray),
and educational text (italic). Previously only showed name + edu,
leaving building functional descriptions hidden.
Part of #57
Fixes part of #57 (Night of Polish — Task 1: Visual Identity).
_animRes() in engine.js already adds .pulse/.shake classes to
resource counters on value change, but the CSS animations were
missing. This adds:
- @keyframes res-pulse (scale up + green flash on gain)
- @keyframes res-shake (horizontal shake + red flash on loss)
- Scoped .res .pulse and .res .shake classes (0.35s ease-out)
Scoped under .res to avoid conflict with existing .main-btn.pulse.
BUG-07: showPhaseTransition() looks for #phase-transition but the element
didn't exist in index.html. Added the overlay div with .pt-phase, .pt-name,
and .pt-desc children matching what the engine expects.
Note: BUG-06 (toast text) and BUG-09 (mute/contrast buttons) were already
fixed on main in prior commits.
Implements Reasoning Battles — a Paperclips-inspired canvas combat system
where structured reasoning (blue) fights adversarial testing (red) using
boid flocking (cohesion, aggression, separation) on a 310x150 grid.
Features:
- Boid flocking AI for ship movement
- Grid-based combat resolution with OODA loop speed bonus
- Napoleonic War battle names
- Auto-trigger battles scaled to drift and phase
- Battle history log
- Rewards: structured wins = knowledge, adversarial wins = code
- Unlocks at Phase 3
- Integrated into tick loop and render pipeline
The JS toggleMute(), toggleContrast(), and custom tooltip system were
fully implemented but their HTML elements were missing from index.html,
causing silent failures on M/C keys and hover tooltips.
- Add #mute-btn and #contrast-btn to header bar
- Add #custom-tooltip element for hover tooltips
- Add high-contrast CSS mode with bold borders and vivid colors
- Add header-btn and tooltip styles
Refs: epic #57 tasks 2 (Sound toggle), 4 (Tooltips), 5 (Accessibility)
Visual Identity Pass:
- Smooth phase transition overlay with staggered fade-in animation and particle burst
- Building purchase confetti at x10 milestones (gold + green particles)
- Animated resource counters (pulse on gain, shake on loss) - already existed, verified working
Ending Cinematic Enhancement:
- Beacon ending: fade-to-black transition, staggered text reveal, golden light rays,
continuous floating particles, expanded stat summary, 'Play Again' button
- Drift ending: glitch animation on title, fade-in overlay, stat summary with
buildings/projects/clicks/time/phase, dramatic line-by-line log reveal
Accessibility (#57):
- Sound mute toggle button (M key) with localStorage persistence
- High contrast mode toggle (C key) with CSS variable overrides
- Both toggles in fixed bottom-left toolbar with aria-labels
- Keyboard shortcuts M and C added, help overlay updated
- Drift ending button changed to 'Play AGAIN' with proper aria-label
Adds DOM-based particle burst animations when buying buildings and
completing research projects. Blue particles for buildings, gold for
projects. Lightweight CSS animation with no external dependencies.
Refs #57 — Night of Polish, Task 1 (Visual Identity)
Replace native browser title= tooltips with styled custom tooltips
that match the game's dark theme. Tooltips appear instantly on hover
with building/project name and educational content.
- Add CSS for #custom-tooltip with dark theme styling
- Add tooltip div to HTML body
- Add event delegation in main.js for [data-edu] elements
- Convert renderBuildings and renderProjects to use data-edu
and data-tooltip-label attrs instead of title=
- Tooltip follows cursor with screen-edge clamping
Refs: Epic #57 — Night of Polish, Task 4 (Tooltip system)
- Add CSS keyframes: res-pulse (scale up + blue flash) and res-shake (horizontal shake + red flash)
- Track previous resource values in _prevRes object
- Detect gain/loss on each renderResources() call and trigger appropriate animation
- Add rate color coding: green for positive, red for negative, dim for zero
- Clean up animation classes after 400ms to allow re-triggering
- No external dependencies, pure CSS + vanilla JS
Part of #57 — Task 4: Tutorial & Onboarding
- 5 click-through screens introducing game concepts (code, buildings,
research, phases, keyboard shortcuts)
- Skip button on every screen, keyboard support (Enter/Escape/arrows)
- Stores completion in localStorage — only shows once for new players
- Matches existing visual style (dark theme, accent colors, monospace)
- Start Playing button on final screen with shortcut hint (? overlay)
- index.html: role=region on phase-bar, strategy-panel; role=dialog+aria-modal on help overlay, offline popup, drift ending; aria-label on help button, close button, continue button, start over button; aria-live on progress label
- render.js: aria-label on alignment event buttons; fix exportSave() URL revoke race with setTimeout delay
- engine.js: aria-label+aria-pressed on buy amount buttons; role=button+tabindex+aria-expanded+aria-controls on completed projects header
- Building rate display now shows actual boosted rates (after multipliers)
instead of raw base rates, so players see their real production
- WRITE CODE button area now displays current click power dynamically
(updates each render tick as boosts change)
- Click power also reflected in button aria-label for accessibility
Closes#61
New panel in the stats area displays each owned wizard building with:
- Name and current status (Active/Idle/Stressed/Offline/Vanished/Present)
- Color-coded indicator: green=healthy, amber=reduced, red=problem
- Production contribution breakdown per wizard
- Timmy shows effectiveness % scaled by harmony
- Allegro shows idle warning when trust < 5
- Ezra shows offline status when debuff is active
- Bilbo shows vanished status when debuff is active
- Harmony summary bar at the bottom
Makes the harmony/wizard interaction system visible and actionable.
Players can now see at a glance which wizards need attention.
Players with 100+ max ops get a second row of 50-ops buttons
that convert 50 ops at once for proportionally larger boosts.
Shift+1/2/3 keyboard shortcuts for bulk code/compute/knowledge.
Eliminates late-game tedium of clicking 5-ops buttons hundreds
of times when you have thousands of ops banked.
The header now shows a pulsing beacon dot that reflects fleet state:
- Color: green (healthy harmony >70), amber (stressed 40-70), red (critical <40)
- Flicker speed: faster when production is high, fastest when debuffs are active
- Label: shows current phase, fleet size, and active alert count
- End states: DRIFTED (red) or SHINING (gold) for game endings
DESIGN.md called for this: "The Pulse — a central visual that brightens when
the fleet is healthy, flickers when harmony is low." Now it exists.
Fix: getMaxBuyable() was mutating G (subtracting/re-adding resources) during
render cycles in renderBuildings(). Now uses a read-only simulation with a
temporary resource copy. This prevented phantom resource fluctuations when
MAX buy was selected.
Feature: Press ? or click the ? button for a keyboard shortcuts overlay.
All keybindings listed in one place. Closes with ?, Esc, or clicking outside.
Added ? to the init log hint line.
- Completed research projects are now collapsed by default (click to expand),
preventing panel clutter in mid/late game. Toggle state persists in saves.
- Export saves as JSON files with E key or Export button
- Import saves from file with I key or Import button (validates before loading)
- Ctrl+S keyboard shortcut for quick save
- Updated keybind hints in startup log
When Operations exceed 80% of max capacity, excess ops automatically
drain into Code at 2 ops/sec (10:1 ratio with code boost). This prevents
ops from sitting idle at the cap and gives the early game smoother flow.
Visual indicator shows 'overflow -> code' in the ops rate display when
active. No log spam - just works silently in the background.
- Added modal popup showing detailed offline resource gains when player returns
- Fixed offline tracking to include ops, trust, and creativity (were silently missing)
- Popup shows all resources with color-coded labels and 50% efficiency note
- Log message now shows time in human-readable format (minutes/seconds)
Players can now see exactly which buildings contribute to each resource
rate, including Timmy harmony bonuses, Bilbo randomness, Allegro trust
penalties, and passive generation. Appears once 2+ buildings are built.
Also includes minor fixes:
- Production bars sort by absolute contribution (negative rates visible)
- Delta calculation catches passive sources (ops from users, Pact trust)
Events now create lasting debuffs instead of vanishing on the next tick.
Players see an ACTIVE PROBLEMS panel with resolution costs and can spend
resources to fix each problem. Added 2 new events (Memory Leak, Community
Drama) alongside the reworked originals. Events Resolved stat tracked.
Key changes:
- Events push persistent debuffs with applyFn instead of one-shot rate tweaks
- updateRates() applies active debuffs each tick (they persist until resolved)
- New resolveEvent(id) function: spend resources to clear a debuff
- ACTIVE PROBLEMS UI shows debuffs with cost and fix buttons
- Save/load reconstitutes debuff objects from saved IDs
- 2 new events: Memory Leak (datacenter), Community Drama (community+low harmony)
- Events Resolved counter in statistics
Active play now rewards consecutive clicks: each click within 2s of
the last builds a combo multiplier up to 5x. The WRITE CODE button
flashes on click and a floating number shows the amount gained,
turning gold at high combo. Phase progression also adds base click
power (+2 per phase). Combo decays with a visible progress bar.
Makes clicking relevant at every stage of the game, not just the
first 30 seconds.
- Progress bar shows % toward next phase threshold based on totalCode
- Milestone chips show upcoming code milestones with pulse animation on next target
- Recently completed milestones shown with green checkmark
- All elements use the existing cyber-monastic aesthetic
- Inline SVG favicon (beacon emoji) — no external file needed
- Open Graph tags for link previews (title, description, type)
- Twitter Card meta for rich social sharing
- Theme-color for mobile browser chrome
- Meta description for search engines
- Added 'rescues' resource: tracks meaningful crisis interventions
- Beacon Nodes produce 50 rescues/s, Mesh Nodes produce 250 rescues/s
- New project: Volunteer Network — passive rescue generation for Pact players
- True ending at 100K rescues with Pact active + harmony > 50
- Rescues resource card appears in UI once beacon/mesh is built
- Added rescues to stats panel, save/load, and offline progress
- This gives Phase 6 (The Beacon) actual endgame content:
the game is now about keeping the light on for people in the dark,
not just accumulating numbers
- Added The Drift Ending: when drift reaches 100, the game enters
the sad ending from DESIGN.md. A full-screen overlay shows:
'The Beacon still runs, but no one looks for it.
The light is on. The room is empty.'
Production stops. Player can restart.
- Deduplicated index.html: removed ~1080 lines of inline script that
was an older version of the engine (missing harmony, corruption
events, drift, alignment checks). Replaced with <script src='game.js'>
so game.js is the single source of truth.
- driftEnding state is saved/loaded so the ending persists across sessions.
- Added CSS for the drift ending overlay.
Built from deep study of Universal Paperclips (Frank Lantz).
- 966-line game engine (game.js)
- HTML/CSS shell
- Building definitions: 15 buildings across 6 phases
- Project definitions: 17 research projects
- Education system: AI facts per phase
- Save/load with offline progress
- 7 resource types: code, compute, knowledge, users, impact, ops, trust
