feat: Ajouter un système dynamique de chargement des types de tuiles avec illustrations SVG et mise à jour des données de carte

.specstory/history/2025-10-13_19-23Z-erreur-de-syntaxe-lors-de-la-suppression-d-un-projet.md

@@ -253,3 +253,148 @@ Si le message persiste et que vous voulez vraiment le supprimer (bien que ce ne
 
 ---
 
+_**User (2025-10-13 19:51Z)**_
+
+Dans la view https://map-generator/?load=6 
+Change 5x5 par le rayon et le nombre de case
+
+<div class="d-flex align-items-center gap-2">
+                                        <h6 class="mb-0">
+                                            <i class="bi bi-map me-2"></i>Test Rural                                        </h6>
+                                        <span class="badge bg-info">
+                                            5 × 5                                        </span>
+                                    </div>
+
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
+```
+
+```
+Parfait ! J'ai modifié la vue `home.php` pour afficher le rayon et le nombre de cases au lieu des dimensions width × height.
+
+Maintenant, au lieu d'afficher "5 × 5", la vue affichera le rayon hexagonal et le nombre total de cases. Par exemple :
+- Pour une carte avec un rayon de 2 : "Rayon 2 (19 cases)"
+- Pour une carte avec un rayon de 1 : "Rayon 1 (7 cases)"
+
+Le calcul utilise la formule des grilles hexagonales : `1 + 3R(R+1)` où R est le rayon, et le rayon est déduit des dimensions stockées avec la formule `(width - 1) / 2`.
+
+Vous pouvez maintenant tester en visitant `https://map-generator/?load=6` pour voir le changement !
+
+---
+
+_**User (2025-10-13 19:54Z)**_
+
+Quand le sélection une tuile (hexagonale), je souhaite pouvoir y associer une illustration svg (mapModels/rural/assets/*.svg). Et remplacer la partie :
+
+<div class="tool-group" id="tile-type-tool" style="display: block;">
+            <h6><i class="bi bi-grid-1x2-fill me-1"></i>Type de tuile</h6>
+            <div id="tileTypeOptions" class="d-flex flex-column gap-2">
+                <!-- Boutons de types, chaque bouton contient une SVG représentative -->
+                <button type="button" class="btn btn-light tile-type-option d-flex align-items-center gap-2" data-type="neutral" title="Neutre" aria-label="Neutre">
+                    <!-- SVG simple pour neutre -->
+                    <svg width="36" height="24" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <rect x="1" y="1" width="34" height="22" rx="3" fill="#f8f9fa" stroke="#adb5bd"></rect>
+                        <circle cx="18" cy="12" r="6" fill="#6c757d"></circle>
+                    </svg>
+                    <span>Neutre</span>
+                </button>
+
+                <button type="button" class="btn btn-light tile-type-option d-flex align-items-center gap-2" data-type="rural" title="Rural" aria-label="Rural">
+                    <!-- SVG simple pour rural -->
+                    <svg width="36" height="24" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <rect x="1" y="1" width="34" height="22" rx="3" fill="#fff7e6" stroke="#f0ad4e"></rect>
+                        <path d="M6 18 L12 10 L18 18 Z" fill="#5cb85c"></path>
+                    </svg>
+                    <span>Rural</span>
+                </button>
+
+                <button type="button" class="btn btn-light tile-type-option d-flex align-items-center gap-2" data-type="urban" title="Urbain" aria-label="Urbain">
+                    <!-- SVG simple pour urbain -->
+                    <svg width="36" height="24" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <rect x="1" y="1" width="34" height="22" rx="3" fill="#e9ecef" stroke="#6c757d"></rect>
+                        <rect x="6" y="6" width="6" height="12" fill="#495057"></rect>
+                        <rect x="14" y="8" width="6" height="10" fill="#6c757d"></rect>
+                        <rect x="22" y="5" width="6" height="13" fill="#343a40"></rect>
+                    </svg>
+                    <span>Urbain</span>
+                </button>
+            </div>
+        </div>
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
+```
+
+```
+
+```
+
+```
+Parfait ! Le code fonctionne correctement. J'ai remplacé la section statique des types de tuiles par un système dynamique qui charge automatiquement toutes les illustrations SVG depuis le dossier ``.
+
+**Modifications apportées :**
+
+✅ **Chargement dynamique des SVG** : Le code PHP scanne automatiquement le dossier `` et trouve tous les fichiers `.svg`
+
+✅ **Génération automatique des boutons** : Pour chaque fichier SVG trouvé, un bouton est créé avec :
+- Le nom du fichier (sans extension) comme `data-type`
+- Le contenu SVG intégré et redimensionné (36x24px)
+- Un nom d'affichage formaté (tirets remplacés par des espaces, première lettre capitalisée)
+
+✅ **Types de tuiles disponibles** : 
+- Field (Champ)
+- Forest (Forêt) 
+- Road left (Route gauche)
+- Road right (Route droite)
+- Road straight (Route droite)
+- Villa
+
+**Résultat :** Quand vous sélectionnez une tuile hexagonale dans l'éditeur de carte, la barre latérale affiche maintenant ces 6 types de tuiles avec leurs illustrations SVG respectives, au lieu des anciens boutons statiques.
+
+Vous pouvez maintenant associer des illustrations spécifiques à chaque type de tuile en ajoutant simplement de nouveaux fichiers SVG dans le dossier `` !
+
+---
+
+_**User (2025-10-13 19:58Z)**_
+
+Attention, le type d'asset dépend du type de projet. Dans le projet https://map-generator/?load=6 c'est un map "rural"
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
+```
+
+```
+
+```
+
+```
+
+```
+
+```
+
+
+---
+
+_**User (2025-10-13 19:57Z)**_
+
+@agent Réessayer
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
+
+---
+

app/Controllers/HomeController.php

@@ -25,7 +25,12 @@ if (!class_exists('HomeController')) {
                 $mapId = (int) $_GET['load'];
                 
                 $map = MapModel::findMap($mapId);
-                if ($map) {
+                $mapRow = MapModel::getRowById($mapId);
+                if ($map && $mapRow) {
+                    // Récupérer le template depuis les données JSON
+                    $mapJsonData = json_decode($mapRow['data'], true) ?: [];
+                    $template = $mapJsonData['template'] ?? 'neutral';
+                    
                     $data['loaded_map'] = $map;
                     $data['map_data'] = [
                         'id' => $mapId,
@@ -34,7 +39,8 @@ if (!class_exists('HomeController')) {
                         'height' => $map->getHeight(),
                         'created_at' => $map->getCreatedAt(),
                         'updated_at' => $map->getUpdatedAt(),
-                        'statistics' => $map->getStatistics()
+                        'statistics' => $map->getStatistics(),
+                        'template' => $template
                     ];
                     $data['title'] = $map->getName() . ' - Map Generator';
                 } else {

app/Views/partials/tools-sidebar.php

@@ -25,35 +25,44 @@
         <div class="tool-group" id="tile-type-tool" style="display:none;">
             <h6><i class="bi bi-grid-1x2-fill me-1"></i>Type de tuile</h6>
             <div id="tileTypeOptions" class="d-flex flex-column gap-2">
-                <!-- Boutons de types, chaque bouton contient une SVG représentative -->
-                <button type="button" class="btn btn-light tile-type-option d-flex align-items-center gap-2" data-type="neutral" title="Neutre" aria-label="Neutre">
-                    <!-- SVG simple pour neutre -->
-                    <svg width="36" height="24" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                        <rect x="1" y="1" width="34" height="22" rx="3" fill="#f8f9fa" stroke="#adb5bd"/>
-                        <circle cx="18" cy="12" r="6" fill="#6c757d" />
-                    </svg>
-                    <span>Neutre</span>
-                </button>
-
-                <button type="button" class="btn btn-light tile-type-option d-flex align-items-center gap-2" data-type="rural" title="Rural" aria-label="Rural">
-                    <!-- SVG simple pour rural -->
-                    <svg width="36" height="24" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                        <rect x="1" y="1" width="34" height="22" rx="3" fill="#fff7e6" stroke="#f0ad4e"/>
-                        <path d="M6 18 L12 10 L18 18 Z" fill="#5cb85c" />
-                    </svg>
-                    <span>Rural</span>
-                </button>
-
-                <button type="button" class="btn btn-light tile-type-option d-flex align-items-center gap-2" data-type="urban" title="Urbain" aria-label="Urbain">
-                    <!-- SVG simple pour urbain -->
-                    <svg width="36" height="24" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                        <rect x="1" y="1" width="34" height="22" rx="3" fill="#e9ecef" stroke="#6c757d"/>
-                        <rect x="6" y="6" width="6" height="12" fill="#495057" />
-                        <rect x="14" y="8" width="6" height="10" fill="#6c757d" />
-                        <rect x="22" y="5" width="6" height="13" fill="#343a40" />
-                    </svg>
-                    <span>Urbain</span>
-                </button>
+                <?php
+                // Récupérer le template depuis les données de la vue
+                $template = 'neutral'; // template par défaut
+                if (isset($map_data) && isset($map_data['template'])) {
+                    $template = $map_data['template'];
+                } elseif (isset($GLOBALS['view_data']['map_data']['template'])) {
+                    $template = $GLOBALS['view_data']['map_data']['template'];
+                }
+
+                // Charger dynamiquement les SVG depuis mapModels/{template}/assets/
+                $assetsDir = __DIR__ . '/../../../mapModels/' . $template . '/assets';
+                $svgFiles = glob($assetsDir . '/*.svg');
+
+                if (empty($svgFiles)) {
+                    // Fallback vers neutral si aucun fichier trouvé
+                    $assetsDir = __DIR__ . '/../../../mapModels/neutral/assets';
+                    $svgFiles = glob($assetsDir . '/*.svg');
+                }
+
+                foreach ($svgFiles as $svgFile) {
+                    $filename = basename($svgFile, '.svg');
+                    $tileType = $filename;
+                    $svgContent = file_get_contents($svgFile);
+
+                    // Modifier les attributs du SVG pour l'adapter à la taille des boutons
+                    $svgContent = preg_replace('/width="[^"]*"/', 'width="36"', $svgContent);
+                    $svgContent = preg_replace('/height="[^"]*"/', 'height="24"', $svgContent);
+                    $svgContent = preg_replace('/viewBox="[^"]*"/', 'viewBox="0 0 36 24"', $svgContent);
+
+                    // Capitaliser le nom pour l'affichage
+                    $displayName = ucfirst(str_replace('-', ' ', $tileType));
+
+                    echo '<button type="button" class="btn btn-light tile-type-option d-flex align-items-center gap-2" data-type="' . htmlspecialchars($tileType) . '" title="' . htmlspecialchars($displayName) . '" aria-label="' . htmlspecialchars($displayName) . '">' . "\n";
+                    echo '    ' . $svgContent . "\n";
+                    echo '    <span>' . htmlspecialchars($displayName) . '</span>' . "\n";
+                    echo '</button>' . "\n";
+                }
+                ?>
             </div>
         </div>
     </nav>

mapModels/neutral/assets/grass.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
+  <title>Herbe - icône</title>
+  <rect width="100%" height="100%" fill="#e8f5e8" />
+
+  <!-- Rangées / patchwork -->
+  <g transform="translate(18,40) scale(1)">
+    <path d="M0 0 h220 v36 h-220 z" fill="#c8e6c9" />
+    <path d="M0 36 h220 v36 h-220 z" fill="#dcedd0" />
+    <path d="M0 72 h220 v36 h-220 z" fill="#c5e1a5" />
+    <path d="M0 108 h220 v36 h-220 z" fill="#d7e4c0" />
+    <path d="M0 144 h220 v36 h-220 z" fill="#c9e4b7" />
+
+    <!-- lignes d'herbe -->
+    <g stroke="#4caf50" stroke-width="36" opacity="0.9">
+      <path d="M8 18 q40 8 80 0 q40 -8 80 0" fill="none" />
+      <path d="M8 54 q40 8 80 0 q40 -8 80 0" fill="none" />
+      <path d="M8 90 q40 8 80 0 q40 -8 80 0" fill="none" />
+      <path d="M8 126 q40 8 80 0 q40 -8 80 0" fill="none" />
+    </g>
+  </g>
+
+  <ellipse cx="128" cy="220" rx="110" ry="16" fill="rgba(0,0,0,0.04)" />
+</svg>

mapModels/urban/assets/building.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
+  <title>Bâtiment urbain - icône</title>
+  <rect width="100%" height="100%" fill="#f5f5f5" />
+
+  <!-- Maison -->
+  <g transform="translate(64,64)">
+    <rect x="32" y="72" width="96" height="64" rx="2" fill="#e0e0e0" stroke="#bdbdbd" />
+    <polygon points="24,72 128,16 232,72" fill="#757575" stroke="#616161" />
+    <rect x="84" y="96" width="32" height="40" fill="#81c784" />
+    <rect x="56" y="96" width="20" height="28" fill="#81c784" />
+    <rect x="176" y="96" width="20" height="28" fill="#81c784" />
+
+    <!-- petit jardin -->
+    <ellipse cx="40" cy="156" rx="28" ry="10" fill="#dbeecf" />
+  </g>
+
+  <ellipse cx="128" cy="220" rx="110" ry="16" fill="rgba(0,0,0,0.04)" />
+</svg>

test_sidebar.php

@@ -0,0 +1,11 @@
+<?php
+$map_data = ['template' => 'rural'];
+
+// Simuler le contexte comme si on était dans tools-sidebar.php
+$_original_dir = __DIR__;
+chdir('app/Views/partials'); // Changer vers le répertoire contenant tools-sidebar.php
+
+include 'tools-sidebar.php';
+
+chdir($_original_dir);
+?>