map-generator/app/Views/projects/new.php

<?php
/**
 * Vue de création d'un nouveau projet
 */
include __DIR__ . '/../partials/header.php';
?>

<main class="main-content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                <!-- En-tête de la page -->
                <div class="d-flex align-items-center mb-4">
                    <div>
                        <h1 class="h3 mb-0">
                            <i class="bi bi-plus-circle me-2"></i>Nouveau projet
                        </h1>
                        <p class="text-muted mb-0">Créez une nouvelle carte personnalisée</p>
                    </div>
                </div>

                <!-- Formulaire de création -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-pencil-square me-2"></i>Configuration du projet
                        </h5>
                    </div>
                    <div class="card-body">
                        <form id="newProjectForm" action="/projects" method="POST">
                            <!-- Nom de la carte -->
                            <div class="mb-3">
                                <label for="mapName" class="form-label">
                                    <i class="bi bi-tag me-1"></i>Nom de la carte <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="mapName" name="name" required
                                       placeholder="Ex: Ma belle carte" maxlength="100">
                                <div class="form-text">Choisissez un nom descriptif pour votre carte</div>
                            </div>

                            <!-- Dimensions de la carte -->
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="bi bi-aspect-ratio me-1"></i>Dimensions de la carte <span class="text-danger">*</span>
                                </label>
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <input type="number" class="form-control" id="mapWidth" name="width"
                                               placeholder="Largeur" min="50" max="500" value="50" required>
                                        <div class="form-text">Largeur en parcelle</div>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" class="form-control" id="mapHeight" name="height"
                                               placeholder="Hauteur" min="50" max="500" value="50" required>
                                        <div class="form-text">Hauteur en parcelle</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Description -->
                            <div class="mb-3">
                                <label for="mapDescription" class="form-label">
                                    <i class="bi bi-textarea me-1"></i>Description
                                </label>
                                <textarea class="form-control" id="mapDescription" name="description" rows="3"
                                          placeholder="Décrivez votre carte (optionnel)" maxlength="500"></textarea>
                                <div class="form-text">Ajoutez une description pour vous souvenir du but de cette carte</div>
                            </div>

                            <!-- Modèles -->
                            <div class="mb-4">
                                <label for="mapTemplate" class="form-label">
                                    <i class="bi bi-palette me-1"></i>Modèle de départ <span class="text-danger">*</span>
                                </label>
                                <select class="form-select" id="mapTemplate" name="template" required>
                                    <option value="" disabled selected>Choisissez un modèle</option>
                                    <option value="desert">🏜️ Paysage désertique</option>
                                    <option value="coastal">🏖️ Paysage littoral</option>
                                    <option value="mountain">🏔️ Paysage de montagne</option>
                                    <option value="rural">🌾 Paysage rural</option>
                                    <option value="urban">🏙️ Paysage urbain</option>
                                </select>
                                <div class="form-text">Le modèle définit l'apparence de base de votre carte</div>
                            </div>

                            <!-- Aperçu du modèle sélectionné -->
                            <div id="templatePreview" class="mb-4" style="display: none;">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <div id="templateImage" class="mb-2">
                                            <!-- L'image du modèle sera chargée ici via JavaScript -->
                                        </div>
                                        <h6 id="templateTitle"></h6>
                                        <p id="templateDescription" class="text-muted small mb-0"></p>
                                    </div>
                                </div>
                            </div>

                            <!-- Boutons d'action -->
                            <div class="d-flex gap-2 justify-content-end">
                                <a href="/" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-circle me-1"></i>Annuler
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle me-1"></i>Créer le projet
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Informations supplémentaires -->
                <div class="card mt-4">
                    <div class="card-body">
                        <h6 class="card-title">
                            <i class="bi bi-info-circle me-1"></i>Informations
                        </h6>
                        <ul class="list-unstyled small mb-0">
                            <li class="mb-2">
                                <i class="bi bi-dot me-2"></i>
                                <strong>Dimensions :</strong> Les dimensions recommandées sont entre 50x50 et 500x500 parcelles
                            </li>
                            <li class="mb-2">
                                <i class="bi bi-dot me-2"></i>
                                <strong>Modèles :</strong> Vous pourrez modifier l'apparence de l'arrière plan après la création du projet
                            </li>
                            <li class="mb-0">
                                <i class="bi bi-dot me-2"></i>
                                <strong>Sauvegarde :</strong> Votre projet sera automatiquement sauvegardé lors de la création
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
// Gestion de l'aperçu du modèle
document.getElementById('mapTemplate').addEventListener('change', function() {
    const selectedTemplate = this.value;
    const previewDiv = document.getElementById('templatePreview');
    const templateImage = document.getElementById('templateImage');
    const templateTitle = document.getElementById('templateTitle');
    const templateDescription = document.getElementById('templateDescription');

    if (selectedTemplate) {
        // Données des modèles
        const 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: '🏙️'
            }
        };

        const template = templates[selectedTemplate];
        templateImage.innerHTML = `<span style="font-size: 3rem;">${template.emoji}</span>`;
        templateTitle.textContent = template.title;
        templateDescription.textContent = template.description;
        previewDiv.style.display = 'block';
    } else {
        previewDiv.style.display = 'none';
    }
});

// Validation du formulaire
document.getElementById('newProjectForm').addEventListener('submit', function(e) {
    const name = document.getElementById('mapName').value.trim();
    const width = parseInt(document.getElementById('mapWidth').value);
    const height = parseInt(document.getElementById('mapHeight').value);

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

    // Ici vous pouvez ajouter la logique de création du projet
    console.log('Création du projet:', { name, width, height, template: document.getElementById('mapTemplate').value });
});
</script>

<?php
include __DIR__ . '/../partials/footer.php';
?>