feat: Ajuster la taille des hexagones et améliorer le rendu pour éviter les interstices

public/assets/js/map-editor.js

@@ -8,7 +8,7 @@ class MapEditor {
         this.isDragging = false;
         this.lastMousePos = { x: 0, y: 0 };
         this.selectedTile = null;
-        this.tileSize = 40; // Rayon de l'hexagone (du centre au sommet)
+        this.tileSize = 50; // Rayon de l'hexagone (du centre au sommet)
 
         this.init();
     }
@@ -94,55 +94,51 @@ class MapEditor {
         }
     }
 
-    renderHexagon(q, r, x, y, hexWidth, hexHeight) {
-        const hex = document.createElement('div');
-        hex.className = 'hexagon';
-        hex.dataset.q = q;
-        hex.dataset.r = r;
+renderHexagon(q, r, x, y, hexWidth, hexHeight) {
+    const hex = document.createElement('div');
+    hex.className = 'hexagon';
+    hex.dataset.q = q;
+    hex.dataset.r = r;
 
-    // Positionnement et dimensions : x,y sont les coordonnées du centre
-    // Ajouter un très léger chevauchement pour compenser l'anti-aliasing et éviter les petits interstices
-    const expansion = 1.2; // pixels (chevauchement léger et constant)
+    // Expansion fine juste pour fondre l'anti-aliasing (évite interstice ET chevauchement)
+    const expansion = Math.round(hexWidth * 0.004 * 1000) / 1000;
     const adjWidth = hexWidth + expansion;
     const adjHeight = hexHeight + expansion;
+
     const halfW = adjWidth / 2;
     const halfH = adjHeight / 2;
-    // Conserver les décimales pour respecter le maillage exact et éviter l'accumulation d'erreurs
+
     hex.style.width = adjWidth + 'px';
     hex.style.height = adjHeight + 'px';
-    hex.style.left = (x - halfW) + 'px';
-    hex.style.top = (y - halfH) + 'px';
-
-        // Style de base
-        hex.style.position = 'absolute';
-        hex.style.cursor = 'pointer';
-        hex.style.transition = 'background-color 0.2s';
-        hex.style.backgroundColor = '#ffffff';
-
-        // Créer la forme hexagonale avec CSS (pointy-top)
-        hex.style.clipPath = 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)';
-
-        // Gestionnaire de clic
-        hex.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.selectTile(q, r);
-        });
+    hex.style.left = (Math.round((x - halfW) * 1000) / 1000) + 'px';
+    hex.style.top = (Math.round((y - halfH) * 1000) / 1000) + 'px';
+
+    hex.style.position = 'absolute';
+    hex.style.cursor = 'pointer';
+    hex.style.transition = 'background-color 0.2s';
+    hex.style.backgroundColor = '#ffffff';
+    hex.style.clipPath = 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)';
+
+    hex.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.selectTile(q, r);
+    });
+
+    hex.addEventListener('mouseenter', () => {
+        if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
+            hex.style.backgroundColor = '#e3f2fd';
+        }
+    });
 
-        // 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 = '#ffffff';
+        }
+    });
 
-        hex.addEventListener('mouseleave', () => {
-            if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
-                hex.style.backgroundColor = '#ffffff';
-            }
-        });
+    this.canvas.appendChild(hex);
+}
 
-        this.canvas.appendChild(hex);
-    }
 
     selectTile(q, r) {
         // Désélectionner la tuile précédente
@@ -302,7 +298,7 @@ class MapEditor {
 }
 
 // Initialiser l'éditeur de carte
-(function() {
+(function () {
     function initMapEditor() {
         if (typeof mapData === 'undefined') {
             console.error('MapEditor: mapData non défini');