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

centralize goalXOffset positioning

Browse Source 
Make goalXOffset a renderer property and use it consistently across:
- goal rendering with lines and depth
- goalie positioning in game engine
- goalie AI behavior in player updates

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Pierre Wessman 2025-09-16 19:58:40 +02:00
parent 31015bf280
commit 14e0794aae
3 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/engine/game-engine.js
View File

@ -26,8 +26,10 @@ class GameEngine {
} }
setupPlayers() { setupPlayers() {
const goalXOffset = this.renderer.goalXOffset;
const homeTeamPositions = [ const homeTeamPositions = [
{ role: 'G', x: 80, y: 300 }, { role: 'G', x: goalXOffset, y: 300 },
{ role: 'LD', x: 200, y: 220 }, { role: 'LD', x: 200, y: 220 },
{ role: 'RD', x: 200, y: 380 }, { role: 'RD', x: 200, y: 380 },
{ role: 'LW', x: 350, y: 200 }, { role: 'LW', x: 350, y: 200 },
@ -36,7 +38,7 @@ class GameEngine {
]; ];
const awayTeamPositions = [ const awayTeamPositions = [
{ role: 'G', x: 920, y: 300 }, { role: 'G', x: 1000 - goalXOffset, y: 300 },
{ role: 'LD', x: 800, y: 220 }, { role: 'LD', x: 800, y: 220 },
{ role: 'RD', x: 800, y: 380 }, { role: 'RD', x: 800, y: 380 },
{ role: 'LW', x: 650, y: 200 }, { role: 'LW', x: 650, y: 200 },

6
src/entities/player.js
View File

@ -245,9 +245,11 @@ class Player {
* @param {Array} players - Array of all players (unused but maintained for consistency) * @param {Array} players - Array of all players (unused but maintained for consistency)
*/ */
updateGoalie(gameState, puck, players) { updateGoalie(gameState, puck, players) {
const goalXOffset = gameState.renderer?.goalXOffset || 80; // Fallback to 80 if renderer not available
const goal = this.team === 'home' ? const goal = this.team === 'home' ?
new Vector2(50, gameState.rink.centerY) : new Vector2(goalXOffset, gameState.rink.centerY) :
new Vector2(gameState.rink.width - 50, gameState.rink.centerY); new Vector2(gameState.rink.width - goalXOffset, gameState.rink.centerY);
const crease = { const crease = {
x: goal.x - 30, x: goal.x - 30,

39
src/systems/renderer.js
View File

@ -2,6 +2,7 @@ class Renderer {
constructor(canvas) { constructor(canvas) {
this.canvas = canvas; this.canvas = canvas;
this.ctx = canvas.getContext('2d'); this.ctx = canvas.getContext('2d');
this.goalXOffset = 80; // Distance from rink edge
this.setupCanvas(); this.setupCanvas();
this.setupFixedCamera(); this.setupFixedCamera();
@ -97,24 +98,38 @@ class Renderer {
const goalY = rink.centerY; const goalY = rink.centerY;
const goalHeight = rink.goalHeight; const goalHeight = rink.goalHeight;
const goalDepth = 25;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(0, goalY - goalHeight); this.ctx.moveTo(this.goalXOffset, goalY - goalHeight);
this.ctx.lineTo(-10, goalY - goalHeight); this.ctx.lineTo(this.goalXOffset - goalDepth, goalY - goalHeight);
this.ctx.lineTo(-10, goalY + goalHeight); this.ctx.lineTo(this.goalXOffset - goalDepth, goalY + goalHeight);
this.ctx.lineTo(0, goalY + goalHeight); this.ctx.lineTo(this.goalXOffset, goalY + goalHeight);
this.ctx.stroke(); this.ctx.stroke();
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(rink.width, goalY - goalHeight); this.ctx.moveTo(rink.width - this.goalXOffset, goalY - goalHeight);
this.ctx.lineTo(rink.width + 10, goalY - goalHeight); this.ctx.lineTo(rink.width - this.goalXOffset + goalDepth, goalY - goalHeight);
this.ctx.lineTo(rink.width + 10, goalY + goalHeight); this.ctx.lineTo(rink.width - this.goalXOffset + goalDepth, goalY + goalHeight);
this.ctx.lineTo(rink.width, goalY + goalHeight); this.ctx.lineTo(rink.width - this.goalXOffset, goalY + goalHeight);
this.ctx.stroke(); this.ctx.stroke();
this.ctx.fillStyle = 'rgba(211, 47, 47, 0.1)'; this.ctx.fillStyle = 'rgba(211, 47, 47, 0.1)';
this.ctx.fillRect(-10, goalY - goalHeight, 10, goalHeight * 2); this.ctx.fillRect(this.goalXOffset - goalDepth, goalY - goalHeight, goalDepth, goalHeight * 2);
this.ctx.fillRect(rink.width, goalY - goalHeight, 10, goalHeight * 2); this.ctx.fillRect(rink.width - this.goalXOffset, goalY - goalHeight, goalDepth, goalHeight * 2);
// Goal lines
this.ctx.strokeStyle = '#d32f2f';
this.ctx.lineWidth = 3;
this.ctx.beginPath();
this.ctx.moveTo(this.goalXOffset, 0);
this.ctx.lineTo(this.goalXOffset, rink.height);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(rink.width - this.goalXOffset, 0);
this.ctx.lineTo(rink.width - this.goalXOffset, rink.height);
this.ctx.stroke();
} }
drawCreases(rink) { drawCreases(rink) {
@ -126,12 +141,12 @@ class Renderer {
const goalY = rink.centerY; const goalY = rink.centerY;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(60, goalY, creaseRadius, -Math.PI/2, Math.PI/2); this.ctx.arc(this.goalXOffset, goalY, creaseRadius, -Math.PI/2, Math.PI/2);
this.ctx.fill(); this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(rink.width - 60, goalY, creaseRadius, Math.PI/2, -Math.PI/2); this.ctx.arc(rink.width - this.goalXOffset, goalY, creaseRadius, Math.PI/2, -Math.PI/2);
this.ctx.fill(); this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
} }