This commit is contained in:
Pierre Wessman 2025-09-16 21:15:07 +02:00
parent cb8d4919a7
commit af1cbf8110
4 changed files with 29 additions and 10 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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':

View File

@ -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();
// 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();
}
});
}