/* eslint-disable react/prop-types */
/* FieldReadings - animated count-up readings, instrument-panel layout. */
const { useState: frUseState, useEffect: frUseEffect, useRef: frUseRef } = React;
/* easeOutCubic for the count-up */
const easeOut = (t) => 1 - Math.pow(1 - t, 3);
/* Reading values can be numeric strings like "2,84" or "11" or "187".
We parse the trailing number, animate it from 0, and preserve formatting. */
const CountUp = ({ value, dur = 1400 }) => {
const ref = frUseRef(null);
const [shown, setShown] = frUseState(0); // 0..1
const [played, setPlayed] = frUseState(false);
frUseEffect(() => {
if (!ref.current || played) return;
const io = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting && !played) {
setPlayed(true);
const t0 = performance.now();
const tick = (t) => {
const u = Math.min(1, (t - t0) / dur);
setShown(easeOut(u));
if (u < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
io.disconnect();
}
}
}, { threshold: 0.4 });
io.observe(ref.current);
return () => io.disconnect();
}, [played, dur]);
// Parse "2,84" → integer 284 with 2 decimals; "11" → 11 with 0 decimals.
// FR style with comma decimal.
const sNum = String(value).trim();
const m = sNum.match(/^(\d+)(?:[,.](\d+))?$/);
if (!m) return {value};
const intp = m[1], frac = m[2] || "";
const N = parseInt(intp, 10) + (frac ? parseInt(frac, 10) / Math.pow(10, frac.length) : 0);
const current = N * shown;
const formatted = frac.length
? current.toFixed(frac.length).replace(".", ",")
: Math.round(current).toLocaleString("fr-FR").replace(/\s/g, " ");
return {formatted};
};
const Reading = ({ k, v, unit, sub, accent = "var(--fg-1)" }) => (
{k}
{unit && {unit}}
{sub &&
{sub}
}
);
const FieldReadings = () => (
Field readings
30 agents. 1 heure.
La conso et le coût attaquant sont mesurés (champ usage de
l'API OVH). Le coût défenseur est estimé (modèle TDP), donc le ratio reste
un ordre de grandeur, pas un chiffre exact.