diff --git a/src/engine/game-engine.js b/src/engine/game-engine.js index 5f7cfc2..7b75640 100644 --- a/src/engine/game-engine.js +++ b/src/engine/game-engine.js @@ -26,8 +26,10 @@ class GameEngine { } setupPlayers() { + const goalXOffset = this.renderer.goalXOffset; + const homeTeamPositions = [ - { role: 'G', x: 80, y: 300 }, + { role: 'G', x: goalXOffset, y: 300 }, { role: 'LD', x: 200, y: 220 }, { role: 'RD', x: 200, y: 380 }, { role: 'LW', x: 350, y: 200 }, @@ -36,7 +38,7 @@ class GameEngine { ]; const awayTeamPositions = [ - { role: 'G', x: 920, y: 300 }, + { role: 'G', x: 1000 - goalXOffset, y: 300 }, { role: 'LD', x: 800, y: 220 }, { role: 'RD', x: 800, y: 380 }, { role: 'LW', x: 650, y: 200 }, diff --git a/src/entities/player.js b/src/entities/player.js index cab9c0c..df21ef5 100644 --- a/src/entities/player.js +++ b/src/entities/player.js @@ -245,9 +245,11 @@ class Player { * @param {Array} players - Array of all players (unused but maintained for consistency) */ updateGoalie(gameState, puck, players) { + const goalXOffset = gameState.renderer?.goalXOffset || 80; // Fallback to 80 if renderer not available + const goal = this.team === 'home' ? - new Vector2(50, gameState.rink.centerY) : - new Vector2(gameState.rink.width - 50, gameState.rink.centerY); + new Vector2(goalXOffset, gameState.rink.centerY) : + new Vector2(gameState.rink.width - goalXOffset, gameState.rink.centerY); const crease = { x: goal.x - 30, diff --git a/src/systems/renderer.js b/src/systems/renderer.js index 986b99e..33cbd2d 100644 --- a/src/systems/renderer.js +++ b/src/systems/renderer.js @@ -2,6 +2,7 @@ class Renderer { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); + this.goalXOffset = 80; // Distance from rink edge this.setupCanvas(); this.setupFixedCamera(); @@ -97,24 +98,38 @@ class Renderer { const goalY = rink.centerY; const goalHeight = rink.goalHeight; + const goalDepth = 25; this.ctx.beginPath(); - this.ctx.moveTo(0, goalY - goalHeight); - this.ctx.lineTo(-10, goalY - goalHeight); - this.ctx.lineTo(-10, goalY + goalHeight); - this.ctx.lineTo(0, goalY + goalHeight); + this.ctx.moveTo(this.goalXOffset, goalY - goalHeight); + this.ctx.lineTo(this.goalXOffset - goalDepth, goalY - goalHeight); + this.ctx.lineTo(this.goalXOffset - goalDepth, goalY + goalHeight); + this.ctx.lineTo(this.goalXOffset, goalY + goalHeight); this.ctx.stroke(); this.ctx.beginPath(); - this.ctx.moveTo(rink.width, goalY - goalHeight); - this.ctx.lineTo(rink.width + 10, goalY - goalHeight); - this.ctx.lineTo(rink.width + 10, goalY + goalHeight); - this.ctx.lineTo(rink.width, goalY + goalHeight); + this.ctx.moveTo(rink.width - this.goalXOffset, goalY - goalHeight); + this.ctx.lineTo(rink.width - this.goalXOffset + goalDepth, goalY - goalHeight); + this.ctx.lineTo(rink.width - this.goalXOffset + goalDepth, goalY + goalHeight); + this.ctx.lineTo(rink.width - this.goalXOffset, goalY + goalHeight); this.ctx.stroke(); this.ctx.fillStyle = 'rgba(211, 47, 47, 0.1)'; - this.ctx.fillRect(-10, goalY - goalHeight, 10, goalHeight * 2); - this.ctx.fillRect(rink.width, goalY - goalHeight, 10, goalHeight * 2); + this.ctx.fillRect(this.goalXOffset - goalDepth, goalY - goalHeight, goalDepth, 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) { @@ -126,12 +141,12 @@ class Renderer { const goalY = rink.centerY; 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.stroke(); 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.stroke(); }