# 🐭 Mice! - Mobile Version

## Caratteristiche Mobile

Il gioco è stato adattato per dispositivi mobile con le seguenti caratteristiche:

### 📱 Layout Responsive con Bootstrap 5

- **Desktop (≥768px)**: Layout a due colonne con canvas a sinistra e controlli a destra
- **Mobile (<768px)**: Layout verticale con controlli touch sotto il canvas

### 🎮 Controlli Touch

#### Pad Direzionale (D-Pad)
- **Freccia Su**: Movimento in alto
- **Freccia Giù**: Movimento in basso
- **Freccia Sinistra**: Movimento a sinistra
- **Freccia Destra**: Movimento a destra

#### Pulsanti Azione
- **💣 Bomb (Spazio)**: Piazza una bomba
- **⚠️ Mine (M)**: Piazza una mina
- **☁️ Gas (G)**: Rilascia gas velenoso
- **☢️ Nuclear (N)**: Bomba nucleare (una volta per partita)
- **⏸️ Pause (P)**: Metti in pausa il gioco

### 🎨 Design Adattivo

- Canvas responsive che si adatta alla larghezza dello schermo
- Pulsanti touch ottimizzati per il tocco (60px di altezza minima)
- Feedback visivo su touch (scale animation)
- Interfaccia dark theme ottimizzata per mobile

### 🔧 Ottimizzazioni

- `user-scalable=no` per prevenire lo zoom accidentale
- `touch-action: none` sui controlli per prevenire lo scroll durante il gioco
- Prevenzione del menu contestuale su long press
- Eventi sia touch che mouse per compatibilità con desktop

## Test

Per testare su mobile:

1. Avvia un server web locale:
   ```bash
   python -m http.server 8000
   ```

2. Apri il browser sul tuo smartphone e naviga a:
   ```
   http://[IL-TUO-IP-LOCALE]:8000/index.html
   ```

3. Verifica:
   - [ ] I controlli touch sono visibili solo su mobile
   - [ ] Il D-Pad risponde al tocco
   - [ ] I pulsanti azione funzionano correttamente
   - [ ] Il canvas si adatta correttamente
   - [ ] Non c'è zoom accidentale durante il gioco

## Compatibilità Browser

- ✅ Chrome/Edge Mobile (Android/iOS)
- ✅ Safari Mobile (iOS)
- ✅ Firefox Mobile (Android)
- ✅ Samsung Internet

## Note Tecniche

### Simulazione Eventi Tastiera

I controlli touch simulano eventi `KeyboardEvent` nativi per garantire compatibilità con il codice Python/Pygame esistente:

```javascript
function simulateKeyPress(key, type = 'keydown') {
    const event = new KeyboardEvent(type, {
        key: key,
        code: key === ' ' ? 'Space' : `Key${key.toUpperCase()}`,
        keyCode: key.charCodeAt(0),
        which: key.charCodeAt(0),
        bubbles: true,
        cancelable: true
    });
    document.dispatchEvent(event);
    canvas.dispatchEvent(event);
}
```

### Bootstrap Components

- **Grid System**: `container-fluid`, `row`, `col-*` per layout responsive
- **Modal**: Per la creazione profilo
- **Form Controls**: Input, select, checkbox con stili dark
- **Progress Bar**: Per indicare il caricamento degli asset
- **Icons**: Bootstrap Icons per le frecce direzionali

## Miglioramenti Futuri

- [ ] Supporto vibrazione per feedback tattile
- [ ] Joystick virtuale con movimento analogico
- [ ] Gesture swipe per movimento rapido
- [ ] Orientamento landscape automatico su mobile
- [ ] PWA manifest per installazione come app nativa
- [ ] Service worker per gioco offline