timmy-tower/the-matrix/js/power-meter.js

/**
 * power-meter.js — 3D Session Power Meter
 *
 * A glowing orb that fills proportionally to the session balance.
 * - Pulses brightly on payment received
 * - Drains visibly on job cost deduction
 * - Visible only when a funded session is active
 * - Clicking the meter opens the session panel
 */

import * as THREE from 'three';

// ── World position (bottom-right corner, visible from default camera) ──────────
const METER_WORLD_POS = new THREE.Vector3(4.5, 0.85, 2.0);
const DEFAULT_MAX_SATS = 5000;

// ── Module state ───────────────────────────────────────────────────────────────
let _scene         = null;
let _meterGroup    = null;
let _innerOrb      = null;
let _outerShell    = null;
let _boltMesh      = null;
let _orbMat        = null;
let _shellMat      = null;
let _meterLight    = null;
let _labelEl       = null;

let _fillFraction   = 0;     // 0..1, currently displayed fill
let _targetFill     = 0;     // 0..1, desired fill
let _pulseIntensity = 0;     // 0..1, extra brightness from pulse
let _pulseDecay     = 0;     // per-frame decay rate
let _visible        = false;
let _maxSats        = DEFAULT_MAX_SATS;
let _currentSats    = 0;

// ── Public API ─────────────────────────────────────────────────────────────────

export function initPowerMeter(scene) {
  _scene = scene;
  _labelEl = _createLabelEl();

  _meterGroup = new THREE.Group();
  _meterGroup.position.copy(METER_WORLD_POS);
  _meterGroup.visible = false;

  // Outer transparent shell
  _shellMat = new THREE.MeshPhysicalMaterial({
    color: 0x00aacc,
    emissive: 0x003344,
    emissiveIntensity: 0.4,
    transparent: true,
    opacity: 0.18,
    roughness: 0.05,
    metalness: 0.15,
    side: THREE.DoubleSide,
  });
  _outerShell = new THREE.Mesh(new THREE.SphereGeometry(0.48, 24, 18), _shellMat);
  _meterGroup.add(_outerShell);

  // Equatorial ring accent
  const ringMat = new THREE.MeshBasicMaterial({
    color: 0x00ccff,
    transparent: true,
    opacity: 0.55,
  });
  const ring = new THREE.Mesh(new THREE.TorusGeometry(0.48, 0.012, 8, 40), ringMat);
  ring.rotation.x = Math.PI / 2;
  _meterGroup.add(ring);

  // Inner fill orb — scales with balance
  _orbMat = new THREE.MeshStandardMaterial({
    color: 0x00ffcc,
    emissive: 0x00ffcc,
    emissiveIntensity: 1.4,
    roughness: 0.05,
    transparent: true,
    opacity: 0.90,
  });
  _innerOrb = new THREE.Mesh(new THREE.SphereGeometry(0.38, 20, 16), _orbMat);
  _innerOrb.scale.setScalar(0.01);
  _meterGroup.add(_innerOrb);

  // Lightning bolt — flat shape rendered in front of sphere
  _boltMesh = _makeBolt();
  _boltMesh.position.set(0, 0, 0.50);
  _meterGroup.add(_boltMesh);

  // Point light — intensity tracks balance + pulse
  _meterLight = new THREE.PointLight(0x00ccff, 0.0, 6);
  _meterGroup.add(_meterLight);

  scene.add(_meterGroup);
  return _meterGroup;
}

/**
 * Update balance and target fill level.
 * @param {number} sats        Current balance in satoshis
 * @param {number} [maxSats]   Session deposit cap (sets the "full" reference)
 */
export function setMeterBalance(sats, maxSats) {
  _currentSats = Math.max(0, sats);
  if (maxSats !== undefined && maxSats > 0) _maxSats = maxSats;
  _targetFill = Math.min(1, _currentSats / _maxSats);
  if (_labelEl) _labelEl.textContent = `${_currentSats} ⚡`;
}

/**
 * Fire a pulse animation on the meter.
 * @param {'fill'|'drain'} type
 */
export function triggerMeterPulse(type) {
  if (type === 'fill') {
    _pulseIntensity = 1.0;
    _pulseDecay     = 0.022; // slow bright flash
  } else {
    _pulseIntensity = 0.45;
    _pulseDecay     = 0.040; // quick drain flicker
  }
}

/** Show or hide the power meter and its text label. */
export function setMeterVisible(visible) {
  _visible = visible;
  if (_meterGroup) _meterGroup.visible = visible;
  if (_labelEl) _labelEl.style.display = visible ? 'block' : 'none';
  if (!visible) {
    _pulseIntensity = 0;
    _fillFraction   = 0;
    _targetFill     = 0;
    if (_innerOrb) _innerOrb.scale.setScalar(0.01);
    if (_meterLight) _meterLight.intensity = 0;
  }
}

/** Returns the Three.js Group for raycasting. */
export function getMeterGroup() {
  return _meterGroup;
}

/**
 * Called every animation frame.
 * @param {number} now       performance.now() value
 * @param {THREE.Camera} camera
 * @param {THREE.WebGLRenderer} renderer
 */
export function updatePowerMeter(now, camera, renderer) {
  if (!_meterGroup || !_visible) return;

  const t = now * 0.001;

  // Smooth fill toward target
  _fillFraction += (_targetFill - _fillFraction) * 0.06;

  const s = Math.max(0.01, _fillFraction * 0.94);
  _innerOrb.scale.setScalar(s);

  // Colour interpolation: empty=red → mid=orange/yellow → full=cyan
  _updateOrbColor(_fillFraction, _pulseIntensity);

  // Pulse decay
  if (_pulseIntensity > 0) {
    _pulseIntensity = Math.max(0, _pulseIntensity - _pulseDecay);
  }

  // Point light
  _meterLight.intensity = _fillFraction * 1.6 + _pulseIntensity * 4.5;

  // Shell emissive pulse
  _shellMat.emissiveIntensity = 0.3 + _pulseIntensity * 1.8 + _fillFraction * 0.35;

  // Gentle bob + slow rotation
  _meterGroup.position.y = METER_WORLD_POS.y + Math.sin(t * 1.4) * 0.06;
  _meterGroup.rotation.y = t * 0.35;

  // Bolt scale pulses with balance and on payment
  const boltS = 1.0 + _pulseIntensity * 0.55 + Math.sin(t * 3.2) * 0.05;
  _boltMesh.scale.setScalar(boltS);

  // DOM label
  if (_labelEl && camera && renderer) {
    _updateLabelPosition(camera, renderer);
  }
}

export function disposePowerMeter() {
  if (_meterGroup && _scene) {
    _scene.remove(_meterGroup);
    _meterGroup.traverse(child => {
      if (child.geometry) child.geometry.dispose();
      if (child.material) {
        const mats = Array.isArray(child.material) ? child.material : [child.material];
        mats.forEach(m => m.dispose());
      }
    });
    _meterGroup = null;
  }
  if (_labelEl) {
    _labelEl.remove();
    _labelEl = null;
  }
  _scene = null;
}

// ── Internals ──────────────────────────────────────────────────────────────────

function _makeBolt() {
  const shape = new THREE.Shape();
  shape.moveTo( 0.075,  0.28);
  shape.lineTo(-0.030,  0.04);
  shape.lineTo( 0.040,  0.04);
  shape.lineTo(-0.075, -0.28);
  shape.lineTo( 0.030, -0.04);
  shape.lineTo(-0.040, -0.04);
  shape.closePath();

  const mat = new THREE.MeshBasicMaterial({
    color: 0xffee00,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.95,
  });
  return new THREE.Mesh(new THREE.ShapeGeometry(shape), mat);
}

function _updateOrbColor(fill, pulse) {
  let r, g, b;
  if (fill < 0.5) {
    const k = fill * 2;          // 0→1
    r = 1.0 - k * 0.30;          // 1.00 → 0.70
    g = k * 0.70;                 // 0.00 → 0.70
    b = k * 0.20;                 // 0.00 → 0.20
  } else {
    const k = (fill - 0.5) * 2;  // 0→1
    r = 0.70 - k * 0.70;         // 0.70 → 0.00
    g = 0.70 + k * 0.30;         // 0.70 → 1.00
    b = 0.20 + k * 0.80;         // 0.20 → 1.00
  }

  // Pulse brightens toward white
  const pr = r + pulse * (1 - r);
  const pg = g + pulse * (1 - g);
  const pb = b + pulse * (1 - b);

  _orbMat.color.setRGB(pr, pg, pb);
  _orbMat.emissive.setRGB(pr * 0.8, pg * 0.8, pb * 0.8);
  _orbMat.emissiveIntensity = 1.0 + fill * 0.8 + pulse * 2.5;

  _meterLight.color.setRGB(pr, pg, pb);
}

function _createLabelEl() {
  const el = document.createElement('div');
  el.style.cssText = [
    'position:fixed',
    'pointer-events:none',
    'color:#00ffee',
    'font-size:11px',
    'font-family:monospace',
    'font-weight:bold',
    'text-align:center',
    'text-shadow:0 0 6px #00ffcc,0 0 14px #00aaff',
    'display:none',
    'z-index:50',
    'transform:translateX(-50%)',
    'white-space:nowrap',
  ].join(';');
  document.body.appendChild(el);
  return el;
}

function _updateLabelPosition(camera, renderer) {
  const canvas = renderer.domElement;
  const rect   = canvas.getBoundingClientRect();

  // Project a point slightly above the orb center
  const worldPos = METER_WORLD_POS.clone();
  worldPos.y += 0.72;
  worldPos.project(camera);

  if (worldPos.z > 1) {          // behind camera
    _labelEl.style.display = 'none';
    return;
  }

  _labelEl.style.display = 'block';
  const x = rect.left + ( worldPos.x *  0.5 + 0.5) * rect.width;
  const y = rect.top  + (-worldPos.y *  0.5 + 0.5) * rect.height;
  _labelEl.style.left = `${x}px`;
  _labelEl.style.top  = `${y}px`;
}