Function updateTotalPointsDisplay

examples/worker-rendering/main.ts:222–261

* Updates the total points display to show actual rendered points or calculated from inputs. * * Behavior: * - When actualCount is provided: Shows the live/actual count from state.totalPointsGenerated * - When actualCount is undefined: Calculates from input fields (pointCount × seriesCount) *

(actualCount?: number)

 * @param actualCount Optional actual count from state. If not provided, calculates from inputs.
 */
function updateTotalPointsDisplay(actualCount?: number): void {
  // Throttle updates to prevent jank during high-frequency streaming
  const now = performance.now();
  if (actualCount !== undefined && now - lastDisplayUpdate < DISPLAY_UPDATE_THROTTLE_MS) {
    return;
  }
  lastDisplayUpdate = now;

  const totalPoints = actualCount !== undefined 
    ? actualCount 
    : (parseInt((document.getElementById('pointCount') as HTMLInputElement).value) || 0) *
      (parseInt((document.getElementById('seriesCount') as HTMLInputElement).value) || 0);

  const valueEl = document.getElementById('totalPointsValue');
  const hintEl = document.getElementById('totalPointsHint');
  
  if (!valueEl || !hintEl) return;

  // Format the full number with commas
  const formattedNumber = formatNumber(totalPoints);
  
  // Format the abbreviated version
  const abbreviatedNumber = formatAbbreviatedNumber(totalPoints);
  
  // Update display
  valueEl.textContent = formattedNumber;
  hintEl.textContent = `${abbreviatedNumber} points`;

  // Warning thresholds
  if (totalPoints > 1_000_000_000) {
    // Extreme: > 1B points
    valueEl.setAttribute('data-warning', 'extreme');
  } else if (totalPoints > 100_000_000) {
    // High: > 100M points
    valueEl.setAttribute('data-warning', 'true');
  } else {
    // Normal
    valueEl.setAttribute('data-warning', 'false');
  }
}

// ============================================================================
// Data Generation