centralize goalXOffset positioning

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>

src/engine/game-engine.js

@@ -26,8 +26,10 @@ class GameEngine {
     }
 
     setupPlayers() {
+        const goalXOffset = this.renderer.goalXOffset;
+
         const homeTeamPositions = [
-            { role: 'G', x: 10, 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: 970, 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 },

src/entities/player.js

@@ -149,7 +149,6 @@ class Player {
 
         // Handle faceoff positioning
         if (gameState.faceoff && gameState.faceoff.isActive) {
-            console.log(`Player ${this.name} (${this.role}) in faceoff mode, phase: ${gameState.faceoff.phase}`);
             this.handleFaceoffPositioning(gameState, players);
             return;
         }
@@ -246,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(10, gameState.rink.centerY) :
+            new Vector2(goalXOffset, gameState.rink.centerY) :
-            new Vector2(gameState.rink.width - 10, gameState.rink.centerY);
+            new Vector2(gameState.rink.width - goalXOffset, gameState.rink.centerY);
 
         const crease = {
             x: goal.x - 30,

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.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.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.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) {
@@ -126,12 +141,12 @@ class Renderer {
         const goalY = rink.centerY;
 
         this.ctx.beginPath();
-        this.ctx.arc(0, 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, 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();
     }