map-generator/public/assets/js/pages/new-project.js

// JS pour la view projects/new
(function(){
    var templates = {
        desert: { title: 'Paysage désertique', description: 'Terrain sablonneux avec dunes et oasis occasionnelles', emoji: '🏜️' },
        coastal: { title: 'Paysage littoral', description: 'Côtes avec plages, falaises et éléments marins', emoji: '🏖️' },
        mountain: { title: 'Paysage de montagne', description: 'Reliefs escarpés avec sommets enneigés et vallées', emoji: '🏔️' },
        rural: { title: 'Paysage rural', description: 'Champs, forêts et éléments agricoles traditionnels', emoji: '🌾' },
        urban: { title: 'Paysage urbain', description: 'Villes avec bâtiments, routes et infrastructures modernes', emoji: '🏙️' }
    };

    var mapTemplateEl = document.getElementById('mapTemplate');
    if (mapTemplateEl) {
        mapTemplateEl.addEventListener('change', function() {
            var selectedTemplate = this.value;
            var previewDiv = document.getElementById('templatePreview');
            var templateImage = document.getElementById('templateImage');
            var templateTitle = document.getElementById('templateTitle');
            var templateDescription = document.getElementById('templateDescription');

            if (selectedTemplate && templates[selectedTemplate]) {
                var t = templates[selectedTemplate];
                templateImage.innerHTML = '<span style="font-size: 3rem;">' + t.emoji + '</span>';
                templateTitle.textContent = t.title;
                templateDescription.textContent = t.description;
                previewDiv.style.display = 'block';
            } else {
                previewDiv.style.display = 'none';
            }
        });
    }
    // Gestion des presets hexagonaux et synchronisation du radius
    var hexPresets = document.getElementById('hexPresets');
    var hexRadius = document.getElementById('hexRadius');

    function hexCellsFromRadius(r) {
        // Formule nombre d'hexagones pour un rayon r : 1 + 3r(r+1)
        r = parseInt(r, 10) || 0;
        return 1 + 3 * r * (r + 1);
    }

    // Mettre à jour le champ radius caché quand le preset change
    if (hexRadius) {
        hexRadius.addEventListener('change', function() {
            var r = parseInt(this.value, 10) || 0;
            var radiusInput = document.getElementById('radiusInput');
            if (radiusInput) radiusInput.value = r;
            // redraw preview
            drawHexPreview(r);
        });
    }

    // Dessiner un aperçu SVG exact en maillage hexagonal (pointy-top)
    function drawHexPreview(radius) {
        var container = document.getElementById('hexPreview');
        if (!container) return;
        container.innerHTML = '';

        var svgNS = 'http://www.w3.org/2000/svg';
        var svg = document.createElementNS(svgNS, 'svg');
        svg.setAttribute('width', '100%');
        svg.setAttribute('height', '100%');
        svg.setAttribute('viewBox', '0 0 100 100');

        // Générer coordonnées axiales des hexagones pour un rayon donné
        var cells = [];
        for (var q = -radius; q <= radius; q++) {
            var r1 = Math.max(-radius, -q - radius);
            var r2 = Math.min(radius, -q + radius);
            for (var r = r1; r <= r2; r++) {
                cells.push({q: q, r: r});
            }
        }

        // Paramètres visuels : on va centrer et scaler dans le viewBox 0..100
        var N = cells.length;

        // Pour positionner les hex, utiliser conversion axial -> pixel pour pointy-top
        function hexToPixel(q, r, size) {
            var x = size * Math.sqrt(3) * (q + r/2);
            var y = size * 3/2 * r;
            return { x: x, y: y };
        }

        // Taille estimée : calculer bounding box non-scalée
        var size = 1; // unité
        var points = cells.map(function(c) { return hexToPixel(c.q, c.r, size); });
        var xs = points.map(p => p.x);
        var ys = points.map(p => p.y);
        var minX = Math.min.apply(null, xs);
        var maxX = Math.max.apply(null, xs);
        var minY = Math.min.apply(null, ys);
        var maxY = Math.max.apply(null, ys);

        var width = maxX - minX || 1;
        var height = maxY - minY || 1;

        // Définir un scale pour remplir le viewBox (tous en %) avec marges
        var padding = 6; // % padding
        var avail = 100 - 2*padding;
        var scale = Math.min(avail / width, avail / height);

        // Size (pixel unit in viewBox coords)
        var hexSize = scale * 0.9; // ajustement visuel

        // Center offset
        var offsetX = (100 - (width * scale)) / 2 - minX * scale;
        var offsetY = (100 - (height * scale)) / 2 - minY * scale;

        // Fonction pour dessiner un hexagon pointy-top at (cx,cy) with size s
        function hexPoints(cx, cy, s) {
            var pts = [];
            for (var i = 0; i < 6; i++) {
                var angle_deg = 60 * i - 30;
                var angle_rad = Math.PI / 180 * angle_deg;
                var x = cx + s * Math.cos(angle_rad);
                var y = cy + s * Math.sin(angle_rad);
                pts.push(x + ',' + y);
            }
            return pts.join(' ');
        }

        // Draw each hex
        cells.forEach(function(c, idx) {
            var p = hexToPixel(c.q, c.r, size);
            var cx = p.x * scale + offsetX;
            var cy = p.y * scale + offsetY;
            var s = hexSize / 2; // visual half-size

            var poly = document.createElementNS(svgNS, 'polygon');
            poly.setAttribute('points', hexPoints(cx, cy, s));
            poly.setAttribute('fill', '#e9ecef');
            poly.setAttribute('stroke', '#6c757d');
            poly.setAttribute('stroke-width', Math.max(0.2, s * 0.05));
            poly.setAttribute('opacity', '0.95');
            svg.appendChild(poly);
        });

        container.appendChild(svg);
    }

    // initial draw (respecter la valeur par défaut du select)
    if (hexRadius) drawHexPreview(parseInt(hexRadius.value,10));

    var form = document.getElementById('newProjectForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            var name = (document.getElementById('mapName').value || '').trim();
            var radius = parseInt((document.getElementById('radiusInput') || {}).value, 10) || 0;

            if (!name) {
                alert('Veuillez saisir un nom pour votre carte.');
                e.preventDefault();
                return;
            }
            // Validation radius (1..15)
            if (radius < 1 || radius > 15) {
                alert('Le rayon doit être compris entre 1 et 15.');
                e.preventDefault();
                return;
            }

            // Log pour debug
            console.log('Création du projet (radius):', { name: name, radius: radius, template: document.getElementById('mapTemplate').value });
        });
    }
})();