index.html

@@ -68,7 +68,6 @@
         </div>
     </div>
 
-    <script src="src/constants/rink-constants.js"></script>
     <script src="src/utils/vector.js"></script>
     <script src="src/utils/physics.js"></script>
     <script src="src/entities/player.js"></script>

src/constants/rink-constants.js

@@ -1,15 +0,0 @@
-/**
- * Hockey Rink Constants
- * Centralized configuration for all rink dimensions and circle sizes
- */
-
-// Rink circle sizes (in pixels)
-const RINK_CIRCLES = {
-    CENTER_ICE_RADIUS: 80,
-    FACEOFF_CIRCLE_RADIUS: 80,
-    GOAL_CREASE_RADIUS: 60,
-    FACEOFF_DOT_RADIUS: 8
-};
-
-// Make constants globally available
-window.RINK_CIRCLES = RINK_CIRCLES;

src/engine/game-state.js

@@ -168,6 +168,7 @@ class GameState {
             location: location,
             participants: { home: null, away: null }
         };
+        console.log('Faceoff state set to:', this.faceoff);
         this.emit('faceoff-start', { location });
     }
 

src/entities/player.js

@@ -806,7 +806,7 @@ class Player {
     getFaceoffPosition(gameState, players) {
         const faceoffLocation = gameState.faceoff.location;
         const side = this.team === 'home' ? -1 : 1;
-        const faceoffRadius = RINK_CIRCLES.FACEOFF_CIRCLE_RADIUS; // Radius of faceoff circle
+        const faceoffRadius = 50; // Radius of faceoff circle
 
         switch (this.role) {
             case 'C':

src/entities/puck.js

@@ -5,7 +5,7 @@ class Puck {
         this.radius = 8;
         this.mass = 0.5;
         this.restitution = 0.9;
-        this.friction = 1;
+        this.friction = 3;
 
         this.lastPlayerTouch = null;
         this.lastTeamTouch = null;

src/systems/renderer.js

@@ -56,17 +56,15 @@ class Renderer {
     }
 
     drawRinkLines(rink) {
-        // Outer lines
         this.ctx.strokeStyle = '#d32f2f';
         this.ctx.lineWidth = 3;
 
-        // Zone lines
         this.ctx.beginPath();
         this.ctx.rect(0, 0, rink.width, rink.height);
         this.ctx.stroke();
 
-        this.ctx.strokeStyle = '#d32f2f';
-        this.ctx.lineWidth = 3;
+        this.ctx.strokeStyle = '#2196f3';
+        this.ctx.lineWidth = 2;
 
         this.ctx.beginPath();
         this.ctx.moveTo(rink.centerX, 0);
@@ -75,6 +73,7 @@ class Renderer {
 
         const zoneWidth = rink.width / 3;
         this.ctx.strokeStyle = '#2196f3';
+        this.ctx.setLineDash([10, 5]);
 
         this.ctx.beginPath();
         this.ctx.moveTo(zoneWidth, 0);
@@ -86,21 +85,10 @@ class Renderer {
         this.ctx.lineTo(rink.width - zoneWidth, rink.height);
         this.ctx.stroke();
 
-        this.ctx.beginPath();
-        this.ctx.arc(rink.centerX, rink.centerY, RINK_CIRCLES.CENTER_ICE_RADIUS, 0, Math.PI * 2);
-        this.ctx.stroke();
-
-        // 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.setLineDash([]);
 
         this.ctx.beginPath();
-        this.ctx.moveTo(rink.width - this.goalXOffset, 0);
-        this.ctx.lineTo(rink.width - this.goalXOffset, rink.height);
+        this.ctx.arc(rink.centerX, rink.centerY, 100, 0, Math.PI * 2);
         this.ctx.stroke();
     }
 
@@ -129,6 +117,19 @@ class Renderer {
         this.ctx.fillStyle = 'rgba(211, 47, 47, 0.1)';
         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) {
@@ -136,7 +137,7 @@ class Renderer {
         this.ctx.lineWidth = 2;
         this.ctx.fillStyle = 'rgba(79, 195, 247, 0.1)';
 
-        const creaseRadius = RINK_CIRCLES.GOAL_CREASE_RADIUS;
+        const creaseRadius = 60;
         const goalY = rink.centerY;
 
         this.ctx.beginPath();
@@ -153,19 +154,16 @@ class Renderer {
     drawFaceoffDots(rink) {
         this.ctx.fillStyle = '#d32f2f';
 
-        rink.faceoffDots.forEach((dot, index) => {
+        rink.faceoffDots.forEach(dot => {
             this.ctx.beginPath();
-            this.ctx.arc(dot.x, dot.y, RINK_CIRCLES.FACEOFF_DOT_RADIUS, 0, Math.PI * 2);
+            this.ctx.arc(dot.x, dot.y, 8, 0, Math.PI * 2);
             this.ctx.fill();
 
-            // Skip drawing faceoff circle for center ice (index 2) - only use blue center circle
-            if (index !== 2) {
             this.ctx.strokeStyle = '#d32f2f';
             this.ctx.lineWidth = 2;
             this.ctx.beginPath();
-                this.ctx.arc(dot.x, dot.y, RINK_CIRCLES.FACEOFF_CIRCLE_RADIUS, 0, Math.PI * 2);
+            this.ctx.arc(dot.x, dot.y, 30, 0, Math.PI * 2);
             this.ctx.stroke();
-            }
         });
     }