Tetardtek
c673ae0da5
Chaque stat du header, le titre Générateurs et Prestige ont un tooltip natif (title) qui explique à quoi sert la valeur — aide le nouveau joueur sans alourdir l'interface pour les habitués.
40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
// CockpitHeader.tsx — Dashboard résumé toujours visible en haut du cockpit
|
|
|
|
import { useGameStore } from "../store/useGameStore";
|
|
import { formatNumber } from "../utils/formatNumber";
|
|
import { getClickGain } from "../core/economy";
|
|
|
|
export function CockpitHeader() {
|
|
const productionPerSecond = useGameStore((s) => s.productionPerSecond);
|
|
const state = useGameStore((s) => s.state);
|
|
const { prestigeMultiplier, ancestralDna, prestigeCount } = state;
|
|
const clickGain = getClickGain(state);
|
|
|
|
return (
|
|
<div className="gp gp-cockpit-header">
|
|
<div className="gp-stat" title="Têtards générés automatiquement chaque seconde">
|
|
<span className="gp-label">Prod/s</span>
|
|
<span className="gp-value gp-accent-green">
|
|
{formatNumber(productionPerSecond)}
|
|
</span>
|
|
</div>
|
|
<div className="gp-stat" title="Têtards gagnés à chaque clic sur le têtard">
|
|
<span className="gp-label">/clic</span>
|
|
<span className="gp-value">{formatNumber(clickGain)}</span>
|
|
</div>
|
|
<div className="gp-stat" title="Multiplicateur global — augmente avec le prestige">
|
|
<span className="gp-label">Mult</span>
|
|
<span className="gp-value">x{prestigeMultiplier.toFixed(1)}</span>
|
|
</div>
|
|
<div className="gp-stat" title="ADN Ancestral — monnaie de l'Arbre d'Évolution (gagné au prestige)">
|
|
<span className="gp-label">ADN</span>
|
|
<span className="gp-value gp-accent-purple">{ancestralDna}</span>
|
|
</div>
|
|
<div className="gp-stat" title="Nombre de prestiges effectués (Nouvelles Générations)">
|
|
<span className="gp-label">Gén.</span>
|
|
<span className="gp-value">{prestigeCount}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|