@luceosports/play-rendering 1.10.2 → 1.10.5

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "1.10.2",
+  "version": "1.10.5",
   "description": "",
   "main": "dist/play-rendering.js",
   "scripts": {
     "build": "webpack",
+    "build:dev": "webpack --mode=development",
     "lint": "npx eslint . --ext .js",
     "lint:fix": "npx eslint . --ext .js --fix",
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/assets/shapes/cone.svg

@@ -3,9 +3,9 @@
 <!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
+<path fill="#f36f21" 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
+<path fill="#f36f21" 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"
 	/>
@@ -16,7 +16,7 @@
 	<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
+	<path fill="#f36f21" 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>

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

@@ -1,5 +1,7 @@
 const InternalBaseLayer = require('../../base/InternalBaseLayer');
 
+const DEBUG_WRAP_POINTS = false;
+
 class InternalShapeLayer extends InternalBaseLayer {
   constructor(parentLayer, shape) {
     super(parentLayer);
@@ -15,6 +17,7 @@ class InternalShapeLayer extends InternalBaseLayer {
   drawLogic() {
     this.setColor();
     this.drawShape();
+    this.drawShapeWrapPoints();
   }
 
   setColor() {
@@ -29,6 +32,19 @@ class InternalShapeLayer extends InternalBaseLayer {
     this.ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`;
   }
 
+  drawShapeWrapPoints() {
+    if (!DEBUG_WRAP_POINTS) return;
+
+    const { rectWrapPoints } = this.shape;
+
+    rectWrapPoints.forEach(point => {
+      this.ctx.beginPath();
+      this.ctx.arc(point.x, point.y, 0.5, 0, Math.PI * 2);
+      this.ctx.stroke();
+      this.ctx.fill();
+    });
+  }
+
   drawShape() {
     // Override this function in a subclass
   }

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

@@ -1,15 +1,13 @@
 const InternalShapeLayer = require('../base/InternalShapeLayer');
 
-const CIRCLE_SHAPE_RADIUS = 5;
-
 class CircleShapeLayer extends InternalShapeLayer {
   drawShape() {
-    const { location, scale } = this.shape;
+    const { location, scale, outerCircleRadius } = 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.arc(0, 0, outerCircleRadius, 0, Math.PI * 2);
     this.ctx.stroke();
     this.ctx.fill();
   }

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

@@ -1,17 +1,22 @@
 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);
+    const { location, scale, outerCircleRadius } = this.shape;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
+    this.ctx.translate(location.x, location.y);
     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);
+        this.ctx.drawImage(
+          coneShape.image,
+          -outerCircleRadius / 2,
+          -outerCircleRadius / 2,
+          outerCircleRadius,
+          outerCircleRadius
+        );
       }
     }
   }

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

@@ -1,16 +1,14 @@
 const InternalShapeLayer = require('../base/InternalShapeLayer');
 
-const SQUARE_SIDE_LENGTH = 10;
-
 class SquareShapeLayer extends InternalShapeLayer {
   drawShape() {
-    const { location, scale } = this.shape;
+    const { location, scale, outerCircleRadius } = 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.rect(-outerCircleRadius / 2, -outerCircleRadius / 2, outerCircleRadius, outerCircleRadius);
 
     this.ctx.stroke();
     this.ctx.fill();

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

@@ -1,16 +1,8 @@
-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) }
-    ];
+    const { location, scale, shapeControlPoints: triangle } = this.shape;
 
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
     this.ctx.translate(location.x, location.y);

package/src/models/Frame.js

@@ -9,6 +9,7 @@ const ShapeLayer = require('../layers/ShapeLayer');
 const LineControlPointLayer = require('../layers/LineControlPointLayer');
 const Line = require('./Line');
 const Player = require('./Player');
+const ShapeModels = require('./ShapeModels');
 
 class Frame {
   constructor(play, phase = 1, animationGlobalProgress = false) {
@@ -55,9 +56,11 @@ class Frame {
 
   get shapes() {
     if (!this.play.playData.shapes) return [];
-    return this.play.playData.shapes.map(s => {
-      return JSON.parse(JSON.stringify(s));
-    });
+    return this.play.playData.shapes
+      .filter(s => ShapeModels[s.type] !== undefined)
+      .map(s => {
+        return new ShapeModels[s.type](s);
+      });
   }
 
   get currentPhasePlayers() {
@@ -257,6 +260,9 @@ class Frame {
     if (objectType === 'player') {
       return this.closestPlayerToPoint(courtPoint, filterCallback);
     }
+    if (objectType === 'shape') {
+      return this.closestShapeToPoint(courtPoint, filterCallback);
+    }
     if (objectType === 'line') {
       return this.closestLineToPoint(courtPoint, filterCallback);
     }
@@ -290,8 +296,7 @@ class Frame {
         return result;
       }, []);
 
-    const minLineDistance = _.minBy(lineDistances, 'distance');
-    return minLineDistance;
+    return _.minBy(lineDistances, 'distance');
   }
 
   closestLineVertexToPoint(courtPoint, filterCallback = null) {
@@ -316,8 +321,7 @@ class Frame {
         });
         return result;
       }, []);
-    const minLineDistance = _.minBy(lineVertexDistances, 'distance');
-    return minLineDistance;
+    return _.minBy(lineVertexDistances, 'distance');
   }
 
   closestPlayerToPoint(courtPoint, filterCallback = null) {
@@ -334,8 +338,22 @@ class Frame {
         });
         return result;
       }, []);
-    const minPlayerDistance = _.minBy(playerDistances, 'distance');
-    return minPlayerDistance;
+    return _.minBy(playerDistances, 'distance');
+  }
+
+  closestShapeToPoint(courtPoint) {
+    const shapeDistances = this.shapes
+      .filter(shape => shape.rectWrapperContains(courtPoint))
+      .reduce((result, item) => {
+        const shapeLocation = this.prepareCourtPoint(item.location);
+        result.push({
+          object: item,
+          objectPoint: shapeLocation,
+          distance: distanceBetweenPoints(shapeLocation, courtPoint)
+        });
+        return result;
+      }, []);
+    return _.minBy(shapeDistances, 'distance');
   }
 
   prepareCourtPoint(courtPoint) {

package/src/models/Shape.js

@@ -0,0 +1,53 @@
+const Model = require('./Base/InternalFrameModel');
+
+class Shape extends Model {
+  get id() {
+    return this._getAttr('id');
+  }
+
+  get location() {
+    return this._getAttr('location');
+  }
+
+  get scale() {
+    return this._getAttr('scale');
+  }
+
+  get color() {
+    return this._getAttr('color');
+  }
+
+  get type() {
+    return this._getAttr('type');
+  }
+
+  get outerCircleRadius() {
+    return 10;
+  }
+
+  get rectWrapPoints() {
+    const topLeft = { x: -this.outerCircleRadius / 2, y: -this.outerCircleRadius / 2 };
+    const topRight = { x: this.outerCircleRadius / 2, y: -this.outerCircleRadius / 2 };
+    const botRight = { x: this.outerCircleRadius / 2, y: this.outerCircleRadius / 2 };
+    const botLeft = { x: -this.outerCircleRadius / 2, y: this.outerCircleRadius / 2 };
+    return [topLeft, topRight, botRight, botLeft];
+  }
+
+  get rectWrapPointsTranslated() {
+    return this.rectWrapPoints.map(point => {
+      return { x: point.x * this.scale.x + this.location.x, y: point.y * this.scale.y + this.location.y };
+    });
+  }
+
+  get shapeControlPoints() {
+    // Override this function in a subclass if needed
+    return [];
+  }
+
+  rectWrapperContains({ x, y }) {
+    const [topLeft, topRight, botRight] = this.rectWrapPointsTranslated;
+    return topLeft.x <= x && x <= topRight.x && topLeft.y <= y && y <= botRight.y;
+  }
+}
+
+module.exports = Shape;

package/src/models/ShapeModels/CircleShape.js

@@ -0,0 +1,17 @@
+const Shape = require('../Shape');
+
+class CircleShape extends Shape {
+  get outerCircleRadius() {
+    return 5;
+  }
+
+  get rectWrapPoints() {
+    const topLeft = { x: -this.outerCircleRadius, y: -this.outerCircleRadius };
+    const topRight = { x: this.outerCircleRadius, y: -this.outerCircleRadius };
+    const botRight = { x: this.outerCircleRadius, y: this.outerCircleRadius };
+    const botLeft = { x: -this.outerCircleRadius, y: this.outerCircleRadius };
+    return [topLeft, topRight, botRight, botLeft];
+  }
+}
+
+module.exports = CircleShape;

package/src/models/ShapeModels/ConeShape.js

@@ -0,0 +1,13 @@
+const Shape = require('../Shape');
+
+class ConeShape extends Shape {
+  get outerCircleRadius() {
+    return 5;
+  }
+
+  get shapeControlPoints() {
+    return this.rectWrapPoints;
+  }
+}
+
+module.exports = ConeShape;

package/src/models/ShapeModels/SquareShape.js

@@ -0,0 +1,13 @@
+const Shape = require('../Shape');
+
+class SquareShape extends Shape {
+  get outerCircleRadius() {
+    return 10;
+  }
+
+  get shapeControlPoints() {
+    return this.rectWrapPoints;
+  }
+}
+
+module.exports = SquareShape;

package/src/models/ShapeModels/TriangleShape.js

@@ -0,0 +1,25 @@
+const { cos, sin } = require('mathjs');
+const Shape = require('../Shape');
+
+class TriangleShape extends Shape {
+  get outerCircleRadius() {
+    return 10;
+  }
+
+  get shapeControlPoints() {
+    return [
+      { x: 0, y: -this.outerCircleRadius },
+      { x: this.outerCircleRadius * cos(210), y: this.outerCircleRadius * sin(210) },
+      { x: -this.outerCircleRadius * cos(210), y: this.outerCircleRadius * sin(210) }
+    ];
+  }
+
+  get rectWrapPoints() {
+    const [topPoint, botRight, botLeft] = this.shapeControlPoints;
+    const topLeft = { x: botLeft.x, y: topPoint.y };
+    const topRight = { x: botRight.x, y: topPoint.y };
+    return [topLeft, topRight, botRight, botLeft];
+  }
+}
+
+module.exports = TriangleShape;

package/src/models/ShapeModels/index.js

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