feat: Ajouter la création de projet avec support pour les rayons hexagonaux et mise à jour de la vue

.specstory/history/2025-10-13_08-16Z-adaptation-du-formulaire-pour-éléments-hexagonaux.md

@@ -0,0 +1,254 @@
+<!-- Generated by SpecStory -->
+
+<!-- vscode Session 5c220f9c-27de-408b-9086-4800f19c82f8 (2025-10-13 08:16Z) -->
+
+# Adaptation du formulaire pour éléments hexagonaux (2025-10-13 08:16Z)
+
+_**User (2025-10-13 08:21Z)**_
+
+Dans la view /projects/new
+
+Je souhaite adapter le formulaire pour qu'il soit cohérent.
+La notion de dimaension n'est pas bonne dans le cadre d'élément hexagonaux.
+Je souhaite parler en cases et que le rapport proposés soient adapés à un modèle hexagonale.
+
+Ex. carte de 7 cases, 19 cases, etc (base de 2, 3 cases et plus)
+
+---
+
+_**Assistant (copilot/gpt-5-mini)**_
+
+Je commence par créer une todo list pour tracer les étapes, puis j'ouvre la vue `new.php` pour analyser et modifier le formulaire afin d'utiliser la notion de "cases" et proposer des tailles adaptées pour hexagones (ex. 7, 19, etc.). Résultat attendu : form cohérent pour carte hexagonale (labels, aides, valeurs proposées). Je vais lire la vue `new.php` et le script `new-project.js` pour comprendre les champs actuels et l'interaction JS (résultat: extrait des champs à modifier et points JS à adapter). Je vais ouvrir `new-project.js` pour voir le comportement JS actuel (aperçu modèle, validation) et déterminer les modifications nécessaires. Je vais lire rapidement `MapModel.php` et `Map.php` pour vérifier quels champs sont attendus côté serveur afin de préserver la compatibilité (par ex. si le backend attend `width` et `height`). Cela déterminera si je laisse des champs cachés ou si j'ajoute une conversion côté JS. Je vais appliquer les modifications sur `new.php` et `new-project.js` pour remplacer la notion de pixels/dimensions par "cases", ajouter un sélecteur de presets hexagonaux (7,19,37...) et synchroniser `width`/`height` cachés pour conserver la compatibilité backend. Résultat attendu : formulaire mis à jour et JS qui gère l'affichage/validation. 
+```
+
+```
+J'ai modifié la vue PHP. Maintenant j'adapte `new-project.js` : remplacer validation pixels par validation cases, gérer presets hexagonaux et synchroniser `computedWidth`/`computedHeight`. Je vais appliquer un patch JS. 
+```
+
+```
+Mise à jour effectuée. Je vais marquer la todo 1 comme complétée et passer à la tâche 2 (modifier le formulaire), puis j'ouvrirai les fichiers de langue si présents pour la todo 3. Je vais mettre à jour la todo list. Prochaine étape: chercher s'il existe des fichiers de langue pour FR/EN afin d'ajouter les nouvelles chaînes; sinon, je documenterai où modifier les textes. J'exécute une recherche de fichiers contenant 'locale' ou 'lang' ou le mot 'langue'. Je vais lancer une vérification rapide d'erreurs de lint/compilation pour les fichiers modifiés afin de m'assurer qu'il n'y a pas d'erreurs évidentes (PHP/JS). J'exécute l'outil d'erreurs sur les fichiers modifiés. Progress update: j'ai modifié la vue et le JS pour utiliser la notion de "cases" et ajouter des presets hexagonaux; la validation et la synchronisation avec le backend (champs cachés width/height) ont été implémentées. Prochaine étape: marquer la todo 2 complétée, vérifier le reste (langues, tests rapides) et proposer notes/instructions pour l'utilisateur. J'ai mis à jour le formulaire de création de projet pour utiliser la notion de "cases" et ajouté des presets adaptés aux cartes hexagonales (7, 19, 37, ...). Voici ce que j'ai fait et comment l'essayer.
+
+## Ce que j'ai changé
+Fichiers modifiés :
+- `new.php` — Remplacement du bloc "Dimensions" par :
+  - Choix du mode : "Hexagonale (pré-réglages)" ou "Personnalisée (largeur × hauteur)".
+  - Sélecteur de presets hexagonaux (rayon → nombre de cases) : 7 (R=1), 19 (R=2), 37 (R=3), 61 (R=4), 91 (R=5).
+  - Aide expliquant la formule utilisée (1 + 3R(R+1)).
+  - Champs personnalisés largeur/hauteur en cases (affichés si mode personnalisé).
+  - Deux champs cachés `width` et `height` (`computedWidth` / `computedHeight`) synchronisés pour préserver la compatibilité backend (le serveur attend toujours `width` & `height`).
+
+- `new-project.js` — Adaptation du JS :
+  - Gestion du basculement entre mode preset hexagonal et mode personnalisé.
+  - Calcul du nombre de cases via la formule 1 + 3R(R+1) (affiché dans l'aide).
+  - Heuristique pour estimer une grille rectangulaire couvrant le rayon hexagonal : width = height = 2*R + 1 (suffisante pour initialiser Map côté serveur).
+  - Synchronisation des champs cachés `computedWidth`/`computedHeight` avec les presets ou inputs personnalisés.
+  - Validation côté client adaptée : range valable en "cases" (1–500). Validation de nom inchangée.
+
+Pourquoi cette approche :
+- Le modèle serveur (`Map.php` et `MapModel.php`) attend des `width` et `height` (nombre d'hexagones en largeur/hauteur). Pour rester compatible, j'ai gardé ces champs mais les remplis automatiquement depuis le preset hexagonal (via heuristique 2*R+1).
+- Les presets hexagonaux donnent le nombre total de cases selon un rayon R. Pour créer une structure rectangulaire initiale cohérente, j'estime une grille carrée couvrant le rayon — cela permet d'initialiser la Map et garde la logique simple côté frontend.
+
+## Dev notes / pièces à améliorer (propositions)
+- L'estimation width = height = 2*R + 1 est une heuristique pratique ; si vous préférez une conversion plus précise pour disposer d'une grille "circulaire" (centrée, stockage sparse), on peut :
+  - stocker directement le rayon et adapter la logique serveur pour générer les coordonnées hexagonales en rayon (plutôt que largeur/hauteur rectangulaires), ou
+  - générer côté client une liste q/r et l'envoyer en JSON (nécessite adaptation serveur).
+- Internationalisation : Les nouveaux labels sont en dur (français) dans la vue. Le dépôt contient une recommandation Laravel i18n (.github instructions). Si vous utilisez des fichiers de langue, je peux extraire les nouvelles chaînes dans `app/Resources/lang/fr/*.php` ou l'équivalent du projet.
+- Ajout d'un petit aperçu visuel (mini-grille hexagonale) à côté des presets peut aider l'UX. Je peux l'ajouter si vous voulez.
+
+## Comment tester localement
+1. Ouvrez la page de création : http://map-generator/projects/new (ou l'URL locale que vous utilisez).
+2. Vérifiez :
+   - Mode par défaut : "Hexagonale (pré-réglages)".
+   - Le sélecteur affiche `19 cases — rayon 2` sélectionné par défaut.
+   - Si vous changez le preset, les champs cachés `width`/`height` sont mis à jour (2*R+1).
+   - Si vous passez en "Personnalisée", les champs largeur/hauteur apparaissent et leurs valeurs sont synchronisées avec les champs cachés.
+   - Soumettre : la validation côté client empêche l'envoi si nom vide ou dimensions hors limites.
+3. Vérifiez en backend que les valeurs envoyées (POST) contiennent bien `width` et `height`.
+
+Si vous souhaitez, je peux :
+- Extraire les nouvelles chaînes dans des fichiers de langue FR/EN (indiquer où vous stockez les fichiers de langue).
+- Remplacer l'heuristique par une conversion serveur qui accepte le "rayon hexagonal" directement (nécessite changement MapModel/Map).
+- Ajouter un aperçu visuel simple (SVG ou grille CSS) pour représenter le preset sélectionné.
+
+Souhaitez-vous que j'ajoute les chaînes aux fichiers de langue et/ou que je modifie le backend pour accepter directement un paramètre "radius" hexagonal au lieu de width/height ?
+
+---
+
+_**User (2025-10-13 08:24Z)**_
+
+Remplacer l'heuristique par une conversion serveur qui accepte le "rayon hexagonal" directement (nécessite changement MapModel/Map)
+Ajouter un aperçu visuel simple (SVG ou grille CSS) pour représenter le preset sélectionné
+
+---
+
+_**Assistant (copilot/gpt-5-mini)**_
+
+Je vais mettre à jour la todo list, puis rechercher la route/controller qui gère la création POST /projects pour ajouter et propager un paramètre `radius` au backend. Ensuite je modifierai le modèle `Map` et `MapModel` pour accepter et construire une carte depuis un rayon hexagonal, et j'ajouterai un aperçu SVG côté client. Résultat attendu : backend accepte `radius` (optionnel), crée une map hexagonale basée sur le rayon; frontend montre aperçu visuel du preset et envoie `radius` au serveur. Maintenant je cherche la route et le contrôleur qui reçoivent la création de projet. Je cherche la route POST /projects et le contrôleur qui gère la création. Je vais rechercher 'projects' et 'POST' dans `` et ``. Je vais ouvrir `HomeController.php` pour localiser la méthode qui gère la création POST /projects et ajouter la transmission du paramètre `radius` au MapModel/Map. Ensuite j'ajouterai la méthode statique `Map::fromRadius` et adapterai `MapModel::create` si nécessaire. Je vais chercher la méthode qui gère la soumission POST /projects (créer une map). Probablement dans HomeController ou dans un route qui n'existe pas encore. Je recherche 'action="/projects' et handlers. Je recherche une méthode traitant la route `/projects` dans HomeController (peut être index de projects). J'ouvre le fichier `web.php` pour voir la route `/projects` mapping. Je vais appliquer les modifications côté PHP et JS : 1) ajouter Map::fromRadius et corriger getStatistics; 2) adapter HomeController::projects pour créer la map quand la requête est POST; 3) ajouter le champ caché `radius` et un aperçu SVG dans la vue; 4) modifier le JS pour envoyer `radius` et dessiner l'aperçu. J'applique les patches maintenant. 
+```
+
+```
+Je vais modifier MapModel::create pour accepter radius param (optionnel) et créer Map via Map::fromRadius when radius present; else use existing width/height. I'll patch MapModel::create accordingly. 
+```
+
+```
+Le patch précédent n'a fait que ré-enregistrer la même signature — je dois plutôt adapter le contrôleur HomeController pour construire la Map depuis radius avant d'appeler MapModel::create. Je vais modifier `HomeController.php` pour ajouter une méthode `createProject` ou étendre `projects()` to accept POST. Simpler: add a new route POST '/projects' mapping to HomeController::createProject. Je vais ajouter la route et la méthode. 
+```
+
+```
+
+```
+
+```
+Il faut mettre à jour la vue `new.php` : ajouter champ caché `radius` et l'aperçu SVG. J'applique un patch pour insérer un petit container SVG et le champ `radius`. Je vais éditer la vue. 
+```
+
+```
+Je dois mettre à jour le JS `new-project.js` pour : envoyer `radius`, dessiner aperçu SVG simple. J'applique un patch JS. 
+```
+
+```
+Je mets à jour la todo list : creerProject backend et aperçu fait; ajouter tests rapides et i18n. Ensuite je vais exécuter une vérification d'erreurs PHP/JS sur les fichiers modifiés. Progress update — ce que j'ai fait maintenant
+- J'ai ajouté la prise en charge du paramètre radius côté serveur et côté client.
+  - Backend:
+    - Nouvelle route POST: `/projects/create` (définie dans `web.php`).
+    - Nouvelle méthode `HomeController::createProject()` (dans `HomeController.php`) — lit `name`, `description`, `template`, et `radius` (ou fallback width/height). Crée la Map via:
+      - `Map::fromRadius($name, $radius)` si `radius` fourni,
+      - ou `new Map($name, $width, $height)` sinon.
+    - `Map::fromRadius()` (ajoutée dans `Map.php`) construit une carte hexagonale centrée pour le rayon donné (indexée dans une bounding box 2R+1).
+    - Quelques ajustements dans `Map::getStatistics()` pour compter les hexagones réels présents.
+  - Frontend:
+    - Vue `new.php` mise à jour:
+      - Form `action` pointant sur `/projects/create`.
+      - Champ caché `<input name="radius">` synchronisé.
+      - Conteneur d'aperçu `#hexPreview` (SVG généré par JS).
+    - JS `new-project.js`:
+      - Envoie la valeur `radius` via le champ caché.
+      - Remplacement de l'ancienne heuristique par envoi direct du `radius`.
+      - Ajout d'un aperçu SVG simple qui illustre la disposition des cases pour le preset.
+
+Pourquoi c'est fait ainsi
+- Le modèle serveur (Map/MapModel) nécessite des données structurées. Pour garder la compatibilité et simplifier la migration, la création accepte maintenant directement un rayon (mode hexagonal natif). Cela évite de continuer à estimer width/height depuis le preset côté client.
+- L'aperçu est volontairement léger (SVG simple avec cercles) — il donne un feedback visuel immédiat sans ajouter de dépendances ou de code de rendu hexagonaux complet. On peut remplacer par des vraies formes hexagonales si vous voulez.
+
+Points à vérifier / tests rapides recommandés (je peux les faire pour vous si vous voulez)
+- Ouvrir la page `/projects/new` dans le navigateur local et vérifier :
+  - Le preset `19 cases — rayon 2` est sélectionné par défaut.
+  - L'aperçu montre une mini-grille (SVG).
+  - Basculement sur "Personnalisée" affiche largeur/hauteur et le champ `radius` reste synchronisé / mis à vide selon le mode.
+  - Soumettre le formulaire crée bien un nouveau projet (redirection vers `/projects` après création).
+- Vérifier en base et dans `` qu'un fichier JSON est créé et que sa structure contient les hexagones (q,r) pour un rayon donné.
+- Scénarios à tester :
+  - POST JSON vers `/projects/create` avec `{ name, radius }`.
+  - Form POST classique (navigateur) avec `name` + preset.
+  - Mode personnalisé sans radius (width/height).
+
+Prochaines propositions (optionnelles)
+- Remplacer l'aperçu par un rendu SVG d'hexagones (formes en noir/blanc) au lieu de cercles.
+- Ajouter tests unitaires PHP pour `Map::fromRadius()` (happy path + radius=0 edge case).
+- Extraire les nouvelles chaînes FR/EN dans les fichiers de langue du projet (i18n).
+- Adapter `MapModel` pour stocker un champ `radius` en base (si vous voulez conserver l'origine hexagonale dans les métadonnées).
+
+Souhaitez-vous :
+- Que j'ajoute un rendu SVG exact (hexagones) au lieu de cercles ?
+- Que j'ajoute des tests unitaires pour `Map::fromRadius()` et la création via `HomeController::createProject()` ?
+- Que j'extraie les nouvelles chaînes dans vos fichiers de langue (indiquez l'emplacement si vous en avez) ?
+
+---
+
+_**User (2025-10-13 08:26Z)**_
+
+Que j'ajoute un rendu SVG exact (hexagones) au lieu de cercles
+représentation de la forme en maillage hexagonale
+Je souhaite pouvoir étendre jusqu'au rayon 8
+
+---
+
+_**Assistant (copilot/gpt-5-mini)**_
+
+Je vais mettre à jour la vue pour ajouter les presets rayon 6–8 et remplacer le rendu par des hexagones SVG précis dans `new-project.js` (résultat : preview hexagonale exacte, support radius jusqu'à 8). J'applique les patches maintenant. Je vais 1) ajouter les presets rayon 6–8 dans la view `new.php`, puis 2) remplacer la fonction de rendu dans `new-project.js` par un rendu SVG exact d'hexagones (pointy-top), avec mise à l'échelle pour tenir dans le conteneur (support rayon jusqu'à 8). Résultat attendu : aperçu fidèle en maillage hexagonal. J'applique les modifications maintenant. 
+```
+
+```
+
+```
+
+```
+Vérification d'erreurs sur les fichiers modifiés. Ensuite je mettrai à jour la todo list. Mise à jour todo list: les presets ont été étendus et le rendu SVG hexagonal exact ajouté. J'actualise l'état des todos. Résumé rapide — ce que j'ai implémenté maintenant
+- Rendu d'aperçu remplacé par un maillage hexagonal exact (SVG, pointy-top) dans `new-project.js`.
+- Presets étendus pour supporter rayon 6, 7 et 8 (jusqu'à 217 cases) dans `new.php`.
+- Le frontend envoie toujours le champ `radius` caché au serveur; le backend crée la Map via `Map::fromRadius()` (implémenté) si `radius` fourni.
+- Le preview est mis à l'échelle pour tenir dans le conteneur et reste lisible jusqu'au rayon 8.
+
+Notes techniques et limites
+- Le rendu SVG actuel calcule un bounding box en coordonnées "hex to pixel" puis scale dans un viewBox 0..100 ; c'est robuste pour preview et performant (aucune dépendance).
+- Le calcul axial → pixel utilise la convention pointy-top (angles décalés). Si vous préférez flat-top, je peux basculer rapidement.
+- J'ai choisi de dessiner chaque hexagone comme un `polygon` (6 points). Le style par défaut est neutre (#e9ecef fill, #6c757d stroke). On peut colorer selon template ou tile-type plus tard.
+
+Prochaines étapes possibles (je peux les faire)
+- Ajouter animations/hover dans le preview et montrer le nombre total de cases calculé.
+- Remplacer `Map::fromRadius` pour stocker `radius` explicitement en base (nouvelle colonne) si vous voulez garder la sémantique.
+- Écrire des tests unitaires PHP pour `Map::fromRadius()` + un test JS minimal pour la preview (Jest/karma).
+- Internationaliser les nouvelles chaînes (fichiers de langue FR/EN).
+
+Que voulez-vous que je fasse ensuite ?
+- Ajouter des styles (couleurs) par template dans le rendu SVG ?  
+- Ajouter tests unitaires pour `fromRadius()` ?  
+- Persister `radius` en base et afficher le rayon dans la liste `/projects` ?
+
+Dites-moi la priorité et je continue.
+
+---
+
+_**User (2025-10-13 08:29Z)**_
+
+Aller jusqu'au rayon 12 et supprimer l'option personnalisée
+
+---
+
+_**Assistant (copilot/gpt-5-mini)**_
+
+Je vais mettre à jour la todo list puis modifier la vue `new.php` (retirer l'option personnalisée, étendre presets jusqu'au rayon 12) et le JS `new-project.js` (supprimer le code de mode personnalisé et valider radius max 12). Résultat : plus d'option personnalisée et presets jusqu'à 12. J'applique les patches. Je vais enlever la partie "mode personnalisé" (radio et customSize div), retirer les inputs mapWidth/mapHeight/computedWidth/computedHeight, et ajouter presets radius 1..12 (avec étiquettes), s'assurer que `radiusInput` reste. J'applique le patch. 
+```
+
+```
+Je dois mettre à jour la liste d'options du select `hexRadius` pour inclure 1..12. J'applique un patch pour remplacer les options. 
+```
+
+```
+Je dois enlever le JS relatif au mode personnalisé et aux computedWidth/computedHeight ; simplifier le JS pour n'avoir que presets et radius validation (<=12). J'ouvre le JS pour éditer. Je vais supprimer les variables et le code liés au mode personnalisé et computedWidth/height, et mettre la validation basée sur radius (1..12). J'applique le patch. 
+```
+
+```
+Je vais vérifier les fichiers modifiés pour erreurs. Ensuite mettre à jour la todo list (marquer tâche 8 completed). Mise à jour effectuée — résumé concis des changements
+
+- Suppression de l'option "Personnalisée (largeur × hauteur)" dans la view `new.php`.
+- Le formulaire propose désormais uniquement des presets hexagonaux (rayon 1..12). Les options sont générées dynamiquement (PHP) et le preset par défaut reste rayon 2.
+- Le champ caché `radius` (`#radiusInput`) est conservé et envoyé au backend.
+- Le JavaScript `new-project.js` a été simplifié :
+  - Suppression de la logique "customSize" et des inputs width/height.
+  - Validation côté client : radius obligatoire entre 1 et 12.
+  - Preview SVG (hexagones pointy-top) conserve le rendu exact et s'adapte pour les rayons jusqu'à 12.
+- Backend : la création de la Map via le paramètre `radius` (via `HomeController::createProject()` et `Map::fromRadius()`) est déjà en place — compatible avec cette vue.
+
+Prochaine étape recommandée (si vous voulez que j'avance)
+- Exécuter un test rapide en local : ouvrir `https://map-generator/projects/new` et créer une carte (je peux le faire pour vous si vous voulez que j'exécute des tests automatisés).
+- Extraire les nouvelles chaînes pour i18n (FR/EN).
+- Ajouter styles/coloration selon templates pour l'aperçu SVG.
+
+Souhaitez-vous que je lance un test rapide (navigateur simulé or curl) pour vérifier la création côté serveur et la génération du fichier JSON dans `` ?
+
+---
+
+_**User (2025-10-13 08:30Z)**_
+
+Intervertir l'affichage exemple : Rayon 2 (7 cases)
+Aller jusqu'à rayon 15
+
+---
+
+_**Assistant (copilot/gpt-5-mini)**_
+
+
+
+---
+

app/Controllers/HomeController.php

@@ -58,6 +58,73 @@ if (!class_exists('HomeController')) {
             Renderer::render('projects/new', $data);
         }
 
+        /**
+         * Crée un nouveau projet (endpoint POST)
+         * Accepte form POST classique ou JSON
+         */
+        public static function createProject()
+        {
+            if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+                http_response_code(405);
+                echo json_encode(['success' => false, 'message' => 'Méthode non autorisée']);
+                return;
+            }
+
+            $contentType = $_SERVER['CONTENT_TYPE'] ?? '';
+            if (strpos($contentType, 'application/json') !== false) {
+                $raw = file_get_contents('php://input');
+                $input = json_decode($raw, true) ?: [];
+            } else {
+                $input = $_POST;
+            }
+
+            $name = isset($input['name']) ? trim($input['name']) : '';
+            $description = $input['description'] ?? null;
+            $template = $input['template'] ?? null;
+
+            if (!$name) {
+                http_response_code(400);
+                echo json_encode(['success' => false, 'message' => 'Le nom est requis']);
+                return;
+            }
+
+            // Si un radius est envoyé, créer la map via radius
+            $radius = isset($input['radius']) ? (int) $input['radius'] : null;
+            $map = null;
+            if ($radius && $radius > 0) {
+                $map = Map::fromRadius($name, $radius);
+            } else {
+                // Fallback: utiliser width/height
+                $width = isset($input['width']) ? (int) $input['width'] : 10;
+                $height = isset($input['height']) ? (int) $input['height'] : 10;
+                $map = new Map($name, $width, $height);
+            }
+
+            $created = MapModel::create($map, $description);
+
+            // Détecter AJAX
+            $isAjax = false;
+            $xrw = $_SERVER['HTTP_X_REQUESTED_WITH'] ?? '';
+            if (strtolower($xrw) === 'xmlhttprequest' || strpos($contentType, 'application/json') !== false) {
+                $isAjax = true;
+            }
+
+            if ($created) {
+                if ($isAjax) {
+                    echo json_encode(['success' => true, 'id' => $created]);
+                } else {
+                    header('Location: /projects');
+                }
+            } else {
+                if ($isAjax) {
+                    http_response_code(500);
+                    echo json_encode(['success' => false, 'message' => 'Erreur lors de la création']);
+                } else {
+                    header('Location: /projects');
+                }
+            }
+        }
+
         /**
          * Affiche la liste des projets (cartes) disponibles.
          */

app/Models/Map.php

@@ -403,7 +403,12 @@ if (!class_exists('Map')) {
          */
         public function getStatistics(): array
         {
-            $totalHexagons = $this->width * $this->height;
+            // Calculer le nombre réel d'hexagones présents (certains emplacements peuvent être absents
+            // lorsqu'on construit une carte à partir d'un rayon hexagonal)
+            $totalHexagons = 0;
+            foreach ($this->hexagons as $row) {
+                $totalHexagons += count($row);
+            }
             $tileTypeCounts = [];
             $emptyCount = $this->countEmptyTiles();
 
@@ -432,6 +437,39 @@ if (!class_exists('Map')) {
             ];
         }
 
+        /**
+         * Crée une carte à partir d'un rayon hexagonal (axial coordinates)
+         *
+         * @param string $name
+         * @param int $radius
+         * @return Map
+         */
+        public static function fromRadius(string $name, int $radius): Map
+        {
+            // Bounding box size
+            $size = 2 * $radius + 1;
+            $map = new self($name, $size, $size);
+
+            // Remplacer l'initialisation par une grille qui contient uniquement
+            // les hexagones à l'intérieur du rayon. Les hexagones sont indexés
+            // dans l'array par des indices positifs (offset) mais conservent
+            // leurs coordonnées axiales originales dans l'objet Hexagon.
+            $map->hexagons = [];
+
+            for ($q = -$radius; $q <= $radius; $q++) {
+                $r1 = max(-$radius, -$q - $radius);
+                $r2 = min($radius, -$q + $radius);
+                for ($r = $r1; $r <= $r2; $r++) {
+                    $qi = $q + $radius; // index pour stockage
+                    $ri = $r + $radius;
+                    if (!isset($map->hexagons[$qi])) $map->hexagons[$qi] = [];
+                    $map->hexagons[$qi][$ri] = new Hexagon($q, $r, new Tile(['type' => 'empty']));
+                }
+            }
+
+            return $map;
+        }
+
         /**
          * Convertit la carte en tableau pour la sérialisation JSON
          *

app/Models/MapModel.php

@@ -75,8 +75,8 @@ if (!class_exists('MapModel')) {
          * @param string|null $description Description optionnelle
          * @return int|false L'ID de la carte créée ou false en cas d'erreur
          */
-        public static function create(Map $map, ?string $description = null): int|false
-        {
+    public static function create(Map $map, ?string $description = null): int|false
+    {
             $pdo = self::getPDO();
 
             // Générer le chemin du fichier

app/Views/projects/new.php

@@ -27,7 +27,7 @@ include __DIR__ . '/../partials/header.php';
                         </h5>
                     </div>
                     <div class="card-body">
-                        <form id="newProjectForm" action="/projects" method="POST">
+                        <form id="newProjectForm" action="/projects/create" method="POST">
                             <!-- Nom de la carte -->
                             <div class="mb-3">
                                 <label for="mapName" class="form-label">
@@ -38,23 +38,41 @@ include __DIR__ . '/../partials/header.php';
                                 <div class="form-text">Choisissez un nom descriptif pour votre carte</div>
                             </div>
 
-                            <!-- Dimensions de la carte -->
+                            <!-- Taille de la carte (en cases, orientation hexagonale) -->
                             <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>
+                                    <i class="bi bi-grid-3x3 me-1"></i>Taille de la carte (en cases) <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>
+
+                                <!-- 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 -->

public/assets/js/pages/new-project.js

@@ -28,27 +28,139 @@
             }
         });
     }
+    // Gestion des presets hexagonaux et synchronisation du radius
+    var hexPresets = document.getElementById('hexPresets');
+    var hexRadius = document.getElementById('hexRadius');
+
+    function hexCellsFromRadius(r) {
+        // Formule nombre d'hexagones pour un rayon r : 1 + 3r(r+1)
+        r = parseInt(r, 10) || 0;
+        return 1 + 3 * r * (r + 1);
+    }
+
+    // Mettre à jour le champ radius caché quand le preset change
+    if (hexRadius) {
+        hexRadius.addEventListener('change', function() {
+            var r = parseInt(this.value, 10) || 0;
+            var radiusInput = document.getElementById('radiusInput');
+            if (radiusInput) radiusInput.value = r;
+            // redraw preview
+            drawHexPreview(r);
+        });
+    }
+
+    // Dessiner un aperçu SVG exact en maillage hexagonal (pointy-top)
+    function drawHexPreview(radius) {
+        var container = document.getElementById('hexPreview');
+        if (!container) return;
+        container.innerHTML = '';
+
+        var svgNS = 'http://www.w3.org/2000/svg';
+        var svg = document.createElementNS(svgNS, 'svg');
+        svg.setAttribute('width', '100%');
+        svg.setAttribute('height', '100%');
+        svg.setAttribute('viewBox', '0 0 100 100');
+
+        // Générer coordonnées axiales des hexagones pour un rayon donné
+        var cells = [];
+        for (var q = -radius; q <= radius; q++) {
+            var r1 = Math.max(-radius, -q - radius);
+            var r2 = Math.min(radius, -q + radius);
+            for (var r = r1; r <= r2; r++) {
+                cells.push({q: q, r: r});
+            }
+        }
+
+        // Paramètres visuels : on va centrer et scaler dans le viewBox 0..100
+        var N = cells.length;
+
+        // Pour positionner les hex, utiliser conversion axial -> pixel pour pointy-top
+        function hexToPixel(q, r, size) {
+            var x = size * Math.sqrt(3) * (q + r/2);
+            var y = size * 3/2 * r;
+            return { x: x, y: y };
+        }
+
+        // Taille estimée : calculer bounding box non-scalée
+        var size = 1; // unité
+        var points = cells.map(function(c) { return hexToPixel(c.q, c.r, size); });
+        var xs = points.map(p => p.x);
+        var ys = points.map(p => p.y);
+        var minX = Math.min.apply(null, xs);
+        var maxX = Math.max.apply(null, xs);
+        var minY = Math.min.apply(null, ys);
+        var maxY = Math.max.apply(null, ys);
+
+        var width = maxX - minX || 1;
+        var height = maxY - minY || 1;
+
+        // Définir un scale pour remplir le viewBox (tous en %) avec marges
+        var padding = 6; // % padding
+        var avail = 100 - 2*padding;
+        var scale = Math.min(avail / width, avail / height);
+
+        // Size (pixel unit in viewBox coords)
+        var hexSize = scale * 0.9; // ajustement visuel
+
+        // Center offset
+        var offsetX = (100 - (width * scale)) / 2 - minX * scale;
+        var offsetY = (100 - (height * scale)) / 2 - minY * scale;
+
+        // Fonction pour dessiner un hexagon pointy-top at (cx,cy) with size s
+        function hexPoints(cx, cy, s) {
+            var pts = [];
+            for (var i = 0; i < 6; i++) {
+                var angle_deg = 60 * i - 30;
+                var angle_rad = Math.PI / 180 * angle_deg;
+                var x = cx + s * Math.cos(angle_rad);
+                var y = cy + s * Math.sin(angle_rad);
+                pts.push(x + ',' + y);
+            }
+            return pts.join(' ');
+        }
+
+        // Draw each hex
+        cells.forEach(function(c, idx) {
+            var p = hexToPixel(c.q, c.r, size);
+            var cx = p.x * scale + offsetX;
+            var cy = p.y * scale + offsetY;
+            var s = hexSize / 2; // visual half-size
+
+            var poly = document.createElementNS(svgNS, 'polygon');
+            poly.setAttribute('points', hexPoints(cx, cy, s));
+            poly.setAttribute('fill', '#e9ecef');
+            poly.setAttribute('stroke', '#6c757d');
+            poly.setAttribute('stroke-width', Math.max(0.2, s * 0.05));
+            poly.setAttribute('opacity', '0.95');
+            svg.appendChild(poly);
+        });
+
+        container.appendChild(svg);
+    }
+
+    // initial draw (respecter la valeur par défaut du select)
+    if (hexRadius) drawHexPreview(parseInt(hexRadius.value,10));
 
     var form = document.getElementById('newProjectForm');
     if (form) {
         form.addEventListener('submit', function(e) {
             var name = (document.getElementById('mapName').value || '').trim();
-            var width = parseInt(document.getElementById('mapWidth').value, 10) || 0;
-            var height = parseInt(document.getElementById('mapHeight').value, 10) || 0;
+            var radius = parseInt((document.getElementById('radiusInput') || {}).value, 10) || 0;
 
             if (!name) {
                 alert('Veuillez saisir un nom pour votre carte.');
                 e.preventDefault();
                 return;
             }
-
-            if (width < 100 || width > 2000 || height < 100 || height > 2000) {
-                alert('Les dimensions doivent être comprises entre 100x100 et 2000x2000 pixels.');
+            // Validation radius (1..15)
+            if (radius < 1 || radius > 15) {
+                alert('Le rayon doit être compris entre 1 et 15.');
                 e.preventDefault();
                 return;
             }
 
-            console.log('Création du projet:', { name: name, width: width, height: height, template: document.getElementById('mapTemplate').value });
+            // Log pour debug
+            console.log('Création du projet (radius):', { name: name, radius: radius, template: document.getElementById('mapTemplate').value });
         });
     }
 })();

routes/web.php

@@ -7,6 +7,8 @@ return [
     },
 
     '/projects' => [HomeController::class, 'projects'],
+    // POST création d'un projet
+    '/projects/create' => [HomeController::class, 'createProject'],
     '/projects/new' => [HomeController::class, 'newProject'],
     '/projects/delete' => [HomeController::class, 'deleteProject'],
 ];