@luceosports/play-rendering 1.9.40 → 1.10.1

package/package.json

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

package/src/assets/shapes/cone.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="978px" height="952px" viewBox="0 0 978 952" enable-background="new 0 0 978 952" xml:space="preserve">
+<path d="M520.289,1.967c-1.615,4.413-14.747,7.465-31.096,7.465c-16.88,0-30.314-4.884-31.217-8.822l-76.571,214.588h-0.018
+	c0.037,17,48.295,30.526,107.535,30.526c59.236,0,107.535-13.084,107.535-29.72v-0.005L520.289,1.967z"/>
+<path d="M897.207,691.268l-148.072-45.49l34.283,96.421h-0.003c-0.099,46-131.985,82.708-294.66,82.708
+	c-162.679,0-294.562-36.708-294.663-82.708h0.055l34.278-96.406L80.652,691.284C-6.557,718.129-27.55,764.646,41.001,795.37
+	l282.491,126.619c89.181,39.971,241.994,40.025,331.121,0.096l282.621-126.606C1005.879,764.728,984.701,718.146,897.207,691.268z"
+	/>
+<g>
+	<path fill="#FFFFFF" d="M596.449,216.188c-0.355,16.547-48.509,29.536-107.526,29.536c-58.484,0-106.26-13.184-107.505-29.877
+		L249.672,586.135c-0.006-0.015-0.015-0.028-0.021-0.042l-55.505,156.105h-0.055c0.101,46,131.984,82.708,294.663,82.708
+		c162.675,0,294.562-36.708,294.66-82.708h0.003h0.04L596.449,216.188z"/>
+	<path fill="#FFFFFF" d="M457.995,0.666l0.002-0.056l-0.011,0.03C457.988,0.649,457.992,0.658,457.995,0.666z"/>
+</g>
+<g>
+	<path d="M655.997,381.461c-4.879,11.841-21.986,22.058-50.218,29.847c-31.25,8.622-72.838,13.37-117.103,13.37
+		c-44.28,0-85.87-4.857-117.109-13.678c-27.324-7.715-44.232-17.743-49.711-29.335l-69.411,194.533h-0.043
+		c0.08,35,106.409,66.121,236.528,66.121c130.117,0,236.528-29.668,236.528-66.207v-0.012L655.997,381.461z"/>
+</g>
+</svg>

package/src/layers/ShapeLayer.js

@@ -0,0 +1,20 @@
+const _ = require('lodash');
+const BaseLayer = require('./base/BaseLayer');
+const shapeLayers = require('./shape');
+
+class ShapeLayer extends BaseLayer {
+  apply() {
+    this.ctx.save();
+
+    this.playData.shapes.forEach(shape => {
+      const layerKey = `${_.capitalize(shape.type)}ShapeLayer`;
+      if (shapeLayers[layerKey]) {
+        new shapeLayers[layerKey](this, shape).apply();
+      }
+    });
+
+    this.ctx.restore();
+  }
+}
+
+module.exports = ShapeLayer;

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

@@ -0,0 +1,37 @@
+const InternalBaseLayer = require('../../base/InternalBaseLayer');
+
+class InternalShapeLayer extends InternalBaseLayer {
+  constructor(parentLayer, shape) {
+    super(parentLayer);
+    this.shape = shape;
+    this.playData = parentLayer.playData;
+    this.courtTypeConstants = parentLayer.courtTypeConstants;
+  }
+
+  get staticData() {
+    return this.options.staticData;
+  }
+
+  drawLogic() {
+    this.setColor();
+    this.drawShape();
+  }
+
+  setColor() {
+    const fillAlpha = 0.2;
+    const { alpha, blue, green, red } = this.shape.color;
+
+    const r = Math.ceil(red * 255);
+    const g = Math.ceil(green * 255);
+    const b = Math.ceil(blue * 255);
+
+    this.ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${fillAlpha})`;
+    this.ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  drawShape() {
+    // Override this function in a subclass
+  }
+}
+
+module.exports = InternalShapeLayer;

package/src/layers/shape/index.js

@@ -0,0 +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;

package/src/layers/shape/layers/CircleShapeLayer.js

@@ -0,0 +1,18 @@
+const InternalShapeLayer = require('../base/InternalShapeLayer');
+
+const CIRCLE_SHAPE_RADIUS = 5;
+
+class CircleShapeLayer extends InternalShapeLayer {
+  drawShape() {
+    const { location, scale } = this.shape;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
+    this.ctx.translate(location.x, location.y);
+    this.ctx.scale(scale.x, scale.y);
+    this.ctx.beginPath();
+    this.ctx.arc(0, 0, CIRCLE_SHAPE_RADIUS, 0, Math.PI * 2);
+    this.ctx.stroke();
+    this.ctx.fill();
+  }
+}
+
+module.exports = CircleShapeLayer;

package/src/layers/shape/layers/ConeShapeLayer.js

@@ -0,0 +1,20 @@
+const InternalShapeLayer = require('../base/InternalShapeLayer');
+
+const SHAPE_SIZE = 5;
+
+class ConeShapeLayer extends InternalShapeLayer {
+  drawShape() {
+    const { location, scale } = this.shape;
+    this.ctx.translate(location.x - SHAPE_SIZE / 2, location.y - SHAPE_SIZE / 2);
+    this.ctx.scale(scale.x, scale.y);
+
+    if (this.staticData.shapes && this.staticData.shapes.length) {
+      const coneShape = this.staticData.shapes.find(shape => shape.key === 'cone');
+      if (coneShape) {
+        this.ctx.drawImage(coneShape.image, 0, 0, SHAPE_SIZE, SHAPE_SIZE);
+      }
+    }
+  }
+}
+
+module.exports = ConeShapeLayer;

package/src/layers/shape/layers/SquareShapeLayer.js

@@ -0,0 +1,20 @@
+const InternalShapeLayer = require('../base/InternalShapeLayer');
+
+const SQUARE_SIDE_LENGTH = 10;
+
+class SquareShapeLayer extends InternalShapeLayer {
+  drawShape() {
+    const { location, scale } = this.shape;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
+    this.ctx.translate(location.x, location.y);
+    this.ctx.scale(scale.x, scale.y);
+
+    this.ctx.beginPath();
+    this.ctx.rect(-SQUARE_SIDE_LENGTH / 2, -SQUARE_SIDE_LENGTH / 2, SQUARE_SIDE_LENGTH, SQUARE_SIDE_LENGTH);
+
+    this.ctx.stroke();
+    this.ctx.fill();
+  }
+}
+
+module.exports = SquareShapeLayer;

package/src/layers/shape/layers/TriangleShapeLayer.js

@@ -0,0 +1,31 @@
+const { sin, cos } = require('mathjs');
+const InternalShapeLayer = require('../base/InternalShapeLayer');
+
+const OUTER_RADIUS = 10;
+
+class TriangleShapeLayer extends InternalShapeLayer {
+  drawShape() {
+    const { location, scale } = this.shape;
+    const triangle = [
+      { x: 0, y: -OUTER_RADIUS },
+      { x: OUTER_RADIUS * cos(210), y: OUTER_RADIUS * sin(210) },
+      { x: -OUTER_RADIUS * cos(210), y: OUTER_RADIUS * sin(210) }
+    ];
+
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
+    this.ctx.translate(location.x, location.y);
+    this.ctx.scale(scale.x, scale.y);
+
+    this.ctx.beginPath();
+
+    this.ctx.moveTo(triangle[0].x, triangle[0].y);
+    this.ctx.lineTo(triangle[1].x, triangle[1].y);
+    this.ctx.lineTo(triangle[2].x, triangle[2].y);
+    this.ctx.lineTo(triangle[0].x, triangle[0].y);
+
+    this.ctx.stroke();
+    this.ctx.fill();
+  }
+}
+
+module.exports = TriangleShapeLayer;

package/src/models/Frame.js

@@ -5,6 +5,7 @@ const { splitBezierCurveAtTVal, distanceBetweenPoints } = require('../math/LineD
 const CourtLayer = require('../layers/CourtLayer');
 const LineLayer = require('../layers/LineLayer');
 const PlayerLayer = require('../layers/PlayerLayer');
+const ShapeLayer = require('../layers/ShapeLayer');
 const LineControlPointLayer = require('../layers/LineControlPointLayer');
 const Line = require('./Line');
 const Player = require('./Player');
@@ -34,6 +35,7 @@ class Frame {
       court: this.play.playData.court,
       lines: this.lines,
       players: this.players,
+      shapes: this.shapes,
       options: {
         ...this.play.options,
         staticData: this.play.staticData,
@@ -51,6 +53,13 @@ class Frame {
     return this.animationGlobalProgress ? this.animationProgressPlayers : this.currentPhasePlayers;
   }
 
+  get shapes() {
+    if (!this.play.playData.shapes) return [];
+    return this.play.playData.shapes.map(s => {
+      return JSON.parse(JSON.stringify(s));
+    });
+  }
+
   get currentPhasePlayers() {
     const lines = this.play.options.huddleMode ? this.playDataLines : this.prevPhaseLines;
     const { currentPhaseLines } = this;
@@ -116,7 +125,7 @@ class Frame {
         });
       });
 
-      if (this.animationGlobalProgress > player.lastAnimEndTime) {
+      if (this.animationGlobalProgress >= player.lastAnimEndTime) {
         player.location = player.lastAnimationLastLinePartControlPoint;
       }
 
@@ -200,6 +209,7 @@ class Frame {
 
     const { frameData } = this;
     new CourtLayer(this.ctx, frameData).apply();
+    new ShapeLayer(this.ctx, frameData).apply();
     new LineLayer(this.ctx, frameData).apply();
     new PlayerLayer(this.ctx, frameData).apply();
     new LineControlPointLayer(this.ctx, frameData).apply();

package/src/models/Play.js

@@ -1,6 +1,7 @@
 const _ = require('lodash');
 const { loadImage } = require('canvas');
 const playerHatsConfig = require('../playerHatsConfig');
+const shapesConfig = require('../shapesConfig');
 
 const STORAGE_URL = 'https://playbooksstore.blob.core.windows.net/public';
 const LUCEOSPORTS_WATERMARK_PATH = 'partners/LuceoSports/luceo-sports-logo-powered-by-sm.png';
@@ -49,6 +50,7 @@ class Play {
 
   static async init({ teamLogoPath = '' } = {}) {
     Play.playerHats = await playerHatsConfig();
+    Play.shapes = await shapesConfig();
 
     const hardwoodImageData = require('../assets/wood_bg.png');
     const hardwoodImage = await loadImage(hardwoodImageData);
@@ -89,7 +91,8 @@ class Play {
     return {
       backgroundOptions: Play.backgroundOptions,
       watermark: Play.watermark,
-      playerHats: Play.playerHats
+      playerHats: Play.playerHats,
+      shapes: Play.shapes
     };
   }
 

package/src/shapesConfig.js

@@ -0,0 +1,6 @@
+const { loadImage } = require('canvas');
+
+module.exports = async function() {
+  const coneShape = await loadImage(require('./assets/shapes/cone.svg'));
+  return Object.freeze([{ key: 'cone', image: coneShape, dX: -0.05, dY: -0.35 }]);
+};