@luceosports/play-rendering 2.3.0 → 2.4.0

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_COLLEGE/layers/HomePlateLayer.ts

@@ -0,0 +1,119 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+import {
+  BASE_LINE_LENGTH,
+  BATTERS_BOX_HEIGHT,
+  BATTERS_BOX_TO_CATCHERS_BACK_LINE,
+  BATTERS_BOX_WIDTH,
+  CATCHERS_BACK_LINE_LENGTH,
+  COACH_BOX_HEIGHT,
+  COACH_BOX_TO_BASE_LINE,
+  COACH_BOX_WIDTH,
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_CIRCLE_DIA,
+  HOME_PLATE_SIDE,
+  HOME_PLATE_SIDE_TO_BATTERS_BOX,
+  ON_DECK_CIRCLE_DIA,
+  ON_DECK_CIRCLE_DISTANCE_FROM_CENTER
+} from '../constants';
+
+export default 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();
+    // });
+
+    // 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, HOME_PLATE_SIDE / 2);
+      this.ctx.lineTo(sideIndex * (battersBoxClosestX + BATTERS_BOX_WIDTH), HOME_PLATE_SIDE / 2);
+      this.ctx.lineTo(sideIndex * (battersBoxClosestX + BATTERS_BOX_WIDTH), HOME_PLATE_SIDE / 2 - BATTERS_BOX_HEIGHT);
+      this.ctx.lineTo(sideIndex * battersBoxClosestX, HOME_PLATE_SIDE / 2 - BATTERS_BOX_HEIGHT);
+      this.ctx.lineTo(sideIndex * battersBoxClosestX, 0);
+      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;
+    const battersBoxNearestY = homePlateApex.y + HOME_PLATE_SIDE / 2 - BATTERS_BOX_HEIGHT + HOME_PLATE_SIDE / 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();
+    });
+  }
+}

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_COLLEGE/layers/PitchingMoundLayer.ts

@@ -0,0 +1,39 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+import {
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT,
+  PITCHERS_PLATE_HEIGHT,
+  PITCHERS_PLATE_WIDTH
+} from '../constants';
+
+export default 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 - PITCHERS_PLATE_HEIGHT / 2
+    };
+
+    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();
+  }
+}

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_COLLEGE/layers/index.ts

@@ -0,0 +1,6 @@
+import ADirtLayer from './ADirtLayer';
+import BaseLineLayer from './BaseLineLayer';
+import HomePlateLayer from './HomePlateLayer';
+import PitchingMoundLayer from './PitchingMoundLayer';
+
+export { ADirtLayer, BaseLineLayer, HomePlateLayer, PitchingMoundLayer };

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/constants.ts

@@ -0,0 +1,36 @@
+export const COURT_RECT_WIDTH = 300;
+export const COURT_RECT_HEIGHT = 260;
+export const COURT_DIRT_COLOR = '#C49463';
+export const PITCHING_MOUND_COLOR = '#E4CCB7';
+
+export const HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT = 40;
+export const HOME_PLATE_APEX_TO_SECOND_BASE_APEX = 127.28125;
+export const HOME_PLATE_APEX_TO_BACKSTOP = 25;
+export const HOME_PLATE_SIDE = 1.41667;
+export const HOME_PLATE_CIRCLE_DIA = 26;
+
+export const HOME_PLATE_SIDE_TO_BATTERS_BOX = 0.5;
+export const BATTERS_BOX_WIDTH = 4;
+export const BATTERS_BOX_HEIGHT = 6;
+export const BATTERS_BOX_TO_CATCHERS_BACK_LINE = 5;
+
+export const CATCHERS_BACK_LINE_LENGTH = 3.58333;
+export const ON_DECK_CIRCLE_DIA = 5;
+export const ON_DECK_CIRCLE_DISTANCE_FROM_CENTER = 37;
+
+export const COACH_BOX_TO_BASE_LINE = 8;
+export const COACH_BOX_WIDTH = 15;
+export const COACH_BOX_HEIGHT = 3;
+
+export const PITCHERS_PLATE_WIDTH = 5;
+export const PITCHERS_PLATE_HEIGHT = 1;
+export const PITCHERS_PLATE_TO_PITCHING_MOUND_CENTER = 0;
+export const PITCHING_MOUND_DIA = 16;
+
+export const PITCHERS_PLATE_GRASS_LINE_RAD = 60;
+
+export const HOME_RUN_FENCE_CENTER_DISTANCE = 225;
+export const FOUL_LINE_LENGTH = 200;
+export const BASE_LINE_LENGTH = 60;
+export const BASE_SQUARE_SIDE_LENGTH = 2.5;
+export const BASE_DIRT_RAD = 13;

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/layers/ADirtLayer.ts

@@ -0,0 +1,96 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+import {
+  BASE_DIRT_RAD,
+  BASE_LINE_LENGTH,
+  COURT_DIRT_COLOR,
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT,
+  HOME_PLATE_CIRCLE_DIA,
+  PITCHERS_PLATE_GRASS_LINE_RAD,
+  PITCHERS_PLATE_TO_PITCHING_MOUND_CENTER,
+  PITCHING_MOUND_COLOR,
+  PITCHING_MOUND_DIA
+} from '../constants';
+import { CourtPoint } from '../../../../../../../types';
+
+export default 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
+    };
+
+    const style = this.options.lineColor === 'transparent' ? 'transparent' : COURT_DIRT_COLOR;
+    this.ctx.fillStyle = style;
+    this.ctx.strokeStyle = style;
+
+    // 1. Gras line
+    const arcStartAngle = Math.PI / 13;
+    const arcEndAngle = Math.PI - Math.PI / 13;
+
+    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);
+
+    this.ctx.fill();
+    this.ctx.restore();
+
+    // 2. Pitching mound
+    this.ctx.save();
+    this.ctx.strokeStyle = this.options.lineColor === 'transparent' ? 'transparent' : '#FFFFFF';
+    this.ctx.fillStyle = this.options.lineColor === 'transparent' ? 'transparent' : PITCHING_MOUND_COLOR;
+    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.fill();
+    this.ctx.stroke();
+    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();
+  }
+}
+
+function getArcPointForAngle(c: CourtPoint, radius: number, angle: number) {
+  return { x: c.x + Math.cos(angle) * radius, y: c.y + Math.sin(angle) * radius };
+}

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/layers/BaseLineLayer.ts

@@ -0,0 +1,99 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+import {
+  BASE_LINE_LENGTH,
+  BASE_SQUARE_SIDE_LENGTH,
+  FOUL_LINE_LENGTH,
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_RUN_FENCE_CENTER_DISTANCE,
+  PITCHERS_PLATE_GRASS_LINE_RAD
+} from '../constants';
+
+export default 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 * 3;
+
+    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);
+
+    // line between 1st & 2nd bases
+    // 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);
+
+    // line between 2st & 3nd bases
+    // 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();
+    });
+
+    // Home run arc
+    const homeRunArcCenterOffsetY = 71;
+    const homeRunArcStartAngle = Math.PI / 6.8;
+    const homeRunArcEndAngle = Math.PI - Math.PI / 6.8;
+    this.ctx.save();
+    this.ctx.beginPath();
+    this.ctx.arc(
+      homePlateApex.x,
+      homePlateApex.y + homeRunArcCenterOffsetY,
+      HOME_RUN_FENCE_CENTER_DISTANCE - homeRunArcCenterOffsetY + 4,
+      homeRunArcStartAngle,
+      homeRunArcEndAngle,
+      false
+    );
+    this.ctx.stroke();
+    this.ctx.restore();
+  }
+
+  drawBaseSquare(x: number, y: number) {
+    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();
+  }
+}

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/layers/HomePlateLayer.ts

@@ -0,0 +1,119 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+import {
+  BASE_LINE_LENGTH,
+  BATTERS_BOX_HEIGHT,
+  BATTERS_BOX_TO_CATCHERS_BACK_LINE,
+  BATTERS_BOX_WIDTH,
+  CATCHERS_BACK_LINE_LENGTH,
+  COACH_BOX_HEIGHT,
+  COACH_BOX_TO_BASE_LINE,
+  COACH_BOX_WIDTH,
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_CIRCLE_DIA,
+  HOME_PLATE_SIDE,
+  HOME_PLATE_SIDE_TO_BATTERS_BOX,
+  ON_DECK_CIRCLE_DIA,
+  ON_DECK_CIRCLE_DISTANCE_FROM_CENTER
+} from '../constants';
+
+export default 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();
+    // });
+
+    // 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, HOME_PLATE_SIDE / 2);
+      this.ctx.lineTo(sideIndex * (battersBoxClosestX + BATTERS_BOX_WIDTH), HOME_PLATE_SIDE / 2);
+      this.ctx.lineTo(sideIndex * (battersBoxClosestX + BATTERS_BOX_WIDTH), HOME_PLATE_SIDE / 2 - BATTERS_BOX_HEIGHT);
+      this.ctx.lineTo(sideIndex * battersBoxClosestX, HOME_PLATE_SIDE / 2 - BATTERS_BOX_HEIGHT);
+      this.ctx.lineTo(sideIndex * battersBoxClosestX, 0);
+      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;
+    const battersBoxNearestY = homePlateApex.y + HOME_PLATE_SIDE / 2 - BATTERS_BOX_HEIGHT + HOME_PLATE_SIDE / 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();
+    });
+  }
+}

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/layers/PitchingMoundLayer.ts

@@ -0,0 +1,39 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+import {
+  HOME_PLATE_APEX_TO_BACKSTOP,
+  HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT,
+  PITCHERS_PLATE_HEIGHT,
+  PITCHERS_PLATE_WIDTH
+} from '../constants';
+
+export default 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 - PITCHERS_PLATE_HEIGHT / 2
+    };
+
+    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();
+  }
+}

package/src/layers/court/layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/layers/index.ts

@@ -0,0 +1,6 @@
+import ADirtLayer from './ADirtLayer';
+import BaseLineLayer from './BaseLineLayer';
+import HomePlateLayer from './HomePlateLayer';
+import PitchingMoundLayer from './PitchingMoundLayer';
+
+export { ADirtLayer, BaseLineLayer, HomePlateLayer, PitchingMoundLayer };

package/src/layers/court/layers/SOFTBALL/layers/BorderRectLayer.ts

@@ -0,0 +1,10 @@
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
+
+export default 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();
+  }
+}

package/src/layers/court/layers/SOFTBALL/layers/index.ts

@@ -0,0 +1,3 @@
+import BorderRectLayer from './BorderRectLayer';
+
+export { BorderRectLayer };

package/src/models/PlayModel.ts

@@ -11,6 +11,7 @@ import {
   SPORT_TYPE_LACROSSE,
   SPORT_TYPE_LACROSSE_BOX,
   SPORT_TYPE_SOCCER,
+  SPORT_TYPE_SOFTBALL,
   SPORT_TYPE_VOLLEYBALL
 } from '../constants';
 
@@ -121,7 +122,8 @@ export default class PlayModel {
       [SPORT_TYPE_LACROSSE_BOX]: grassImage,
       [SPORT_TYPE_SOCCER]: grassImage,
       [SPORT_TYPE_HOCKEY]: iceImage,
-      [SPORT_TYPE_BASEBALL]: grassImage
+      [SPORT_TYPE_BASEBALL]: grassImage,
+      [SPORT_TYPE_SOFTBALL]: grassImage
     };
 
     const luceoSportsWatermark = await loadImage(`${STORAGE_URL}/${LUCEOSPORTS_WATERMARK_PATH}`);

package/src/types/index.ts

@@ -20,7 +20,8 @@ export type SportType =
   | 'LACROSSE_BOX'
   | 'SOCCER'
   | 'HOCKEY'
-  | 'BASEBALL';
+  | 'BASEBALL'
+  | 'SOFTBALL';
 
 export type CourtTypeSportBasketball =
   | 'BIG3'
@@ -46,6 +47,8 @@ export type CourtTypeSportHockey = 'HOCKEY_NHL' | 'HOCKEY_INTERNATIONAL';
 
 export type CourtTypeSportBaseball = 'BASEBALL_HIGH_SCHOOL';
 
+export type CourtTypeSportSoftball = 'SOFTBALL_FP_COLLEGE' | 'SOFTBALL_FP_HS';
+
 export type CourtTypeSportLacrosse = 'LACROSSE_US_M' | 'LACROSSE_US_W';
 
 export type CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US';
@@ -62,6 +65,7 @@ export type CourtType =
   | CourtTypeSportSoccer
   | CourtTypeSportHockey
   | CourtTypeSportBaseball
+  | CourtTypeSportSoftball
   | CourtTypeSportFootball
   | CourtTypeSportFootballLegacy;