@luceosports/play-rendering 2.4.1 → 2.4.3

package/dist/types/constants.d.ts

@@ -21,6 +21,7 @@ export declare const COURT_TYPE_VOLLEYBALL_INDOOR = "VOLLEYBALL_INDOOR";
 export declare const COURT_TYPE_LACROSSE_US_M = "LACROSSE_US_M";
 export declare const COURT_TYPE_LACROSSE_US_W = "LACROSSE_US_W";
 export declare const COURT_TYPE_LACROSSE_BOX_US = 'LACROSSE_BOX_US';
+export declare const COURT_TYPE_LACROSSE_BOX_CLA = 'LACROSSE_BOX_CLA';
 export declare const COURT_TYPE_SOCCER_FIFA = "SOCCER_FIFA";
 export declare const COURT_TYPE_SOCCER_NCAA = "SOCCER_NCAA";
 export declare const COURT_TYPE_SOCCER_NFHS = "SOCCER_NFHS";

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

@@ -12,7 +12,7 @@ export type CourtTypeSportSoccer = 'SOCCER_FIFA' | 'SOCCER_NCAA' | 'SOCCER_NFHS'
 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 CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US' | 'LACROSSE_BOX_CLA';
 export type CourtTypeSportSoftball = 'SOFTBALL_FP_COLLEGE' | 'SOFTBALL_FP_HS';
 export type CourtTypeSportFootball = 'FOOTBALL_HIGH_SCHOOL';
 export type CourtTypeSportFootballLegacy = 'FOOTBALL';

package/package.json

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

package/src/constants.ts

@@ -26,6 +26,7 @@ export const COURT_TYPE_LACROSSE_US_M = 'LACROSSE_US_M';
 export const COURT_TYPE_LACROSSE_US_W = 'LACROSSE_US_W';
 
 export const COURT_TYPE_LACROSSE_BOX_US = 'LACROSSE_BOX_US';
+export const COURT_TYPE_LACROSSE_BOX_CLA = 'LACROSSE_BOX_CLA';
 
 export const COURT_TYPE_SOCCER_FIFA = 'SOCCER_FIFA';
 export const COURT_TYPE_SOCCER_NCAA = 'SOCCER_NCAA';

package/src/layers/CourtLayer.ts

@@ -1,5 +1,6 @@
 import BaseLayer from './base/BaseLayer';
 import { courtTypeLayers, sportLayers } from './court';
+import { isBackgroundOption } from '../type-guards';
 
 export default class CourtLayer extends BaseLayer {
   get frameWidth() {
@@ -23,7 +24,7 @@ export default class CourtLayer extends BaseLayer {
   }
 
   get background() {
-    return (this.options.background || this.playData.sport) as keyof typeof this.staticData.backgroundOptions;
+    return this.options.background || this.courtTypeConstants.BACKGROUND || this.playData.sport;
   }
 
   apply() {
@@ -57,7 +58,11 @@ export default class CourtLayer extends BaseLayer {
   }
 
   setBackground() {
-    if (this.staticData.backgroundOptions && this.staticData.backgroundOptions[this.background]) {
+    if (
+      isBackgroundOption(this.background) &&
+      this.staticData.backgroundOptions &&
+      this.staticData.backgroundOptions[this.background]
+    ) {
       this.ctx.fillStyle = this.ctx.createPattern(this.staticData.backgroundOptions[this.background], 'repeat')!;
       this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
     } else if (this.background.indexOf('#') === 0) {

package/src/layers/PlayerLayer.ts

@@ -147,11 +147,11 @@ export default class PlayerLayer extends BaseLayer {
     }
 
     let playerTextLabel = player.textLabel;
-    if (playerMapItem && this.options.labelsOverrideType) {
+    if (playerMapItem) {
       if (playerMapItem.textOverride) {
         playerTextLabel = playerMapItem.textOverride;
       }
-      if (playerMapItem.teamPlayerId) {
+      if (playerMapItem.teamPlayerId && this.options.labelsOverrideType) {
         const teamPlayer = this.staticData.teamPlayers.find(p => p.id === playerMapItem.teamPlayerId);
         if (teamPlayer) {
           const fallbackLabel = teamPlayer.User_Name.split(' ')

package/src/layers/court/index.ts

@@ -33,7 +33,8 @@ import {
   SPORT_TYPE_LACROSSE_BOX,
   SPORT_TYPE_SOFTBALL,
   COURT_TYPE_SOFTBALL_FP_COLLEGE,
-  COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL
+  COURT_TYPE_SOFTBALL_FP_HIGH_SCHOOL,
+  COURT_TYPE_LACROSSE_BOX_CLA
 } from '../../constants';
 
 export type SportConstants = {
@@ -47,6 +48,7 @@ export type SportConstants = {
 export type CourtTypeConstants = {
   COURT_RECT_WIDTH: number;
   COURT_RECT_HEIGHT: number;
+  BACKGROUND?: keyof typeof PlayModel.backgroundOptions | string;
 } & Record<string, any>;
 
 import InternalCourtLayer from './base/InternalCourtLayer';
@@ -104,6 +106,8 @@ import * as LacrosseBoxLayers from './layers/LACROSSE_BOX/layers';
 import * as LacrosseBoxConstants from './layers/LACROSSE_BOX/constants';
 import * as LacrosseBoxUsLayers from './layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_US/layers';
 import * as LacrosseBoxUsConstants from './layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_US/constants';
+import * as LacrosseBoxClaLayers from './layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_CLA/layers';
+import * as LacrosseBoxClaConstants from './layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_CLA/constants';
 
 import * as SoccerLayers from './layers/SOCCER/layers';
 import * as SoccerConstants from './layers/SOCCER/constants';
@@ -121,6 +125,7 @@ import * as SoccerU12Constants from './layers/SOCCER/courtTypes/SOCCER_U12/const
 import * as VolleyballLayers from './layers/VOLLEYBALL/layers';
 import * as VolleyballConstants from './layers/VOLLEYBALL/constants';
 import * as VolleyballIndoorConstants from './layers/VOLLEYBALL/courtTypes/VOLLEYBALL_INDOOR/constants';
+import PlayModel from '../../models/PlayModel';
 
 const sportLayers: Record<SportType, Record<string, typeof InternalCourtLayer>> = {
   [SPORT_TYPE_BASEBALL]: BaseballLayers,
@@ -162,7 +167,8 @@ const courtTypeLayers: Record<SportType, Partial<Record<CourtType, Record<string
     [COURT_TYPE_LACROSSE_US_W]: LacrosseUsWLayers
   },
   [SPORT_TYPE_LACROSSE_BOX]: {
-    [COURT_TYPE_LACROSSE_BOX_US]: LacrosseBoxUsLayers
+    [COURT_TYPE_LACROSSE_BOX_US]: LacrosseBoxUsLayers,
+    [COURT_TYPE_LACROSSE_BOX_CLA]: LacrosseBoxClaLayers
   },
   [SPORT_TYPE_SOCCER]: {
     [COURT_TYPE_SOCCER_NCAA]: SoccerNcaaLayers,
@@ -203,6 +209,7 @@ const courtTypeConstants: Record<CourtType, CourtTypeConstants> = {
   [COURT_TYPE_LACROSSE_US_M]: LacrosseUsMConstants,
   [COURT_TYPE_LACROSSE_US_W]: LacrosseUsWConstants,
   [COURT_TYPE_LACROSSE_BOX_US]: LacrosseBoxUsConstants,
+  [COURT_TYPE_LACROSSE_BOX_CLA]: LacrosseBoxClaConstants,
   [COURT_TYPE_SOCCER_FIFA]: SoccerFifaConstants,
   [COURT_TYPE_SOCCER_NCAA]: SoccerNcaaConstants,
   [COURT_TYPE_SOCCER_NFHS]: SoccerNfhsConstants,
@@ -229,7 +236,7 @@ const sportCourtTypeMap: Record<SportType, { courtTypes: CourtType[] }> = {
   [SPORT_TYPE_FOOTBALL]: { courtTypes: [COURT_TYPE_FOOTBALL_HIGH_SCHOOL] },
   [SPORT_TYPE_HOCKEY]: { courtTypes: [COURT_TYPE_HOCKEY_NHL, COURT_TYPE_HOCKEY_INTERNATIONAL] },
   [SPORT_TYPE_LACROSSE]: { courtTypes: [COURT_TYPE_LACROSSE_US_M, COURT_TYPE_LACROSSE_US_W] },
-  [SPORT_TYPE_LACROSSE_BOX]: { courtTypes: [COURT_TYPE_LACROSSE_BOX_US] },
+  [SPORT_TYPE_LACROSSE_BOX]: { courtTypes: [COURT_TYPE_LACROSSE_BOX_US, COURT_TYPE_LACROSSE_BOX_CLA] },
   [SPORT_TYPE_SOCCER]: {
     courtTypes: [
       COURT_TYPE_SOCCER_FIFA,

package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_CLA/constants.ts

@@ -0,0 +1,6 @@
+export const COURT_RECT_WIDTH = 85;
+export const COURT_RECT_HEIGHT = 180;
+export const GOAL_LINE_Y = 12;
+export const TOP_SIDE_CURVE_OFFSET = 12;
+export const RESTRAINING_LINE_OFFSET_Y = 11;
+export const BACKGROUND = 'Concrete';

package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_CLA/layers/CenterCircleLayer.ts

@@ -0,0 +1,26 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+const CENTER_DOT_RADIUS = 0.5;
+const CENTER_CIRCLE_RADIUS = 2;
+const CENTER_CIRCLE_LINE_LENGTH = 6;
+
+export default class CenterCircleLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, CENTER_DOT_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.fill();
+
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, CENTER_CIRCLE_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+
+    [CENTER_CIRCLE_RADIUS, -CENTER_CIRCLE_RADIUS].forEach(offset => {
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.courtCenter.x + offset, this.courtCenter.y - CENTER_CIRCLE_LINE_LENGTH / 2);
+      this.ctx.lineTo(this.courtCenter.x + offset, this.courtCenter.y + CENTER_CIRCLE_LINE_LENGTH / 2);
+      this.ctx.stroke();
+    });
+  }
+}

package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_CLA/layers/FanLineLayer.ts

@@ -0,0 +1,72 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+const GOAL_ARC_RADIUS = 9.25;
+const GOAL_ARC_OUTER_RADIUS = 24;
+const GOAL_LINE_CAGE_LENGTH = 4.75;
+const GOAL_BACK_LINE_OFFSET_Y = 6;
+
+export default class FanLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const goalLineCenter = {
+      x: this.courtCenter.x,
+      y: this.courtTypeConstants.GOAL_LINE_Y
+    };
+
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    // 1. Draw goal line
+    this.ctx.beginPath();
+    this.ctx.moveTo(goalLineCenter.x - GOAL_ARC_RADIUS, goalLineCenter.y);
+    this.ctx.lineTo(goalLineCenter.x + GOAL_ARC_RADIUS, goalLineCenter.y);
+    this.ctx.stroke();
+
+    // 2.1 Draw arc
+    const angleOffset = Math.PI / 4.5;
+    this.ctx.beginPath();
+    this.ctx.arc(goalLineCenter.x, goalLineCenter.y, GOAL_ARC_RADIUS, -angleOffset, Math.PI + angleOffset, false);
+    this.ctx.stroke();
+
+    // 2.2 Draw outer dashed arc
+    this.ctx.save();
+
+    this.ctx.setLineDash([1.2, 0.4]);
+    this.ctx.beginPath();
+    this.ctx.arc(goalLineCenter.x, goalLineCenter.y, GOAL_ARC_OUTER_RADIUS, 0, Math.PI, false);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(goalLineCenter.x - GOAL_ARC_RADIUS, goalLineCenter.y);
+    this.ctx.lineTo(goalLineCenter.x - GOAL_ARC_OUTER_RADIUS, goalLineCenter.y);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(goalLineCenter.x + GOAL_ARC_RADIUS, goalLineCenter.y);
+    this.ctx.lineTo(goalLineCenter.x + GOAL_ARC_OUTER_RADIUS, goalLineCenter.y);
+    this.ctx.stroke();
+
+    this.ctx.restore();
+
+    // 3. Draw goal back line
+    const backLineOffsetX = 2;
+    this.ctx.beginPath();
+    this.ctx.moveTo(goalLineCenter.x - (GOAL_ARC_RADIUS - backLineOffsetX), goalLineCenter.y - GOAL_BACK_LINE_OFFSET_Y);
+    this.ctx.lineTo(goalLineCenter.x + (GOAL_ARC_RADIUS - backLineOffsetX), goalLineCenter.y - GOAL_BACK_LINE_OFFSET_Y);
+    this.ctx.stroke();
+
+    // 4. Draw goal line cage
+    const goalCageLeft = { x: goalLineCenter.x - GOAL_LINE_CAGE_LENGTH / 2, y: goalLineCenter.y };
+    const goalCageRight = { x: goalLineCenter.x + GOAL_LINE_CAGE_LENGTH / 2, y: goalLineCenter.y };
+    const goalCageTop = { x: goalLineCenter.x, y: goalLineCenter.y - GOAL_LINE_CAGE_LENGTH / 2 };
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(goalCageLeft.x, goalCageLeft.y);
+    this.ctx.lineTo(goalCageRight.x, goalCageRight.y);
+    this.ctx.lineTo(goalCageTop.x, goalCageTop.y);
+    this.ctx.closePath();
+    this.ctx.stroke();
+  }
+}

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

@@ -0,0 +1,24 @@
+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 scorekeepers bench
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, this.courtCenter.y - REFEREE_CREASE_RADIUS);
+    this.ctx.lineTo(-REFEREE_CREASE_BOX_WIDTH, this.courtCenter.y - REFEREE_CREASE_RADIUS);
+    this.ctx.lineTo(-REFEREE_CREASE_BOX_WIDTH, this.courtCenter.y + REFEREE_CREASE_RADIUS);
+    this.ctx.lineTo(0, this.courtCenter.y + REFEREE_CREASE_RADIUS);
+    this.ctx.stroke();
+  }
+}

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

@@ -0,0 +1,66 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+const PLAYERS_BENCH_COURT_CENTER_OFFSET_Y = 5;
+const PLAYERS_BENCH_LENGTH = 30;
+const PLAYERS_BENCH_WIDTH = 5;
+const EXCHANGE_AREA_WIDTH = 4;
+const EXCHANGE_AREA_OFFSET_Y = 0.5;
+const PENALTY_BOX_WIDTH = 5;
+const PENALTY_BOX_LENGTH = 12;
+
+export default class RestrainingLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const courtOrigin = { x: 0.0, y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y };
+    const courtTerminus = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH,
+      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 playersBenchStartY = this.courtCenter.y - PLAYERS_BENCH_COURT_CENTER_OFFSET_Y;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.courtTypeConstants.COURT_RECT_WIDTH, playersBenchStartY);
+    this.ctx.lineTo(this.courtTypeConstants.COURT_RECT_WIDTH + PLAYERS_BENCH_WIDTH, playersBenchStartY);
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH + PLAYERS_BENCH_WIDTH,
+      playersBenchStartY - PLAYERS_BENCH_LENGTH
+    );
+    this.ctx.lineTo(this.courtTypeConstants.COURT_RECT_WIDTH, playersBenchStartY - PLAYERS_BENCH_LENGTH);
+    this.ctx.stroke();
+
+    // 3. Draw exchange area
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.courtTypeConstants.COURT_RECT_WIDTH - EXCHANGE_AREA_WIDTH, this.courtCenter.y);
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH - EXCHANGE_AREA_WIDTH,
+      this.courtCenter.y - PLAYERS_BENCH_LENGTH - PLAYERS_BENCH_COURT_CENTER_OFFSET_Y + EXCHANGE_AREA_OFFSET_Y
+    );
+    this.ctx.lineTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH,
+      this.courtCenter.y - PLAYERS_BENCH_LENGTH - PLAYERS_BENCH_COURT_CENTER_OFFSET_Y + EXCHANGE_AREA_OFFSET_Y
+    );
+    this.ctx.stroke();
+
+    // 4. Draw penalty boxes
+    const penaltyBoxStartY = this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(0, penaltyBoxStartY);
+    this.ctx.lineTo(0 - PENALTY_BOX_WIDTH, penaltyBoxStartY);
+    this.ctx.lineTo(0 - PENALTY_BOX_WIDTH, penaltyBoxStartY - PENALTY_BOX_LENGTH);
+    this.ctx.lineTo(0, penaltyBoxStartY - PENALTY_BOX_LENGTH);
+    this.ctx.stroke();
+  }
+}

package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_CLA/layers/index.ts

@@ -0,0 +1,6 @@
+import CenterCircleLayer from './CenterCircleLayer';
+import RestrainingLineLayer from './RestrainingLineLayer';
+import FanLineLayer from './FanLineLayer';
+import RefereeCreaseLayer from './RefereeCreaseLayer';
+
+export { CenterCircleLayer, RestrainingLineLayer, FanLineLayer, RefereeCreaseLayer };

package/src/layers/court/layers/LACROSSE_BOX/{layers → courtTypes/LACROSSE_BOX_US/layers}/CenterCircleLayer.ts

@@ -1,4 +1,4 @@
-import InternalCourtLayer from '../../../base/InternalCourtLayer';
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
 const CENTER_CIRCLE_RADIUS = 11;
 const CENTER_CIRCLE_INNER_RADIUS = 1.41667;

package/src/layers/court/layers/LACROSSE_BOX/{layers → courtTypes/LACROSSE_BOX_US/layers}/CenterLineLayer.ts

@@ -1,4 +1,4 @@
-import InternalCourtLayer from '../../../base/InternalCourtLayer';
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
 const EXCHANGE_AREA_WIDTH = 5;
 

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

@@ -1,5 +1,7 @@
+import CenterCircleLayer from './CenterCircleLayer';
+import CenterLineLayer from './CenterLineLayer';
 import RestrainingLineLayer from './RestrainingLineLayer';
 import FanLineLayer from './FanLineLayer';
 import RefereeCreaseLayer from './RefereeCreaseLayer';
 
-export { RestrainingLineLayer, FanLineLayer, RefereeCreaseLayer };
+export { CenterCircleLayer, CenterLineLayer, RestrainingLineLayer, FanLineLayer, RefereeCreaseLayer };

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

@@ -1,5 +1,3 @@
 import BorderRinkLayer from './BorderRinkLayer';
-import CenterLineLayer from './CenterLineLayer';
-import CenterCircleLayer from './CenterCircleLayer';
 
-export { BorderRinkLayer, CenterLineLayer, CenterCircleLayer };
+export { BorderRinkLayer };

package/src/models/PlayModel.ts

@@ -20,7 +20,9 @@ import { PlayConstructData, PlayData, Position, SportType } from '../types';
 import hardwoodImageData from '../assets/wood_bg.png';
 import grassImageData from '../assets/grass_bg.png';
 import iceImageData from '../assets/ice_bg.png';
+import concreteImageData from '../assets/concrete_bg.png';
 import { loadImage } from '../helpers/common';
+import { im } from 'mathjs';
 
 const STORAGE_URL = 'https://playbooksstore.blob.core.windows.net/public';
 const LUCEOSPORTS_WATERMARK_PATH = 'partners/LuceoSports/luceo-sports-logo-powered-by-sm.png';
@@ -97,7 +99,10 @@ export default class PlayModel {
   public static playerHats: readonly ImageConfigItem[];
   public static shapes: readonly ImageConfigItem[];
   public static watermark: { LuceoSports: HTMLImageElement; TeamLogo: HTMLImageElement | null };
-  public static backgroundOptions: Record<SportType, HTMLImageElement> & { Hardwood: HTMLImageElement };
+  public static backgroundOptions: Record<SportType, HTMLImageElement> & {
+    Hardwood: HTMLImageElement;
+    Concrete: HTMLImageElement;
+  };
 
   constructor(data: PlayConstructData, options?: Partial<PlayModelOptions>) {
     this.name = data.name;
@@ -112,9 +117,11 @@ export default class PlayModel {
     const hardwoodImage = await loadImage(hardwoodImageData);
     const grassImage = await loadImage(grassImageData);
     const iceImage = await loadImage(iceImageData);
+    const concreteImage = await loadImage(concreteImageData);
 
     PlayModel.backgroundOptions = {
       Hardwood: hardwoodImage,
+      Concrete: concreteImage,
       [SPORT_TYPE_BASKETBALL]: hardwoodImage,
       [SPORT_TYPE_VOLLEYBALL]: hardwoodImage,
       [SPORT_TYPE_FOOTBALL]: grassImage,

package/src/type-guards.ts

@@ -0,0 +1,7 @@
+import PlayModel from './models/PlayModel';
+
+export function isBackgroundOption(
+  arg: keyof typeof PlayModel.backgroundOptions | string
+): arg is keyof typeof PlayModel.backgroundOptions {
+  return (PlayModel.backgroundOptions as Record<string, any>)[arg] !== undefined;
+}

package/src/types/index.ts

@@ -51,7 +51,7 @@ export type CourtTypeSportSoftball = 'SOFTBALL_FP_COLLEGE' | 'SOFTBALL_FP_HS';
 
 export type CourtTypeSportLacrosse = 'LACROSSE_US_M' | 'LACROSSE_US_W';
 
-export type CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US';
+export type CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US' | 'LACROSSE_BOX_CLA';
 
 export type CourtTypeSportFootball = 'FOOTBALL_HIGH_SCHOOL';