.

index.html

@@ -68,6 +68,7 @@
         </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

@@ -0,0 +1,15 @@
+/**
+ * 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,7 +168,6 @@ 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 = 50; // Radius of faceoff circle
+        const faceoffRadius = RINK_CIRCLES.FACEOFF_CIRCLE_RADIUS; // 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 = 3;
+        this.friction = 1;
 
         this.lastPlayerTouch = null;
         this.lastTeamTouch = null;

src/systems/renderer.js

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