File size: 4,846 Bytes
9d2d895 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | import { Panel } from './Panel';
import { t } from '@/services/i18n';
import {
COUNTER_METRICS,
getCounterValue,
formatCounterValue,
type CounterMetric,
} from '@/services/humanity-counters';
import { isDesktopRuntime } from '@/services/runtime';
/**
* CountersPanel -- Worldometer-style ticking counters showing positive global metrics.
*
* Displays 6 metrics (births, trees, vaccines, graduates, books, renewable MW)
* with values ticking via requestAnimationFrame. Values are calculated
* from absolute time (seconds since midnight UTC * per-second rate) to avoid
* drift across tabs, throttling, or background suspension.
*
* No API calls needed -- all data derived from hardcoded annual rates.
*/
export class CountersPanel extends Panel {
private animFrameId: number | null = null;
private valueElements: Map<string, HTMLElement> = new Map();
private readonly desktopMode = isDesktopRuntime();
private visibilityHandler: (() => void) | null = null;
private lastDesktopUpdateAt = 0;
private readonly desktopUpdateIntervalMs = 250;
constructor() {
super({ id: 'counters', title: 'Live Counters', trackActivity: false, infoTooltip: t('components.counters.infoTooltip') });
this.createCounterGrid();
if (this.desktopMode) {
this.visibilityHandler = () => {
if (document.hidden) {
this.stopTicking();
return;
}
this.lastDesktopUpdateAt = 0;
this.startTicking();
};
document.addEventListener('visibilitychange', this.visibilityHandler);
}
this.startTicking();
}
/**
* Build the 6 counter cards and insert them into the panel content area.
*/
private createCounterGrid(): void {
const grid = document.createElement('div');
grid.className = 'counters-grid';
for (const metric of COUNTER_METRICS) {
const card = this.createCounterCard(metric);
grid.appendChild(card);
}
// Clear loading state and append the grid
this.content.innerHTML = '';
this.content.appendChild(grid);
}
/**
* Create a single counter card with icon, value, label, and source.
*/
private createCounterCard(metric: CounterMetric): HTMLElement {
const card = document.createElement('div');
card.className = 'counter-card';
const icon = document.createElement('div');
icon.className = 'counter-icon';
icon.textContent = metric.icon;
const value = document.createElement('div');
value.className = 'counter-value';
value.dataset.counter = metric.id;
// Set initial value from absolute time
value.textContent = formatCounterValue(
getCounterValue(metric),
metric.formatPrecision,
);
const label = document.createElement('div');
label.className = 'counter-label';
label.textContent = metric.label;
const source = document.createElement('div');
source.className = 'counter-source';
source.textContent = metric.source;
card.appendChild(icon);
card.appendChild(value);
card.appendChild(label);
card.appendChild(source);
// Store reference for fast 60fps updates
this.valueElements.set(metric.id, value);
return card;
}
/**
* Start the requestAnimationFrame animation loop.
* Each tick recalculates all counter values from absolute time.
*/
public startTicking(): void {
if (this.animFrameId !== null) return; // Already ticking
if (this.desktopMode && document.hidden) return;
this.animFrameId = requestAnimationFrame(this.tick);
}
private stopTicking(): void {
if (this.animFrameId !== null) {
cancelAnimationFrame(this.animFrameId);
this.animFrameId = null;
}
}
/**
* Animation tick -- arrow function for correct `this` binding.
* Updates all 6 counter values using textContent (not innerHTML).
* Desktop runtime is throttled to reduce background CPU usage.
*/
private tick = (): void => {
if (this.desktopMode) {
const now = performance.now();
if ((now - this.lastDesktopUpdateAt) < this.desktopUpdateIntervalMs) {
this.animFrameId = requestAnimationFrame(this.tick);
return;
}
this.lastDesktopUpdateAt = now;
}
for (const metric of COUNTER_METRICS) {
const el = this.valueElements.get(metric.id);
if (el) {
const value = getCounterValue(metric);
el.textContent = formatCounterValue(value, metric.formatPrecision);
}
}
this.animFrameId = requestAnimationFrame(this.tick);
};
/**
* Clean up animation frame and call parent destroy.
*/
public destroy(): void {
this.stopTicking();
if (this.visibilityHandler) {
document.removeEventListener('visibilitychange', this.visibilityHandler);
this.visibilityHandler = null;
}
this.valueElements.clear();
super.destroy();
}
}
|