1aa18376d5
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>
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import Phaser from 'phaser';
|
|
import { SCALE, RINK_WIDTH } from '../config/constants';
|
|
|
|
/**
|
|
* Utility class for converting between game coordinates (meters) and screen coordinates (pixels)
|
|
*/
|
|
export class CoordinateUtils {
|
|
/**
|
|
* Convert game coordinates (meters, centered) to screen coordinates (pixels)
|
|
* @param scene Phaser scene
|
|
* @param gameX X position in meters (0 = center)
|
|
* @param gameY Y position in meters (0 = center)
|
|
* @returns Screen coordinates {x, y} in pixels
|
|
*/
|
|
static gameToScreen(scene: Phaser.Scene, gameX: number, gameY: number): { x: number; y: number } {
|
|
const centerX = (scene.game.config.width 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
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Convert screen coordinates (pixels) to game coordinates (meters, centered)
|
|
* @param scene Phaser scene
|
|
* @param screenX X position in pixels
|
|
* @param screenY Y position in pixels
|
|
* @returns Game coordinates {x, y} in meters
|
|
*/
|
|
static screenToGame(scene: Phaser.Scene, screenX: number, screenY: number): { x: number; y: number } {
|
|
const centerX = (scene.game.config.width 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
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Get the center of the screen in pixels
|
|
* @param scene Phaser scene
|
|
* @returns Center coordinates {x, y} in pixels
|
|
*/
|
|
static getScreenCenter(scene: Phaser.Scene): { x: number; y: number } {
|
|
return {
|
|
x: (scene.game.config.width as number) / 2,
|
|
y: (scene.game.config.height as number) / 2
|
|
};
|
|
}
|
|
}
|