ssa/hexo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix map clipping - reduce HEX_SIZE to 14 and properly center

Browse Source
This commit is contained in:
sokol
2026-02-21 21:12:30 +03:00
parent cb97e167fb
commit 1d04a99bd7
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/game.js
View File

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