@luceosports/play-rendering 1.11.10 → 1.11.13

package/package.json

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

package/src/layers/base/InternalBaseLayer.js

@@ -1,7 +1,9 @@
 class InternalBaseLayer {
   constructor(parentLayer) {
     this.ctx = parentLayer.ctx;
+    this.playData = parentLayer.playData;
     this.options = parentLayer.options ? parentLayer.options : {};
+    this.courtTypeConstants = parentLayer.courtTypeConstants;
   }
 
   apply() {

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

@@ -1,11 +1,6 @@
 const InternalBaseLayer = require('../../base/InternalBaseLayer');
 
 class InternalCourtLayer extends InternalBaseLayer {
-  constructor(parentLayer) {
-    super(parentLayer);
-    this.courtTypeConstants = parentLayer.courtTypeConstants;
-  }
-
   apply() {
     super.apply();
 

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

@@ -0,0 +1,10 @@
+const InternalLineLayer = require('./InternalLineLayer');
+
+class ActionLineLayer extends InternalLineLayer {
+  allowDrawLineCap() {
+    if (this.line.hideLineTip) return false;
+    return !(this.options.magnetMode && !this.options.animationGlobalProgress);
+  }
+}
+
+module.exports = ActionLineLayer;

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

@@ -2,14 +2,12 @@ const InternalBaseLayer = require('../../base/InternalBaseLayer');
 const LineDrawingMath = require('../../../math/LineDrawingMath');
 
 class InternalLineLayer extends InternalBaseLayer {
-  constructor(parentLineLayer, line) {
-    super(parentLineLayer);
+  constructor(parentLayer, line) {
+    super(parentLayer);
     this.line = line;
-    this.playData = parentLineLayer.playData;
     this.debugMasking = false;
     this.startMaskSettings = null;
     this.endMaskSettings = null;
-    this.courtTypeConstants = parentLineLayer.courtTypeConstants;
   }
 
   drawLogic() {
@@ -57,12 +55,6 @@ class InternalLineLayer extends InternalBaseLayer {
   }
 
   setColor(alphaOverride = null) {
-    // if (this.options.lineColor) {
-    //   this.ctx.fillStyle = this.options.lineColor;
-    //   this.ctx.strokeStyle = this.options.lineColor;
-    //   return;
-    // }
-
     let lineForPlayerInPosition = false;
     if (this.options.position) {
       const { playerPositionOrigin, playerPositionTerminus } = this.line.originalData;
@@ -103,6 +95,7 @@ class InternalLineLayer extends InternalBaseLayer {
       this.ctx.moveTo(cp[0].x, cp[0].y);
 
       if (cp.length === 2) {
+        if (this.line.type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
         this.ctx.lineTo(cp[1].x, cp[1].y);
       }
       if (cp.length === 3) {

package/src/layers/line/layers/CutLineLayer.js

@@ -1,9 +1,8 @@
-const InternalLineLayer = require('../base/InternalLineLayer');
+const ActionLineLayer = require('../base/ActionLineLayer');
 
-class CutLineLayer extends InternalLineLayer {
+class CutLineLayer extends ActionLineLayer {
   drawLineCap() {
-    if (this.line.hideLineTip) return;
-    this.drawArrowLineCap();
+    if (this.allowDrawLineCap()) this.drawArrowLineCap();
   }
 }
 

package/src/layers/line/layers/DribbleLineLayer.js

@@ -1,21 +1,13 @@
 const _ = require('lodash');
 const common = require('../../../helpers/common');
-const InternalLineLayer = require('../base/InternalLineLayer');
+const ActionLineLayer = require('../base/ActionLineLayer');
 const Bezier = require('../../../math/Bezier');
 
-class DribbleLineLayer extends InternalLineLayer {
+class DribbleLineLayer extends ActionLineLayer {
   drawLineCap() {
-    if (this.line.hideLineTip) return;
-    this.drawArrowLineCap();
+    if (this.allowDrawLineCap()) this.drawArrowLineCap();
   }
 
-  // arrowTipPoint() {
-  //   const lineParts = this.options.animationGlobalProgress ? this.line.baseLineParts() : this.line.getLineParts();
-  //   const lastLinePart = [...lineParts].pop();
-  //   const cp = lastLinePart.controlPoints;
-  //   return cp[cp.length - 1];
-  // }
-
   setLineOptions() {
     const lineParts = [...this.line.getLineParts()];
     this.line.setLinePartsAdjusted([]);

package/src/layers/line/layers/ScreenLineLayer.js

@@ -1,9 +1,8 @@
-const InternalLineLayer = require('../base/InternalLineLayer');
+const ActionLineLayer = require('../base/ActionLineLayer');
 
-class ScreenLineLayer extends InternalLineLayer {
+class ScreenLineLayer extends ActionLineLayer {
   drawLineCap() {
-    if (this.line.hideLineTip) return;
-    this.drawPerpendicularLineCap();
+    if (this.allowDrawLineCap()) this.drawPerpendicularLineCap();
   }
 }
 

package/src/layers/shape/base/InternalShapeLayer.js

@@ -6,8 +6,6 @@ class InternalShapeLayer extends InternalBaseLayer {
   constructor(parentLayer, shape) {
     super(parentLayer);
     this.shape = shape;
-    this.playData = parentLayer.playData;
-    this.courtTypeConstants = parentLayer.courtTypeConstants;
   }
 
   get staticData() {

package/src/models/Animation.js

@@ -107,6 +107,7 @@ class Animation {
     if (!this.running) return;
 
     if (this.globalProgress >= this.linePhaseIntervalMaxRounded) {
+      progressCallback(this.linePhaseIntervalMaxRounded);
       this.reset();
       cancelAnimationFrame(this.loopId);
       setTimeout(() => {

package/src/models/Frame.js

@@ -88,22 +88,32 @@ class Frame {
   }
 
   get currentPhasePlayers() {
-    const lines = this.play.options.huddleMode ? this.playDataLines : this.prevPhaseLines;
     const { currentPhaseLines } = this;
-    const passLines = lines.filter(l => ['PASS', 'HANDOFF'].indexOf(l.type) >= 0);
-    const players = this.play.playData.players.map(p => {
+    const { huddleMode, magnetMode } = this.play.options;
+
+    const lines = huddleMode || magnetMode ? this.playDataLines : this.prevPhaseLines;
+
+    const passLines = lines.filter(l => ['PASS', 'HANDOFF'].includes(l.type));
+
+    return this.play.playData.players.map(p => {
       const player = new Player(p);
       player.setPossession(passLines);
 
       const playerPrevLines = lines
         .filter(l => {
-          if (!this.play.options.huddleMode) return true;
+          if (!huddleMode) return true;
           if (this.phase < l.phase) return false;
           return !currentPhaseLines.find(item => item.id === l.id); // exclude last 2 lines in huddle mode
         })
         .filter(l => l.playerPositionOrigin === player.position && l.playerPositionTerminus === player.position);
-      if (playerPrevLines.length) {
-        const maxLine = _.maxBy(playerPrevLines, l => l.lastAnimEndTime);
+
+      const playerCurrentPhaseLines = currentPhaseLines.filter(
+        l => magnetMode && l.playerPositionOrigin === player.position && l.playerPositionTerminus === player.position
+      );
+
+      const playerLines = playerCurrentPhaseLines.length ? playerCurrentPhaseLines : playerPrevLines;
+      if (playerLines.length) {
+        const maxLine = _.maxBy(playerLines, l => l.lastAnimEndTime);
         if (maxLine) {
           const lastPoint = maxLine.lastLinePartControlPoint;
           if (lastPoint) {
@@ -113,7 +123,6 @@ class Frame {
       }
       return player;
     });
-    return players;
   }
 
   get currentPhaseLines() {
@@ -130,10 +139,10 @@ class Frame {
     const passLines = this.prevAnimationLines.filter(l => ['PASS', 'HANDOFF'].includes(l.type));
     return this.play.playData.players.map(p => {
       const player = new Player(p);
-      if (!player.animations.length) return player;
-
       player.setPossession(passLines);
 
+      if (!player.animations.length) return player;
+
       player.animations.forEach(animation => {
         const keyTimesChunks = [];
         animation.keyTimes.forEach((value, index) => {
@@ -222,7 +231,7 @@ class Frame {
   }
 
   get prevAnimationLines() {
-    return this.playDataLines.filter(l => this.animationGlobalProgress > l.lastAnimEndTime);
+    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime);
   }
 
   draw() {

package/src/models/Play.js

@@ -26,6 +26,7 @@ class Play {
       position = null,
       big3 = false,
       huddleMode = false,
+      magnetMode = false,
       flipPlayerLabels = false
     } = {}
   ) {
@@ -47,6 +48,7 @@ class Play {
       position,
       big3,
       huddleMode,
+      magnetMode,
       flipPlayerLabels
     };
     this.setPlayData(data.playData);