@luceosports/play-rendering 1.9.32 → 1.9.36

package/package.json

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

package/src/constants.js

@@ -4,7 +4,8 @@ module.exports = Object.freeze({
     COURT_RECT_WIDTH: 50.0,
     COURT_RECT_HEIGHT: 94.0,
     PLAYER_TOKEN_SCALE: 1,
-    LINE_SCALE: 1
+    LINE_SCALE: 1,
+    LINE_MASKING: true
   },
   FOOTBALL: {
     COURT_LINE_WIDTH: 0.32,
@@ -12,6 +13,7 @@ module.exports = Object.freeze({
     COURT_RECT_HEIGHT: 360.0,
     END_ZONE_HEIGHT: 30,
     PLAYER_TOKEN_SCALE: 2,
-    LINE_SCALE: 1.65
+    LINE_SCALE: 1.65,
+    LINE_MASKING: false
   }
 });

package/src/layers/PlayerLayer.js

@@ -5,61 +5,33 @@ class PlayerLayer extends BaseLayer {
     return this.options.staticData;
   }
 
+  get playerScale() {
+    return this.courtTypeConstants.PLAYER_TOKEN_SCALE;
+  }
+
+  get radius() {
+    return 1.5 * this.playerScale;
+  }
+
   apply() {
     if (!this.playData.players.length) return;
 
-    const playerScale = this.courtTypeConstants.PLAYER_TOKEN_SCALE;
-    const radius = 1.5 * playerScale;
-
     this.ctx.save();
 
     this.playData.players.forEach(player => {
       if (this.options.playersHiddenPositions.findIndex(p => parseInt(p) === parseInt(player.position)) >= 0) return;
 
-      const fontSize = (player.textLabel.length > 1 ? 2.0 : 2.5) * playerScale;
-      const textVerticalOffset = (player.textLabel.length > 1 ? 0.7 : 0.85) * playerScale;
-
       const { x, y } = player.location;
 
-      this.ctx.font = `${fontSize}px Helvetica`;
-
       this.setPlayerColor(player);
 
       this.ctx.beginPath();
       this.ctx.moveTo(x, y);
 
-      this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
+      this.ctx.arc(x, y, this.radius, 0, Math.PI * 2, true);
       this.ctx.fill();
 
-      this.ctx.fillStyle = '#ffffff';
-      this.ctx.textAlign = 'center';
-
-      let px = x;
-      let py = y;
-
-      if (this.options.mirror === true) {
-        this.ctx.save();
-        this.ctx.translate(x * 2, 0);
-        this.ctx.scale(-1, 1);
-      }
-
-      if (this.options.flipPlayerLabels === true) {
-        px = 0;
-        py = 0;
-        this.ctx.save();
-        this.ctx.translate(x, y);
-        this.ctx.rotate(Math.PI); // 180
-      }
-
-      this.ctx.fillText(player.textLabel, px, py + textVerticalOffset);
-
-      if (this.options.flipPlayerLabels === true) {
-        this.ctx.restore();
-      }
-
-      if (this.options.mirror === true) {
-        this.ctx.restore();
-      }
+      this.setPlayerLabel(player);
 
       if (this.staticData.playerHats && this.staticData.playerHats.length) {
         const playerHat = this.staticData.playerHats.find(hat => {
@@ -78,7 +50,7 @@ class PlayerLayer extends BaseLayer {
           this.ctx.drawImage(
             playerHat.image,
             x - (hatWidth / 2 - hatWidth * hatDX),
-            y - (hatHeight / 2 + radius * 2 + hatHeight * hatDY),
+            y - (hatHeight / 2 + this.radius * 2 + hatHeight * hatDY),
             hatWidth,
             hatHeight
           );
@@ -93,21 +65,64 @@ class PlayerLayer extends BaseLayer {
   }
 
   setPlayerColor(player) {
-    const payerInPosition = this.options.position && player.position === this.options.position;
-
     const { red, green, blue, alpha } = player.color;
 
+    const defaultInputColor = 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);
     const g = payerInPosition ? 0 : Math.ceil(green * 255);
     const b = payerInPosition ? 255 : Math.ceil(blue * 255);
 
     let color = `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    if (!payerInPosition) {
-      if (player.isDefender) color = '#bb271b';
+
+    if (player.isDefender && !payerInPosition && defaultInputColor) {
+      color = '#bb271b';
     }
-    if (player.possession) color = '#ff8000';
+    if (player.possession && defaultInputColor) color = '#ff8000';
+
     this.ctx.fillStyle = color;
   }
+
+  setPlayerLabel(player) {
+    const { x, y } = player.location;
+    const { alpha } = player.color;
+    const fontSize = (player.textLabel.length > 1 ? 2.0 : 2.5) * this.playerScale;
+    const textVerticalOffset = (player.textLabel.length > 1 ? 0.7 : 0.85) * this.playerScale;
+
+    if (!alpha) return;
+
+    this.ctx.fillStyle = '#ffffff';
+    this.ctx.textAlign = 'center';
+    this.ctx.font = `${fontSize}px Helvetica`;
+
+    if (this.options.mirror === true) {
+      this.ctx.save();
+      this.ctx.translate(x * 2, 0);
+      this.ctx.scale(-1, 1);
+    }
+
+    let px = x;
+    let py = y;
+
+    if (this.options.flipPlayerLabels === true) {
+      px = 0;
+      py = 0;
+      this.ctx.save();
+      this.ctx.translate(x, y);
+      this.ctx.rotate(Math.PI); // 180
+    }
+
+    this.ctx.fillText(player.textLabel, px, py + textVerticalOffset);
+
+    if (this.options.flipPlayerLabels === true) {
+      this.ctx.restore();
+    }
+
+    if (this.options.mirror === true) {
+      this.ctx.restore();
+    }
+  }
 }
 
 module.exports = PlayerLayer;

package/src/layers/court/layers/FOOTBALL/FieldNumberLayer.js

@@ -12,7 +12,7 @@ class FieldNumberLayer extends InternalCourtLayer {
 
     const thinSpaceChar = String.fromCharCode(8202);
 
-    this.ctx.fillStyle = '#ffffff';
+    this.ctx.fillStyle = this.options.lineColor;
     this.ctx.translate(x, y);
 
     for (let i = 1; i < 10; i++) {

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

@@ -36,10 +36,12 @@ class Big3Layer extends InternalCourtLayer {
       this.ctx.arc(point.x, point.y, radius, 0, Math.PI * 2, true);
       this.ctx.stroke();
 
-      this.ctx.fillStyle = '#001c4f';
-      this.ctx.fill();
+      if (this.options.lineColor !== 'transparent') {
+        this.ctx.fillStyle = '#001c4f';
+        this.ctx.fill();
+      }
 
-      this.ctx.fillStyle = '#ffffff';
+      this.ctx.fillStyle = this.options.lineColor;
       this.ctx.fillText('4', point.x - textHorizontalOffset, point.y + textVerticalOffset);
     });
   }

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

@@ -9,10 +9,11 @@ class InternalLineLayer extends InternalBaseLayer {
     this.debugMasking = false;
     this.startMaskSettings = null;
     this.endMaskSettings = null;
+    this.courtTypeConstants = parentLineLayer.courtTypeConstants;
   }
 
   drawLogic() {
-    if (!this.options.animationGlobalProgress) {
+    if (!this.options.animationGlobalProgress && this.courtTypeConstants.LINE_MASKING) {
       this.setLineMasking();
       this.applyMasking();
     }