mario/DEPLOY.md

# Guide de Déploiement

## Options de Déploiement

### 1. GitHub Pages (Gratuit)

**Prérequis** : Compte GitHub

**Étapes** :

1. Créez un repo GitHub et poussez le code :
```bash
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/VOTRE_USERNAME/mario-runner.git
git push -u origin main
```

2. Activez GitHub Pages :
   - Allez dans Settings → Pages
   - Source : GitHub Actions
   - Le workflow `.github/workflows/deploy.yml` est déjà configuré

3. Le jeu sera disponible sur : `https://VOTRE_USERNAME.github.io/mario-runner/`

**Note** : GitHub Pages utilise HTTPS automatiquement, donc le gyroscope iOS fonctionnera !

---

### 2. Netlify (Gratuit, recommandé)

**Prérequis** : Compte Netlify

**Méthode 1 : Drag & Drop**

1. Build le projet :
```bash
npm run build
```

2. Allez sur [netlify.com](https://www.netlify.com/)
3. Drag & drop le dossier `dist/` sur Netlify
4. Le jeu est déployé instantanément !

**Méthode 2 : CLI**

```bash
npm install -g netlify-cli
npm run build
netlify deploy --prod
```

**Méthode 3 : Git Integration**

1. Poussez sur GitHub
2. Connectez Netlify à votre repo
3. Configuration :
   - Build command: `npm run build`
   - Publish directory: `dist`
4. Déploiement automatique à chaque push

---

### 3. Vercel (Gratuit)

**Prérequis** : Compte Vercel

**Méthode CLI** :

```bash
npm install -g vercel
vercel
```

Suivez les instructions.

**Méthode Git** :

1. Poussez sur GitHub
2. Importez le projet sur [vercel.com](https://vercel.com)
3. Vercel détecte Vite automatiquement
4. Déploiement automatique

---

### 4. Self-Hosting (Serveur personnel)

**Avec un serveur Node.js** :

1. Build :
```bash
npm run build
```

2. Servez le dossier `dist/` avec n'importe quel serveur web :

**Option A : serve (simple)** :
```bash
npm install -g serve
serve -s dist -p 80
```

**Option B : nginx** :
```nginx
server {
    listen 80;
    server_name votredomaine.com;
    root /path/to/mario-runner/dist;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

**Option C : Apache** :
```apache
<VirtualHost *:80>
    DocumentRoot /path/to/mario-runner/dist
    <Directory /path/to/mario-runner/dist>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>
```

---

## Configuration PWA

Pour que le jeu fonctionne en mode PWA (installable) :

### 1. Créez les icônes

Générez les icônes 192x192 et 512x512 :
- Utilisez [pwabuilder.com/imageGenerator](https://www.pwabuilder.com/imageGenerator)
- Placez dans `public/icons/`

### 2. Service Worker

Créez `public/service-worker.js` :

```javascript
const CACHE_NAME = 'mario-runner-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/assets/index.js',
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});
```

### 3. Testez l'installation

1. Déployez sur HTTPS (GitHub Pages, Netlify, etc.)
2. Sur mobile :
   - iOS Safari : Partager → Sur l'écran d'accueil
   - Android Chrome : Menu → Installer l'application

---

## Test sur Mobile en Local

### Avec HTTPS (requis pour gyroscope iOS)

**Option 1 : ngrok** (recommandé)

```bash
npm install -g ngrok
npm run dev
# Dans un autre terminal :
ngrok http 3001
```

Vous obtiendrez une URL HTTPS : `https://xyz123.ngrok.io`

**Option 2 : localtunel**

```bash
npm install -g localtunnel
npm run dev
# Dans un autre terminal :
lt --port 3001
```

**Option 3 : Certificat SSL local**

Avec `mkcert` :

```bash
# Installation
brew install mkcert  # macOS
# ou apt install mkcert  # Linux

# Créer certificat
mkcert -install
mkcert localhost 127.0.0.1 ::1

# Modifier vite.config.ts
import { defineConfig } from 'vite';
import fs from 'fs';

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync('./localhost-key.pem'),
            cert: fs.readFileSync('./localhost.pem'),
        },
        host: true,
        port: 3000,
    },
});
```

---

## Optimisations Pré-Déploiement

### 1. Compression des Assets

Compressez les images :
```bash
npm install -D imagemin imagemin-pngquant
```

### 2. Minification

Déjà géré par Vite en mode production.

### 3. Analyse du Bundle

```bash
npm run build
npx vite-bundle-visualizer
```

---

## Vérification Post-Déploiement

### Checklist :

- [ ] Le jeu se charge correctement
- [ ] Les contrôles clavier fonctionnent (PC)
- [ ] Le gyroscope fonctionne (mobile HTTPS)
- [ ] Le bouton de saut fonctionne (mobile)
- [ ] Les collisions fonctionnent
- [ ] Le timer compte correctement
- [ ] L'orientation paysage est forcée
- [ ] La PWA est installable (optionnel)

### Outils de Test :

- **Chrome DevTools** : Device Mode pour simuler mobile
- **Lighthouse** : Auditer performance et PWA
- **WebPageTest** : Tester vitesse de chargement

---

## Problèmes Courants

### Le jeu ne se charge pas

- Vérifiez la console pour erreurs
- Vérifiez que tous les assets sont dans `public/`
- Vérifiez que le build a réussi : `npm run build`

### Le gyroscope ne fonctionne pas

- **iOS** : Nécessite HTTPS obligatoirement
- Vérifiez que la permission a été accordée
- Testez sur un vrai appareil (pas simulateur)

### Erreur 404 sur les routes

Configurez le serveur pour servir `index.html` pour toutes les routes.

**Netlify** : Créez `public/_redirects` :
```
/*    /index.html   200
```

**Vercel** : Créez `vercel.json` :
```json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
```

---

## Recommandation

Pour ce projet, je recommande **Netlify** :
- Gratuit
- HTTPS automatique
- Déploiement en drag & drop
- Bon support PWA
- Facile à utiliser

Commande rapide :
```bash
npm run build
npx netlify-cli deploy --prod --dir=dist
```