Projets
/
map-generator


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test Direct - Map Editor</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { padding: 20px; font-family: Arial, sans-serif; }
        #info { padding: 10px; background: #e3f2fd; border-radius: 5px; margin-bottom: 20px; }
        .map-canvas-container {
            position: relative;
            overflow: hidden;
            height: 600px;
            background-color: #f8f9fa;
            border: 2px solid #333;
        }
        #mapCanvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        .hexagon {
            position: absolute;
            border: 1px solid #666;
            background-color: #fff;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .hexagon:hover {
            background-color: #e3f2fd;
        }
        #mapLoading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>🗺️ Test Direct - Map Editor</h1>
    <div id="info">Chargement en cours...</div>
    
    <div class="map-canvas-container">
        <div id="mapCanvas"></div>
        <div id="mapLoading">⏳ Chargement de la carte...</div>
    </div>

    <script>
        console.log('=== TEST DIRECT MAP EDITOR ===');
        
        // Données de test
        const mapData = {"id":5,"name":"Carte de test","width":5,"height":5};
        const mapWidth = mapData.width;
        const mapHeight = mapData.height;

        console.log('1. mapData:', mapData);
        console.log('2. Dimensions:', mapWidth, 'x', mapHeight);

        class MapEditor {
            constructor() {
                console.log('3. MapEditor constructor appelé');
                this.canvas = document.getElementById('mapCanvas');
                this.container = document.querySelector('.map-canvas-container');
                this.tileSize = 40;
                
                console.log('4. canvas:', this.canvas);
                console.log('5. container:', this.container);
                
                if (!this.canvas || !this.container) {
                    console.error('❌ Éléments manquants!');
                    document.getElementById('info').innerHTML = '❌ <strong>ERREUR:</strong> Éléments DOM non trouvés!';
                    return;
                }
                
                this.init();
            }
            
            init() {
                console.log('6. init() appelé');
                this.setupCanvas();
                this.renderMap();
                this.hideLoading();
                console.log('7. init() terminé');
            }
            
            setupCanvas() {
                const hexWidth = this.tileSize * 1.5;
                const hexHeight = this.tileSize * Math.sqrt(3);
                
                const canvasWidth = (mapWidth + 0.5) * hexWidth;
                const canvasHeight = (mapHeight + 0.5) * hexHeight;
                
                this.canvas.style.width = canvasWidth + 'px';
                this.canvas.style.height = canvasHeight + 'px';
                
                console.log('8. Canvas configuré:', canvasWidth, 'x', canvasHeight);
            }
            
            renderMap() {
                console.log('9. renderMap() appelé');
                this.canvas.innerHTML = '';
                
                let count = 0;
                for (let q = 0; q < mapWidth; q++) {
                    for (let r = 0; r < mapHeight; r++) {
                        this.renderHexagon(q, r);
                        count++;
                    }
                }
                
                console.log('10. Hexagones créés:', count);
                document.getElementById('info').innerHTML = 
                    `✅ <strong>Succès!</strong> ${count} hexagones créés (${mapWidth}×${mapHeight})`;
            }
            
            renderHexagon(q, r) {
                const hex = document.createElement('div');
                hex.className = 'hexagon';
                hex.dataset.q = q;
                hex.dataset.r = r;
                hex.title = `Q:${q}, R:${r}`;
                
                const x = q * this.tileSize * 1.5;
                const y = r * this.tileSize * Math.sqrt(3) + (q % 2) * this.tileSize * Math.sqrt(3) / 2;
                
                hex.style.left = x + 'px';
                hex.style.top = y + 'px';
                hex.style.width = this.tileSize + 'px';
                hex.style.height = this.tileSize + 'px';
                hex.style.clipPath = 'polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%)';
                
                hex.addEventListener('click', () => {
                    alert(`Hexagone cliqué: Q=${q}, R=${r}`);
                });
                
                this.canvas.appendChild(hex);
            }
            
            hideLoading() {
                const loading = document.getElementById('mapLoading');
                if (loading) {
                    loading.style.display = 'none';
                    console.log('11. Loader masqué');
                }
            }
        }

        // INITIALISATION IMMÉDIATE (pas de DOMContentLoaded)
        console.log('12. Création de MapEditor...');
        try {
            const editor = new MapEditor();
            console.log('13. ✅ MapEditor créé avec succès!');
        } catch (error) {
            console.error('14. ❌ Erreur:', error);
            document.getElementById('info').innerHTML = 
                `❌ <strong>ERREUR:</strong> ${error.message}`;
        }
        
        console.log('=== FIN DU TEST ===');
    </script>
</body>
</html>