POL Mickaël
62ae4c54eb
- Design system glassmorphism avec Material Design 3 - 14 composants : App, Sidebar, Dashboard, EnclosView, DragodindeCard, AccouplementView, ReapproView, InventaireView, WorkflowsView, StatistiquesView, ParametresView, UpdateBanner, Toast, ConfirmModal - UndoManager pour annulation des actions destructives (Ctrl+Z) - Toast notifications (success/error) avec bouton Annuler - Modale de confirmation glassmorphism (remplace confirm() natif) - Export/import global des données depuis Paramètres - Maquettes HTML/PNG de la refonte graphique Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
/**
|
|
* GaugePill — minimal wrapper for gauge configuration display in EnclosView.
|
|
* Renders a gauge level bar with tier badge and "vide en" info.
|
|
*/
|
|
|
|
import type { GaugeType } from '@domain/value-objects/GaugeType';
|
|
import { GAUGE_DEFS } from '@domain/value-objects/GaugeType';
|
|
import { tierNum, tierRate } from '@domain/value-objects/Tier';
|
|
import { timeToGain } from '@domain/services/GaugeCalculator';
|
|
import { fmt } from '@presentation/helpers/format';
|
|
|
|
export class GaugePill {
|
|
private el: HTMLElement | null = null;
|
|
|
|
render(container: HTMLElement, gaugeId: string, value: number, max: number): void {
|
|
this.el = document.createElement('div');
|
|
this.el.className = 'gauge-pill';
|
|
container.appendChild(this.el);
|
|
this.update(value, max);
|
|
}
|
|
|
|
update(value: number, max: number): void {
|
|
if (!this.el) return;
|
|
const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
|
|
const gid = this.el.dataset.gaugeId as GaugeType | undefined;
|
|
const def = gid ? GAUGE_DEFS[gid] : null;
|
|
const tn = tierNum(value);
|
|
const tr = tierRate(value);
|
|
const empty = timeToGain(value, value);
|
|
const emptyStr = empty === Infinity ? '∞' : fmt(empty);
|
|
|
|
this.el.innerHTML = `
|
|
<div class="gauge-pill-header">
|
|
${def ? `<span>${def.icon} ${def.label}</span>` : ''}
|
|
<span class="tier-badge">Tier ${tn} · ±${tr}/tick</span>
|
|
</div>
|
|
<div class="gauge-pill-bar">
|
|
<div class="gauge-pill-fill" style="width:${pct.toFixed(1)}%"></div>
|
|
</div>
|
|
<div class="gauge-pill-info">Vide en ${emptyStr}</div>
|
|
`;
|
|
}
|
|
|
|
destroy(): void {
|
|
this.el?.remove();
|
|
this.el = null;
|
|
}
|
|
}
|