@luceosports/play-rendering 1.9.35 → 1.9.38

package/package.json

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

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
           );
@@ -111,6 +83,46 @@ class PlayerLayer extends BaseLayer {
 
     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/line/base/InternalLineLayer.js

@@ -139,9 +139,9 @@ class InternalLineLayer extends InternalBaseLayer {
 
     this.ctx.beginPath();
 
-    this.ctx.translate(Math.abs(courtArrowTipPoint.x), Math.abs(courtArrowTipPoint.y));
+    this.ctx.translate(courtArrowTipPoint.x, courtArrowTipPoint.y);
     this.ctx.rotate(angle);
-    this.ctx.translate(-Math.abs(courtArrowTipPoint.x), -Math.abs(courtArrowTipPoint.y));
+    this.ctx.translate(-courtArrowTipPoint.x, -courtArrowTipPoint.y);
 
     this.ctx.moveTo(courtLineEndPoint.x, courtLineEndPoint.y);
     this.ctx.lineTo(courtArrowEdgePoint1.x, courtArrowEdgePoint1.y);
@@ -168,9 +168,9 @@ class InternalLineLayer extends InternalBaseLayer {
 
     this.ctx.beginPath();
 
-    this.ctx.translate(Math.abs(courtPoint.x), Math.abs(courtPoint.y));
+    this.ctx.translate(courtPoint.x, courtPoint.y);
     this.ctx.rotate(angle);
-    this.ctx.translate(-Math.abs(courtPoint.x), -Math.abs(courtPoint.y));
+    this.ctx.translate(-courtPoint.x, -courtPoint.y);
 
     this.ctx.moveTo(lineCapStartPoint.x, lineCapStartPoint.y);
     this.ctx.lineTo(lineCapEndPoint.x, lineCapEndPoint.y);
@@ -205,17 +205,17 @@ class InternalLineLayer extends InternalBaseLayer {
     if (this.line.playerPositionOrigin) {
       const positionOrigin = this.line.playerPositionOrigin;
       const lineSequence = this.line.playerLineSequence;
-      const player = this.playData.players.find(p => p.position === positionOrigin);
-      if (!player) return;
-      // console.log('player: ', player);
 
       if (lineSequence === 0) {
-        // For simple lines without sequence we use player.location for startMaskSettings
-        let radius = player.possession ? 1.5 : 1.0;
-        if (this.line.type === 'HANDOFF' && !player.possession) {
-          radius = 0.7;
+        const player = this.playData.players.find(p => p.position === positionOrigin);
+        if (player) {
+          // For simple lines without sequence we use player.location for startMaskSettings
+          let radius = player.possession ? 1.5 : 1.0;
+          if (this.line.type === 'HANDOFF' && !player.possession) {
+            radius = 0.7;
+          }
+          this.startMaskSettings = { centerPoint: player.location, radius: radius };
         }
-        this.startMaskSettings = { centerPoint: player.location, radius: radius };
       } else if (positionOrigin) {
         // Find prev line in line sequence for player
         // and get last cp of last line part

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;