diff --git a/index.html b/index.html
index 44d262d..99515aa 100644
--- a/index.html
+++ b/index.html
@@ -68,6 +68,7 @@
+
diff --git a/src/constants/rink-constants.js b/src/constants/rink-constants.js
new file mode 100644
index 0000000..6ef22b5
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/entities/player.js b/src/entities/player.js
index df21ef5..c7f167c 100644
--- a/src/entities/player.js
+++ b/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':
diff --git a/src/systems/renderer.js b/src/systems/renderer.js
index 0810f20..03ba832 100644
--- a/src/systems/renderer.js
+++ b/src/systems/renderer.js
@@ -87,7 +87,7 @@ class Renderer {
this.ctx.stroke();
this.ctx.beginPath();
- this.ctx.arc(rink.centerX, rink.centerY, 100, 0, Math.PI * 2);
+ this.ctx.arc(rink.centerX, rink.centerY, RINK_CIRCLES.CENTER_ICE_RADIUS, 0, Math.PI * 2);
this.ctx.stroke();
// Goal lines
@@ -136,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();
@@ -153,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();
- 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.stroke();
+ // 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.stroke();
+ }
});
}