@luceosports/play-rendering 1.17.0 → 1.18.0

package/package.json

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

package/src/layers/court/base/InternalCourtLayer.js

@@ -28,6 +28,12 @@ class InternalCourtLayer extends InternalBaseLayer {
     this.ctx.scale(1, -1);
     this.ctx.translate(0, -Math.abs(verticalTranslationDist));
   }
+
+  setColor(color) {
+    const style = this.options.lineColor === 'transparent' ? 'transparent' : color;
+    this.ctx.strokeStyle = style;
+    this.ctx.fillStyle = style;
+  }
 }
 
 module.exports = InternalCourtLayer;

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

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

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

@@ -6,7 +6,7 @@ class GoaCreaseLayer extends InternalCourtLayer {
   }
 
   drawLogic() {
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_RED);
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
     const goalLineY =
@@ -18,7 +18,7 @@ class GoaCreaseLayer extends InternalCourtLayer {
     this.ctx.stroke();
 
     // 2. Draw goal cage
-    this.ctx.strokeStyle = '#000';
+    this.setColor('#000');
     this.ctx.beginPath();
     this.ctx.moveTo(this.courtCenter.x - this.courtTypeConstants.GOAL_CAGE_LENGTH / 2, goalLineY);
     this.ctx.lineTo(

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

@@ -6,7 +6,7 @@ class GoaCreaseLayer extends InternalCourtLayer {
   }
 
   drawLogic() {
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_RED);
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
     const goalLineY =
@@ -27,7 +27,7 @@ class GoaCreaseLayer extends InternalCourtLayer {
     this.ctx.stroke();
 
     // 2. Draw goal cage
-    this.ctx.strokeStyle = '#000';
+    this.setColor('#000');
     this.ctx.beginPath();
     this.ctx.moveTo(this.courtCenter.x - this.courtTypeConstants.GOAL_CAGE_LENGTH / 2, goalLineY);
     this.ctx.lineTo(

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

@@ -6,7 +6,7 @@ class BorderRinkLayer extends InternalCourtLayer {
   }
 
   drawLogic() {
-    this.ctx.strokeStyle = '#000'; // #7c7c7c
+    this.setColor('#000');
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 4;
 
     const goalLineY =

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

@@ -4,7 +4,7 @@ const CENTER_CIRCLE_RADIUS = 15;
 
 class CenterCircleLayer extends InternalCourtLayer {
   drawLogic() {
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_BLUE;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_BLUE);
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
     this.ctx.beginPath();

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

@@ -2,7 +2,7 @@ const InternalCourtLayer = require('../../../base/InternalCourtLayer');
 
 class CenterLineLayer extends InternalCourtLayer {
   drawLogic() {
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_RED);
     this.ctx.setLineDash([2, 1]);
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 4;
 

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

@@ -3,7 +3,7 @@ const InternalCourtLayer = require('../../../base/InternalCourtLayer');
 const CENTER_SPOT_RADIUS = 1;
 class CenterSpotLayer extends InternalCourtLayer {
   drawLogic() {
-    this.ctx.fillStyle = this.courtTypeConstants.LINE_COLOR_BLUE;
+    this.setColor(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);

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

@@ -8,8 +8,7 @@ class EndZoneLayer extends InternalCourtLayer {
   }
 
   drawLogic() {
-    this.ctx.fillStyle = this.courtTypeConstants.LINE_COLOR_RED;
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_RED);
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
     const faceOffOffset =

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

@@ -6,7 +6,7 @@ class GoalLineLayer extends InternalCourtLayer {
   }
 
   drawLogic() {
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_RED);
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
     const goalLineY =

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

@@ -9,7 +9,7 @@ class NeutralZoneLayer extends InternalCourtLayer {
 
   drawLogic() {
     // 1. Draw blue line
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_BLUE;
+    this.setColor(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 };
@@ -24,7 +24,7 @@ class NeutralZoneLayer extends InternalCourtLayer {
     this.ctx.stroke();
 
     // 2. Draw face off spots
-    this.ctx.fillStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_RED);
 
     const faceOffOffset =
       (this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.FACE_OFF_SPOTS_DISTANCE) / 2;

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

@@ -4,7 +4,7 @@ const REFEREE_CREASE_RADIUS = 10;
 
 class RefereeCreaseLayer extends InternalCourtLayer {
   drawLogic() {
-    this.ctx.strokeStyle = this.courtTypeConstants.LINE_COLOR_RED;
+    this.setColor(this.courtTypeConstants.LINE_COLOR_RED);
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
     this.ctx.beginPath();

package/src/layers/line/base/InternalLineLayer.js

@@ -6,6 +6,7 @@ class InternalLineLayer extends InternalBaseLayer {
   constructor(parentLayer, line) {
     super(parentLayer);
     this.line = line;
+    this.lineWidth = parentLayer.lineWidth;
     this.debugMasking = false;
     this.startMaskSettings = null;
     this.endMaskSettings = null;

package/src/layers/line/layers/ShootLineLayer.js

@@ -0,0 +1,56 @@
+const ActionLineLayer = require('../base/ActionLineLayer');
+
+class ShootLineLayer extends ActionLineLayer {
+  drawLineCap() {
+    if (this.allowDrawLineCap()) {
+      const cp1 = this.line.firstLinePartControlPoint;
+      const cp2 = this.line.lastLinePartControlPoint;
+
+      // Make arrow tip point a bit longer by adding small vector
+      const addVector = { x: 0.6, y: 0 };
+      const alpha = this.angleBetweenTwoPoints(cp1, cp2);
+      const sameAngleAddVector = {
+        x: Math.cos(alpha) * addVector.x - Math.sin(alpha) * addVector.y,
+        y: Math.sin(alpha) * addVector.x - Math.cos(alpha) * addVector.y
+      };
+
+      const courtArrowTipPoint = {
+        x: cp2.x + sameAngleAddVector.x,
+        y: cp2.y + sameAngleAddVector.y
+      };
+      this.drawArrowLineCap(courtArrowTipPoint);
+    }
+  }
+
+  setLineOptions() {
+    this.ctx.lineWidth = this.lineWidth * 0.7;
+
+    const lineParts = [...this.line.getLineParts()];
+
+    this.line.setLinePartsAdjusted([]);
+
+    lineParts.forEach(lp => {
+      const cp = lp.controlPoints;
+
+      const offsets = [-0.3, 0.3];
+      offsets.forEach(offset => {
+        const [dx, dy] = [cp[0].x - cp[1].x, cp[0].y - cp[1].y];
+        const scale = offset / (dx * dx + dy * dy) ** 0.5;
+        const [ox, oy] = [-dy * scale, dx * scale];
+
+        this.ctx.moveTo(ox + cp[0].x, oy + cp[0].y);
+        this.ctx.lineTo(ox + cp[1].x, oy + cp[1].y);
+
+        this.line.addLinePartAdjusted({
+          ...lp,
+          controlPoints: [
+            { x: cp[0].x + ox, y: cp[0].y + oy },
+            { x: cp[1].x + ox, y: cp[1].y + oy }
+          ]
+        });
+      });
+    });
+  }
+}
+
+module.exports = ShootLineLayer;

package/src/models/Frame.js

@@ -155,7 +155,7 @@ class Frame {
   }
 
   get animationProgressPlayers() {
-    const passLines = this.prevAnimationLines.filter(l => ['PASS', 'HANDOFF'].includes(l.type));
+    const passLines = this.prevAnimationLines.filter(l => ['PASS', 'HANDOFF', 'SHOOT'].includes(l.type));
     return this.play.playData.players.map(p => {
       const player = new Player(p);
       player.setPossession(passLines);

package/src/traits/LineDrawOperationsTrait.js

@@ -19,8 +19,7 @@ module.exports = {
       this.ctx.moveTo(cp[0].x, cp[0].y);
 
       if (cp.length === 2) {
-        // TODO refactor next line to avoid access to line/shape model
-        if ((this.line || this.shape).type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
+        this.ctx.lineCap = 'round'; // fix last straight line cap segment (needed for dribble lines)
         this.ctx.lineTo(cp[1].x, cp[1].y);
       }
       if (cp.length === 3) {
@@ -38,12 +37,12 @@ module.exports = {
     this.ctx.restore();
   },
 
-  drawArrowLineCap() {
+  drawArrowLineCap(arrowTipPoint = this.arrowTipPoint()) {
     this.ctx.save();
 
     const arrowTipLength = 1.4;
     const angle = this.angleBetweenLastTwoPoints();
-    const courtArrowTipPoint = this.arrowTipPoint();
+    const courtArrowTipPoint = arrowTipPoint;
 
     const courtLineEndPoint = { x: courtArrowTipPoint.x - arrowTipLength / 1.3, y: courtArrowTipPoint.y };
     const courtArrowEdgePoint1 = {
@@ -137,6 +136,10 @@ module.exports = {
     const cpTo = cp[cp.length - 1];
     const cpFrom = cp[cp.length - 2];
 
+    return this.angleBetweenTwoPoints(cpFrom, cpTo);
+  },
+
+  angleBetweenTwoPoints(cpFrom, cpTo) {
     const dx = cpTo.x - cpFrom.x;
     const dy = cpTo.y - cpFrom.y;
     return Math.atan2(dy, dx);