@luceosports/play-rendering 1.18.7 → 1.19.0

package/package.json

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

package/src/constants.js

@@ -5,6 +5,7 @@ module.exports = Object.freeze({
   SPORT_TYPE_LACROSSE: 'LACROSSE',
   SPORT_TYPE_SOCCER: 'SOCCER',
   SPORT_TYPE_HOCKEY: 'HOCKEY',
+  SPORT_TYPE_BASEBALL: 'BASEBALL',
 
   COURT_TYPE_BIG3: 'BIG3',
   COURT_TYPE_FIBA: 'FIBA',
@@ -33,6 +34,8 @@ module.exports = Object.freeze({
   COURT_TYPE_HOCKEY_NHL: 'HOCKEY_NHL',
   COURT_TYPE_HOCKEY_INTERNATIONAL: 'HOCKEY_INTERNATIONAL',
 
+  COURT_TYPE_BASEBALL_HIGH_SCHOOL: 'BASEBALL_HIGH_SCHOOL',
+
   SHAPE_TYPE_CIRCLE: 'CIRCLE',
   SHAPE_TYPE_SQUARE: 'SQUARE',
   SHAPE_TYPE_TRIANGLE: 'TRIANGLE',

package/src/layers/court/base/InternalCourtLayer.js

@@ -9,8 +9,11 @@ class InternalCourtLayer extends InternalBaseLayer {
   }
 
   apply() {
-    super.apply();
-
+    if (this.original()) {
+      this.ctx.save();
+      this.drawLogic();
+      this.ctx.restore();
+    }
     if (this.reflection()) {
       this.ctx.save();
       this.verticalFlipAndRotation();
@@ -19,6 +22,10 @@ class InternalCourtLayer extends InternalBaseLayer {
     }
   }
 
+  original() {
+    return true;
+  }
+
   reflection() {
     return false;
   }

package/src/layers/court/layers/BASEBALL/constants.js

@@ -0,0 +1,7 @@
+module.exports = Object.freeze({
+  COURT_LINE_WIDTH: 0.1667,
+  PLAYER_TOKEN_RADIUS: 1.5,
+  PLAYER_TOKEN_SCALE: 2,
+  LINE_WIDTH: 0.55,
+  LINE_MASKING: false
+});

package/src/layers/court/layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/constants.js

@@ -0,0 +1,36 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 460,
+  COURT_RECT_HEIGHT: 290,
+  COURT_DIRT_COLOR: '#C49463',
+
+  HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT: 60.5,
+  HOME_PLATE_APEX_TO_SECOND_BASE_APEX: 127.28125,
+  HOME_PLATE_APEX_TO_BACKSTOP: 60,
+  HOME_PLATE_SIDE: 1.41667,
+  HOME_PLATE_CIRCLE_DIA: 26,
+
+  HOME_PLATE_SIDE_TO_BATTERS_BOX: 0.5,
+  BATTERS_BOX_WIDTH: 4,
+  BATTERS_BOX_HEIGHT: 6,
+  BATTERS_BOX_TO_CATCHERS_BACK_LINE: 5,
+
+  CATCHERS_BACK_LINE_LENGTH: 3.58333,
+  ON_DECK_CIRCLE_DIA: 5,
+  ON_DECK_CIRCLE_DISTANCE_FROM_CENTER: 37,
+
+  COACH_BOX_TO_BASE_LINE: 15,
+  COACH_BOX_WIDTH: 20,
+  COACH_BOX_HEIGHT: 5,
+
+  PITCHERS_PLATE_WIDTH: 2,
+  PITCHERS_PLATE_HEIGHT: 0.5,
+  PITCHERS_PLATE_TO_PITCHING_MOUND_CENTER: 1.5,
+  PITCHING_MOUND_DIA: 18,
+
+  PITCHERS_PLATE_GRASS_LINE_RAD: 95,
+
+  FOUL_LINE_LENGTH: 325,
+  BASE_LINE_LENGTH: 90,
+  BASE_SQUARE_SIDE_LENGTH: 1.25,
+  BASE_DIRT_RAD: 13
+});

package/src/layers/court/layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/layers/ADirtLayer.js

@@ -0,0 +1,124 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const {
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT,
+  COURT_DIRT_COLOR,
+  PITCHERS_PLATE_TO_PITCHING_MOUND_CENTER,
+  PITCHING_MOUND_DIA,
+  PITCHERS_PLATE_GRASS_LINE_RAD,
+  BASE_LINE_LENGTH,
+  HOME_PLATE_CIRCLE_DIA,
+  BASE_DIRT_RAD
+} = require('../constants');
+
+class ADirtLayer extends InternalCourtLayer {
+  original() {
+    return false;
+  }
+
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const homePlateApex = { x: this.courtCenter.x, y: HOME_PLATE_APEX_TO_BACKSTOP };
+    const pitchersPlateFrontCenter = {
+      x: this.courtCenter.x,
+      y: HOME_PLATE_APEX_TO_BACKSTOP + HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT
+    };
+
+    this.ctx.fillStyle = COURT_DIRT_COLOR;
+    this.ctx.strokeStyle = COURT_DIRT_COLOR;
+
+    // 1. Gras line
+    const arcStartAngle = Math.PI / 11;
+    const arcEndAngle = Math.PI - Math.PI / 11;
+
+    this.ctx.save();
+    this.ctx.beginPath();
+    this.ctx.arc(
+      pitchersPlateFrontCenter.x,
+      pitchersPlateFrontCenter.y,
+      PITCHERS_PLATE_GRASS_LINE_RAD,
+      arcStartAngle,
+      arcEndAngle,
+      false
+    );
+
+    const arcEdgePointLeft = getArcPointForAngle(pitchersPlateFrontCenter, PITCHERS_PLATE_GRASS_LINE_RAD, arcEndAngle);
+    const arcEdgePointRight = getArcPointForAngle(
+      pitchersPlateFrontCenter,
+      PITCHERS_PLATE_GRASS_LINE_RAD,
+      arcStartAngle
+    );
+
+    this.ctx.moveTo(arcEdgePointLeft.x, arcEdgePointLeft.y);
+    this.ctx.lineTo(homePlateApex.x, homePlateApex.y - Math.sqrt(3 * 3 + 3 * 3));
+    this.ctx.lineTo(arcEdgePointRight.x, arcEdgePointRight.y);
+    this.ctx.lineTo(arcEdgePointLeft.x, arcEdgePointLeft.y);
+
+    // 1.1 Center hole (draw in reverse direction)
+    this.ctx.translate(homePlateApex.x, homePlateApex.y);
+    this.ctx.rotate(Math.PI / 4);
+    this.ctx.moveTo(3, 3);
+    this.ctx.lineTo(3, BASE_LINE_LENGTH - 3);
+    this.ctx.lineTo(BASE_LINE_LENGTH - 3, BASE_LINE_LENGTH - 3);
+    this.ctx.lineTo(BASE_LINE_LENGTH - 3, 3);
+    this.ctx.lineTo(3, 3);
+
+    this.ctx.fill();
+    this.ctx.restore();
+
+    // 2. Pitching mound
+    this.ctx.save();
+    this.ctx.beginPath();
+    this.ctx.arc(
+      pitchersPlateFrontCenter.x,
+      pitchersPlateFrontCenter.y - PITCHERS_PLATE_TO_PITCHING_MOUND_CENTER,
+      PITCHING_MOUND_DIA / 2,
+      0,
+      Math.PI * 2,
+      true
+    );
+    this.ctx.stroke();
+    this.ctx.fill();
+    this.ctx.restore();
+
+    // 3. Home plate circle
+    this.ctx.save();
+    this.ctx.beginPath();
+    this.ctx.arc(homePlateApex.x, homePlateApex.y, HOME_PLATE_CIRCLE_DIA / 2, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+    this.ctx.fill();
+    this.ctx.restore();
+
+    // 4. Other Base circles
+    this.ctx.save();
+
+    this.ctx.translate(homePlateApex.x, homePlateApex.y);
+    this.ctx.rotate(Math.PI / 4);
+
+    this.ctx.beginPath();
+    this.ctx.arc(BASE_LINE_LENGTH, 0, BASE_DIRT_RAD, Math.PI / 4, Math.PI + Math.PI / 20, false);
+    this.ctx.stroke();
+    this.ctx.fill();
+
+    this.ctx.beginPath();
+    this.ctx.arc(BASE_LINE_LENGTH, BASE_LINE_LENGTH, BASE_DIRT_RAD, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+    this.ctx.fill();
+
+    this.ctx.beginPath();
+    this.ctx.arc(0, BASE_LINE_LENGTH, BASE_DIRT_RAD, Math.PI / 4, Math.PI + Math.PI / 2.2, true);
+    this.ctx.stroke();
+    this.ctx.fill();
+
+    this.ctx.restore();
+  }
+}
+
+function getArcPointForAngle(c, radius, angle) {
+  return { x: c.x + Math.cos(angle) * radius, y: c.y + Math.sin(angle) * radius };
+}
+
+module.exports = ADirtLayer;

package/src/layers/court/layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/layers/BaseLineLayer.js

@@ -0,0 +1,79 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const {
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  BASE_LINE_LENGTH,
+  BASE_SQUARE_SIDE_LENGTH,
+  FOUL_LINE_LENGTH
+} = require('../constants');
+
+class BaseLineLayer extends InternalCourtLayer {
+  original() {
+    return false;
+  }
+
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const homePlateApex = { x: this.courtCenter.x, y: HOME_PLATE_APEX_TO_BACKSTOP };
+
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    this.ctx.save();
+    this.ctx.translate(homePlateApex.x, homePlateApex.y);
+    this.ctx.rotate(Math.PI / 4);
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, 0);
+    this.ctx.lineTo(BASE_LINE_LENGTH, 0);
+    this.ctx.stroke();
+    this.drawBaseSquare(BASE_LINE_LENGTH, 0);
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(BASE_LINE_LENGTH, 0);
+    this.ctx.lineTo(BASE_LINE_LENGTH, BASE_LINE_LENGTH);
+    this.ctx.stroke();
+    this.drawBaseSquare(BASE_LINE_LENGTH + BASE_SQUARE_SIDE_LENGTH / 2, BASE_LINE_LENGTH - BASE_SQUARE_SIDE_LENGTH / 2);
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(BASE_LINE_LENGTH, BASE_LINE_LENGTH);
+    this.ctx.lineTo(0, BASE_LINE_LENGTH);
+    this.ctx.stroke();
+    this.drawBaseSquare(BASE_SQUARE_SIDE_LENGTH, BASE_LINE_LENGTH - BASE_SQUARE_SIDE_LENGTH);
+
+    this.ctx.beginPath();
+    this.ctx.lineTo(0, 0);
+    this.ctx.stroke();
+    this.ctx.restore();
+
+    // Foul lines
+    [-1, 1].forEach(sideIndex => {
+      this.ctx.save();
+      this.ctx.translate(homePlateApex.x, homePlateApex.y);
+      this.ctx.rotate(sideIndex * (Math.PI / 4));
+      this.ctx.beginPath();
+      this.ctx.moveTo(0, 0);
+      this.ctx.lineTo(sideIndex * FOUL_LINE_LENGTH, 0);
+      this.ctx.stroke();
+      this.ctx.restore();
+    });
+  }
+
+  drawBaseSquare(x, y) {
+    this.ctx.save();
+    this.ctx.lineCap = 'square';
+    this.ctx.beginPath();
+    this.ctx.translate(x, y);
+    this.ctx.moveTo(0, 0);
+    this.ctx.lineTo(0, BASE_SQUARE_SIDE_LENGTH);
+    this.ctx.lineTo(-BASE_SQUARE_SIDE_LENGTH, BASE_SQUARE_SIDE_LENGTH);
+    this.ctx.lineTo(-BASE_SQUARE_SIDE_LENGTH, 0);
+    this.ctx.lineTo(0, 0);
+    this.ctx.stroke();
+    this.ctx.fill();
+    this.ctx.restore();
+  }
+}
+
+module.exports = BaseLineLayer;

package/src/layers/court/layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/layers/HomePlateLayer.js

@@ -0,0 +1,104 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const {
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_SIDE,
+  HOME_PLATE_SIDE_TO_BATTERS_BOX,
+  BATTERS_BOX_HEIGHT,
+  BATTERS_BOX_WIDTH,
+  CATCHERS_BACK_LINE_LENGTH,
+  BATTERS_BOX_TO_CATCHERS_BACK_LINE,
+  HOME_PLATE_CIRCLE_DIA,
+  ON_DECK_CIRCLE_DIA,
+  ON_DECK_CIRCLE_DISTANCE_FROM_CENTER,
+  BASE_LINE_LENGTH,
+  COACH_BOX_TO_BASE_LINE,
+  COACH_BOX_HEIGHT,
+  COACH_BOX_WIDTH
+} = require('../constants');
+
+class HomePlateLayer extends InternalCourtLayer {
+  original() {
+    return false;
+  }
+
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const homePlateApex = { x: this.courtCenter.x, y: HOME_PLATE_APEX_TO_BACKSTOP };
+    const homePlateTopLineOrigin = { x: homePlateApex.x - HOME_PLATE_SIDE / 2, y: homePlateApex.y + HOME_PLATE_SIDE };
+    const homePlateTopLineTerminus = { x: homePlateApex.x + HOME_PLATE_SIDE / 2, y: homePlateApex.y + HOME_PLATE_SIDE };
+
+    // 1. Home Plate
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(homePlateTopLineOrigin.x, homePlateTopLineOrigin.y);
+    this.ctx.lineTo(homePlateTopLineTerminus.x, homePlateTopLineTerminus.y);
+    this.ctx.lineTo(homePlateTopLineTerminus.x, homePlateTopLineTerminus.y - HOME_PLATE_SIDE / 2);
+    this.ctx.lineTo(homePlateApex.x, homePlateApex.y);
+    this.ctx.lineTo(homePlateTopLineOrigin.x, homePlateTopLineOrigin.y - HOME_PLATE_SIDE / 2);
+    this.ctx.lineTo(homePlateTopLineOrigin.x, homePlateTopLineOrigin.y);
+    this.ctx.stroke();
+    this.ctx.fill();
+
+    // 2. Batters Box
+    [-1, 1].forEach(sideIndex => {
+      this.ctx.save();
+      this.ctx.translate(homePlateApex.x, homePlateApex.y + HOME_PLATE_SIDE / 2);
+      this.ctx.beginPath();
+
+      const battersBoxClosestX = HOME_PLATE_SIDE / 2 + HOME_PLATE_SIDE_TO_BATTERS_BOX;
+
+      this.ctx.moveTo(sideIndex * battersBoxClosestX, 0);
+      this.ctx.lineTo(sideIndex * battersBoxClosestX, BATTERS_BOX_HEIGHT / 2);
+      this.ctx.lineTo(sideIndex * (battersBoxClosestX + BATTERS_BOX_WIDTH), BATTERS_BOX_HEIGHT / 2);
+      this.ctx.lineTo(sideIndex * (battersBoxClosestX + BATTERS_BOX_WIDTH), -BATTERS_BOX_HEIGHT / 2);
+      this.ctx.lineTo(sideIndex * battersBoxClosestX, -BATTERS_BOX_HEIGHT / 2);
+      this.ctx.lineTo(sideIndex * battersBoxClosestX, 0);
+      this.ctx.stroke();
+      this.ctx.restore();
+    });
+
+    // 3. Catchers box
+    const battersBoxNearestY = homePlateApex.y + HOME_PLATE_SIDE / 2 - BATTERS_BOX_HEIGHT / 2;
+    [-1, 1].forEach(sideIndex => {
+      this.ctx.save();
+      this.ctx.translate(this.courtCenter.x, battersBoxNearestY - BATTERS_BOX_TO_CATCHERS_BACK_LINE);
+      this.ctx.beginPath();
+      this.ctx.moveTo(0, 0);
+      this.ctx.lineTo(sideIndex * (CATCHERS_BACK_LINE_LENGTH / 2), 0);
+      this.ctx.lineTo(sideIndex * (CATCHERS_BACK_LINE_LENGTH / 2), BATTERS_BOX_TO_CATCHERS_BACK_LINE);
+      this.ctx.stroke();
+      this.ctx.restore();
+    });
+
+    // 4. On Deck circles
+    [-1, 1].forEach(sideIndex => {
+      this.ctx.save();
+      this.ctx.translate(this.courtCenter.x, homePlateApex.y - HOME_PLATE_CIRCLE_DIA / 2);
+      this.ctx.beginPath();
+      this.ctx.arc(sideIndex * ON_DECK_CIRCLE_DISTANCE_FROM_CENTER, 0, ON_DECK_CIRCLE_DIA / 2, 0, Math.PI * 2, true);
+      this.ctx.stroke();
+      this.ctx.restore();
+    });
+
+    // 5. Coach boxes
+    [-1, 1].forEach(sideIndex => {
+      this.ctx.save();
+      this.ctx.translate(homePlateApex.x, homePlateApex.y);
+      this.ctx.rotate(sideIndex * (Math.PI / 4));
+
+      this.ctx.beginPath();
+      this.ctx.moveTo(sideIndex * BASE_LINE_LENGTH, -(COACH_BOX_TO_BASE_LINE + COACH_BOX_HEIGHT));
+      this.ctx.lineTo(sideIndex * BASE_LINE_LENGTH, -COACH_BOX_TO_BASE_LINE);
+      this.ctx.lineTo(sideIndex * (BASE_LINE_LENGTH - COACH_BOX_WIDTH), -COACH_BOX_TO_BASE_LINE);
+      this.ctx.lineTo(sideIndex * (BASE_LINE_LENGTH - COACH_BOX_WIDTH), -(COACH_BOX_TO_BASE_LINE + COACH_BOX_HEIGHT));
+      this.ctx.stroke();
+
+      this.ctx.restore();
+    });
+  }
+}
+
+module.exports = HomePlateLayer;

package/src/layers/court/layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/layers/PitchingMoundLayer.js

@@ -0,0 +1,40 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const {
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT,
+  PITCHERS_PLATE_WIDTH,
+  PITCHERS_PLATE_HEIGHT
+} = require('../constants');
+
+class PitchingMoundLayer extends InternalCourtLayer {
+  original() {
+    return false;
+  }
+
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const pitchersPlateFrontCenter = {
+      x: this.courtCenter.x,
+      y: HOME_PLATE_APEX_TO_BACKSTOP + HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT
+    };
+
+    this.ctx.save();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.beginPath();
+    this.ctx.translate(pitchersPlateFrontCenter.x, pitchersPlateFrontCenter.y);
+    this.ctx.moveTo(0, 0);
+    this.ctx.lineTo(PITCHERS_PLATE_WIDTH / 2, 0);
+    this.ctx.lineTo(PITCHERS_PLATE_WIDTH / 2, PITCHERS_PLATE_HEIGHT);
+    this.ctx.lineTo(-PITCHERS_PLATE_WIDTH / 2, PITCHERS_PLATE_HEIGHT);
+    this.ctx.lineTo(-PITCHERS_PLATE_WIDTH / 2, 0);
+    this.ctx.lineTo(0, 0);
+    this.ctx.stroke();
+    this.ctx.fill();
+    this.ctx.restore();
+  }
+}
+
+module.exports = PitchingMoundLayer;

package/src/layers/court/layers/BASEBALL/layers/BorderRectLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+class BorderRectLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.rect(0, 0, this.courtTypeConstants.COURT_RECT_WIDTH, this.courtTypeConstants.COURT_RECT_HEIGHT);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = BorderRectLayer;

package/src/models/Play.js

@@ -9,7 +9,8 @@ const {
   SPORT_TYPE_FOOTBALL,
   SPORT_TYPE_LACROSSE,
   SPORT_TYPE_SOCCER,
-  SPORT_TYPE_HOCKEY
+  SPORT_TYPE_HOCKEY,
+  SPORT_TYPE_BASEBALL
 } = require('../constants');
 
 const STORAGE_URL = 'https://playbooksstore.blob.core.windows.net/public';
@@ -40,7 +41,8 @@ class Play {
       [SPORT_TYPE_FOOTBALL]: grassImage,
       [SPORT_TYPE_LACROSSE]: grassImage,
       [SPORT_TYPE_SOCCER]: grassImage,
-      [SPORT_TYPE_HOCKEY]: iceImage
+      [SPORT_TYPE_HOCKEY]: iceImage,
+      [SPORT_TYPE_BASEBALL]: grassImage
     };
 
     const luceoSportsWatermark = await loadImage(`${STORAGE_URL}/${LUCEOSPORTS_WATERMARK_PATH}`);