@luceosports/play-rendering 2.2.8 → 2.3.0

package/package.json

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

package/src/constants.ts

@@ -2,6 +2,7 @@ export const SPORT_TYPE_BASKETBALL = 'BASKETBALL';
 export const SPORT_TYPE_VOLLEYBALL = 'VOLLEYBALL';
 export const SPORT_TYPE_FOOTBALL = 'FOOTBALL';
 export const SPORT_TYPE_LACROSSE = 'LACROSSE';
+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';
@@ -23,6 +24,8 @@ export const COURT_TYPE_VOLLEYBALL_INDOOR = 'VOLLEYBALL_INDOOR';
 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_SOCCER_FIFA = 'SOCCER_FIFA';
 export const COURT_TYPE_SOCCER_NCAA = 'SOCCER_NCAA';
 export const COURT_TYPE_SOCCER_NFHS = 'SOCCER_NFHS';

package/src/layers/court/index.ts

@@ -9,6 +9,7 @@ import {
   COURT_TYPE_HOCKEY_NHL,
   COURT_TYPE_LACROSSE_US_M,
   COURT_TYPE_LACROSSE_US_W,
+  COURT_TYPE_LACROSSE_BOX_US,
   COURT_TYPE_NBA,
   COURT_TYPE_NCAAM,
   COURT_TYPE_NCAAW,
@@ -28,7 +29,8 @@ import {
   SPORT_TYPE_HOCKEY,
   SPORT_TYPE_LACROSSE,
   SPORT_TYPE_SOCCER,
-  SPORT_TYPE_VOLLEYBALL
+  SPORT_TYPE_VOLLEYBALL,
+  SPORT_TYPE_LACROSSE_BOX
 } from '../../constants';
 
 export type SportConstants = {
@@ -88,6 +90,11 @@ import * as LacrosseUsMConstants from './layers/LACROSSE/courtTypes/LACROSSE_US_
 import * as LacrosseUsWLayers from './layers/LACROSSE/courtTypes/LACROSSE_US_W/layers';
 import * as LacrosseUsWConstants from './layers/LACROSSE/courtTypes/LACROSSE_US_W/constants';
 
+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 SoccerLayers from './layers/SOCCER/layers';
 import * as SoccerConstants from './layers/SOCCER/constants';
 import * as SoccerU19Constants from './layers/SOCCER/courtTypes/SOCCER_U19/constants';
@@ -111,6 +118,7 @@ const sportLayers: Record<SportType, Record<string, typeof InternalCourtLayer>>
   [SPORT_TYPE_FOOTBALL]: FootballLayers,
   [SPORT_TYPE_HOCKEY]: HockeyLayers,
   [SPORT_TYPE_LACROSSE]: LacrosseLayers,
+  [SPORT_TYPE_LACROSSE_BOX]: LacrosseBoxLayers,
   [SPORT_TYPE_SOCCER]: SoccerLayers,
   [SPORT_TYPE_VOLLEYBALL]: VolleyballLayers
 };
@@ -138,6 +146,9 @@ const courtTypeLayers: Record<SportType, Partial<Record<CourtType, Record<string
     [COURT_TYPE_LACROSSE_US_M]: LacrosseUsMLayers,
     [COURT_TYPE_LACROSSE_US_W]: LacrosseUsWLayers
   },
+  [SPORT_TYPE_LACROSSE_BOX]: {
+    [COURT_TYPE_LACROSSE_BOX_US]: LacrosseBoxUsLayers
+  },
   [SPORT_TYPE_SOCCER]: {
     [COURT_TYPE_SOCCER_NCAA]: SoccerNcaaLayers,
     [COURT_TYPE_SOCCER_NFHS]: SoccerNfhsLayers,
@@ -153,6 +164,7 @@ const sportConstants: Record<SportType, SportConstants> = {
   [SPORT_TYPE_FOOTBALL]: FootballConstants,
   [SPORT_TYPE_HOCKEY]: HockeyConstants,
   [SPORT_TYPE_LACROSSE]: LacrosseConstants,
+  [SPORT_TYPE_LACROSSE_BOX]: LacrosseBoxConstants,
   [SPORT_TYPE_SOCCER]: SoccerConstants,
   [SPORT_TYPE_VOLLEYBALL]: VolleyballConstants
 };
@@ -172,6 +184,7 @@ const courtTypeConstants: Record<CourtType, CourtTypeConstants> = {
   [COURT_TYPE_HOCKEY_INTERNATIONAL]: HockeyIntConstants,
   [COURT_TYPE_LACROSSE_US_M]: LacrosseUsMConstants,
   [COURT_TYPE_LACROSSE_US_W]: LacrosseUsWConstants,
+  [COURT_TYPE_LACROSSE_BOX_US]: LacrosseBoxUsConstants,
   [COURT_TYPE_SOCCER_FIFA]: SoccerFifaConstants,
   [COURT_TYPE_SOCCER_NCAA]: SoccerNcaaConstants,
   [COURT_TYPE_SOCCER_NFHS]: SoccerNfhsConstants,
@@ -197,6 +210,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_SOCCER]: {
     courtTypes: [
       COURT_TYPE_SOCCER_FIFA,

package/src/layers/court/layers/LACROSSE_BOX/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 = 1;
+export const LINE_WIDTH = 0.33;
+export const LINE_MASKING = true;

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

@@ -0,0 +1,5 @@
+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 = 42.5;

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

@@ -0,0 +1,51 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+const GOAL_ARC_RADIUS = 9.25;
+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. 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();
+
+    // 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_US/layers/RefereeCreaseLayer.ts

@@ -0,0 +1,13 @@
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+
+const REFEREE_CREASE_RADIUS = 10;
+
+export default class RefereeCreaseLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    this.ctx.beginPath();
+    this.ctx.arc(0, this.courtCenter.y, REFEREE_CREASE_RADIUS, Math.PI / 2, -Math.PI / 2, true);
+    this.ctx.stroke();
+  }
+}

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

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

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

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

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

@@ -0,0 +1,44 @@
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
+
+export default class BorderRinkLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    const sideLineLeft = [
+      { x: 0, y: this.courtCenter.y },
+      { x: 0, y: this.courtTypeConstants.GOAL_LINE_Y }
+    ];
+
+    const sideLineTop = [
+      { x: this.courtTypeConstants.TOP_SIDE_CURVE_OFFSET, y: 0 },
+      { x: this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.TOP_SIDE_CURVE_OFFSET, y: 0 }
+    ];
+
+    const sideLineRight = [
+      { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: this.courtCenter.y },
+      { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: this.courtTypeConstants.GOAL_LINE_Y }
+    ];
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(sideLineLeft[0].x, sideLineLeft[0].y);
+    this.ctx.lineTo(sideLineLeft[1].x, sideLineLeft[1].y);
+
+    this.ctx.bezierCurveTo(0, 0, 10, 0, sideLineTop[0].x, sideLineTop[0].y);
+    this.ctx.lineTo(sideLineTop[1].x, sideLineTop[1].y);
+
+    this.ctx.bezierCurveTo(
+      this.courtTypeConstants.COURT_RECT_WIDTH - 10,
+      0,
+      this.courtTypeConstants.COURT_RECT_WIDTH,
+      0,
+      sideLineRight[1].x,
+      sideLineRight[1].y
+    );
+    this.ctx.lineTo(sideLineRight[0].x, sideLineRight[0].y);
+    this.ctx.stroke();
+  }
+}

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

@@ -0,0 +1,19 @@
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
+
+const CENTER_CIRCLE_RADIUS = 11;
+const CENTER_CIRCLE_INNER_RADIUS = 1.41667;
+
+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_CIRCLE_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+
+    this.ctx.setLineDash([0.8, 0.5]);
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, CENTER_CIRCLE_INNER_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+  }
+}

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

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

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

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

package/src/models/FrameModel.ts

@@ -489,8 +489,9 @@ export default class FrameModel {
   prepareCourtPoint(courtPoint: CourtPoint) {
     const { mirror } = this.play.options;
     const { width } = this.play.playData.court.courtRect.size;
+    const { origin } = this.play.playData.court.courtRect;
     return {
-      x: mirror ? width - courtPoint.x : courtPoint.x,
+      x: mirror ? width + origin.x - (courtPoint.x - origin.x) : courtPoint.x,
       y: courtPoint.y
     };
   }

package/src/models/PlayModel.ts

@@ -9,6 +9,7 @@ import {
   SPORT_TYPE_FOOTBALL,
   SPORT_TYPE_HOCKEY,
   SPORT_TYPE_LACROSSE,
+  SPORT_TYPE_LACROSSE_BOX,
   SPORT_TYPE_SOCCER,
   SPORT_TYPE_VOLLEYBALL
 } from '../constants';
@@ -117,6 +118,7 @@ export default class PlayModel {
       [SPORT_TYPE_VOLLEYBALL]: hardwoodImage,
       [SPORT_TYPE_FOOTBALL]: grassImage,
       [SPORT_TYPE_LACROSSE]: grassImage,
+      [SPORT_TYPE_LACROSSE_BOX]: grassImage,
       [SPORT_TYPE_SOCCER]: grassImage,
       [SPORT_TYPE_HOCKEY]: iceImage,
       [SPORT_TYPE_BASEBALL]: grassImage

package/src/types/index.ts

@@ -12,7 +12,15 @@ export type LineShapeType = 'LINE.CUT' | 'LINE.SCREEN' | 'LINE.DRIBBLE' | 'LINE.
 
 export type ShapeType = 'CIRCLE' | 'SQUARE' | 'TRIANGLE' | 'FOV' | 'XMARK' | 'STRAIGHT' | 'CONE' | LineShapeType;
 
-export type SportType = 'FOOTBALL' | 'BASKETBALL' | 'VOLLEYBALL' | 'LACROSSE' | 'SOCCER' | 'HOCKEY' | 'BASEBALL';
+export type SportType =
+  | 'FOOTBALL'
+  | 'BASKETBALL'
+  | 'VOLLEYBALL'
+  | 'LACROSSE'
+  | 'LACROSSE_BOX'
+  | 'SOCCER'
+  | 'HOCKEY'
+  | 'BASEBALL';
 
 export type CourtTypeSportBasketball =
   | 'BIG3'
@@ -40,6 +48,8 @@ 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';
@@ -48,6 +58,7 @@ export type CourtType =
   | CourtTypeSportBasketball
   | CourtTypeSportVolleyball
   | CourtTypeSportLacrosse
+  | CourtTypeSportLacrosseBox
   | CourtTypeSportSoccer
   | CourtTypeSportHockey
   | CourtTypeSportBaseball