davide
ad02b274d2
Add Vite + React + TypeScript setup, package.json (react-router-dom, socket.io-client), global CSS, app entry point and environment config. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contrabbandieri MMO — Client
Prototipo web mobile-first del client di gioco. Parla con il server (../server) via REST (/api/v1) e Socket.IO (/ws).
Nota:
Blueprint_Client.mdconteneva una copia del blueprint server, quindi le scelte client (Vite + React, tema noir) sono state concordate a parte. Il client è volutamente "stupido": tutte le regole di gioco vivono sul server.
Stack
Vite · React 19 · TypeScript · React Router · socket.io-client · CSS puro (nessuna UI library)
Avvio
Il server deve essere attivo (vedi ../server/README.md). Poi:
npm install
npm run dev
Apri http://localhost:5173 (per provarlo da telefono sulla stessa rete: http://<ip-del-pc>:5173).
Se il server non è su localhost:3000, crea un .env da .env.example con VITE_API_URL.
Schermate
- Login/Registrazione — JWT salvato in localStorage.
- Covo (home) — profilo, denaro, reputazione, barra XP, città corrente, eventi attivi, accesso alle classifiche, logout.
- Mercato — listino della città corrente (prezzo acquisto/vendita), eventi che influenzano i prezzi, modale compra/vendi con quantità; si auto-aggiorna a ogni tick del server via
market:updated. - Missioni — missioni attive con countdown e riscossione (esito successo/fallimento con ricompense), missioni disponibili con difficoltà, rischio, durata e merce richiesta.
- Zaino — inventario con quantità e peso totale.
- Città — elenco città con rischio, economia e costo viaggio.
- Classifiche — denaro e reputazione.
Realtime
Alla login il client apre la connessione Socket.IO autenticata col JWT. Eventi gestiti: market:updated (refresh listino), mission:completed, worldEvent:started, worldEvent:ended (toast di notifica).
Struttura
src/
├── main.tsx / App.tsx # bootstrap, routing, route guard
├── config.ts # VITE_API_URL
├── api/ # http client, tipi DTO, endpoint tipizzati
├── auth/AuthContext.tsx # sessione (token+player), localStorage, socket lifecycle
├── realtime/socket.ts # singleton socket.io-client
├── components/ # Layout (topbar+bottom nav), Toast, Countdown
├── screens/ # una schermata per route
├── shared/format.ts # formattazione denaro/durate/etichette
└── styles/global.css # tema noir (variabili CSS)
Build di produzione
npm run build # typecheck + bundle in dist/
npm run preview