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/create" 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>

                            <!-- Taille de la carte (en cases, orientation hexagonale) -->
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="bi bi-grid-3x3 me-1"></i>Taille de la carte (en cases) <span class="text-danger">*</span>
                                </label>

                                <!-- Presets hexagonaux (rayons 1..12) uniquement -->

                                <!-- Presets hexagonaux -->
                                <div id="hexPresets" class="mb-2">
                                    <label for="hexRadius" class="form-label small">Choisir une taille hexagonale</label>
                                    <select id="hexRadius" class="form-select" aria-label="Préréglages hexagonaux">
                                        <?php
                                        // Générer dynamiquement les presets rayon 1..15
                                        for ($r = 1; $r <= 15; $r++) {
                                            $count = 1 + 3 * $r * ($r + 1);
                                            $sel = $r === 2 ? ' selected' : '';
                                            // Affichage inversé : 'Rayon N (X cases)'
                                            echo "<option value=\"{$r}\"{$sel}>Rayon {$r} ({$count} cases)</option>\n";
                                        }
                                        ?>
                                    </select>
                                    <div id="hexInfo" class="form-text">Ex: 19 cases pour rayon 2. Les presets utilisent la formule 1 + 3R(R+1).</div>
                                </div>

                                <!-- Aperçu visuel simple -->
                                <div id="hexPreviewContainer" class="mb-3" aria-hidden="false">
                                    <label class="form-label small">Aperçu</label>
                                    <div id="hexPreview" style="width:100%;height:160px;border:1px solid #e9ecef;background:#fafafa;display:flex;align-items:center;justify-content:center;">
                                        <!-- SVG dessiné par JS -->
                                    </div>
                                </div>

                                <!-- Valeurs cachées synchronisées pour compatibilité backend -->
                                <input type="hidden" id="radiusInput" name="radius" value="2">
                            </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>
                                    <?php
                                    // Si le contrôleur a passé la liste des templates, utiliser celle-ci
                                    if (!empty($templates) && is_array($templates)) {
                                        foreach ($templates as $tid => $tmeta) {
                                            // n'afficher que les templates neutral, rural, urban selon demande
                                            if (!in_array($tid, ['neutral', 'rural', 'urban'])) continue;
                                            $label = htmlspecialchars($tmeta['name']);
                                            $desc = htmlspecialchars($tmeta['description'] ?? '');
                                            echo "<option value=\"{$tmeta['id']}\" title=\"{$desc}\">{$label}</option>\n";
                                        }
                                    } else {
                                        // Fallbacks
                                        echo "<option value=\"neutral\">Neutre</option>\n";
                                        echo "<option value=\"rural\">Paysage rural</option>\n";
                                        echo "<option value=\"urban\">Paysage urbain</option>\n";
                                    }
                                    ?>
                                </select>
                                <div class="form-text">Le modèle définit l'apparence de base de votre carte</div>
                            </div>

                            <!-- Définitions de tuiles (export JSON caché pour JS) -->
                            <?php
                            // Préparer les définitions de tuiles côté serveur pour les templates chargés
                            $tilesExport = [];
                            if (!empty($templates) && is_array($templates)) {
                                foreach ($templates as $tid => $tmeta) {
                                    if (empty($tmeta['class'])) continue; // pas de code chargé
                                    $class = $tmeta['class'];
                                    try {
                                        if (method_exists($class, 'tileDefinitions')) {
                                            $defs = $class::tileDefinitions();
                                            $tilesExport[$tid] = $defs;
                                        }
                                    } catch (Throwable $e) {
                                        // ignore
                                        $tilesExport[$tid] = [];
                                    }
                                }
                            }
                            ?>

                            <script id="templateTilesData" type="application/json">
                                <?= json_encode($tilesExport, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>
                            </script>
                            </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-2"></p>
                                        <div id="templateTiles" class="d-flex gap-2 justify-content-center flex-wrap">
                                            <!-- Les tuiles (petits carrés) seront injectées ici par JS -->
                                        </div>
                                    </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>
            </div>
        </div>
    </div>
</main>

<script src="/assets/js/pages/new-project.js"></script>

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