@luceosports/play-rendering 2.3.1 → 2.4.1

package/dist/types/constants.d.ts

@@ -6,6 +6,7 @@ export declare const SPORT_TYPE_LACROSSE_BOX = "LACROSSE_BOX";
 export declare const SPORT_TYPE_SOCCER = "SOCCER";
 export declare const SPORT_TYPE_HOCKEY = "HOCKEY";
 export declare const SPORT_TYPE_BASEBALL = "BASEBALL";
+export declare const SPORT_TYPE_SOFTBALL = 'SOFTBALL';
 export declare const COURT_TYPE_BIG3 = "BIG3";
 export declare const COURT_TYPE_FIBA = "FIBA";
 export declare const COURT_TYPE_NBA = "NBA";
@@ -29,6 +30,8 @@ export declare const COURT_TYPE_SOCCER_U19 = "SOCCER_U19";
 export declare const COURT_TYPE_HOCKEY_NHL = "HOCKEY_NHL";
 export declare const COURT_TYPE_HOCKEY_INTERNATIONAL = "HOCKEY_INTERNATIONAL";
 export declare const COURT_TYPE_BASEBALL_HIGH_SCHOOL = "BASEBALL_HIGH_SCHOOL";
+export declare const COURT_TYPE_SOFTBALL_FP_COLLEGE = 'SOFTBALL_FP_COLLEGE';
+export declare const COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL = 'SOFTBALL_FP_HS';
 export declare const SHAPE_TYPE_CIRCLE = "CIRCLE";
 export declare const SHAPE_TYPE_SQUARE = "SQUARE";
 export declare const SHAPE_TYPE_TRIANGLE = "TRIANGLE";

package/dist/types/types/index.d.ts

@@ -1,139 +1,140 @@
-export type PlayerPosition = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11';
-export type DefenderPosition = 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x7' | 'x8' | 'x9' | 'x10' | 'x11';
-export type CoachPosition = 'C';
-export type Position = PlayerPosition | DefenderPosition | CoachPosition;
-export type LineType = 'PASS' | 'CUT' | 'SCREEN' | 'DRIBBLE' | 'HANDOFF' | 'SHOT';
-export type LineShapeType = 'LINE.CUT' | 'LINE.SCREEN' | 'LINE.DRIBBLE' | 'LINE.PASS' | 'LINE.HANDOFF';
-export type ShapeType = 'CIRCLE' | 'SQUARE' | 'TRIANGLE' | 'FOV' | 'XMARK' | 'STRAIGHT' | 'CONE' | LineShapeType;
-export type SportType = 'FOOTBALL' | 'BASKETBALL' | 'VOLLEYBALL' | 'LACROSSE' |  'LACROSSE_BOX' | 'SOCCER' | 'HOCKEY' | 'BASEBALL';
-export type CourtTypeSportBasketball = 'BIG3' | 'NBA' | 'WNBA' | 'FIBA' | 'NCAAM' | 'NCAAW' | 'US_HIGH_SCHOOL' | 'US_JUNIOR_HIGH';
-export type CourtTypeSportVolleyball = 'VOLLEYBALL_INDOOR';
-export type CourtTypeSportSoccer = 'SOCCER_FIFA' | 'SOCCER_NCAA' | 'SOCCER_NFHS' | 'SOCCER_U10' | 'SOCCER_U12' | 'SOCCER_U19';
-export type CourtTypeSportHockey = 'HOCKEY_NHL' | 'HOCKEY_INTERNATIONAL';
-export type CourtTypeSportBaseball = 'BASEBALL_HIGH_SCHOOL';
-export type CourtTypeSportLacrosse = 'LACROSSE_US_M' | 'LACROSSE_US_W';
-export type CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US';
-export type CourtTypeSportFootball = 'FOOTBALL_HIGH_SCHOOL';
-export type CourtTypeSportFootballLegacy = 'FOOTBALL';
-export type CourtType = CourtTypeSportBasketball | CourtTypeSportVolleyball | CourtTypeSportLacrosse | CourtTypeSportLacrosseBox | CourtTypeSportSoccer | CourtTypeSportHockey | CourtTypeSportBaseball | CourtTypeSportFootball | CourtTypeSportFootballLegacy;
-export type ShapeControlPoints = [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
-export type NoteDisplayModes = ['onCourt'] | ['playNote'] | ['onCourt', 'playNote'];
-export interface SportConstants {
-    PLAYER_TOKEN_RADIUS: number;
-    PLAYER_TOKEN_SCALE: number;
-}
-export interface CourtTypeConstants {
-    COURT_RECT_WIDTH: number;
-    COURT_RECT_HEIGHT: number;
-}
-export interface CourtPoint {
-    x: number;
-    y: number;
-}
-export interface CourtSize {
-    height: number;
-    width: number;
-}
-export interface Scale {
-    x: number;
-    y: number;
-}
-export interface LinePart {
-    controlPoints: [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
-}
-export interface Color {
-    red: number;
-    green: number;
-    blue: number;
-    alpha: number;
-}
-export interface CourtRect {
-    origin: CourtPoint;
-    size: CourtSize;
-}
-export interface Court {
-    type: CourtType;
-    courtRect: CourtRect;
-}
-export type PlayerAnimationType = 'POSITION';
-export interface Animation {
-    id: string;
-    keyTimes: number[];
-}
-export interface PlayerAnimation extends Animation {
-    type: PlayerAnimationType;
-    lineParts: LinePart[];
-}
-export interface Player {
-    id: string;
-    possession: boolean;
-    color: Color;
-    position: Position;
-    location: CourtPoint;
-    textOverride?: string;
-    animations: PlayerAnimation[];
-}
-export type LineAnimationType = 'LINESTROKE';
-export interface LineAnimation {
-    id: string;
-    type: LineAnimationType;
-    keyTimes: number[];
-    strokeStartValues: [number, number, number];
-}
-export interface Line {
-    id: string;
-    type: LineType;
-    phase: number;
-    playerPositionOrigin: Position;
-    playerPositionTerminus: Position | null;
-    playerLineSequence: number;
-    lineParts: LinePart[];
-    color: Color;
-    hideLineTip?: boolean;
-    animations: LineAnimation[];
-}
-export interface Shape {
-    id: string;
-    type: ShapeType;
-    location: CourtPoint;
-    color: Color;
-    scale: Scale;
-    angle?: number;
-    showBorder?: boolean;
-    linePart?: LinePart;
-    animations?: Animation[];
-    hideForStatic?: boolean;
-}
-export interface Note {
-    id: string;
-    location: CourtPoint;
-    displayModes: NoteDisplayModes;
-    text: string;
-    animations?: Animation[];
-    font: NoteFont;
-    color: Color;
-    showBorder: boolean;
-    hideForStatic?: boolean;
-}
-export interface NoteFont {
-    bold: boolean;
-    italic: boolean;
-    underline: boolean;
-    strikethrough: boolean;
-    fontSize: number;
-}
-export interface PlayConstructData {
-    id?: string;
-    lastUpdtTS?: string;
-    name: string;
-    playData: PlayData;
-}
-export interface PlayData {
-    animationDuration: number;
-    sport: SportType;
-    court: Court;
-    players: Player[];
-    lines: Line[];
-    shapes?: Shape[];
-    notes?: Note[];
-}
+export type PlayerPosition = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11';
+export type DefenderPosition = 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x7' | 'x8' | 'x9' | 'x10' | 'x11';
+export type CoachPosition = 'C';
+export type Position = PlayerPosition | DefenderPosition | CoachPosition;
+export type LineType = 'PASS' | 'CUT' | 'SCREEN' | 'DRIBBLE' | 'HANDOFF' | 'SHOT';
+export type LineShapeType = 'LINE.CUT' | 'LINE.SCREEN' | 'LINE.DRIBBLE' | 'LINE.PASS' | 'LINE.HANDOFF';
+export type ShapeType = 'CIRCLE' | 'SQUARE' | 'TRIANGLE' | 'FOV' | 'XMARK' | 'STRAIGHT' | 'CONE' | LineShapeType;
+export type SportType = 'FOOTBALL' | 'BASKETBALL' | 'VOLLEYBALL' | 'LACROSSE' |  'LACROSSE_BOX' | 'SOCCER' | 'HOCKEY' | 'BASEBALL' | 'SOFTBALL';
+export type CourtTypeSportBasketball = 'BIG3' | 'NBA' | 'WNBA' | 'FIBA' | 'NCAAM' | 'NCAAW' | 'US_HIGH_SCHOOL' | 'US_JUNIOR_HIGH';
+export type CourtTypeSportVolleyball = 'VOLLEYBALL_INDOOR';
+export type CourtTypeSportSoccer = 'SOCCER_FIFA' | 'SOCCER_NCAA' | 'SOCCER_NFHS' | 'SOCCER_U10' | 'SOCCER_U12' | 'SOCCER_U19';
+export type CourtTypeSportHockey = 'HOCKEY_NHL' | 'HOCKEY_INTERNATIONAL';
+export type CourtTypeSportBaseball = 'BASEBALL_HIGH_SCHOOL';
+export type CourtTypeSportLacrosse = 'LACROSSE_US_M' | 'LACROSSE_US_W';
+export type CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US';
+export type CourtTypeSportSoftball = 'SOFTBALL_FP_COLLEGE' | 'SOFTBALL_FP_HS';
+export type CourtTypeSportFootball = 'FOOTBALL_HIGH_SCHOOL';
+export type CourtTypeSportFootballLegacy = 'FOOTBALL';
+export type CourtType = CourtTypeSportBasketball | CourtTypeSportVolleyball | CourtTypeSportLacrosse | CourtTypeSportLacrosseBox | CourtTypeSportSoccer | CourtTypeSportHockey | CourtTypeSportBaseball | CourtTypeSportSoftball | CourtTypeSportFootball | CourtTypeSportFootballLegacy;
+export type ShapeControlPoints = [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
+export type NoteDisplayModes = ['onCourt'] | ['playNote'] | ['onCourt', 'playNote'];
+export interface SportConstants {
+    PLAYER_TOKEN_RADIUS: number;
+    PLAYER_TOKEN_SCALE: number;
+}
+export interface CourtTypeConstants {
+    COURT_RECT_WIDTH: number;
+    COURT_RECT_HEIGHT: number;
+}
+export interface CourtPoint {
+    x: number;
+    y: number;
+}
+export interface CourtSize {
+    height: number;
+    width: number;
+}
+export interface Scale {
+    x: number;
+    y: number;
+}
+export interface LinePart {
+    controlPoints: [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
+}
+export interface Color {
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+}
+export interface CourtRect {
+    origin: CourtPoint;
+    size: CourtSize;
+}
+export interface Court {
+    type: CourtType;
+    courtRect: CourtRect;
+}
+export type PlayerAnimationType = 'POSITION';
+export interface Animation {
+    id: string;
+    keyTimes: number[];
+}
+export interface PlayerAnimation extends Animation {
+    type: PlayerAnimationType;
+    lineParts: LinePart[];
+}
+export interface Player {
+    id: string;
+    possession: boolean;
+    color: Color;
+    position: Position;
+    location: CourtPoint;
+    textOverride?: string;
+    animations: PlayerAnimation[];
+}
+export type LineAnimationType = 'LINESTROKE';
+export interface LineAnimation {
+    id: string;
+    type: LineAnimationType;
+    keyTimes: number[];
+    strokeStartValues: [number, number, number];
+}
+export interface Line {
+    id: string;
+    type: LineType;
+    phase: number;
+    playerPositionOrigin: Position;
+    playerPositionTerminus: Position | null;
+    playerLineSequence: number;
+    lineParts: LinePart[];
+    color: Color;
+    hideLineTip?: boolean;
+    animations: LineAnimation[];
+}
+export interface Shape {
+    id: string;
+    type: ShapeType;
+    location: CourtPoint;
+    color: Color;
+    scale: Scale;
+    angle?: number;
+    showBorder?: boolean;
+    linePart?: LinePart;
+    animations?: Animation[];
+    hideForStatic?: boolean;
+}
+export interface Note {
+    id: string;
+    location: CourtPoint;
+    displayModes: NoteDisplayModes;
+    text: string;
+    animations?: Animation[];
+    font: NoteFont;
+    color: Color;
+    showBorder: boolean;
+    hideForStatic?: boolean;
+}
+export interface NoteFont {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    fontSize: number;
+}
+export interface PlayConstructData {
+    id?: string;
+    lastUpdtTS?: string;
+    name: string;
+    playData: PlayData;
+}
+export interface PlayData {
+    animationDuration: number;
+    sport: SportType;
+    court: Court;
+    players: Player[];
+    lines: Line[];
+    shapes?: Shape[];
+    notes?: Note[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "main": "dist/play-rendering.js",
   "types": "dist/play-rendering.d.ts",
   "scripts": {

package/src/constants.ts

@@ -6,6 +6,7 @@ export const SPORT_TYPE_LACROSSE_BOX = 'LACROSSE_BOX';
 export const SPORT_TYPE_SOCCER = 'SOCCER';
 export const SPORT_TYPE_HOCKEY = 'HOCKEY';
 export const SPORT_TYPE_BASEBALL = 'BASEBALL';
+export const SPORT_TYPE_SOFTBALL = 'SOFTBALL';
 
 export const COURT_TYPE_BIG3 = 'BIG3';
 export const COURT_TYPE_FIBA = 'FIBA';
@@ -38,6 +39,9 @@ export const COURT_TYPE_HOCKEY_INTERNATIONAL = 'HOCKEY_INTERNATIONAL';
 
 export const COURT_TYPE_BASEBALL_HIGH_SCHOOL = 'BASEBALL_HIGH_SCHOOL';
 
+export const COURT_TYPE_SOFTBALL_FP_COLLEGE = 'SOFTBALL_FP_COLLEGE';
+export const COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL = 'SOFTBALL_FP_HS';
+
 export const SHAPE_TYPE_CIRCLE = 'CIRCLE';
 export const SHAPE_TYPE_SQUARE = 'SQUARE';
 export const SHAPE_TYPE_TRIANGLE = 'TRIANGLE';

package/src/layers/court/index.ts

@@ -30,7 +30,10 @@ import {
   SPORT_TYPE_LACROSSE,
   SPORT_TYPE_SOCCER,
   SPORT_TYPE_VOLLEYBALL,
-  SPORT_TYPE_LACROSSE_BOX
+  SPORT_TYPE_LACROSSE_BOX,
+  SPORT_TYPE_SOFTBALL,
+  COURT_TYPE_SOFTBALL_FP_COLLEGE,
+  COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL
 } from '../../constants';
 
 export type SportConstants = {
@@ -53,6 +56,13 @@ import * as BaseballConstants from './layers/BASEBALL/constants';
 import * as BaseballHighSchoolLayers from './layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/layers';
 import * as BaseballHighSchoolConstants from './layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/constants';
 
+import * as SoftballLayers from './layers/SOFTBALL/layers';
+import * as SoftballConstants from './layers/SOFTBALL/constants';
+import * as SoftballFPCollageLayers from './layers/SOFTBALL/courtTypes/SOFTBALL_FP_COLLEGE/layers';
+import * as SoftballFPCollageConstants from './layers/SOFTBALL/courtTypes/SOFTBALL_FP_COLLEGE/constants';
+import * as SoftballFPHSLayers from './layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/layers';
+import * as SoftballFPHSConstants from './layers/SOFTBALL/courtTypes/SOFTBALL_FP_HIGH_SCHOOL/constants';
+
 import * as BasketballLayers from './layers/BASKETBALL/layers';
 import * as BasketballConstants from './layers/BASKETBALL/constants';
 import * as BasketballBig3Layers from './layers/BASKETBALL/courtTypes/BIG3/layers';
@@ -114,6 +124,7 @@ import * as VolleyballIndoorConstants from './layers/VOLLEYBALL/courtTypes/VOLLE
 
 const sportLayers: Record<SportType, Record<string, typeof InternalCourtLayer>> = {
   [SPORT_TYPE_BASEBALL]: BaseballLayers,
+  [SPORT_TYPE_SOFTBALL]: SoftballLayers,
   [SPORT_TYPE_BASKETBALL]: BasketballLayers,
   [SPORT_TYPE_FOOTBALL]: FootballLayers,
   [SPORT_TYPE_HOCKEY]: HockeyLayers,
@@ -127,6 +138,10 @@ const courtTypeLayers: Record<SportType, Partial<Record<CourtType, Record<string
   [SPORT_TYPE_BASEBALL]: {
     [COURT_TYPE_BASEBALL_HIGH_SCHOOL]: BaseballHighSchoolLayers
   },
+  [SPORT_TYPE_SOFTBALL]: {
+    [COURT_TYPE_SOFTBALL_FP_COLLEGE]: SoftballFPCollageLayers,
+    [COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL]: SoftballFPHSLayers
+  },
   [SPORT_TYPE_BASKETBALL]: {
     [COURT_TYPE_BIG3]: BasketballBig3Layers,
     [COURT_TYPE_FIBA]: BasketballFibaLayers,
@@ -160,6 +175,7 @@ const courtTypeLayers: Record<SportType, Partial<Record<CourtType, Record<string
 
 const sportConstants: Record<SportType, SportConstants> = {
   [SPORT_TYPE_BASEBALL]: BaseballConstants,
+  [SPORT_TYPE_SOFTBALL]: SoftballConstants,
   [SPORT_TYPE_BASKETBALL]: BasketballConstants,
   [SPORT_TYPE_FOOTBALL]: FootballConstants,
   [SPORT_TYPE_HOCKEY]: HockeyConstants,
@@ -170,6 +186,8 @@ const sportConstants: Record<SportType, SportConstants> = {
 };
 const courtTypeConstants: Record<CourtType, CourtTypeConstants> = {
   [COURT_TYPE_BASEBALL_HIGH_SCHOOL]: BaseballHighSchoolConstants,
+  [COURT_TYPE_SOFTBALL_FP_COLLEGE]: SoftballFPCollageConstants,
+  [COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL]: SoftballFPHSConstants,
   [COURT_TYPE_BIG3]: BasketballBig3Constants,
   [COURT_TYPE_FIBA]: BasketballFibaConstants,
   [COURT_TYPE_NBA]: BasketballNbaConstants,
@@ -195,6 +213,7 @@ const courtTypeConstants: Record<CourtType, CourtTypeConstants> = {
 };
 const sportCourtTypeMap: Record<SportType, { courtTypes: CourtType[] }> = {
   [SPORT_TYPE_BASEBALL]: { courtTypes: [COURT_TYPE_BASEBALL_HIGH_SCHOOL] },
+  [SPORT_TYPE_SOFTBALL]: { courtTypes: [COURT_TYPE_SOFTBALL_FP_COLLEGE, COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL] },
   [SPORT_TYPE_BASKETBALL]: {
     courtTypes: [
       COURT_TYPE_BIG3,

package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_US/layers/RefereeCreaseLayer.ts

@@ -1,13 +1,49 @@
 import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
 const REFEREE_CREASE_RADIUS = 10;
+const REFEREE_CREASE_BOX_LENGTH = 24;
+const REFEREE_CREASE_BOX_WIDTH = 5;
 
 export default class RefereeCreaseLayer extends InternalCourtLayer {
   drawLogic() {
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
+    // 1. Draw referee crease half arc
     this.ctx.beginPath();
     this.ctx.arc(0, this.courtCenter.y, REFEREE_CREASE_RADIUS, Math.PI / 2, -Math.PI / 2, true);
     this.ctx.stroke();
+
+    // 2. Draw referee crease half arc extended curves
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, this.courtCenter.y - REFEREE_CREASE_RADIUS);
+    this.ctx.bezierCurveTo(
+      0,
+      this.courtCenter.y - REFEREE_CREASE_RADIUS,
+      0 - REFEREE_CREASE_BOX_WIDTH / 2,
+      this.courtCenter.y - REFEREE_CREASE_RADIUS,
+      0 - REFEREE_CREASE_BOX_WIDTH,
+      this.courtCenter.y - REFEREE_CREASE_RADIUS
+    );
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, this.courtCenter.y + REFEREE_CREASE_RADIUS);
+    this.ctx.bezierCurveTo(
+      0,
+      this.courtCenter.y + REFEREE_CREASE_RADIUS,
+      0 - REFEREE_CREASE_BOX_WIDTH / 2,
+      this.courtCenter.y + REFEREE_CREASE_RADIUS,
+      0 - REFEREE_CREASE_BOX_WIDTH,
+      this.courtCenter.y + REFEREE_CREASE_RADIUS
+    );
+    this.ctx.stroke();
+
+    // 3. Draw scorekeepers bench
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, this.courtCenter.y - REFEREE_CREASE_BOX_LENGTH / 2);
+    this.ctx.lineTo(-REFEREE_CREASE_BOX_WIDTH, this.courtCenter.y - REFEREE_CREASE_BOX_LENGTH / 2);
+    this.ctx.lineTo(-REFEREE_CREASE_BOX_WIDTH, this.courtCenter.y + REFEREE_CREASE_BOX_LENGTH / 2);
+    this.ctx.lineTo(0, this.courtCenter.y + REFEREE_CREASE_BOX_LENGTH / 2);
+    this.ctx.stroke();
   }
 }

package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_US/layers/RestrainingLineLayer.ts

@@ -1,5 +1,8 @@
 import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
+const PLAYERS_BENCH_LENGTH = 24;
+const PLAYERS_BENCH_WIDTH = 5;
+
 export default class RestrainingLineLayer extends InternalCourtLayer {
   reflection() {
     return true;
@@ -12,10 +15,27 @@ export default class RestrainingLineLayer extends InternalCourtLayer {
       y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y
     };
 
+    // 1. Draw restraining line
     this.ctx.beginPath();
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
     this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
     this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
     this.ctx.stroke();
+
+    // 2. Draw players bench
+    const playersBenchCenterY = this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y / 2;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.courtTypeConstants.COURT_RECT_WIDTH, playersBenchCenterY - PLAYERS_BENCH_LENGTH / 2);
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH + PLAYERS_BENCH_WIDTH,
+      playersBenchCenterY - PLAYERS_BENCH_LENGTH / 2
+    );
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH + PLAYERS_BENCH_WIDTH,
+      playersBenchCenterY + PLAYERS_BENCH_LENGTH / 2
+    );
+    this.ctx.lineTo(this.courtTypeConstants.COURT_RECT_WIDTH, playersBenchCenterY + PLAYERS_BENCH_LENGTH / 2);
+    this.ctx.stroke();
   }
 }

package/src/layers/court/layers/LACROSSE_BOX/layers/CenterLineLayer.ts

@@ -1,14 +1,37 @@
 import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
+const EXCHANGE_AREA_WIDTH = 5;
+
 export default class CenterLineLayer extends InternalCourtLayer {
   drawLogic() {
     const courtOrigin = { x: 0.0, y: this.courtCenter.y };
     const courtTerminus = { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: this.courtCenter.y };
 
+    // 1. Draw center line
     this.ctx.beginPath();
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
     this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
     this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
     this.ctx.stroke();
+
+    // 2. Draw exchange area
+    this.ctx.beginPath();
+    this.ctx.moveTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH,
+      this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y + 5
+    );
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH - EXCHANGE_AREA_WIDTH,
+      this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y + 5
+    );
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH - EXCHANGE_AREA_WIDTH,
+      this.courtCenter.y + this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y - 5
+    );
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH,
+      this.courtCenter.y + this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y - 5
+    );
+    this.ctx.stroke();
   }
 }

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

@@ -0,0 +1,5 @@
+export const COURT_LINE_WIDTH = 0.1667;
+export const PLAYER_TOKEN_RADIUS = 1.5;
+export const PLAYER_TOKEN_SCALE = 2.4;
+export const LINE_WIDTH = 0.55;
+export const LINE_MASKING = false;

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

@@ -0,0 +1,36 @@
+export const COURT_RECT_WIDTH = 280;
+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 = 43;
+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 = 220;
+export const FOUL_LINE_LENGTH = 190;
+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_COLLEGE/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 / 15;
+    const arcEndAngle = Math.PI - Math.PI / 15;
+
+    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 };
+}