Fix snake velocity: render cells as 2 chars wide for square aspect

Terminal cells are ~2:1 aspect ratio, so movement appeared faster
vertically. Now each game cell is 2 characters wide.
This commit is contained in:
Mario Zechner 2025-12-27 03:28:30 +01:00
parent 516c0ea8bc
commit 5ae33defd3

View file

@ -168,8 +168,9 @@ class SnakeComponent {
const lines: string[] = []; const lines: string[] = [];
// Clamp game width to available terminal width (leaving space for border) // Each game cell is 2 chars wide to appear square (terminal cells are ~2:1 aspect)
const effectiveWidth = Math.min(GAME_WIDTH, width - 4); const cellWidth = 2;
const effectiveWidth = Math.min(GAME_WIDTH, Math.floor((width - 4) / cellWidth));
const effectiveHeight = GAME_HEIGHT; const effectiveHeight = GAME_HEIGHT;
// Colors // Colors
@ -186,7 +187,7 @@ class SnakeComponent {
lines.push(this.padLine(` ${title}`, width)); lines.push(this.padLine(` ${title}`, width));
// Top border with rounded corners // Top border with rounded corners
lines.push(this.padLine(dim(`${"─".repeat(effectiveWidth)}`), width)); lines.push(this.padLine(dim(`${"─".repeat(effectiveWidth * cellWidth)}`), width));
// Game grid // Game grid
for (let y = 0; y < effectiveHeight; y++) { for (let y = 0; y < effectiveHeight; y++) {
@ -197,13 +198,13 @@ class SnakeComponent {
const isFood = this.state.food.x === x && this.state.food.y === y; const isFood = this.state.food.x === x && this.state.food.y === y;
if (isHead) { if (isHead) {
row += green("●"); // Snake head row += green("██"); // Snake head (2 chars)
} else if (isBody) { } else if (isBody) {
row += green("○"); // Snake body row += green("▓▓"); // Snake body (2 chars)
} else if (isFood) { } else if (isFood) {
row += red("◆"); // Food row += red("◆ "); // Food (2 chars)
} else { } else {
row += dim("·"); // Empty cell row += " "; // Empty cell (2 spaces)
} }
} }
row += dim("│"); row += dim("│");
@ -211,7 +212,7 @@ class SnakeComponent {
} }
// Bottom border with rounded corners // Bottom border with rounded corners
lines.push(this.padLine(dim(`${"─".repeat(effectiveWidth)}`), width)); lines.push(this.padLine(dim(`${"─".repeat(effectiveWidth * cellWidth)}`), width));
// Footer // Footer
if (this.state.gameOver) { if (this.state.gameOver) {