@luceosports/play-rendering 2.0.6 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "main": "dist/play-rendering.js",
   "types": "dist/play-rendering.d.ts",
   "scripts": {
@@ -21,14 +21,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-class-properties": "^7.24.7",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-typescript": "^7.24.6",
     "@commitlint/cli": "^13.2.0",
     "@commitlint/config-angular": "^13.2.0",
     "@types/lodash": "^4.17.4",
-    "@types/mathjs": "^9.4.2",
     "@types/node": "^20.12.12",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",

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

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

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

@@ -1,5 +1,5 @@
-export const COURT_RECT_WIDTH = 460;
-export const COURT_RECT_HEIGHT = 290;
+export const COURT_RECT_WIDTH = 480;
+export const COURT_RECT_HEIGHT = 460;
 export const COURT_DIRT_COLOR = '#C49463';
 
 export const HOME_PLATE_APEX_TO_PITCHERS_PLATE_FRONT = 60.5;
@@ -28,7 +28,8 @@ export const PITCHING_MOUND_DIA = 18;
 
 export const PITCHERS_PLATE_GRASS_LINE_RAD = 95;
 
-export const FOUL_LINE_LENGTH = 325;
+export const HOME_RUN_FENCE_CENTER_DISTANCE = 390;
+export const FOUL_LINE_LENGTH = 330;
 export const BASE_LINE_LENGTH = 90;
-export const BASE_SQUARE_SIDE_LENGTH = 1.25;
+export const BASE_SQUARE_SIDE_LENGTH = 2.5;
 export const BASE_DIRT_RAD = 13;

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

@@ -1,6 +1,13 @@
 import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
-import { BASE_LINE_LENGTH, BASE_SQUARE_SIDE_LENGTH, FOUL_LINE_LENGTH, HOME_PLATE_APEX_TO_BACKSTOP } from '../constants';
+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() {
@@ -14,7 +21,7 @@ export default class BaseLineLayer extends InternalCourtLayer {
   drawLogic() {
     const homePlateApex = { x: this.courtCenter.x, y: HOME_PLATE_APEX_TO_BACKSTOP };
 
-    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 3;
 
     this.ctx.save();
     this.ctx.translate(homePlateApex.x, homePlateApex.y);
@@ -26,16 +33,18 @@ export default class BaseLineLayer extends InternalCourtLayer {
     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();
+    // 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);
 
-    this.ctx.beginPath();
-    this.ctx.moveTo(BASE_LINE_LENGTH, BASE_LINE_LENGTH);
-    this.ctx.lineTo(0, BASE_LINE_LENGTH);
-    this.ctx.stroke();
+    // 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();
@@ -54,6 +63,23 @@ export default class BaseLineLayer extends InternalCourtLayer {
       this.ctx.stroke();
       this.ctx.restore();
     });
+
+    // Home run arc
+    const homeRunArcCenterOffsetY = 138;
+    const homeRunArcStartAngle = Math.PI / 8.1;
+    const homeRunArcEndAngle = Math.PI - Math.PI / 8.1;
+    this.ctx.save();
+    this.ctx.beginPath();
+    this.ctx.arc(
+      homePlateApex.x,
+      homePlateApex.y + homeRunArcCenterOffsetY,
+      HOME_RUN_FENCE_CENTER_DISTANCE - homeRunArcCenterOffsetY,
+      homeRunArcStartAngle,
+      homeRunArcEndAngle,
+      false
+    );
+    this.ctx.stroke();
+    this.ctx.restore();
   }
 
   drawBaseSquare(x: number, y: number) {

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

@@ -43,26 +43,42 @@ export default class HomePlateLayer extends InternalCourtLayer {
     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, 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, 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 / 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);

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
     };
   }