Projets
/
map-generator


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Map Editor</title>
    <style>
        body {
            margin: 20px;
            font-family: Arial, sans-serif;
        }
        .map-canvas-container {
            position: relative;
            overflow: hidden;
            height: 600px;
            background-color: #f8f9fa;
            border: 1px solid #ccc;
        }
        #mapCanvas {
            position: absolute;
            top: 0;
            left: 0;
            cursor: grab;
        }
        #mapLoading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hexagon {
            position: absolute;
            border: 1px solid #ddd;
            background-color: #fff;
            cursor: pointer;
            transition: background-color 0.2s;
        }
    </style>
</head>
<body>
    <h1>Test de l'éditeur de carte</h1>
    <div id="info"></div>
    
    <div class="map-canvas-container">
        <div id="mapCanvas">
            <!-- Les hexagones seront rendus ici -->
        </div>
        
        <div id="mapLoading">
            <div>Chargement de la carte...</div>
        </div>
    </div>

    <script>
        // Données de test
        const mapData = {
            "id": 5,
            "name": "Carte de test",
            "width": 5,
            "height": 5
        };
        const mapWidth = mapData.width;
        const mapHeight = mapData.height;

        // Configuration de l'éditeur de carte
        class MapEditor {
            constructor() {
                console.log('MapEditor: Initialisation en cours...');
                this.canvas = document.getElementById('mapCanvas');
                this.container = document.querySelector('.map-canvas-container');
                this.tileSize = 30;
                
                console.log('Canvas element:', this.canvas);
                console.log('Container element:', this.container);
                
                if (!this.canvas || !this.container) {
                    console.error('Éléments manquants!');
                    return;
                }
                
                this.init();
            }
            
            init() {
                console.log('Début de l\'initialisation...');
                this.setupCanvas();
                this.renderMap();
                this.hideLoading();
                console.log('Initialisation terminée');
            }
            
            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('Canvas dimensions:', canvasWidth, 'x', canvasHeight);
            }
            
            renderMap() {
                console.log('Début du rendu...');
                this.canvas.innerHTML = '';
                
                let hexCount = 0;
                for (let q = 0; q < mapWidth; q++) {
                    for (let r = 0; r < mapHeight; r++) {
                        this.renderHexagon(q, r);
                        hexCount++;
                    }
                }
                console.log(hexCount + ' hexagones créés');
                
                // Afficher les infos
                document.getElementById('info').innerHTML = 
                    `<p>✓ Carte: ${mapData.name}</p>
                    <p>✓ Dimensions: ${mapWidth} × ${mapHeight}</p>
                    <p>✓ Hexagones rendus: ${hexCount}</p>`;
            }
            
            renderHexagon(q, r) {
                const hex = document.createElement('div');
                hex.className = 'hexagon';
                hex.dataset.q = q;
                hex.dataset.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() {
                document.getElementById('mapLoading').style.display = 'none';
            }
        }

        // Initialiser
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM chargé');
            try {
                const editor = new MapEditor();
                console.log('MapEditor créé:', editor);
            } catch (error) {
                console.error('Erreur:', error);
                document.getElementById('info').innerHTML = 
                    `<p style="color: red;">❌ Erreur: ${error.message}</p>`;
            }
        });
    </script>
</body>
</html>