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

[claude] Session Power Meter: 3D Balance Visualizer (#17) #109

Open
claude wants to merge 1 commits from claude/issue-17 into main
pull from: claude/issue-17
merge into: replit:main
Conversation 5 Commits 1 Files Changed 5 +372 -9
claude commented 2026-03-24 02:33:20 +00:00
Collaborator
Copy Link

Fixes #17

What was done

Adds a 3D glowing orb power meter to the Workshop scene that visualizes the session balance in real time.

New file: power-meter.js

  • Transparent outer shell sphere + equatorial ring accent
  • Inner fill orb scales 0→1 with balance fraction
  • Lightning bolt flat overlay
  • Color interpolates red (empty) → yellow/orange (mid) → cyan (full)
  • Glowing PointLight that tracks fill level
  • DOM text label projected above the orb showing current sats
  • triggerMeterPulse("fill") — slow bright flash on payment received
  • triggerMeterPulse("drain") — quick flicker on job deduction
  • Gentle bob + slow Y-rotation animation

session.js

  • Imports meter helpers; tracks _sessionMax (initial deposit = full bar)
  • _applySessionUI drives setMeterVisible and setMeterBalance
  • Deposit polling success fires triggerMeterPulse("fill") and sets max
  • Topup success fires triggerMeterPulse("fill") and adjusts max
  • Job deduction fires triggerMeterPulse("drain")
  • Exports openSessionPanel() for click-to-open wiring
  • _clearSession hides meter

websocket.js

  • Handles session_balance_update WS event: updates fill and fires pulse

interaction.js

  • Adds registerClickTarget(group, callback) API
  • Works in FPS pointer-lock mode, non-lock desktop clicks, and mobile short taps

main.js

  • Wires power meter into init/animate/teardown cycle
  • Registers meter as click target → opens session panel
Fixes #17 ## What was done Adds a 3D glowing orb power meter to the Workshop scene that visualizes the session balance in real time. ### New file: `power-meter.js` - Transparent outer shell sphere + equatorial ring accent - Inner fill orb scales 0→1 with balance fraction - Lightning bolt flat overlay - Color interpolates red (empty) → yellow/orange (mid) → cyan (full) - Glowing PointLight that tracks fill level - DOM text label projected above the orb showing current sats - `triggerMeterPulse("fill")` — slow bright flash on payment received - `triggerMeterPulse("drain")` — quick flicker on job deduction - Gentle bob + slow Y-rotation animation ### `session.js` - Imports meter helpers; tracks `_sessionMax` (initial deposit = full bar) - `_applySessionUI` drives `setMeterVisible` and `setMeterBalance` - Deposit polling success fires `triggerMeterPulse("fill")` and sets max - Topup success fires `triggerMeterPulse("fill")` and adjusts max - Job deduction fires `triggerMeterPulse("drain")` - Exports `openSessionPanel()` for click-to-open wiring - `_clearSession` hides meter ### `websocket.js` - Handles `session_balance_update` WS event: updates fill and fires pulse ### `interaction.js` - Adds `registerClickTarget(group, callback)` API - Works in FPS pointer-lock mode, non-lock desktop clicks, and mobile short taps ### `main.js` - Wires power meter into init/animate/teardown cycle - Registers meter as click target → opens session panel
claude added 1 commit 2026-03-24 02:33:21 +00:00
feat: Session Power Meter — 3D balance visualizer (#17)
Some checks failed
CI / Typecheck & Lint (pull_request) Failing after 0s
Details
232a0ed9d2 
Add a glowing orb power meter to the Workshop scene that reflects the
session balance in real time.

- power-meter.js: new Three.js module — transparent outer shell,
  inner orb that scales 0→1 with fill fraction, lightning bolt overlay,
  point light and equator ring accent; DOM text label projected above
  the orb shows current sats. Color interpolates red→yellow→cyan.
  Pulses bright on 'fill' event, quick flicker on 'drain'.
- session.js: imports meter helpers; tracks _sessionMax (initial
  deposit); calls setMeterVisible/setMeterBalance in _applySessionUI;
  triggers fill/drain pulses on payment and job deduction; exports
  openSessionPanel() for click-to-open wiring; clears meter on
  _clearSession.
- websocket.js: handles session_balance_update WS event — updates
  fill level and fires pulse.
- interaction.js: adds registerClickTarget(group, callback) — wired
  for both FPS pointer-lock and non-lock modes and short taps.
- main.js: wires initPowerMeter/updatePowerMeter/disposePowerMeter
  into the build/animate/teardown cycle; registers meter as click
  target that opens the session panel.

Fixes #17

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Timmy commented 2026-03-24 02:53:04 +00:00
First-time contributor
Copy Link

Merge conflict. Rebase onto main and force-push. Power meter looks great — will merge once clean.

Merge conflict. Rebase onto main and force-push. Power meter looks great — will merge once clean.
Timmy commented 2026-03-24 03:00:49 +00:00
First-time contributor
Copy Link

Merge conflict. Queued #3: #80 > #93 > #109 > #110 > #112. Rebase after #93 lands.

Merge conflict. Queued #3: #80 > #93 > #109 > #110 > #112. Rebase after #93 lands.
Timmy commented 2026-03-24 03:09:14 +00:00
First-time contributor
Copy Link

LGTM. Power meter looks great. Rebase on main after earlier PRs land.

LGTM. Power meter looks great. Rebase on main after earlier PRs land.
Rockachopa requested changes 2026-03-30 17:06:37 +00:00
Rockachopa left a comment
First-time contributor
Copy Link

Code Review: [claude] Session Power Meter: 3D Balance Visualizer (#17)

Reviewer: Timmy (automated review)
Recommendation: REQUEST CHANGES (minor — code quality is high, needs rebase)

Summary

Adds a 3D glowing orb to the Workshop scene that visualizes session balance in real time. The orb fills proportionally to balance, pulses on payments, drains on deductions, and is clickable to open the session panel. ~325 lines of new frontend code.

Code Quality: A

Highlights:

  • power-meter.js is a self-contained Three.js module with clean init/update/dispose lifecycle
  • Smooth color interpolation: empty=red -> mid=orange/yellow -> full=cyan
  • Lightning bolt flat mesh as decorative overlay — nice touch
  • Proper resource cleanup in disposePowerMeter() (traverses group, disposes geometries and materials)
  • DOM label positioning via 3D-to-screen projection with behind-camera check
  • Module properly integrates with the existing interaction system via registerClickTarget
  • Gentle bob + slow rotation animation gives the orb life

Integration quality:

  • interaction.js extended with generic registerClickTarget() pattern — good reusable abstraction
  • Click handling works in both pointer-lock (FPS) and free-pointer modes
  • Session panel wired to open on meter click via openSessionPanel()
  • session.js extended with meter balance/pulse/visibility hooks at correct lifecycle points

Issues

  1. Not mergeable — Mergeable: False. Needs rebase.
  2. Legacy wizard-era PR from claude agent (March 24, stale).
  3. Hardcoded world position. METER_WORLD_POS = new THREE.Vector3(4.5, 0.85, 2.0) — works for the current scene layout but could break if the Workshop scene is rearranged. A config-driven approach would be more robust.
  4. Magic numbers. Fill lerp rate 0.06, pulse decay 0.022/0.040, estimated max sats 5000 — these work but should be named constants with comments explaining the tuning.
  5. Label DOM element created in body. document.body.appendChild(el) adds a fixed-position div. If multiple scenes/contexts exist, this could leak. The dispose handles it, but it's fragile.

What's Good

  • This is genuinely good Three.js code. Clean module boundaries, proper disposal, smooth animations.
  • The click target registration pattern is a useful abstraction for future interactive 3D objects.
  • The visual design (color gradient, pulse effects, lightning bolt) is thematic and polished.

Verdict

Excellent frontend code. Needs a rebase to merge. The pattern established here (registerClickTarget, 3D-to-DOM projection) is reusable infrastructure.

## Code Review: [claude] Session Power Meter: 3D Balance Visualizer (#17) **Reviewer:** Timmy (automated review) **Recommendation:** REQUEST CHANGES (minor — code quality is high, needs rebase) ### Summary Adds a 3D glowing orb to the Workshop scene that visualizes session balance in real time. The orb fills proportionally to balance, pulses on payments, drains on deductions, and is clickable to open the session panel. ~325 lines of new frontend code. ### Code Quality: A **Highlights:** - `power-meter.js` is a self-contained Three.js module with clean init/update/dispose lifecycle - Smooth color interpolation: empty=red -> mid=orange/yellow -> full=cyan - Lightning bolt flat mesh as decorative overlay — nice touch - Proper resource cleanup in `disposePowerMeter()` (traverses group, disposes geometries and materials) - DOM label positioning via 3D-to-screen projection with behind-camera check - Module properly integrates with the existing interaction system via `registerClickTarget` - Gentle bob + slow rotation animation gives the orb life **Integration quality:** - `interaction.js` extended with generic `registerClickTarget()` pattern — good reusable abstraction - Click handling works in both pointer-lock (FPS) and free-pointer modes - Session panel wired to open on meter click via `openSessionPanel()` - `session.js` extended with meter balance/pulse/visibility hooks at correct lifecycle points ### Issues 1. **Not mergeable** — `Mergeable: False`. Needs rebase. 2. **Legacy wizard-era PR** from claude agent (March 24, stale). 3. **Hardcoded world position.** `METER_WORLD_POS = new THREE.Vector3(4.5, 0.85, 2.0)` — works for the current scene layout but could break if the Workshop scene is rearranged. A config-driven approach would be more robust. 4. **Magic numbers.** Fill lerp rate `0.06`, pulse decay `0.022/0.040`, estimated max sats `5000` — these work but should be named constants with comments explaining the tuning. 5. **Label DOM element created in body.** `document.body.appendChild(el)` adds a fixed-position div. If multiple scenes/contexts exist, this could leak. The dispose handles it, but it's fragile. ### What's Good - This is genuinely good Three.js code. Clean module boundaries, proper disposal, smooth animations. - The click target registration pattern is a useful abstraction for future interactive 3D objects. - The visual design (color gradient, pulse effects, lightning bolt) is thematic and polished. ### Verdict Excellent frontend code. Needs a rebase to merge. The pattern established here (registerClickTarget, 3D-to-DOM projection) is reusable infrastructure.
ezra commented 2026-04-04 12:18:51 +00:00
First-time contributor
Copy Link

Ezra review: Agent-generated PR from claude. Appears to be from Replit Timmy Tower sessions. Alexander — merge or close at your discretion.

Ezra review: Agent-generated PR from claude. Appears to be from Replit Timmy Tower sessions. Alexander — merge or close at your discretion.
Some checks failed
CI / Typecheck & Lint (pull_request) Failing after 0s
Details
This pull request has changes conflicting with the target branch.
  • the-matrix/js/main.js
  • the-matrix/js/session.js
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin claude/issue-17:claude/issue-17
git checkout claude/issue-17
Sign in to join this conversation.
Reviewers
No Reviewers
Rockachopa
Labels
Clear labels
ai
backend
frontend
lightning
mobile
mobile
nostr
workshop
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude gemini replit
No Assignees
4 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: replit/timmy-tower#109
Delete Branch "claude/issue-17"

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?