🔧 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

Ouvrez https://map-generator/?load=5
Appuyez sur F12 pour ouvrir les outils de développement
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 :

// 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

Clic droit sur la zone grise où la carte devrait apparaître
Choisir "Inspecter l'élément"
Chercher <div id="mapCanvas">
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 :

Copier TOUS les messages de la console
Noter quel navigateur vous utilisez (Chrome, Firefox, Safari, Edge)
Faire une capture d'écran de l'inspecteur d'éléments montrant le #mapCanvas
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

// 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');

GUIDE-DIAGNOSTIC.md 5.2 KB Permalink History Raw