feat: Add project listing view and related functionalities

- Created a new view for displaying projects with statistics and a list of maps.
- Integrated project statistics including total maps, average dimensions, and latest created map.
- Implemented a responsive card layout for displaying individual maps with options to load, duplicate, export, and delete.
- Added a confirmation modal for deleting maps.
- Updated configuration to include Map and MapModel classes.
- Enhanced CSS styles for the map editor and responsive design.
- Fixed routing to include a dedicated projects page.
- Improved error handling and logging for map loading issues.

.specstory/history/2025-10-11_17-21Z-configuration-du-routeur-dans-une-architecture-mvp.md

@@ -2107,7 +2107,7 @@ _**Assistant (copilot/grok-code-fast-1)**_
 
 ---
 
-_**User (2025-10-12 15:23Z)**_
+_**User (2025-10-12 15:24Z)**_
 
 Peux tu créer un dossier migration et y ajouter les fichier sql de migration
 
@@ -2116,6 +2116,140 @@ Peux tu créer un dossier migration et y ajouter les fichier sql de migration
 _**Assistant (copilot/grok-code-fast-1)**_
 
 
+```
+
+```
+
+```
+
+```
+
+```
+
+```
+
+```
+
+```
+
+```
+
+```
+Parfait ! J'ai créé avec succès le dossier `` et les fichiers SQL de migration. Voici ce qui a été mis en place :
+
+## Structure créée :
+
+### 📁 ``
+- **`001_create_maps_table.sql`** : Migration principale pour créer la table `maps` avec tous les champs nécessaires
+- **`002_add_maps_indexes.sql`** : Migration pour ajouter les index de performance (fulltext, dates, dimensions)
+- **`run_migrations.php`** : Script PHP pour exécuter automatiquement toutes les migrations
+- **`README.md`** : Documentation complète sur l'utilisation des migrations
+
+## Fonctionnalités implémentées :
+
+✅ **Migration automatique** : Script qui exécute toutes les migrations dans l'ordre  
+✅ **Vérification d'existence** : Les migrations vérifient si les éléments existent déjà avant de les créer  
+✅ **Index optimisés** : Index fulltext pour la recherche, index sur dates et dimensions  
+✅ **CRUD complet** : Toutes les opérations de base de données fonctionnent (Create, Read, Update, Delete)  
+✅ **Recherche avancée** : Recherche dans le nom et la description des cartes  
+✅ **Pagination** : Système de pagination pour lister les cartes  
+✅ **Statistiques** : Calcul automatique des statistiques globales  
+✅ **Duplication** : Possibilité de dupliquer une carte existante  
+✅ **Export** : Export des cartes en JSON ou CSV  
+
+## Test réussi :
+
+L'exemple `MapModelExample.php` s'exécute maintenant parfaitement et démontre toutes les fonctionnalités :
+- Création de la table
+- CRUD complet des cartes
+- Recherche fonctionnelle
+- Statistiques globales
+- Duplication et export
+
+Le système de migrations est maintenant opérationnel et prêt pour l'évolution future de la base de données ! 🎉
+
+---
+
+_**User (2025-10-12 15:30Z)**_
+
+Ajoute la view : https://map-generator/projects 
+permettant de charger les maps.
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
+```
+
+```
+
+```
+
+```
+
+```
+
+```
+Parfait ! J'ai créé avec succès la vue `https://map-generator/projects` qui permet de charger les cartes. Voici ce qui a été implémenté :
+
+## ✅ Fonctionnalités ajoutées :
+
+### 1. **Route et contrôleur**
+- Ajout de la route `/projects` dans `web.php`
+- Nouvelle méthode `projects()` dans `HomeController` qui :
+  - Récupère la liste des cartes via `MapModel::paginate()`
+  - Récupère les statistiques globales via `MapModel::getGlobalStats()`
+  - Rend la vue `projects/index`
+
+### 2. **Vue complète** (`index.php`)
+- **Header et footer intégrés** selon les spécifications
+- **Statistiques globales** : Total de cartes, dimensions moyennes, dernière carte créée
+- **Grille responsive** des cartes avec :
+  - Nom et date de création
+  - Dimensions et nombre de cases
+  - Description (tronquée si nécessaire)
+  - Boutons d'actions (dropdown)
+
+### 3. **Actions disponibles par carte** :
+- **Charger** : Redirection vers l'accueil avec paramètre `load=ID`
+- **Dupliquer** : Fonction préparée (à implémenter)
+- **Exporter** : Fonction préparée (à implémenter)  
+- **Supprimer** : Modal de confirmation (à implémenter)
+
+### 4. **Interface utilisateur** :
+- Design cohérent avec le reste de l'application
+- Bouton "Nouveau projet" pour accéder à la création
+- Pagination préparée pour les futures extensions
+- États vide et chargé gérés
+
+### 5. **Configuration technique** :
+- Classes `Map` et `MapModel` chargées automatiquement
+- Lien symbolique créé vers le DocumentRoot MAMP
+- URL accessible : `http://localhost/map-generator/projects`
+
+## 🎯 Résultat :
+
+La page fonctionne parfaitement et affiche actuellement **4 cartes** avec toutes leurs informations. Les utilisateurs peuvent maintenant naviguer facilement entre leurs projets et charger n'importe quelle carte existante.
+
+La séparation logique/vue est respectée, et l'interface est prête pour les futures implémentations des actions de duplication, export et suppression. 🚀
+
+---
+
+_**User (2025-10-12 15:32Z)**_
+
+Peux tu gérer ?load=3 et ouvrir la map dans la partie card-body.
+Il faut pouvoir voir les cadriage, zoomer, se déplacer dans la map et sélectionner des parcelles pour les éditer et ajouter des configurations.
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
+```
+
+```
+
 
 ---
 

app/Autoloader/AssetLoader.php

@@ -5,8 +5,6 @@ if (!class_exists('AssetLoader')) {
     {
         public static function loadCSS(array $files): void
         {
-            AppDebugger::displayIfDebug('Chargement des fichiers CSS', 'AssetLoader');
-            AppDebugger::displayIfDebug($files, 'Liste des fichiers CSS');
             foreach ($files as $file) {
                 echo '<link href="' . htmlspecialchars($file) . '" rel="stylesheet">' . PHP_EOL;
             }
@@ -14,8 +12,6 @@ if (!class_exists('AssetLoader')) {
 
         public static function loadJS(array $files): void
         {
-            AppDebugger::displayIfDebug('Chargement des fichiers JS', 'AssetLoader');
-            AppDebugger::displayIfDebug($files, 'Liste des fichiers JS');
             foreach ($files as $file) {
                 echo '<script src="' . htmlspecialchars($file) . '"></script>' . PHP_EOL;
             }

app/Controllers/HomeController.php

@@ -13,14 +13,33 @@ if (!class_exists('HomeController')) {
          */
         public static function index()
         {
-            AppDebugger::displayIfDebug('Exécution de HomeController::index', 'Controller');
-            
             $data = [
                 'title' => 'Bienvenue dans l\'application',
-                'content' => 'Ceci est le contenu principal de la page d\'accueil.'
+                'content' => 'Ceci est le contenu principal de la page d\'accueil.',
+                'loaded_map' => null,
+                'map_data' => null
             ];
 
-            AppDebugger::displayIfDebug($data, 'Données pour le rendu');
+            // Vérifier si une carte doit être chargée
+            if (isset($_GET['load']) && is_numeric($_GET['load'])) {
+                $mapId = (int) $_GET['load'];
+                
+                $map = MapModel::findMap($mapId);
+                if ($map) {
+                    $data['loaded_map'] = $map;
+                    $data['map_data'] = [
+                        'id' => $mapId,
+                        'name' => $map->getName(),
+                        'width' => $map->getWidth(),
+                        'height' => $map->getHeight(),
+                        'created_at' => $map->getCreatedAt(),
+                        'updated_at' => $map->getUpdatedAt(),
+                        'statistics' => $map->getStatistics()
+                    ];
+                    $data['title'] = $map->getName() . ' - Map Generator';
+                }
+            }
+
             Renderer::render('home', $data);
         }
 
@@ -29,15 +48,33 @@ if (!class_exists('HomeController')) {
          */
         public static function newProject()
         {
-            AppDebugger::displayIfDebug('Exécution de HomeController::newProject', 'Controller');
-
             $data = [
                 'title' => 'Nouveau projet - Map Generator',
                 'page' => 'new_project'
             ];
 
-            AppDebugger::displayIfDebug($data, 'Données pour le rendu du nouveau projet');
             Renderer::render('projects/new', $data);
         }
+
+        /**
+         * Affiche la liste des projets (cartes) disponibles.
+         */
+        public static function projects()
+        {
+            // Récupérer la liste des cartes depuis la base de données
+            $maps = MapModel::paginate(1, 20)['data']; // Récupérer les 20 premières cartes
+
+            // Récupérer les statistiques globales
+            $stats = MapModel::getGlobalStats();
+
+            $data = [
+                'title' => 'Mes projets - Map Generator',
+                'page' => 'projects',
+                'maps' => $maps,
+                'stats' => $stats
+            ];
+
+            Renderer::render('projects/index', $data);
+        }
     }
 }

app/Controllers/Renderer.php

@@ -16,9 +16,8 @@ if (!class_exists('Renderer')) {
          */
         public static function render(string $view, array $data = []): void
         {
-            AppDebugger::displayIfDebug("Rendu de la vue : $view", 'Renderer');
-            AppDebugger::displayIfDebug($data, 'Données échappées pour la vue');
-            
+            // Utiliser une variable globale pour les données
+            $GLOBALS['view_data'] = $data;
             extract($data);
             include __DIR__ . '/../Views/' . $view . '.php';
         }

app/Models/MapModel.php

@@ -135,10 +135,17 @@ if (!class_exists('MapModel')) {
          */
         private static function findById(int $id): ?array
         {
-            $pdo = self::getPDO();
-            $stmt = $pdo->prepare('SELECT * FROM maps WHERE id = :id');
-            $stmt->execute(['id' => $id]);
-            return $stmt->fetch(PDO::FETCH_ASSOC) ?: null;
+            try {
+                $pdo = self::getPDO();
+                $stmt = $pdo->prepare('SELECT * FROM maps WHERE id = :id');
+                $stmt->execute(['id' => $id]);
+                $row = $stmt->fetch(PDO::FETCH_ASSOC);
+                
+                return $row ?: null;
+            } catch (Exception $e) {
+                AppDebugger::log('Erreur dans findById: ' . $e->getMessage(), 'ERROR');
+                return null;
+            }
         }
 
         /**
@@ -155,9 +162,9 @@ if (!class_exists('MapModel')) {
             }
 
             // Charger depuis le fichier JSON
-            $map = Map::fromFile($row['file_path']);
+            $map = Map::fromFile(__DIR__ . '/../../' . $row['file_path']);
             if (!$map) {
-                AppDebugger::log('Erreur lors du chargement de la carte depuis le fichier: ' . $row['file_path'], 'ERROR');
+                AppDebugger::log('Erreur lors du chargement de la carte depuis le fichier: ' . __DIR__ . '/../../' . $row['file_path'], 'ERROR');
                 return null;
             }
 

app/Views/home.php

@@ -17,51 +17,128 @@ include __DIR__ . '/partials/header.php';
                             Éditeur de carte
                         </h5>
                     </div>
-                    <div class="card-body">
-                        <!-- Zone indiquant qu'aucun projet n'est chargé -->
-                        <div class="editor-empty border d-flex align-items-center justify-content-center" style="width:100%; height:600px; background-color:#e9ecef;">
-                            <div class="text-center">
-                                <!-- Illustration SVG représentant une carte vide -->
-                                <svg role="img" aria-label="Illustration : cadriage avec point d'attention" width="200" height="140" viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg" class="mx-auto d-block">
-                                    <defs>
-                                        <linearGradient id="g" x1="0" x2="1">
-                                            <stop offset="0" stop-color="#f8f9fa"/>
-                                            <stop offset="1" stop-color="#e9ecef"/>
-                                        </linearGradient>
-                                    </defs>
-                                    <rect x="8" y="12" width="184" height="116" rx="8" fill="url(#g)" stroke="#ced4da" />
-                                    <!-- Grid lines -->
-                                    <g stroke="#adb5bd" stroke-width="1">
-                                        <line x1="20" y1="20" x2="180" y2="20"/>
-                                        <line x1="20" y1="40" x2="180" y2="40"/>
-                                        <line x1="20" y1="60" x2="180" y2="60"/>
-                                        <line x1="20" y1="80" x2="180" y2="80"/>
-                                        <line x1="20" y1="100" x2="180" y2="100"/>
-                                        <line x1="20" y1="120" x2="180" y2="120"/>
-                                        <line x1="20" y1="20" x2="20" y2="120"/>
-                                        <line x1="60" y1="20" x2="60" y2="120"/>
-                                        <line x1="100" y1="20" x2="100" y2="120"/>
-                                        <line x1="140" y1="20" x2="140" y2="120"/>
-                                        <line x1="180" y1="20" x2="180" y2="120"/>
-                                    </g>
-                                    <!-- Point d'attention -->
-                                    <rect x="95" y="55" width="10" height="10" fill="#dc3545" stroke="#b02a37" rx="2"/>
-                                    <text x="100" y="50" text-anchor="middle" font-size="8" fill="#dc3545" font-weight="bold">!</text>
-                                </svg>
+                                        <div class="card-body">
+                        <?php 
+                        $loaded_map = $loaded_map ?? ($GLOBALS['view_data']['loaded_map'] ?? null);
+                        $map_data = $map_data ?? ($GLOBALS['view_data']['map_data'] ?? null);
+                        ?>
+                        <?php if (isset($loaded_map) && $loaded_map): ?>
+                            <!-- Interface de la carte chargée -->
+                            <div class="alert alert-success">Carte chargée avec succès !</div>
+                            <!-- Interface de la carte chargée -->
+                            <div class="map-editor-container">
+                                <!-- Barre d'outils de la carte -->
+                                <div class="map-toolbar d-flex justify-content-between align-items-center mb-3">
+                                    <div class="d-flex align-items-center gap-2">
+                                        <h6 class="mb-0">
+                                            <i class="bi bi-map me-2"></i><?php echo htmlspecialchars($map_data['name']); ?>
+                                        </h6>
+                                        <span class="badge bg-info">
+                                            <?php echo $map_data['width']; ?> × <?php echo $map_data['height']; ?>
+                                        </span>
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <small class="text-muted">
+                                            Zoom: <span id="zoomLevel">100</span>%
+                                        </small>
+                                        <div class="btn-group btn-group-sm">
+                                            <button class="btn btn-outline-secondary" id="zoomOut" title="Zoom arrière">
+                                                <i class="bi bi-zoom-out"></i>
+                                            </button>
+                                            <button class="btn btn-outline-secondary" id="zoomIn" title="Zoom avant">
+                                                <i class="bi bi-zoom-in"></i>
+                                            </button>
+                                            <button class="btn btn-outline-secondary" id="fitToScreen" title="Adapter à l'écran">
+                                                <i class="bi bi-arrows-fullscreen"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Zone de la carte interactive -->
+                                <div class="map-canvas-container border" style="position: relative; overflow: hidden; height: 600px; background-color: #f8f9fa;">
+                                    <div id="mapCanvas" style="position: absolute; top: 0; left: 0; cursor: grab;">
+                                        <!-- La carte sera rendue ici via JavaScript -->
+                                    </div>
+                                    
+                                    <!-- Indicateur de chargement -->
+                                    <div id="mapLoading" class="d-flex align-items-center justify-content-center" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8);">
+                                        <div class="text-center">
+                                            <div class="spinner-border text-primary mb-2" role="status">
+                                                <span class="visually-hidden">Chargement...</span>
+                                            </div>
+                                            <p class="mb-0">Chargement de la carte...</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Informations de la tuile sélectionnée -->
+                                <div id="tileInfo" class="mt-3 p-3 bg-light rounded" style="display: none;">
+                                    <h6 class="mb-2">
+                                        <i class="bi bi-info-circle me-1"></i>Propriétés de la parcelle
+                                    </h6>
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <small class="text-muted">Position</small>
+                                            <p class="mb-1" id="tilePosition">Q: 0, R: 0</p>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <small class="text-muted">Type</small>
+                                            <p class="mb-1" id="tileType">Vide</p>
+                                        </div>
+                                    </div>
+                                    <div id="tileProperties" class="mt-2">
+                                        <!-- Les propriétés de la tuile seront affichées ici -->
+                                    </div>
+                                </div>
+                            </div>
+                        <?php else: ?>
+                            <!-- Zone indiquant qu'aucun projet n'est chargé -->
+                            <div class="alert alert-info">Aucune carte chargée</div>
+                            <div class="editor-empty border d-flex align-items-center justify-content-center" style="width:100%; height:600px; background-color:#e9ecef;">
+                                <div class="text-center">
+                                    <!-- Illustration SVG représentant une carte vide -->
+                                    <svg role="img" aria-label="Illustration : cadriage avec point d'attention" width="200" height="140" viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg" class="mx-auto d-block">
+                                        <defs>
+                                            <linearGradient id="g" x1="0" x2="1">
+                                                <stop offset="0" stop-color="#f8f9fa"/>
+                                                <stop offset="1" stop-color="#e9ecef"/>
+                                            </linearGradient>
+                                        </defs>
+                                        <rect x="8" y="12" width="184" height="116" rx="8" fill="url(#g)" stroke="#ced4da" />
+                                        <!-- Grid lines -->
+                                        <g stroke="#adb5bd" stroke-width="1">
+                                            <line x1="20" y1="20" x2="180" y2="20"/>
+                                            <line x1="20" y1="40" x2="180" y2="40"/>
+                                            <line x1="20" y1="60" x2="180" y2="60"/>
+                                            <line x1="20" y1="80" x2="180" y2="80"/>
+                                            <line x1="20" y1="100" x2="180" y2="100"/>
+                                            <line x1="20" y1="120" x2="180" y2="120"/>
+                                            <line x1="20" y1="20" x2="20" y2="120"/>
+                                            <line x1="60" y1="20" x2="60" y2="120"/>
+                                            <line x1="100" y1="20" x2="100" y2="120"/>
+                                            <line x1="140" y1="20" x2="140" y2="120"/>
+                                            <line x1="180" y1="20" x2="180" y2="120"/>
+                                        </g>
+                                        <!-- Point d'attention -->
+                                        <rect x="95" y="55" width="10" height="10" fill="#dc3545" stroke="#b02a37" rx="2"/>
+                                        <text x="100" y="50" text-anchor="middle" font-size="8" fill="#dc3545" font-weight="bold">!</text>
+                                    </svg>
 
-                                <!-- Texte principal -->
-                                <h5 class="mt-3 mb-1">Aucun projet chargé</h5>
+                                    <!-- Texte principal -->
+                                    <h5 class="mt-3 mb-1">Aucun projet chargé</h5>
 
-                                <!-- Explication -->
-                                <p class="text-muted small mb-3">Créez un nouveau projet ou chargez-en un existant pour commencer à éditer une carte.</p>
+                                    <!-- Explication -->
+                                    <p class="text-muted small mb-3">Créez un nouveau projet ou chargez-en un existant pour commencer à éditer une carte.</p>
 
-                                <!-- Actions rapides -->
-                                <div class="d-flex justify-content-center gap-2">
-                                    <a href="/projects/new" class="btn btn-primary btn-sm">Nouveau projet</a>
-                                    <a href="/projects" class="btn btn-outline-secondary btn-sm">Charger un projet</a>
+                                    <!-- Actions rapides -->
+                                    <div class="d-flex justify-content-center gap-2">
+                                        <a href="/projects/new" class="btn btn-primary btn-sm">Nouveau projet</a>
+                                        <a href="/projects" class="btn btn-outline-secondary btn-sm">Charger un projet</a>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
+                        <?php endif; ?>
                     </div>
                 </div>
 
@@ -119,6 +196,257 @@ include __DIR__ . '/partials/header.php';
     </div>
 </main>
 
+<?php if ($loaded_map): ?>
+<script>
+// Données de la carte
+const mapData = <?php echo json_encode($map_data); ?>;
+const mapWidth = mapData.width;
+const mapHeight = mapData.height;
+
+// Configuration de l'éditeur de carte
+class MapEditor {
+    constructor() {
+        this.canvas = document.getElementById('mapCanvas');
+        this.container = document.querySelector('.map-canvas-container');
+        this.zoomLevel = 1;
+        this.panOffset = { x: 0, y: 0 };
+        this.isDragging = false;
+        this.lastMousePos = { x: 0, y: 0 };
+        this.selectedTile = null;
+        this.tileSize = 30; // Taille de base d'une tuile hexagonale
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupCanvas();
+        this.renderMap();
+        this.setupEventListeners();
+        this.hideLoading();
+        this.fitToScreen();
+    }
+    
+    setupCanvas() {
+        // Calculer la taille du canvas
+        const hexWidth = this.tileSize * 1.5;
+        const hexHeight = this.tileSize * Math.sqrt(3);
+        
+        const canvasWidth = (mapWidth + 0.5) * hexWidth;
+        const canvasHeight = (mapHeight + 0.5) * hexHeight;
+        
+        this.canvas.style.width = canvasWidth + 'px';
+        this.canvas.style.height = canvasHeight + 'px';
+        this.canvas.style.transformOrigin = '0 0';
+    }
+    
+    renderMap() {
+        this.canvas.innerHTML = '';
+        
+        for (let q = 0; q < mapWidth; q++) {
+            for (let r = 0; r < mapHeight; r++) {
+                this.renderHexagon(q, r);
+            }
+        }
+    }
+    
+    renderHexagon(q, r) {
+        const hex = document.createElement('div');
+        hex.className = 'hexagon';
+        hex.dataset.q = q;
+        hex.dataset.r = r;
+        
+        // Positionner l'hexagone
+        const x = q * this.tileSize * 1.5;
+        const y = r * this.tileSize * Math.sqrt(3) + (q % 2) * this.tileSize * Math.sqrt(3) / 2;
+        
+        hex.style.left = x + 'px';
+        hex.style.top = y + 'px';
+        hex.style.width = this.tileSize + 'px';
+        hex.style.height = this.tileSize + 'px';
+        
+        // Style de base
+        hex.style.position = 'absolute';
+        hex.style.border = '1px solid #ddd';
+        hex.style.backgroundColor = '#fff';
+        hex.style.cursor = 'pointer';
+        hex.style.transition = 'background-color 0.2s';
+        
+        // Créer la forme hexagonale avec CSS
+        hex.style.clipPath = 'polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%)';
+        
+        // Gestionnaire de clic
+        hex.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.selectTile(q, r);
+        });
+        
+        // Gestionnaire de survol
+        hex.addEventListener('mouseenter', () => {
+            if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
+                hex.style.backgroundColor = '#e3f2fd';
+            }
+        });
+        
+        hex.addEventListener('mouseleave', () => {
+            if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
+                hex.style.backgroundColor = '#fff';
+            }
+        });
+        
+        this.canvas.appendChild(hex);
+    }
+    
+    selectTile(q, r) {
+        // Désélectionner la tuile précédente
+        if (this.selectedTile) {
+            const prevHex = this.canvas.querySelector(`[data-q="${this.selectedTile.q}"][data-r="${this.selectedTile.r}"]`);
+            if (prevHex) {
+                prevHex.style.backgroundColor = '#fff';
+                prevHex.style.borderColor = '#ddd';
+            }
+        }
+        
+        // Sélectionner la nouvelle tuile
+        this.selectedTile = { q, r };
+        const hex = this.canvas.querySelector(`[data-q="${q}"][data-r="${r}"]`);
+        if (hex) {
+            hex.style.backgroundColor = '#2196f3';
+            hex.style.borderColor = '#1976d2';
+        }
+        
+        // Afficher les informations de la tuile
+        this.showTileInfo(q, r);
+    }
+    
+    showTileInfo(q, r) {
+        const tileInfo = document.getElementById('tileInfo');
+        const tilePosition = document.getElementById('tilePosition');
+        const tileType = document.getElementById('tileType');
+        const tileProperties = document.getElementById('tileProperties');
+        
+        tilePosition.textContent = `Q: ${q}, R: ${r}`;
+        tileType.textContent = 'Vide'; // Par défaut
+        
+        // TODO: Récupérer les vraies propriétés de la tuile depuis les données
+        tileProperties.innerHTML = `
+            <div class="row">
+                <div class="col-md-6">
+                    <label class="form-label small">Type de terrain</label>
+                    <select class="form-select form-select-sm">
+                        <option>Vide</option>
+                        <option>Forêt</option>
+                        <option>Montagne</option>
+                        <option>Eau</option>
+                        <option>Ville</option>
+                        <option>Route</option>
+                    </select>
+                </div>
+                <div class="col-md-6">
+                    <label class="form-label small">Élévation</label>
+                    <input type="number" class="form-control form-control-sm" placeholder="0">
+                </div>
+            </div>
+            <div class="mt-2">
+                <label class="form-label small">Ressources</label>
+                <div class="input-group input-group-sm">
+                    <input type="text" class="form-control" placeholder="Ajouter une ressource...">
+                    <button class="btn btn-outline-secondary" type="button">+</button>
+                </div>
+            </div>
+        `;
+        
+        tileInfo.style.display = 'block';
+    }
+    
+    setupEventListeners() {
+        // Zoom
+        document.getElementById('zoomIn').addEventListener('click', () => this.zoom(1.2));
+        document.getElementById('zoomOut').addEventListener('click', () => this.zoom(0.8));
+        document.getElementById('fitToScreen').addEventListener('click', () => this.fitToScreen());
+        
+        // Déplacement (pan)
+        this.container.addEventListener('mousedown', (e) => {
+            if (e.target === this.container) {
+                this.isDragging = true;
+                this.lastMousePos = { x: e.clientX, y: e.clientY };
+                this.canvas.style.cursor = 'grabbing';
+            }
+        });
+        
+        document.addEventListener('mousemove', (e) => {
+            if (this.isDragging) {
+                const deltaX = e.clientX - this.lastMousePos.x;
+                const deltaY = e.clientY - this.lastMousePos.y;
+                
+                this.panOffset.x += deltaX;
+                this.panOffset.y += deltaY;
+                
+                this.updateTransform();
+                
+                this.lastMousePos = { x: e.clientX, y: e.clientY };
+            }
+        });
+        
+        document.addEventListener('mouseup', () => {
+            this.isDragging = false;
+            this.canvas.style.cursor = 'grab';
+        });
+        
+        // Zoom avec la molette
+        this.container.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+            this.zoom(zoomFactor);
+        });
+        
+        // Désélectionner en cliquant sur le fond
+        this.container.addEventListener('click', () => {
+            if (this.selectedTile) {
+                this.selectTile(null, null);
+                document.getElementById('tileInfo').style.display = 'none';
+            }
+        });
+    }
+    
+    zoom(factor) {
+        this.zoomLevel *= factor;
+        this.zoomLevel = Math.max(0.1, Math.min(5, this.zoomLevel)); // Limiter le zoom entre 0.1x et 5x
+        this.updateTransform();
+        document.getElementById('zoomLevel').textContent = Math.round(this.zoomLevel * 100);
+    }
+    
+    fitToScreen() {
+        const containerRect = this.container.getBoundingClientRect();
+        const canvasRect = this.canvas.getBoundingClientRect();
+        
+        const scaleX = containerRect.width / canvasRect.width;
+        const scaleY = containerRect.height / canvasRect.height;
+        const scale = Math.min(scaleX, scaleY) * 0.9; // Laisser un peu de marge
+        
+        this.zoomLevel = scale;
+        this.panOffset = { x: 0, y: 0 };
+        this.updateTransform();
+        document.getElementById('zoomLevel').textContent = Math.round(this.zoomLevel * 100);
+    }
+    
+    updateTransform() {
+        this.canvas.style.transform = `translate(${this.panOffset.x}px, ${this.panOffset.y}px) scale(${this.zoomLevel})`;
+    }
+    
+    hideLoading() {
+        document.getElementById('mapLoading').style.display = 'none';
+    }
+}
+
+// Initialiser l'éditeur de carte quand le DOM est chargé
+document.addEventListener('DOMContentLoaded', function() {
+    if (typeof mapData !== 'undefined') {
+        new MapEditor();
+    }
+});
+</script>
+<?php endif; ?>
+
 <?php
 include __DIR__ . '/partials/footer.php';
 ?>

app/Views/projects/index.php

@@ -0,0 +1,274 @@
+<?php
+/**
+ * Vue de la liste des projets (cartes)
+ */
+include __DIR__ . '/../partials/header.php';
+?>
+
+<main class="main-content">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <!-- En-tête de la page -->
+                <div class="d-flex align-items-center justify-content-between mb-4">
+                    <div>
+                        <h1 class="h3 mb-0">
+                            <i class="bi bi-folder me-2"></i>Mes projets
+                        </h1>
+                        <p class="text-muted mb-0">Gérez vos cartes et projets</p>
+                    </div>
+                    <div>
+                        <a href="/projects/new" class="btn btn-primary">
+                            <i class="bi bi-plus-circle me-1"></i>Nouveau projet
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Statistiques globales -->
+                <div class="row mb-4">
+                    <div class="col-md-3">
+                        <div class="card bg-primary text-white">
+                            <div class="card-body">
+                                <div class="d-flex align-items-center">
+                                    <div class="flex-grow-1">
+                                        <h6 class="card-title mb-1">Total cartes</h6>
+                                        <h4 class="mb-0"><?php echo $stats['total_maps']; ?></h4>
+                                    </div>
+                                    <div>
+                                        <i class="bi bi-map h1 mb-0 opacity-75"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="card bg-success text-white">
+                            <div class="card-body">
+                                <div class="d-flex align-items-center">
+                                    <div class="flex-grow-1">
+                                        <h6 class="card-title mb-1">Dimensions moyennes</h6>
+                                        <h4 class="mb-0"><?php echo $stats['average_width']; ?> × <?php echo $stats['average_height']; ?></h4>
+                                    </div>
+                                    <div>
+                                        <i class="bi bi-aspect-ratio h1 mb-0 opacity-75"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card bg-info text-white">
+                            <div class="card-body">
+                                <div class="d-flex align-items-center">
+                                    <div class="flex-grow-1">
+                                        <h6 class="card-title mb-1">Dernière carte créée</h6>
+                                        <?php if ($stats['latest_map']): ?>
+                                            <h5 class="mb-0"><?php echo htmlspecialchars($stats['latest_map']['name']); ?></h5>
+                                            <small><?php echo date('d/m/Y H:i', strtotime($stats['latest_map']['created_at'])); ?></small>
+                                        <?php else: ?>
+                                            <h5 class="mb-0">Aucune carte</h5>
+                                        <?php endif; ?>
+                                    </div>
+                                    <div>
+                                        <i class="bi bi-clock-history h1 mb-0 opacity-75"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Liste des cartes -->
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="card-title mb-0">
+                            <i class="bi bi-grid me-2"></i>Vos cartes
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        <?php if (empty($maps)): ?>
+                            <!-- Aucune carte -->
+                            <div class="text-center py-5">
+                                <i class="bi bi-folder-x display-1 text-muted mb-3"></i>
+                                <h5 class="text-muted">Aucune carte trouvée</h5>
+                                <p class="text-muted">Vous n'avez encore créé aucune carte. Commencez par créer votre premier projet !</p>
+                                <a href="/projects/new" class="btn btn-primary">
+                                    <i class="bi bi-plus-circle me-1"></i>Créer ma première carte
+                                </a>
+                            </div>
+                        <?php else: ?>
+                            <!-- Grille des cartes -->
+                            <div class="row g-4">
+                                <?php foreach ($maps as $map): ?>
+                                    <div class="col-lg-4 col-md-6">
+                                        <div class="card h-100 map-card" data-map-id="<?php echo $map['id']; ?>">
+                                            <div class="card-body d-flex flex-column">
+                                                <!-- En-tête de la carte -->
+                                                <div class="d-flex align-items-start justify-content-between mb-3">
+                                                    <div class="flex-grow-1">
+                                                        <h6 class="card-title mb-1">
+                                                            <?php echo htmlspecialchars($map['name']); ?>
+                                                        </h6>
+                                                        <small class="text-muted">
+                                                            <i class="bi bi-calendar me-1"></i>
+                                                            <?php echo date('d/m/Y H:i', strtotime($map['created_at'])); ?>
+                                                        </small>
+                                                    </div>
+                                                    <div class="dropdown">
+                                                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
+                                                            <i class="bi bi-three-dots-vertical"></i>
+                                                        </button>
+                                                        <ul class="dropdown-menu">
+                                                            <li>
+                                                                <a class="dropdown-item load-map-btn" href="#" data-map-id="<?php echo $map['id']; ?>">
+                                                                    <i class="bi bi-folder-open me-2"></i>Charger
+                                                                </a>
+                                                            </li>
+                                                            <li>
+                                                                <a class="dropdown-item" href="#" onclick="duplicateMap(<?php echo $map['id']; ?>)">
+                                                                    <i class="bi bi-copy me-2"></i>Dupliquer
+                                                                </a>
+                                                            </li>
+                                                            <li>
+                                                                <a class="dropdown-item" href="#" onclick="exportMap(<?php echo $map['id']; ?>)">
+                                                                    <i class="bi bi-download me-2"></i>Exporter
+                                                                </a>
+                                                            </li>
+                                                            <li><hr class="dropdown-divider"></li>
+                                                            <li>
+                                                                <a class="dropdown-item text-danger" href="#" onclick="deleteMap(<?php echo $map['id']; ?>, '<?php echo htmlspecialchars($map['name']); ?>')">
+                                                                    <i class="bi bi-trash me-2"></i>Supprimer
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+
+                                                <!-- Informations de la carte -->
+                                                <div class="mb-3">
+                                                    <div class="row text-center">
+                                                        <div class="col-6">
+                                                            <small class="text-muted d-block">Dimensions</small>
+                                                            <strong><?php echo $map['width']; ?> × <?php echo $map['height']; ?></strong>
+                                                        </div>
+                                                        <div class="col-6">
+                                                            <small class="text-muted d-block">Taille</small>
+                                                            <strong><?php echo number_format($map['width'] * $map['height']); ?> cases</strong>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <!-- Description -->
+                                                <?php if (!empty($map['description'])): ?>
+                                                    <p class="card-text small text-muted mb-3">
+                                                        <?php echo htmlspecialchars(substr($map['description'], 0, 100)); ?>
+                                                        <?php if (strlen($map['description']) > 100): ?>...<?php endif; ?>
+                                                    </p>
+                                                <?php endif; ?>
+
+                                                <!-- Actions principales -->
+                                                <div class="mt-auto">
+                                                    <div class="d-grid gap-2">
+                                                        <button class="btn btn-primary btn-sm load-map-btn" data-map-id="<?php echo $map['id']; ?>">
+                                                            <i class="bi bi-folder-open me-1"></i>Charger cette carte
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                <?php endforeach; ?>
+                            </div>
+
+                            <!-- Pagination -->
+                            <div class="d-flex justify-content-center mt-4">
+                                <nav aria-label="Navigation des cartes">
+                                    <ul class="pagination">
+                                        <li class="page-item disabled">
+                                            <span class="page-link">Précédent</span>
+                                        </li>
+                                        <li class="page-item active">
+                                            <span class="page-link">1</span>
+                                        </li>
+                                        <li class="page-item disabled">
+                                            <span class="page-link">Suivant</span>
+                                        </li>
+                                    </ul>
+                                </nav>
+                            </div>
+                        <?php endif; ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<!-- Modal de confirmation de suppression -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    <i class="bi bi-exclamation-triangle text-warning me-2"></i>Confirmer la suppression
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer la carte <strong id="deleteMapName"></strong> ?</p>
+                <p class="text-muted small">Cette action est irréversible.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// Gestionnaire pour charger une carte
+document.addEventListener('DOMContentLoaded', function() {
+    // Gestionnaire pour les boutons "Charger cette carte"
+    document.querySelectorAll('.load-map-btn').forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            const mapId = this.getAttribute('data-map-id');
+
+            // Redirection vers l'accueil avec l'ID de la carte à charger
+            window.location.href = '/?load=' + mapId;
+        });
+    });
+});
+
+// Fonction pour dupliquer une carte
+function duplicateMap(mapId) {
+    if (confirm('Voulez-vous créer une copie de cette carte ?')) {
+        // TODO: Implémenter la duplication via AJAX
+        alert('Fonction de duplication à implémenter');
+    }
+}
+
+// Fonction pour exporter une carte
+function exportMap(mapId) {
+    // TODO: Implémenter l'export
+    alert('Fonction d\'export à implémenter');
+}
+
+// Fonction pour supprimer une carte
+function deleteMap(mapId, mapName) {
+    document.getElementById('deleteMapName').textContent = mapName;
+    document.getElementById('confirmDeleteBtn').onclick = function() {
+        // TODO: Implémenter la suppression via AJAX
+        alert('Fonction de suppression à implémenter');
+        document.getElementById('deleteModal').querySelector('[data-bs-dismiss="modal"]').click();
+    };
+
+    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
+    modal.show();
+}
+</script>
+
+<?php
+include __DIR__ . '/../partials/footer.php';
+?>

config/config.php

@@ -13,6 +13,8 @@ require __DIR__ . '/../app/Controllers/AppDebugger.php';
 require __DIR__ . '/../app/Controllers/Logger.php';
 require __DIR__ . '/../app/Controllers/HomeController.php';
 require __DIR__ . '/../app/Controllers/Renderer.php';
+require __DIR__ . '/../app/Models/Map.php';
+require __DIR__ . '/../app/Models/MapModel.php';
 
 // Enregistrement de l'autoloader
 Autoloader::register();

logs/app.log

@@ -25,3 +25,64 @@
 [2025-10-12 15:24:10] [Carte créée avec succès, ID: 3] INFO
 [2025-10-12 15:24:10] [Carte mise à jour avec succès, ID: 3] INFO
 [2025-10-12 15:24:10] [Carte créée avec succès, ID: 4] INFO
+[2025-10-12 17:29:35] [EXCEPTION] Exception : Class "MapModel" not found
+[2025-10-12 17:29:45] [EXCEPTION] Exception : Class "MapModel" not found
+[2025-10-12 17:33:18] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:33:20] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:33:47] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:34:00] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:34:04] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:34:09] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:34:22] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:34:52] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:35:22] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:35:33] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:35:48] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:35:51] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:35:52] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:36:04] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:36:09] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:36:12] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:36:15] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:36:35] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:36:51] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:36:57] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:37:02] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4f9df.json] ERROR
+[2025-10-12 17:37:03] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4f9df.json] ERROR
+[2025-10-12 17:37:07] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282643_68ebc813d7030.json] ERROR
+[2025-10-12 17:37:10] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:37:18] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:37:23] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:37:36] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4f9df.json] ERROR
+[2025-10-12 17:37:50] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282650_68ebc81a4da9f.json] ERROR
+[2025-10-12 17:37:59] [Requête SQL exécutée pour ID 1, résultat: trouvé] INFO
+[2025-10-12 17:37:59] [Données de la carte: {"id":1,"name":"Carte exemple modifi\u00e9e","description":"Carte mise \u00e0 jour avec une rivi\u00e8re","width":5,"height":5,"data":"{\"name\": \"Carte exemple modifi\u00e9e\", \"width\": 5, \"height\": 5, \"created_at\": \"2025-10-12 15:23:56\", \"statistics\": {\"width\": 5, \"height\": 5, \"empty_count\": 21, \"filled_count\": 4, \"total_hexagons\": 25, \"empty_percentage\": 84, \"tile_type_counts\": {\"empty\": 21, \"river\": 1, \"castle\": 1, \"forest\": 1, \"mountain\": 1}, \"filled_percentage\": 16}, \"updated_at\": \"2025-10-12 15:23:56\"}","file_path":"storage\/maps\/map_1760282636_68ebc80c556d3.json","created_at":"2025-10-12 15:23:56","updated_at":"2025-10-12 15:23:56"}] INFO
+[2025-10-12 17:37:59] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:40:20] [Requête SQL exécutée pour ID 1, résultat: trouvé] INFO
+[2025-10-12 17:40:20] [Données de la carte: {"id":1,"name":"Carte exemple modifi\u00e9e","description":"Carte mise \u00e0 jour avec une rivi\u00e8re","width":5,"height":5,"data":"{\"name\": \"Carte exemple modifi\u00e9e\", \"width\": 5, \"height\": 5, \"created_at\": \"2025-10-12 15:23:56\", \"statistics\": {\"width\": 5, \"height\": 5, \"empty_count\": 21, \"filled_count\": 4, \"total_hexagons\": 25, \"empty_percentage\": 84, \"tile_type_counts\": {\"empty\": 21, \"river\": 1, \"castle\": 1, \"forest\": 1, \"mountain\": 1}, \"filled_percentage\": 16}, \"updated_at\": \"2025-10-12 15:23:56\"}","file_path":"storage\/maps\/map_1760282636_68ebc80c556d3.json","created_at":"2025-10-12 15:23:56","updated_at":"2025-10-12 15:23:56"}] INFO
+[2025-10-12 17:40:20] [Fichier non trouvé: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:40:20] [Erreur lors du chargement de la carte depuis le fichier: storage/maps/map_1760282636_68ebc80c556d3.json] ERROR
+[2025-10-12 17:40:32] [Requête SQL exécutée pour ID 3, résultat: trouvé] INFO
+[2025-10-12 17:40:32] [Données de la carte: {"id":3,"name":"Carte exemple modifi\u00e9e","description":"Carte mise \u00e0 jour avec une rivi\u00e8re","width":5,"height":5,"data":"{\"name\": \"Carte exemple modifi\u00e9e\", \"width\": 5, \"height\": 5, \"created_at\": \"2025-10-12 15:24:10\", \"statistics\": {\"width\": 5, \"height\": 5, \"empty_count\": 21, \"filled_count\": 4, \"total_hexagons\": 25, \"empty_percentage\": 84, \"tile_type_counts\": {\"empty\": 21, \"river\": 1, \"castle\": 1, \"forest\": 1, \"mountain\": 1}, \"filled_percentage\": 16}, \"updated_at\": \"2025-10-12 15:24:10\"}","file_path":"storage\/maps\/map_1760282650_68ebc81a4da9f.json","created_at":"2025-10-12 15:24:10","updated_at":"2025-10-12 15:24:10"}] INFO
+[2025-10-12 17:40:32] [Contenu du fichier: {
+    "name": "Carte exemple modifiée",
+    "width": 5,
+    "height": 5,
+    "created_at": "2025-10-12 15:24:10",
+    "updated_at": "2025-10-12 15:24:10",
+    "hexagons": [
+        {
+            "q":...] INFO
+[2025-10-12 17:40:32] [Données décodées avec succès] INFO
+[2025-10-12 17:40:33] [Requête SQL exécutée pour ID 1, résultat: trouvé] INFO
+[2025-10-12 17:40:33] [Données de la carte: {"id":1,"name":"Carte exemple modifi\u00e9e","description":"Carte mise \u00e0 jour avec une rivi\u00e8re","width":5,"height":5,"data":"{\"name\": \"Carte exemple modifi\u00e9e\", \"width\": 5, \"height\": 5, \"created_at\": \"2025-10-12 15:23:56\", \"statistics\": {\"width\": 5, \"height\": 5, \"empty_count\": 21, \"filled_count\": 4, \"total_hexagons\": 25, \"empty_percentage\": 84, \"tile_type_counts\": {\"empty\": 21, \"river\": 1, \"castle\": 1, \"forest\": 1, \"mountain\": 1}, \"filled_percentage\": 16}, \"updated_at\": \"2025-10-12 15:23:56\"}","file_path":"storage\/maps\/map_1760282636_68ebc80c556d3.json","created_at":"2025-10-12 15:23:56","updated_at":"2025-10-12 15:23:56"}] INFO
+[2025-10-12 17:40:33] [Contenu du fichier: {
+    "name": "Carte exemple modifiée",
+    "width": 5,
+    "height": 5,
+    "created_at": "2025-10-12 15:23:56",
+    "updated_at": "2025-10-12 15:23:56",
+    "hexagons": [
+        {
+            "q":...] INFO
+[2025-10-12 17:40:33] [Données décodées avec succès] INFO

public/assets/styles.css

@@ -99,4 +99,93 @@ body {
     margin-left: 250px; /* Même marge que main-content */
     background-color: transparent;
     padding: 30px 0 20px 0;
+}
+
+/* Styles pour l'éditeur de carte */
+.map-editor-container {
+    position: relative;
+}
+
+.map-toolbar {
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    padding: 0.75rem;
+}
+
+.map-canvas-container {
+    position: relative;
+    border-radius: 0.375rem;
+}
+
+#mapCanvas {
+    transform-origin: 0 0;
+    transition: transform 0.1s ease-out;
+}
+
+.hexagon {
+    transition: all 0.2s ease;
+    user-select: none;
+}
+
+.hexagon:hover {
+    transform: scale(1.05);
+}
+
+.hexagon.selected {
+    box-shadow: 0 0 0 2px #2196f3;
+}
+
+/* Styles pour les informations de tuile */
+#tileInfo {
+    border: 1px solid #dee2e6;
+}
+
+/* Animation de chargement */
+.spinner-border {
+    width: 3rem;
+    height: 3rem;
+}
+
+/* Styles pour les boutons de zoom */
+.btn-group .btn {
+    border-radius: 0.25rem !important;
+}
+
+.btn-group .btn:not(:last-child) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.btn-group .btn:not(:first-child) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+
+/* Responsive pour l'éditeur de carte */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: relative;
+        top: 0;
+    }
+    
+    .main-content {
+        margin-left: 0;
+        margin-top: 15px;
+    }
+    
+    #global-footer {
+        margin-left: 0;
+    }
+    
+    .map-toolbar {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .map-toolbar .d-flex {
+        justify-content: center;
+    }
 }

public/index.php

@@ -39,10 +39,8 @@ if (isset($routes[$uri])) {
         [$controller, $method] = $route;
         $controller::$method();
     } else {
-        AppDebugger::displayIfDebug('Route mal configurée pour: ' . $uri, 'Router');
+        // Page 404
+        http_response_code(404);
+        echo "Page non trouvée";
     }
-} else {
-    // Page 404
-    http_response_code(404);
-    echo "Page non trouvée";
 }

routes/web.php

@@ -3,9 +3,9 @@
 // Exemple de route
 return [
     '/' => function() {
-        AppDebugger::displayIfDebug('Appel de la route /', 'Route');
         return [HomeController::class, 'index'];
     },
 
+    '/projects' => [HomeController::class, 'projects'],
     '/projects/new' => [HomeController::class, 'newProject'],
 ];