feat: tooltips explicatifs sur le cockpit, générateurs et prestige

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.
This commit is contained in:
2026-03-20 16:24:41 +01:00
parent 2db3c12fc6
commit c673ae0da5
3 changed files with 8 additions and 8 deletions

View File

@@ -12,25 +12,25 @@ export function CockpitHeader() {
return ( return (
<div className="gp gp-cockpit-header"> <div className="gp gp-cockpit-header">
<div className="gp-stat"> <div className="gp-stat" title="Têtards générés automatiquement chaque seconde">
<span className="gp-label">Prod/s</span> <span className="gp-label">Prod/s</span>
<span className="gp-value gp-accent-green"> <span className="gp-value gp-accent-green">
{formatNumber(productionPerSecond)} {formatNumber(productionPerSecond)}
</span> </span>
</div> </div>
<div className="gp-stat"> <div className="gp-stat" title="Têtards gagnés à chaque clic sur le têtard">
<span className="gp-label">/clic</span> <span className="gp-label">/clic</span>
<span className="gp-value">{formatNumber(clickGain)}</span> <span className="gp-value">{formatNumber(clickGain)}</span>
</div> </div>
<div className="gp-stat"> <div className="gp-stat" title="Multiplicateur global — augmente avec le prestige">
<span className="gp-label">Mult</span> <span className="gp-label">Mult</span>
<span className="gp-value">x{prestigeMultiplier.toFixed(1)}</span> <span className="gp-value">x{prestigeMultiplier.toFixed(1)}</span>
</div> </div>
<div className="gp-stat"> <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-label">ADN</span>
<span className="gp-value gp-accent-purple">{ancestralDna}</span> <span className="gp-value gp-accent-purple">{ancestralDna}</span>
</div> </div>
<div className="gp-stat"> <div className="gp-stat" title="Nombre de prestiges effectués (Nouvelles Générations)">
<span className="gp-label">Gén.</span> <span className="gp-label">Gén.</span>
<span className="gp-value">{prestigeCount}</span> <span className="gp-value">{prestigeCount}</span>
</div> </div>

View File

@@ -13,8 +13,8 @@ export function GeneratorShop() {
return ( return (
<div className="gp"> <div className="gp">
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span className="gp-title">Générateurs</span> <span className="gp-title" title="Achète des générateurs pour produire des têtards automatiquement">Générateurs</span>
<span className="gp-value gp-accent-green">{formatNumber(productionPerSecond)}/s</span> <span className="gp-value gp-accent-green" title="Production totale par seconde">{formatNumber(productionPerSecond)}/s</span>
</div> </div>
{generators.map((gen) => { {generators.map((gen) => {
const cost = generatorCost(gen); const cost = generatorCost(gen);

View File

@@ -24,7 +24,7 @@ export function PrestigePanel() {
return ( return (
<div className="gp"> <div className="gp">
<span className="gp-title">Prestige</span> <span className="gp-title" title="Recommence à zéro en échange d'un bonus permanent — tes têtards et générateurs sont réinitialisés mais tu gagnes de l'ADN et un multiplicateur">Prestige</span>
{canPrestige ? ( {canPrestige ? (
<div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}> <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
<span className="gp-value gp-accent-purple"> <span className="gp-value gp-accent-purple">