# 🔧 Guide de diagnostic - Carte qui ne s'affiche pas

## 📍 Étape 1 : Tester la page de test direct

Ouvrez cette URL dans votre navigateur :
**https://map-generator/test-direct.html**

### ✅ Si ça fonctionne :
- Vous devriez voir une grille d'hexagones 5×5
- Message vert : "✅ Succès! 25 hexagones créés (5×5)"
- Le problème est dans l'intégration avec le reste de l'application

### ❌ Si ça ne fonctionne pas :
- Problème de configuration du serveur ou du navigateur
- Ouvrez la console (F12) et notez les erreurs

---

## 📍 Étape 2 : Vérifier la console du navigateur

1. Ouvrez **https://map-generator/?load=5**
2. Appuyez sur **F12** pour ouvrir les outils de développement
3. Allez dans l'onglet **Console**

### Messages attendus dans la console :

```
Script MapEditor chargé
État du DOM: interactive (ou complete)
mapData défini: true
Initialisation de MapEditor...
Données de la carte: {id: 5, name: "Carte de test", ...}
mapCanvas element: <div id="mapCanvas">
map-canvas-container: <div class="map-canvas-container">
MapEditor: Initialisation en cours...
Canvas element: <div id="mapCanvas">
Container element: <div class="map-canvas-container">
Map dimensions: 5 x 5
MapEditor: Début du rendu de la carte...
MapEditor: 25 hexagones créés
MapEditor: Initialisation terminée avec succès
MapEditor créé avec succès: MapEditor {...}
```

---

## 📍 Étape 3 : Vérifier les éléments DOM

Dans la console, tapez ces commandes et notez les résultats :

```javascript
// 1. Vérifier si les éléments existent
document.getElementById('mapCanvas')
document.querySelector('.map-canvas-container')

// 2. Vérifier les styles
const canvas = document.getElementById('mapCanvas');
console.log('Canvas styles:', {
    width: canvas.style.width,
    height: canvas.style.height,
    position: canvas.style.position
});

// 3. Vérifier combien d'hexagones ont été créés
document.querySelectorAll('.hexagon').length

// 4. Vérifier le contenu du canvas
document.getElementById('mapCanvas').innerHTML.length
```

---

## 📍 Étape 4 : Vérifier visuellement

### Inspecter l'élément
1. Clic droit sur la zone grise où la carte devrait apparaître
2. Choisir "Inspecter l'élément"
3. Chercher `<div id="mapCanvas">`
4. Vérifier s'il contient des divs avec la classe `hexagon`

### Vérifier les dimensions
Dans l'inspecteur, regardez les styles calculés du `#mapCanvas` :
- **width** : devrait être environ 225px (pour une carte 5×5)
- **height** : devrait être environ 216px
- **position** : devrait être `absolute`

---

## 📍 Étape 5 : Problèmes courants

### Problème 1 : Le loader reste affiché
**Symptôme** : On voit "Chargement de la carte..." indéfiniment
**Solution** : Le JavaScript ne s'exécute pas. Vérifiez la console pour les erreurs.

### Problème 2 : Zone grise vide
**Symptôme** : Pas de loader, pas de carte, juste du gris
**Cause possible** : Les hexagones sont créés mais invisibles
**Solution** : Vérifier les styles CSS (z-index, overflow, etc.)

### Problème 3 : Erreur "Cannot read properties of null"
**Symptôme** : Erreur JavaScript dans la console
**Cause** : Le DOM n'est pas complètement chargé
**Solution** : Le script a été modifié pour gérer ce cas

### Problème 4 : "mapData is not defined"
**Symptôme** : Erreur dans la console
**Cause** : La carte n'a pas été chargée côté serveur
**Solution** : Vérifier que l'ID existe dans la base de données

---

## 📍 Étape 6 : Test avec l'ID 1

Essayez avec une autre carte :
**https://map-generator/?load=1**

Si ça fonctionne, le problème est spécifique à la carte ID 5.

---

## 📍 Étape 7 : Cartes disponibles

Pour voir toutes les cartes disponibles :
**https://map-generator/projects**

Les IDs sont affichés entre parenthèses à côté des noms.

---

## 🆘 Que faire ensuite ?

### Si rien ne fonctionne :
1. Copier **TOUS** les messages de la console
2. Noter quel navigateur vous utilisez (Chrome, Firefox, Safari, Edge)
3. Faire une capture d'écran de l'inspecteur d'éléments montrant le `#mapCanvas`
4. Vérifier les erreurs PHP dans les logs du serveur

### Logs serveur MAMP :
- Erreurs Apache : `/Applications/MAMP/logs/apache_error.log`
- Erreurs PHP : `/Applications/MAMP/logs/php_error.log`

---

## 🎯 Checklist rapide

- [ ] La page de test direct fonctionne (test-direct.html)
- [ ] La console n'affiche aucune erreur rouge
- [ ] Les éléments `mapCanvas` et `map-canvas-container` existent
- [ ] Le script MapEditor se charge après jQuery et Bootstrap
- [ ] Les données `mapData` sont définies
- [ ] Le loader disparaît
- [ ] Les hexagones sont créés (25 pour une carte 5×5)
- [ ] Les hexagones sont visibles à l'écran

---

## 🔍 Commandes utiles dans la console

```javascript
// Forcer l'initialisation
if (typeof MapEditor !== 'undefined' && typeof mapData !== 'undefined') {
    window.testEditor = new MapEditor();
}

// Afficher tous les hexagones
document.querySelectorAll('.hexagon').forEach((hex, i) => {
    hex.style.backgroundColor = `hsl(${i * 15}, 70%, 70%)`;
});

// Vérifier l'état de chargement
console.log('État DOM:', document.readyState);
console.log('mapData:', typeof mapData !== 'undefined' ? mapData : 'NON DÉFINI');
console.log('MapEditor:', typeof MapEditor !== 'undefined' ? 'DÉFINI' : 'NON DÉFINI');
```