GachaVerse
Jeu gacha/idle en React/TypeScript (Next.js App Router) avec Firebase pour le backend et Zustand pour l'état global.
Démarrage
npm install
npm run dev
Ouvre http://localhost:3000.
Scripts
npm run dev — serveur de développementnpm run build / npm run start — build de productionnpm run lint — ESLintnpm test / npm run test:watch — tests Vitest
Moniteur de performances (local)
Tableau de bord en direct des performances graphiques du jeu (FPS, temps de frame, long tasks, mémoire JS, nœuds DOM, animations actives, veille), sur http://localhost:4321.
npm run dev:perf — moniteur + serveur de développement (le plus simple)npm run perf — moniteur seul, à lancer à côté d'un serveur de dev démarré avec NEXT_PUBLIC_PERF_MONITOR=1npm run start:perf — moniteur + build de production instrumenté + next start (chiffres réalistes)
Le capteur (components/system/PerfReporter.tsx) n'est chargé qu'avec NEXT_PUBLIC_PERF_MONITOR=1, que dev:perf et start:perf posent eux-mêmes : un simple npm run dev ne l'active plus (plus d'erreurs ERR_CONNECTION_REFUSED dans la console quand le moniteur ne tourne pas), et un npm run build normal ne le contient pas. Port modifiable avec PERF_MONITOR_PORT (côté jeu : NEXT_PUBLIC_PERF_MONITOR_URL). Code : scripts/perf-monitor/.
Arborescence
app/ Routing Next.js (App Router) — peu de routes, l'app est quasi mono-page
components/
game/ Éléments de gameplay actif (zone de combat, animations, events)
pages/ Un composant par écran du jeu (Gacha, Collection, Forge, Prestige, ...)
layout/ Structure globale (layout du jeu, sidebar, auth, maintenance)
ui/ Composants réutilisables génériques (badges, tooltips, sprites...)
system/ Écrans et outils système (splash screen, onglet dupliqué, veille, capteur de perfs)
lib/
game/ Logique de jeu pure (formules, gacha, prestige, expéditions...), testée
firebase/ Accès aux données (sauvegarde, leaderboard, marketplace, sessions...)
store/ État global Zustand, découpé en slices par domaine (store/slices/)
hooks/ Hooks React custom (auth, sauvegarde cloud, tick DPS, toasts...)
types/ Types TypeScript partagés
scripts/ Scripts utilitaires (synchro des pseudos, moniteur de perfs perf-monitor/...)
public/ Assets statiques (sprites, sons, backgrounds)
Pattern général : séparation entre logique de jeu pure et testée (lib/game), état global (store), accès données (lib/firebase) et présentation (components).
Stack
Next.js 16 · React 19 · TypeScript · Zustand · Firebase · Tailwind CSS · Vitest
