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

// JS pour la view projects/new
(function(){
    var templates = {
        neutral: { title: 'Neutre', description: 'Template neutre', emoji: '🔲' },
        rural: { title: 'Paysage rural', description: 'Champs et forêts', emoji: '🌾' },
        urban: { title: 'Paysage urbain', description: 'Villes, bâtiments et routes', emoji: '🏙️' }
    };

    var mapTemplateEl = document.getElementById('mapTemplate');
    // Lire les tileDefinitions injectées côté serveur
    var tilesDataEl = document.getElementById('templateTilesData');
    var tilesData = {};
    if (tilesDataEl) {
        try {
            tilesData = JSON.parse(tilesDataEl.textContent || '{}');
        } catch (e) {
            tilesData = {};
        }
    }

    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');
            var templateTilesContainer = document.getElementById('templateTiles');

            if (!selectedTemplate) {
                previewDiv.style.display = 'none';
                return;
            }

            // Render title/description from static map or fallback
            var staticMeta = templates[selectedTemplate] || null;
            if (staticMeta) {
                templateImage.innerHTML = '<span style="font-size: 3rem;">' + (staticMeta.emoji || '🎲') + '</span>';
                templateTitle.textContent = staticMeta.title || '';
                templateDescription.textContent = staticMeta.description || '';
            } else {
                templateImage.innerHTML = '';
                templateTitle.textContent = '';
                templateDescription.textContent = '';
            }

            // Render tiles from tilesData if present
            templateTilesContainer.innerHTML = '';
            var defs = tilesData[selectedTemplate] || [];
            if (Array.isArray(defs) && defs.length > 0) {
                defs.forEach(function(td) {
                    var tileEl = document.createElement('div');
                    tileEl.className = 'd-flex align-items-center gap-2';
                    tileEl.style.margin = '0 .25rem';

                    // miniature : si un asset est fourni, essayer d'afficher l'SVG via <img>
                    var swatch = document.createElement('div');
                    swatch.style.width = '28px';
                    swatch.style.height = '20px';
                    swatch.style.border = '1px solid rgba(0,0,0,0.08)';
                    swatch.style.borderRadius = '3px';
                    swatch.style.overflow = 'hidden';

                    if (td.asset) {
                        var img = document.createElement('img');
                        img.src = td.asset;
                        img.alt = td.name || td.id || '';
                        img.style.width = '100%';
                        img.style.height = '100%';
                        img.style.objectFit = 'cover';
                        img.style.display = 'block';
                        // Si l'image ne charge pas (chemin non servi), on affiche un fond couleur
                        img.onerror = function() {
                            this.remove();
                            swatch.style.background = td.color || '#ccc';
                        };
                        swatch.appendChild(img);
                    } else {
                        swatch.style.background = td.color || '#ccc';
                    }

                    var label = document.createElement('div');
                    label.style.fontSize = '0.85rem';
                    label.style.color = '#333';
                    label.textContent = td.name || td.id || '';

                    var wrapper = document.createElement('div');
                    wrapper.style.display = 'flex';
                    wrapper.style.flexDirection = 'column';
                    wrapper.style.alignItems = 'center';
                    wrapper.style.minWidth = '60px';

                    wrapper.appendChild(swatch);
                    wrapper.appendChild(label);
                    templateTilesContainer.appendChild(wrapper);
                });
            } else {
                // pas de définitions => message court
                var msg = document.createElement('div');
                msg.className = 'text-muted small';
                msg.textContent = 'Aucune définition de tuiles disponible pour ce modèle.';
                templateTilesContainer.appendChild(msg);
            }

            previewDiv.style.display = 'block';
        });
    }
    // 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 });
        });
    }
})();