replit/timmy-tower
2
0
Fork 0
Code Issues 26 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Session Power Meter: 3D Balance Visualizer #17

New Issue
Closed
opened 2026-03-20 22:25:27 +00:00 by replit · 1 comment
replit commented 2026-03-20 22:25:27 +00:00
Owner
Copy Link

What & Why

The session balance is currently a flat number in the session panel. A 3D 'power meter' — a lightning bolt or glowing orb that fills proportionally to the session balance and pulses when a payment is received — makes the economic layer viscerally understandable. Visitors see their energy level at a glance.

Done looks like

  • Persistent 3D power meter element sits in the Workshop scene (bottom corner or above Delta agent)
  • Meter fills proportionally: empty = 0 sats, full = session max deposit
  • On incoming payment, meter pulses with a bright flash and fill level rises smoothly
  • On each job deduction, meter visibly drains
  • Meter visible whenever a session is active; hidden when no session funded
  • Clicking the meter opens the session panel
  • Current balance in sats shown as text overlay on the meter

Out of scope

  • Changing session balance logic or payment flow
  • Animated meter in mobile app (2D fallback acceptable)
  • Per-job cost breakdown in the meter

Tasks

  1. Power meter 3D object — Three.js power meter geometry (stylized lightning bolt or orb) with material accepting 0-1 fill value; position in scene.
  2. Balance binding — Subscribe to session_balance_update WebSocket events; animate fill level and trigger pulse effects on payment received / drain on job cost.
  3. Session visibility toggle — Show/hide meter based on session active state; sync with session panel open/close.
  4. Click-to-open — Add raycasting click detection on the meter to open the session panel.

Relevant files

  • the-matrix/js/world.js
  • the-matrix/js/session.js
  • the-matrix/js/effects.js
  • the-matrix/js/interaction.js
  • the-matrix/js/websocket.js
## What & Why The session balance is currently a flat number in the session panel. A 3D 'power meter' — a lightning bolt or glowing orb that fills proportionally to the session balance and pulses when a payment is received — makes the economic layer viscerally understandable. Visitors see their energy level at a glance. ## Done looks like - Persistent 3D power meter element sits in the Workshop scene (bottom corner or above Delta agent) - Meter fills proportionally: empty = 0 sats, full = session max deposit - On incoming payment, meter pulses with a bright flash and fill level rises smoothly - On each job deduction, meter visibly drains - Meter visible whenever a session is active; hidden when no session funded - Clicking the meter opens the session panel - Current balance in sats shown as text overlay on the meter ## Out of scope - Changing session balance logic or payment flow - Animated meter in mobile app (2D fallback acceptable) - Per-job cost breakdown in the meter ## Tasks 1. **Power meter 3D object** — Three.js power meter geometry (stylized lightning bolt or orb) with material accepting 0-1 fill value; position in scene. 2. **Balance binding** — Subscribe to `session_balance_update` WebSocket events; animate fill level and trigger pulse effects on payment received / drain on job cost. 3. **Session visibility toggle** — Show/hide meter based on session active state; sync with session panel open/close. 4. **Click-to-open** — Add raycasting click detection on the meter to open the session panel. ## Relevant files - `the-matrix/js/world.js` - `the-matrix/js/session.js` - `the-matrix/js/effects.js` - `the-matrix/js/interaction.js` - `the-matrix/js/websocket.js`
replit added the lightningworkshopfrontend labels 2026-03-20 22:25:27 +00:00
claude was assigned by Rockachopa 2026-03-22 23:37:40 +00:00
claude commented 2026-03-24 02:33:29 +00:00
Collaborator
Copy Link

PR created: http://143.198.27.163:3000/replit/timmy-tower/pulls/109

Implemented the 3D session power meter:

  • power-meter.js (new) — glowing orb with transparent shell, inner fill orb that scales with balance (0→1), lightning bolt overlay, point light, DOM text label. Color gradient: red → yellow → cyan. Pulses on payment (fill) or job deduction (drain).
  • session.js — drives meter visibility/fill on all balance change paths; exports openSessionPanel() for click-to-open; tracks session max sats.
  • websocket.js — handles session_balance_update WS events.
  • interaction.js — adds registerClickTarget() supporting FPS, non-lock desktop, and mobile tap modes.
  • main.js — wires init/update/dispose + registers click target.
PR created: http://143.198.27.163:3000/replit/timmy-tower/pulls/109 Implemented the 3D session power meter: - **`power-meter.js`** (new) — glowing orb with transparent shell, inner fill orb that scales with balance (0→1), lightning bolt overlay, point light, DOM text label. Color gradient: red → yellow → cyan. Pulses on payment (`fill`) or job deduction (`drain`). - **`session.js`** — drives meter visibility/fill on all balance change paths; exports `openSessionPanel()` for click-to-open; tracks session max sats. - **`websocket.js`** — handles `session_balance_update` WS events. - **`interaction.js`** — adds `registerClickTarget()` supporting FPS, non-lock desktop, and mobile tap modes. - **`main.js`** — wires init/update/dispose + registers click target.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
backend
frontend
lightning
mobile
mobile
nostr
workshop
No Label frontend lightning workshop
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude gemini replit
No Assignees claude
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: replit/timmy-tower#17
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?