From 1aa18376d5a7cc4b219744e633efcb7a26e59019 Mon Sep 17 00:00:00 2001 From: Pierre Wessman <4029607+pierrewessman@users.noreply.github.com> Date: Fri, 3 Oct 2025 13:11:59 +0200 Subject: [PATCH] Fix coordinate system to use rink center instead of canvas center MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When the pause button was added below the rink, it increased the canvas height (RINK_HEIGHT + UI_BOTTOM_PADDING). The coordinate conversion was incorrectly using the full canvas center (including UI padding) instead of just the rink center, causing y=0 to shift 30 pixels below the actual center of the rink. Now CoordinateUtils.gameToScreen/screenToGame correctly use RINK_WIDTH for centerY calculation, ensuring y=0 is always at the rink center regardless of UI elements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/utils/coordinates.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/utils/coordinates.ts b/src/utils/coordinates.ts index 17adc69..043f48a 100644 --- a/src/utils/coordinates.ts +++ b/src/utils/coordinates.ts @@ -1,5 +1,5 @@ import Phaser from 'phaser'; -import { SCALE } from '../config/constants'; +import { SCALE, RINK_WIDTH } from '../config/constants'; /** * Utility class for converting between game coordinates (meters) and screen coordinates (pixels) @@ -14,7 +14,8 @@ export class CoordinateUtils { */ static gameToScreen(scene: Phaser.Scene, gameX: number, gameY: number): { x: number; y: number } { const centerX = (scene.game.config.width as number) / 2; - const centerY = (scene.game.config.height as number) / 2; + // Center Y should be the center of the rink (not the full canvas including UI padding) + const centerY = (RINK_WIDTH * SCALE) / 2; return { x: centerX + gameX * SCALE, y: centerY - gameY * SCALE // Negative Y because screen coords increase downward @@ -30,7 +31,8 @@ export class CoordinateUtils { */ static screenToGame(scene: Phaser.Scene, screenX: number, screenY: number): { x: number; y: number } { const centerX = (scene.game.config.width as number) / 2; - const centerY = (scene.game.config.height as number) / 2; + // Center Y should be the center of the rink (not the full canvas including UI padding) + const centerY = (RINK_WIDTH * SCALE) / 2; return { x: (screenX - centerX) / SCALE, y: -(screenY - centerY) / SCALE // Negative Y to convert screen coords back to game coords