@luceosports/play-rendering 1.16.3 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "1.16.3",
+  "version": "1.17.0",
   "description": "",
   "main": "dist/play-rendering.js",
   "scripts": {

package/src/constants.js

@@ -4,6 +4,7 @@ module.exports = Object.freeze({
   SPORT_TYPE_FOOTBALL: 'FOOTBALL',
   SPORT_TYPE_LACROSSE: 'LACROSSE',
   SPORT_TYPE_SOCCER: 'SOCCER',
+  SPORT_TYPE_HOCKEY: 'HOCKEY',
 
   COURT_TYPE_BIG3: 'BIG3',
   COURT_TYPE_FIBA: 'FIBA',
@@ -29,6 +30,9 @@ module.exports = Object.freeze({
   COURT_TYPE_SOCCER_U12: 'SOCCER_U12',
   COURT_TYPE_SOCCER_U19: 'SOCCER_U19',
 
+  COURT_TYPE_HOCKEY_NHL: 'HOCKEY_NHL',
+  COURT_TYPE_HOCKEY_INTERNATIONAL: 'HOCKEY_INTERNATIONAL',
+
   SHAPE_TYPE_CIRCLE: 'CIRCLE',
   SHAPE_TYPE_SQUARE: 'SQUARE',
   SHAPE_TYPE_TRIANGLE: 'TRIANGLE',

package/src/layers/court/layers/HOCKEY/constants.js

@@ -0,0 +1,7 @@
+module.exports = Object.freeze({
+  COURT_LINE_WIDTH: 0.1667,
+  PLAYER_TOKEN_RADIUS: 1.5,
+  PLAYER_TOKEN_SCALE: 1,
+  LINE_WIDTH: 0.33,
+  LINE_MASKING: true
+});

package/src/layers/court/layers/HOCKEY/courtTypes/HOCKEY_INTERNATIONAL/constants.js

@@ -0,0 +1,14 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 100,
+  COURT_RECT_HEIGHT: 200,
+  LINE_COLOR_RED: '#C8102E',
+  LINE_COLOR_BLUE: '#0032A0',
+  END_ZONE_LENGTH: 58,
+  NEUTRAL_ZONE_LENGTH: 29,
+  FACE_OFF_SPOTS_DISTANCE: 44,
+  FACE_OFF_SPOT_RADIUS: 0.75,
+  FACE_OFF_SPOT_CIRCLE_RADIUS: 15,
+  GOAL_CAGE_LENGTH: 6,
+  GOAL_CAGE_DEPTH: 3,
+  GOAL_CREASE_ARC_RADIUS: 5.8
+});

package/src/layers/court/layers/HOCKEY/courtTypes/HOCKEY_INTERNATIONAL/layers/GoaCreaseLayer.js

@@ -0,0 +1,37 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+
+class GoaCreaseLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    const goalLineY =
+      this.courtCenter.y - this.courtTypeConstants.NEUTRAL_ZONE_LENGTH - this.courtTypeConstants.END_ZONE_LENGTH;
+
+    // 1. Draw goal crease rect
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, goalLineY, this.courtTypeConstants.GOAL_CREASE_ARC_RADIUS, 0, Math.PI, false);
+    this.ctx.stroke();
+
+    // 2. Draw goal cage
+    this.ctx.strokeStyle = '#000';
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.courtCenter.x - this.courtTypeConstants.GOAL_CAGE_LENGTH / 2, goalLineY);
+    this.ctx.lineTo(
+      this.courtCenter.x - this.courtTypeConstants.GOAL_CAGE_LENGTH / 2,
+      goalLineY - this.courtTypeConstants.GOAL_CAGE_DEPTH
+    );
+    this.ctx.lineTo(
+      this.courtCenter.x + this.courtTypeConstants.GOAL_CAGE_LENGTH / 2,
+      goalLineY - this.courtTypeConstants.GOAL_CAGE_DEPTH
+    );
+    this.ctx.lineTo(this.courtCenter.x + this.courtTypeConstants.GOAL_CAGE_LENGTH / 2, goalLineY);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = GoaCreaseLayer;

package/src/layers/court/layers/HOCKEY/courtTypes/HOCKEY_NHL/constants.js

@@ -0,0 +1,14 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 85,
+  COURT_RECT_HEIGHT: 200,
+  LINE_COLOR_RED: '#C8102E',
+  LINE_COLOR_BLUE: '#0032A0',
+  END_ZONE_LENGTH: 64,
+  NEUTRAL_ZONE_LENGTH: 25,
+  FACE_OFF_SPOTS_DISTANCE: 44,
+  FACE_OFF_SPOT_RADIUS: 0.75,
+  FACE_OFF_SPOT_CIRCLE_RADIUS: 15,
+  GOAL_CAGE_LENGTH: 6,
+  GOAL_CAGE_DEPTH: 3,
+  GOAL_CREASE_ARC_RADIUS: 4
+});

package/src/layers/court/layers/HOCKEY/courtTypes/HOCKEY_NHL/layers/GoaCreaseLayer.js

@@ -0,0 +1,46 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+
+class GoaCreaseLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    const goalLineY =
+      this.courtCenter.y - this.courtTypeConstants.NEUTRAL_ZONE_LENGTH - this.courtTypeConstants.END_ZONE_LENGTH;
+
+    // 1. Draw goal crease rect
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.courtCenter.x - this.courtTypeConstants.GOAL_CREASE_ARC_RADIUS, goalLineY);
+    this.ctx.lineTo(
+      this.courtCenter.x - this.courtTypeConstants.GOAL_CREASE_ARC_RADIUS,
+      goalLineY + this.courtTypeConstants.GOAL_CREASE_ARC_RADIUS
+    );
+    this.ctx.lineTo(
+      this.courtCenter.x + this.courtTypeConstants.GOAL_CREASE_ARC_RADIUS,
+      goalLineY + this.courtTypeConstants.GOAL_CREASE_ARC_RADIUS
+    );
+    this.ctx.lineTo(this.courtCenter.x + this.courtTypeConstants.GOAL_CREASE_ARC_RADIUS, goalLineY);
+    this.ctx.stroke();
+
+    // 2. Draw goal cage
+    this.ctx.strokeStyle = '#000';
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.courtCenter.x - this.courtTypeConstants.GOAL_CAGE_LENGTH / 2, goalLineY);
+    this.ctx.lineTo(
+      this.courtCenter.x - this.courtTypeConstants.GOAL_CAGE_LENGTH / 2,
+      goalLineY - this.courtTypeConstants.GOAL_CAGE_DEPTH
+    );
+    this.ctx.lineTo(
+      this.courtCenter.x + this.courtTypeConstants.GOAL_CAGE_LENGTH / 2,
+      goalLineY - this.courtTypeConstants.GOAL_CAGE_DEPTH
+    );
+    this.ctx.lineTo(this.courtCenter.x + this.courtTypeConstants.GOAL_CAGE_LENGTH / 2, goalLineY);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = GoaCreaseLayer;

package/src/layers/court/layers/HOCKEY/layers/BorderRinkLayer.js

@@ -0,0 +1,53 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+class BorderRinkLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.strokeStyle = '#000'; // #7c7c7c
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 4;
+
+    const goalLineY =
+      this.courtCenter.y - this.courtTypeConstants.NEUTRAL_ZONE_LENGTH - this.courtTypeConstants.END_ZONE_LENGTH;
+
+    const faceOffOffset =
+      (this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.FACE_OFF_SPOTS_DISTANCE) / 2;
+
+    const sideLineLeft = [
+      { x: 0, y: this.courtCenter.y },
+      { x: 0, y: goalLineY }
+    ];
+
+    const sideLineTop = [
+      { x: faceOffOffset, y: 0 },
+      { x: this.courtTypeConstants.COURT_RECT_WIDTH - faceOffOffset, y: 0 }
+    ];
+
+    const sideLineRight = [
+      { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: this.courtCenter.y },
+      { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: goalLineY }
+    ];
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(sideLineLeft[0].x, sideLineLeft[0].y);
+    this.ctx.lineTo(sideLineLeft[1].x, sideLineLeft[1].y);
+
+    this.ctx.bezierCurveTo(0, 0, 10, 0, sideLineTop[0].x, sideLineTop[0].y);
+    this.ctx.lineTo(sideLineTop[1].x, sideLineTop[1].y);
+
+    this.ctx.bezierCurveTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH - 10,
+      0,
+      this.courtTypeConstants.COURT_RECT_WIDTH,
+      0,
+      sideLineRight[1].x,
+      sideLineRight[1].y
+    );
+    this.ctx.lineTo(sideLineRight[0].x, sideLineRight[0].y);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = BorderRinkLayer;

package/src/layers/court/layers/HOCKEY/layers/CenterCircleLayer.js

@@ -0,0 +1,16 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const CENTER_CIRCLE_RADIUS = 15;
+
+class CenterCircleLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_BLUE;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, CENTER_CIRCLE_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CenterCircleLayer;

package/src/layers/court/layers/HOCKEY/layers/CenterLineLayer.js

@@ -0,0 +1,19 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+class CenterLineLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.ctx.setLineDash([2, 1]);
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 4;
+
+    const courtOrigin = { x: 0.0, y: this.courtCenter.y };
+    const courtTerminus = { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: this.courtCenter.y };
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
+    this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CenterLineLayer;

package/src/layers/court/layers/HOCKEY/layers/CenterSpotLayer.js

@@ -0,0 +1,14 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const CENTER_SPOT_RADIUS = 1;
+class CenterSpotLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.fillStyle = this.courtTypeConstants.LINE_COLOR_BLUE;
+
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, CENTER_SPOT_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.fill();
+  }
+}
+
+module.exports = CenterSpotLayer;

package/src/layers/court/layers/HOCKEY/layers/EndZoneLayer.js

@@ -0,0 +1,63 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const FACE_OFF_SPOT_GOAL_LINE_OFFSET = 22;
+
+class EndZoneLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.fillStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    const faceOffOffset =
+      (this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.FACE_OFF_SPOTS_DISTANCE) / 2;
+
+    const faceOffSpotY =
+      this.courtCenter.y -
+      this.courtTypeConstants.NEUTRAL_ZONE_LENGTH -
+      this.courtTypeConstants.END_ZONE_LENGTH +
+      FACE_OFF_SPOT_GOAL_LINE_OFFSET;
+
+    const faceOffSpots = [
+      { x: faceOffOffset, y: faceOffSpotY },
+      { x: this.courtTypeConstants.COURT_RECT_WIDTH - faceOffOffset, y: faceOffSpotY }
+    ];
+
+    faceOffSpots.forEach(spot => {
+      // 1. Draw face off spots
+      this.ctx.beginPath();
+      this.ctx.arc(spot.x, spot.y, this.courtTypeConstants.FACE_OFF_SPOT_RADIUS, 0, Math.PI * 2, true);
+      this.ctx.fill();
+
+      // 2. Draw face off circles
+      this.ctx.beginPath();
+      this.ctx.arc(spot.x, spot.y, this.courtTypeConstants.FACE_OFF_SPOT_CIRCLE_RADIUS, 0, Math.PI * 2, true);
+      this.ctx.stroke();
+
+      // 3. Draw hash marks
+      const hashMarks = [
+        {
+          ox: spot.x - this.courtTypeConstants.FACE_OFF_SPOT_CIRCLE_RADIUS,
+          tx: spot.x - (this.courtTypeConstants.FACE_OFF_SPOT_CIRCLE_RADIUS + 1)
+        },
+        {
+          ox: spot.x + this.courtTypeConstants.FACE_OFF_SPOT_CIRCLE_RADIUS,
+          tx: spot.x + (this.courtTypeConstants.FACE_OFF_SPOT_CIRCLE_RADIUS + 1)
+        }
+      ];
+      hashMarks.forEach(hm => {
+        [spot.y - 1, spot.y + 1].forEach(y => {
+          this.ctx.beginPath();
+          this.ctx.moveTo(hm.ox, y);
+          this.ctx.lineTo(hm.tx, y);
+          this.ctx.stroke();
+        });
+      });
+    });
+  }
+}
+
+module.exports = EndZoneLayer;

package/src/layers/court/layers/HOCKEY/layers/GoalLineLayer.js

@@ -0,0 +1,23 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+class GoalLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    const goalLineY =
+      this.courtCenter.y - this.courtTypeConstants.NEUTRAL_ZONE_LENGTH - this.courtTypeConstants.END_ZONE_LENGTH;
+
+    // 1. Draw goal line
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, goalLineY);
+    this.ctx.lineTo(this.courtTypeConstants.COURT_RECT_WIDTH, goalLineY);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = GoalLineLayer;

package/src/layers/court/layers/HOCKEY/layers/NeutralZoneLayer.js

@@ -0,0 +1,67 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const FACE_OFF_SPOT_BLUE_LINE_OFFSET = 5;
+
+class NeutralZoneLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    // 1. Draw blue line
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_BLUE;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 4;
+
+    const blueLineOrigin = { x: 0.0, y: this.courtCenter.y - this.courtTypeConstants.NEUTRAL_ZONE_LENGTH };
+    const blueLineTerminus = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH,
+      y: this.courtCenter.y - this.courtTypeConstants.NEUTRAL_ZONE_LENGTH
+    };
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(blueLineOrigin.x, blueLineOrigin.y);
+    this.ctx.lineTo(blueLineTerminus.x, blueLineTerminus.y);
+    this.ctx.stroke();
+
+    // 2. Draw face off spots
+    this.ctx.fillStyle = this.courtTypeConstants.LINE_COLOR_RED;
+
+    const faceOffOffset =
+      (this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.FACE_OFF_SPOTS_DISTANCE) / 2;
+
+    const faceOffSpotY =
+      this.courtCenter.y - this.courtTypeConstants.NEUTRAL_ZONE_LENGTH + FACE_OFF_SPOT_BLUE_LINE_OFFSET;
+
+    const faceOffSpotLeft = {
+      x: faceOffOffset,
+      y: faceOffSpotY
+    };
+    const faceOffSpotRight = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH - faceOffOffset,
+      y: faceOffSpotY
+    };
+    this.ctx.beginPath();
+    this.ctx.arc(
+      faceOffSpotLeft.x,
+      faceOffSpotLeft.y,
+      this.courtTypeConstants.FACE_OFF_SPOT_RADIUS,
+      0,
+      Math.PI * 2,
+      true
+    );
+    this.ctx.fill();
+
+    this.ctx.beginPath();
+    this.ctx.arc(
+      faceOffSpotRight.x,
+      faceOffSpotRight.y,
+      this.courtTypeConstants.FACE_OFF_SPOT_RADIUS,
+      0,
+      Math.PI * 2,
+      true
+    );
+    this.ctx.fill();
+  }
+}
+
+module.exports = NeutralZoneLayer;

package/src/layers/court/layers/HOCKEY/layers/RefereeCreaseLayer.js

@@ -0,0 +1,16 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const REFEREE_CREASE_RADIUS = 10;
+
+class RefereeCreaseLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    this.ctx.beginPath();
+    this.ctx.arc(0, this.courtCenter.y, REFEREE_CREASE_RADIUS, -Math.PI / 2, Math.PI / 2, false);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = RefereeCreaseLayer;

package/src/models/Play.js

@@ -8,7 +8,8 @@ const {
   SPORT_TYPE_VOLLEYBALL,
   SPORT_TYPE_FOOTBALL,
   SPORT_TYPE_LACROSSE,
-  SPORT_TYPE_SOCCER
+  SPORT_TYPE_SOCCER,
+  SPORT_TYPE_HOCKEY
 } = require('../constants');
 
 const STORAGE_URL = 'https://playbooksstore.blob.core.windows.net/public';
@@ -29,6 +30,8 @@ class Play {
     const hardwoodImage = await loadImage(hardwoodImageData);
     const grassImageData = require('../assets/grass_bg.png');
     const grassImage = await loadImage(grassImageData);
+    const iceImageData = require('../assets/ice_bg.png');
+    const iceImage = await loadImage(iceImageData);
 
     Play.backgroundOptions = {
       Hardwood: hardwoodImage,
@@ -36,7 +39,8 @@ class Play {
       [SPORT_TYPE_VOLLEYBALL]: hardwoodImage,
       [SPORT_TYPE_FOOTBALL]: grassImage,
       [SPORT_TYPE_LACROSSE]: grassImage,
-      [SPORT_TYPE_SOCCER]: grassImage
+      [SPORT_TYPE_SOCCER]: grassImage,
+      [SPORT_TYPE_HOCKEY]: iceImage
     };
 
     const luceoSportsWatermark = await loadImage(`${STORAGE_URL}/${LUCEOSPORTS_WATERMARK_PATH}`);