pierre/hockey-manager-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix coordinate system to use rink center instead of canvas center

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Pierre Wessman 2025-10-03 13:11:59 +02:00
parent 43ff271582
commit 1aa18376d5
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/utils/coordinates.ts
View File

@ -1,5 +1,5 @@
import Phaser from 'phaser'; 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) * 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 } { static gameToScreen(scene: Phaser.Scene, gameX: number, gameY: number): { x: number; y: number } {
const centerX = (scene.game.config.width as number) / 2; 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 { return {
x: centerX + gameX * SCALE, x: centerX + gameX * SCALE,
y: centerY - gameY * SCALE // Negative Y because screen coords increase downward 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 } { static screenToGame(scene: Phaser.Scene, screenX: number, screenY: number): { x: number; y: number } {
const centerX = (scene.game.config.width as number) / 2; 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 { return {
x: (screenX - centerX) / SCALE, x: (screenX - centerX) / SCALE,
y: -(screenY - centerY) / SCALE // Negative Y to convert screen coords back to game coords y: -(screenY - centerY) / SCALE // Negative Y to convert screen coords back to game coords