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

    var form = document.getElementById('newProjectForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            var name = (document.getElementById('mapName').value || '').trim();
            var width = parseInt(document.getElementById('mapWidth').value, 10) || 0;
            var height = parseInt(document.getElementById('mapHeight').value, 10) || 0;

            if (!name) {
                alert('Veuillez saisir un nom pour votre carte.');
                e.preventDefault();
                return;
            }

            if (width < 100 || width > 2000 || height < 100 || height > 2000) {
                alert('Les dimensions doivent être comprises entre 100x100 et 2000x2000 pixels.');
                e.preventDefault();
                return;
            }

            console.log('Création du projet:', { name: name, width: width, height: height, template: document.getElementById('mapTemplate').value });
        });
    }
})();