diff --git a/Frontend/src/components/GeneratorShop.tsx b/Frontend/src/components/GeneratorShop.tsx index 12a3b0b..1817d01 100644 --- a/Frontend/src/components/GeneratorShop.tsx +++ b/Frontend/src/components/GeneratorShop.tsx @@ -6,35 +6,48 @@ import { formatNumber } from "../utils/formatNumber"; export function GeneratorShop() { const generators = useGameStore((s) => s.state.generators); const resources = useGameStore((s) => s.state.resources); + const productionPerSecond = useGameStore((s) => s.productionPerSecond); const buy = useGameStore((s) => s.buy); const generatorCost = useGameStore((s) => s.generatorCost); return ( -
-

Générateurs

+
+
+

Générateurs

+ + {formatNumber(productionPerSecond)}/s + +
{generators.map((gen) => { const cost = generatorCost(gen); const canAfford = resources >= cost; + const currentProd = gen.baseProduction * gen.owned; return (
- {gen.name} +
+ {gen.name} + {gen.owned > 0 && ( + x{gen.owned} + )} +
- +{gen.baseProduction}/s · x{gen.owned} + +{gen.baseProduction}/s chacun + {gen.owned > 0 && ` · ${formatNumber(currentProd)}/s total`}
+ ) : ( +

+ Atteins 1M têtards pour prestige +

)}
); diff --git a/Frontend/src/pages/Home.jsx b/Frontend/src/pages/Home.jsx index 0cd8189..f01d022 100755 --- a/Frontend/src/pages/Home.jsx +++ b/Frontend/src/pages/Home.jsx @@ -8,6 +8,7 @@ import { GeneratorShop } from "../components/GeneratorShop"; import { PrestigePanel } from "../components/PrestigePanel"; import { EvolutionTree } from "../components/EvolutionTree"; import { MilestoneBar } from "../components/MilestoneBar"; +import { ACHIEVEMENTS } from "../data/achievements"; import "../scss/home.scss"; export default function Home() { @@ -15,6 +16,9 @@ export default function Home() { const click = useGameStore((s) => s.click); const resources = useGameStore((s) => s.state.resources); const clickMultiplier = useGameStore((s) => s.state.clickMultiplier); + const productionPerSecond = useGameStore((s) => s.productionPerSecond); + const state = useGameStore((s) => s.state); + const prestigeMultiplier = state.prestigeMultiplier; const createParticle = useCallback((clientX, clientY) => { const particle = document.createElement("span"); @@ -114,8 +118,17 @@ export default function Home() { {/* Clicker area — centre */}
-
- {formatNumber(resources)} +
+
+ {formatNumber(resources)} +
+
+ {formatNumber(productionPerSecond)}/s + · + x{clickMultiplier} ponte + · + x{prestigeMultiplier.toFixed(1)} mult +
@@ -125,6 +138,9 @@ export default function Home() { + + {ACHIEVEMENTS.filter((a) => a.check(state)).length}/{ACHIEVEMENTS.length} succès + ); diff --git a/Frontend/src/pages/Landing.jsx b/Frontend/src/pages/Landing.jsx index 95b56bd..09ff074 100644 --- a/Frontend/src/pages/Landing.jsx +++ b/Frontend/src/pages/Landing.jsx @@ -11,8 +11,14 @@ export default function Landing() { content="Clickerz — Clicker idle dans le Tetard Universe. Fais éclore des têtards, évolue et domine le marais !" /> -
-
+
+ Têtard Clickerz +

Clickerz

diff --git a/Frontend/src/scss/home.scss b/Frontend/src/scss/home.scss index 4eda785..a97de3b 100755 --- a/Frontend/src/scss/home.scss +++ b/Frontend/src/scss/home.scss @@ -47,6 +47,53 @@ } } +// --- Stats bar sous le compteur --- + +.click-zone-stats { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.3rem; + pointer-events: none; + user-select: none; +} + +.stats-bar { + display: flex; + align-items: center; + gap: 0.4rem; + font-family: var(--font); + font-size: 0.85rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.7); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); +} + +.stats-sep { + opacity: 0.4; +} + +// --- Badge achievements sidebar --- + +.achieve-badge { + display: block; + text-align: center; + padding: 0.5rem; + border-radius: 0.5rem; + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.2); + font-family: var(--font); + font-size: 0.8rem; + font-weight: 500; + color: #6ee7b7; + text-decoration: none; + transition: all 0.15s ease; + + &:hover { + background: rgba(16, 185, 129, 0.2); + } +} + // --- Click feedback particle --- .click-particle {