From 1d04a99bd7c9b09f5baead598ba11b8419a99fe5 Mon Sep 17 00:00:00 2001
From: sokol <sokol@HP>
Date: Sat, 21 Feb 2026 21:12:30 +0300
Subject: [PATCH] Fix map clipping - reduce HEX_SIZE to 14 and properly center

---
 public/game.js | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/public/game.js b/public/game.js
index d58ea86..1322ab3 100644
--- a/public/game.js
+++ b/public/game.js
@@ -7,7 +7,7 @@ import { HexMap, CELL_TYPES } from './map.js';
 import { AIBot } from './ai-bot.js';
 
 // Game constants
-const HEX_SIZE = 16;
+const HEX_SIZE = 14;
 const MAP_SIZE = 20;
 const ANIMATION_DURATION = 300;
 
@@ -206,25 +206,28 @@ class GameUI {
     const canvasHeight = this.canvas.height;
 
     const sqrt3 = Math.sqrt(3);
-    // Calculate map bounds with proper padding for hex visibility
-    // For pointy-top hex: width = sqrt(3) * size
-    // Rightmost hex center (q=19, r=19): x = HEX_SIZE * sqrt3 * (19 + 19/2) = HEX_SIZE * sqrt3 * 28.5
-    // Leftmost hex center (q=0, r=0): x = 0
-    // Add padding for full hex visibility
-    const hexPadding = HEX_SIZE * 2.5; // Extra padding for hex radius
+    
+    // Calculate actual map bounds
+    // For pointy-top hex grid:
+    // - Width spans from q=0 to q=19, with r offset
+    // - Rightmost point: (q=19, r=19) at x = HEX_SIZE * sqrt3 * 28.5
+    // - Height spans from r=0 to r=19
+    // - Bottommost point: (any q, r=19) at y = HEX_SIZE * 1.5 * 19
     
     const mapWidth = HEX_SIZE * sqrt3 * ((MAP_SIZE - 1) + (MAP_SIZE - 1) / 2);
     const mapHeight = HEX_SIZE * 1.5 * (MAP_SIZE - 1);
-
+    
+    // Add padding for hex radius (hex extends beyond center point)
+    const hexRadius = HEX_SIZE;
+    const totalWidth = mapWidth + 2 * hexRadius;
+    const totalHeight = mapHeight + 2 * hexRadius;
+    
     // Center the map on canvas
-    this.offsetX = (canvasWidth - mapWidth) / 2;
-    this.offsetY = (canvasHeight - mapHeight) / 2;
+    this.offsetX = (canvasWidth - totalWidth) / 2 + hexRadius;
+    this.offsetY = (canvasHeight - totalHeight) / 2 + hexRadius;
     
-    // Ensure minimum padding
-    if (this.offsetX < hexPadding) this.offsetX = hexPadding;
-    if (this.offsetY < hexPadding) this.offsetY = hexPadding;
-    
-    console.log(`[GAME] Map centered: offsetX=${this.offsetX}, offsetY=${this.offsetY}, canvas=${canvasWidth}x${canvasHeight}`);
+    console.log(`[GAME] Map: canvas=${canvasWidth}x${canvasHeight}, map=${mapWidth.toFixed(0)}x${mapHeight.toFixed(0)}, total=${totalWidth.toFixed(0)}x${totalHeight.toFixed(0)}`);
+    console.log(`[GAME] Offset: x=${this.offsetX.toFixed(1)}, y=${this.offsetY.toFixed(1)}`);
   }
 
   setupEventListeners() {