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
100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
// EvolutionTree.tsx — Arbre d'Évolution permanent (jamais reset)
|
|
// Visible après le premier prestige (prestigeCount >= 1)
|
|
|
|
import React from "react";
|
|
import { useGameStore } from "../store/useGameStore";
|
|
import { canBuyEvolutionNode } from "../core/economy";
|
|
import type { EvolutionNode } from "../core/economy";
|
|
|
|
const EFFECT_DESCRIPTIONS: Record<string, (value: number) => string> = {
|
|
click_multiplier: (v) => `x${v} puissance de Ponte`,
|
|
production_multiplier: (v) => `x${v} production tous générateurs`,
|
|
start_bonus: (v) => `+${v} têtards au début de chaque run`,
|
|
unlock_generator: () => `Débloque le Lac Mystique dès le début`,
|
|
achievement_scaling: (v) => `+${(v * 100).toFixed(0)}% production par succès`,
|
|
};
|
|
|
|
function NodeCard({
|
|
node,
|
|
canBuy,
|
|
onBuy,
|
|
}: {
|
|
node: EvolutionNode;
|
|
canBuy: boolean;
|
|
onBuy: () => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`flex flex-col gap-2 p-3 rounded-lg border text-sm transition-colors ${
|
|
node.unlocked
|
|
? "border-emerald-500/50 bg-emerald-950/30"
|
|
: canBuy
|
|
? "border-amber-500/50 bg-amber-950/20"
|
|
: "border-gray-700/50 bg-gray-800/30 opacity-50"
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-white font-semibold">{node.name}</span>
|
|
<span className="text-xs text-gray-400">
|
|
{node.unlocked ? "Débloqué" : `${node.cost} ADN`}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-gray-300">
|
|
{EFFECT_DESCRIPTIONS[node.effect](node.value)}
|
|
</p>
|
|
{!node.unlocked && (
|
|
<button
|
|
disabled={!canBuy}
|
|
onClick={onBuy}
|
|
className={`px-3 py-1 rounded text-xs font-medium transition-colors cursor-pointer ${
|
|
canBuy
|
|
? "bg-amber-600 hover:bg-amber-500 text-white"
|
|
: "bg-gray-700 text-gray-500 cursor-not-allowed"
|
|
}`}
|
|
>
|
|
{canBuy ? "Débloquer" : "Verrouillé"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function EvolutionTree() {
|
|
const state = useGameStore((s) => s.state);
|
|
const buyNode = useGameStore((s) => s.buyNode);
|
|
const { evolutionTree, prestigeCount } = state;
|
|
|
|
if (prestigeCount < 1) return null;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 p-4 rounded-xl bg-gray-900/80 backdrop-blur-sm max-w-md w-full">
|
|
<div className="flex justify-between items-center">
|
|
<h3 className="text-lg font-bold text-white">Arbre d'Évolution</h3>
|
|
<span className="text-sm text-amber-300">{state.ancestralDna} ADN</span>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{evolutionTree.map((node, index) => (
|
|
<React.Fragment key={node.id}>
|
|
{index > 0 && (
|
|
<div
|
|
className={`text-center text-xs ${
|
|
evolutionTree[index - 1].unlocked
|
|
? "text-emerald-400"
|
|
: "text-gray-600"
|
|
}`}
|
|
>
|
|
|
|
|
</div>
|
|
)}
|
|
<NodeCard
|
|
node={node}
|
|
canBuy={canBuyEvolutionNode(state, node.id)}
|
|
onBuy={() => buyNode(node.id)}
|
|
/>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|