# 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.md` conteneva 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:

```bash
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

```bash
npm run build    # typecheck + bundle in dist/
npm run preview
```