Tetardtek
307feb711f
- Install tailwindcss @tailwindcss/vite zustand - useGameStore.ts : Zustand store wrappant economy.ts (tick, click, buy, prestige, buyNode, loadFromServer) - GameTick.tsx : composant timer 1s - GeneratorShop.tsx : boutique générateurs Tailwind (remplace Amelioration.jsx) - EvolutionTree, PrestigePanel, MilestoneBar : rewrite Zustand + Tailwind - Hud.jsx : rewrite Zustand + Tailwind (suppression Hud.scss) - BoutiqueCard, Achievements : migrés vers Zustand - Supprimé : WildCoin/ (4 fichiers), timer/Timer.jsx, useEconomy.ts, Hud.scss - WildCoinProvider retiré de main.jsx
44 lines
1.6 KiB
JavaScript
Executable File
44 lines
1.6 KiB
JavaScript
Executable File
// Hud.jsx — Stats HUD (Zustand)
|
|
import { useGameStore } from "../../store/useGameStore";
|
|
import { formatNumber } from "../../utils/formatNumber";
|
|
|
|
const formatTime = (time) => {
|
|
const hours = Math.floor(time / 3600);
|
|
const minutes = Math.floor((time % 3600) / 60);
|
|
const secs = time % 60;
|
|
return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
|
|
};
|
|
|
|
function Hud({ isVisible }) {
|
|
const resources = useGameStore((s) => s.state.resources);
|
|
const clickMultiplier = useGameStore((s) => s.state.clickMultiplier);
|
|
const productionPerSecond = useGameStore((s) => s.productionPerSecond);
|
|
const playSeconds = useGameStore((s) => s.playSeconds);
|
|
|
|
if (isVisible) return null;
|
|
|
|
return (
|
|
<div className="fixed top-20 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 px-6 py-3 rounded-xl bg-gray-900/90 backdrop-blur-sm text-white font-[var(--font)]">
|
|
<div className="flex gap-6 text-sm">
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-gray-400 text-xs">Temps</span>
|
|
<span>{formatTime(playSeconds)}</span>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-gray-400 text-xs">Têtards/s</span>
|
|
<span>{formatNumber(productionPerSecond)}</span>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-gray-400 text-xs">Ponte</span>
|
|
<span>{clickMultiplier}</span>
|
|
</div>
|
|
</div>
|
|
<div className="text-lg font-bold text-emerald-400">
|
|
{formatNumber(resources)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Hud;
|