@luceosports/play-rendering 1.11.16 → 1.11.19

package/package.json

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

package/src/constants.js

@@ -5,7 +5,7 @@ module.exports = Object.freeze({
     COURT_RECT_HEIGHT: 94.0,
     PLAYER_TOKEN_RADIUS: 1.5,
     PLAYER_TOKEN_SCALE: 1,
-    LINE_SCALE: 1,
+    LINE_WIDTH: 0.33,
     LINE_MASKING: true
   },
   FOOTBALL: {
@@ -15,7 +15,7 @@ module.exports = Object.freeze({
     END_ZONE_HEIGHT: 30,
     PLAYER_TOKEN_RADIUS: 1.5,
     PLAYER_TOKEN_SCALE: 2,
-    LINE_SCALE: 1.65,
+    LINE_WIDTH: 0.55,
     LINE_MASKING: false
   }
 });

package/src/layers/LineLayer.js

@@ -4,7 +4,7 @@ const lineLayers = require('./line');
 
 class LineLayer extends BaseLayer {
   get lineWidth() {
-    return 0.33 * this.courtTypeConstants.LINE_SCALE;
+    return this.courtTypeConstants.LINE_WIDTH;
   }
 
   apply() {

package/src/layers/PlayerLayer.js

@@ -23,13 +23,9 @@ class PlayerLayer extends BaseLayer {
 
       const { x, y } = player.location;
 
-      this.setPlayerColor(player);
+      this.setPlayerPuckStyle(player);
 
-      this.ctx.beginPath();
-      this.ctx.moveTo(x, y);
-
-      this.ctx.arc(x, y, this.radius, 0, Math.PI * 2, true);
-      this.ctx.fill();
+      this.drawPlayerPuck(player);
 
       this.setPlayerLabel(player);
 
@@ -64,10 +60,10 @@ class PlayerLayer extends BaseLayer {
     this.ctx.restore();
   }
 
-  setPlayerColor(player) {
+  setPlayerPuckStyle(player) {
     const { red, green, blue, alpha } = player.color;
 
-    const defaultInputColor = red === 0 && green === 0 && blue === 0 && alpha === 1;
+    const isDefaultInputColor = red === 0 && green === 0 && blue === 0 && alpha === 1;
 
     const payerInPosition = this.options.position && player.position === this.options.position;
     const r = payerInPosition ? 0 : Math.ceil(red * 255);
@@ -76,12 +72,29 @@ class PlayerLayer extends BaseLayer {
 
     let color = `rgba(${r}, ${g}, ${b}, ${alpha})`;
 
-    if (player.isDefender && !payerInPosition && defaultInputColor) {
+    if (player.isDefender && !payerInPosition && isDefaultInputColor) {
       color = '#bb271b';
     }
-    if (player.possession && defaultInputColor) color = '#ff8000';
+    if (player.possession && isDefaultInputColor) color = '#ff8000';
+
+    if (this.options.legacyPrintStyle) {
+      color = '#000000';
+      this.ctx.lineWidth = this.courtTypeConstants.LINE_WIDTH;
+    }
 
     this.ctx.fillStyle = color;
+    this.ctx.strokeStyle = color;
+  }
+
+  drawPlayerPuck(player) {
+    const { x, y } = player.location;
+    this.ctx.beginPath();
+    this.ctx.arc(x, y, this.radius, 0, Math.PI * 2, true);
+    if (this.options.legacyPrintStyle) {
+      if (player.possession) this.ctx.stroke();
+      return;
+    }
+    this.ctx.fill();
   }
 
   setPlayerLabel(player) {
@@ -92,7 +105,7 @@ class PlayerLayer extends BaseLayer {
 
     if (!alpha) return;
 
-    this.ctx.fillStyle = '#ffffff';
+    this.ctx.fillStyle = this.options.legacyPrintStyle ? '#000000' : '#ffffff';
     this.ctx.textAlign = 'center';
     this.ctx.font = `${fontSize}px Helvetica`;
 

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

@@ -5,6 +5,8 @@ const {
 
 class CenterCircleLayer extends InternalCourtLayer {
   drawLogic() {
+    if (!this.options.showHalfCourtCircle) return;
+
     const outerCenterRadius = 6.0;
     const innerCenterRadius = 2.0;
     const centerCourtPoint = { x: COURT_RECT_WIDTH / 2, y: COURT_RECT_HEIGHT / 2 };

package/src/layers/line/index.js

@@ -1,11 +1,11 @@
-// require all modules on the path and with the pattern defined
-const req = require.context('./layers/', true, /.js$/);
-
-const modules = {};
-
-req.keys().forEach(key => {
-  const mname = key.replace('./', '').replace('.js', '');
-  modules[mname] = req(key);
-});
-
-module.exports = modules;
+// require all modules on the path and with the pattern defined
+const req = require.context('./layers/', true, /.js$/);
+
+const modules = {};
+
+req.keys().forEach(key => {
+  const mname = key.replace('./', '').replace('.js', '');
+  modules[mname] = req(key);
+});
+
+module.exports = modules;

package/src/models/Animation.js

@@ -1,6 +1,7 @@
 const _ = require('lodash');
 const config = require('../config');
 const Frame = require('./Frame');
+const Line = require('./Line');
 
 class Animation {
   constructor(ctx, play) {
@@ -50,13 +51,11 @@ class Animation {
     return result;
   }
 
-  get linePhaseIntervalMax() {
-    const maxPhase = _.max(Object.keys(this.linesPhaseIntervals));
-    return this.linesPhaseIntervals[maxPhase] ? this.linesPhaseIntervals[maxPhase].max : 0;
-  }
-
-  get linePhaseIntervalMaxRounded() {
-    return this.linePhaseIntervalMax;
+  get lastLineAnimationMax() {
+    return this.play.playData.lines.reduce((result, line) => {
+      const lineModel = new Line(line);
+      return result > lineModel.lastAnimEndTime ? result : lineModel.lastAnimEndTime;
+    }, 0);
   }
 
   start(finishCallback, progressCallback) {
@@ -106,8 +105,8 @@ class Animation {
   drawFrame(finishCallback, progressCallback, timestamp) {
     if (!this.running) return;
 
-    if (this.globalProgress >= this.linePhaseIntervalMaxRounded) {
-      progressCallback(this.linePhaseIntervalMaxRounded);
+    if (this.globalProgress >= this.lastLineAnimationMax) {
+      progressCallback(this.lastLineAnimationMax);
       this.reset();
       cancelAnimationFrame(this.loopId);
       setTimeout(() => {

package/src/models/Play/Options.js

@@ -0,0 +1,32 @@
+module.exports = {
+  useDefaults: function(options = {}) {
+    const defaults = {
+      width: 300,
+      lineColor: '#fff', // courtBorderColor
+      linesDisplay: true,
+      linesDisplayOnMoveOnly: true,
+      linesHiddenIds: [],
+      linesSelectedIds: [],
+      shapeSelectedId: null,
+      noteSelectedId: null,
+      playersHiddenPositions: [],
+      background: '',
+      watermark: null,
+      mirror: false,
+      speed: 1,
+      position: null,
+      huddleMode: false,
+      magnetMode: false,
+      flipPlayerLabels: false,
+      legacyPrintStyle: false,
+      playerTokenScale: 1,
+      // TODO: refactor NBA court type constants below
+      big3: false,
+      showHalfCourtCircle: true
+    };
+    return {
+      ...defaults,
+      ...options
+    };
+  }
+};

package/src/models/Play.js

@@ -2,57 +2,15 @@ const _ = require('lodash');
 const { loadImage } = require('canvas');
 const playerHatsConfig = require('../playerHatsConfig');
 const shapesConfig = require('../shapesConfig');
+const { useDefaults } = require('./Play/Options');
 
 const STORAGE_URL = 'https://playbooksstore.blob.core.windows.net/public';
 const LUCEOSPORTS_WATERMARK_PATH = 'partners/LuceoSports/luceo-sports-logo-powered-by-sm.png';
 
 class Play {
-  constructor(
-    data,
-    {
-      width = 300,
-      lineColor = '#fff', // courtBorderColor
-      linesDisplay = true,
-      linesDisplayOnMoveOnly = true,
-      linesHiddenIds = [],
-      linesSelectedIds = [],
-      shapeSelectedId = null,
-      noteSelectedId = null,
-      playersHiddenPositions = [],
-      background = '',
-      watermark = null,
-      mirror = false,
-      speed = 1,
-      position = null,
-      big3 = false,
-      huddleMode = false,
-      magnetMode = false,
-      flipPlayerLabels = false,
-      playerTokenScale = 1
-    } = {}
-  ) {
+  constructor(data, options = {}) {
     this.name = data.name;
-    this.options = {
-      width,
-      lineColor,
-      linesDisplay,
-      linesDisplayOnMoveOnly,
-      linesHiddenIds,
-      linesSelectedIds,
-      shapeSelectedId,
-      noteSelectedId,
-      playersHiddenPositions,
-      background,
-      watermark,
-      mirror,
-      speed,
-      position,
-      big3,
-      huddleMode,
-      magnetMode,
-      flipPlayerLabels,
-      playerTokenScale
-    };
+    this.options = useDefaults(options);
     this.setPlayData(data.playData);
   }