@luceosports/play-rendering 1.19.1 → 2.0.0

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_NFHS/layers/{HashMarkLayer.js → HashMarkLayer.ts}

@@ -1,9 +1,9 @@
-const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
 const HASH_MARK_TOUCH_LINE_OFFSET_X = 11;
 const HASH_MARK_LENGTH = 1;
 
-class HashMarkLayer extends InternalCourtLayer {
+export default class HashMarkLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -31,5 +31,3 @@ class HashMarkLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = HashMarkLayer;

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_NFHS/layers/{PenaltySpotLayer.js → PenaltySpotLayer.ts}

@@ -1,9 +1,9 @@
-const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
 const PENALTY_SPOT_OFFSET_Y = 12;
 const PENALTY_SPOT_LENGTH = 0.66;
 
-class PenaltySpotLayer extends InternalCourtLayer {
+export default class PenaltySpotLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -17,5 +17,3 @@ class PenaltySpotLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = PenaltySpotLayer;

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_NFHS/layers/index.ts

@@ -0,0 +1,4 @@
+import HashMarkLayer from './HashMarkLayer';
+import PenaltySpotLayer from './PenaltySpotLayer';
+
+export { HashMarkLayer, PenaltySpotLayer };

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U10/constants.ts

@@ -0,0 +1,7 @@
+export const COURT_RECT_WIDTH = 45;
+export const COURT_RECT_HEIGHT = 65;
+export const CENTER_CIRCLE_RADIUS = 8;
+export const PENALTY_SPOT_OFFSET_Y = 10;
+export const PENALTY_AREA = { width: 24, height: 12 };
+export const GOAL = { width: 6, height: 2 };
+export const GOAL_AREA = { width: 8, height: 4 };

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U10/layers/{BuildOutLineLayer.js → BuildOutLineLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
-class BuildOutLineLayer extends InternalCourtLayer {
+export default class BuildOutLineLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -20,5 +20,3 @@ class BuildOutLineLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = BuildOutLineLayer;

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U10/layers/{PenaltyArcLayer.js → PenaltyArcLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
-class PenaltyArcLayer extends InternalCourtLayer {
+export default class PenaltyArcLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -20,5 +20,3 @@ class PenaltyArcLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = PenaltyArcLayer;

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U10/layers/index.ts

@@ -0,0 +1,4 @@
+import BuildOutLineLayer from './BuildOutLineLayer';
+import PenaltyArcLayer from './PenaltyArcLayer';
+
+export { BuildOutLineLayer, PenaltyArcLayer };

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U12/constants.ts

@@ -0,0 +1,7 @@
+export const COURT_RECT_WIDTH = 55;
+export const COURT_RECT_HEIGHT = 80;
+export const CENTER_CIRCLE_RADIUS = 8;
+export const PENALTY_SPOT_OFFSET_Y = 10;
+export const PENALTY_AREA = { width: 36, height: 14 };
+export const GOAL = { width: 6.16, height: 2.16 };
+export const GOAL_AREA = { width: 12, height: 5 };

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U12/layers/{PenaltyArcLayer.js → PenaltyArcLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
 
-class PenaltyArcLayer extends InternalCourtLayer {
+export default class PenaltyArcLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -20,5 +20,3 @@ class PenaltyArcLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = PenaltyArcLayer;

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U12/layers/index.ts

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

package/src/layers/court/layers/SOCCER/courtTypes/SOCCER_U19/constants.ts

@@ -0,0 +1,7 @@
+export const COURT_RECT_WIDTH = 60;
+export const COURT_RECT_HEIGHT = 110;
+export const CENTER_CIRCLE_RADIUS = 10;
+export const PENALTY_SPOT_OFFSET_Y = 12;
+export const PENALTY_AREA = { width: 44, height: 18 };
+export const GOAL = { width: 8, height: 2.66 };
+export const GOAL_AREA = { width: 20, height: 6 };

package/src/layers/court/layers/SOCCER/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/SOCCER/layers/{CenterCircleLayer.js → CenterCircleLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
-class CenterCircleLayer extends InternalCourtLayer {
+export default class CenterCircleLayer extends InternalCourtLayer {
   drawLogic() {
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
@@ -16,5 +16,3 @@ class CenterCircleLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = CenterCircleLayer;

package/src/layers/court/layers/{BASKETBALL/layers/CenterLineLayer.js → SOCCER/layers/CenterLineLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
-class CenterLineLayer extends 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 };
@@ -12,5 +12,3 @@ class CenterLineLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = CenterLineLayer;

package/src/layers/court/layers/SOCCER/layers/{CenterSpotLayer.js → CenterSpotLayer.ts}

@@ -1,7 +1,7 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
 const CENTER_SPOT_RADIUS = 0.25;
-class CenterSpotLayer extends InternalCourtLayer {
+export default class CenterSpotLayer extends InternalCourtLayer {
   drawLogic() {
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
 
@@ -10,5 +10,3 @@ class CenterSpotLayer extends InternalCourtLayer {
     this.ctx.fill();
   }
 }
-
-module.exports = CenterSpotLayer;

package/src/layers/court/layers/SOCCER/layers/{CornerLayer.js → CornerLayer.ts}

@@ -1,7 +1,8 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
 const CORNER_RADIUS = 1;
-class CornerLayer extends InternalCourtLayer {
+
+export default class CornerLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -21,5 +22,3 @@ class CornerLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = CornerLayer;

package/src/layers/court/layers/SOCCER/layers/{PenaltyArcLayer.js → PenaltyArcLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
-class PenaltyArcLayer extends InternalCourtLayer {
+export default class PenaltyArcLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -20,5 +20,3 @@ class PenaltyArcLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = PenaltyArcLayer;

package/src/layers/court/layers/SOCCER/layers/{PenaltyAreaLayer.js → PenaltyAreaLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
-class PenaltyAreaLayer extends InternalCourtLayer {
+export default class PenaltyAreaLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -39,5 +39,3 @@ class PenaltyAreaLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = PenaltyAreaLayer;

package/src/layers/court/layers/SOCCER/layers/{PenaltySpotLayer.js → PenaltySpotLayer.ts}

@@ -1,8 +1,8 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
 const PENALTY_SPOT_RADIUS = 0.25;
 
-class PenaltySpotLayer extends InternalCourtLayer {
+export default class PenaltySpotLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -22,5 +22,3 @@ class PenaltySpotLayer extends InternalCourtLayer {
     this.ctx.fill();
   }
 }
-
-module.exports = PenaltySpotLayer;

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

@@ -0,0 +1,19 @@
+import BorderRectLayer from './BorderRectLayer';
+import CenterCircleLayer from './CenterCircleLayer';
+import CenterLineLayer from './CenterLineLayer';
+import CenterSpotLayer from './CenterSpotLayer';
+import CornerLayer from './CornerLayer';
+import PenaltyArcLayer from './PenaltyArcLayer';
+import PenaltyAreaLayer from './PenaltyAreaLayer';
+import PenaltySpotLayer from './PenaltySpotLayer';
+
+export {
+  BorderRectLayer,
+  CenterCircleLayer,
+  CenterLineLayer,
+  CenterSpotLayer,
+  CornerLayer,
+  PenaltyArcLayer,
+  PenaltyAreaLayer,
+  PenaltySpotLayer
+};

package/src/layers/court/layers/VOLLEYBALL/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/VOLLEYBALL/courtTypes/VOLLEYBALL_INDOOR/constants.ts

@@ -0,0 +1,2 @@
+export const COURT_RECT_WIDTH = 29.5;
+export const COURT_RECT_HEIGHT = 59.1;

package/src/layers/court/layers/VOLLEYBALL/layers/{AttackLineLayer.js → AttackLineLayer.ts}

@@ -1,8 +1,9 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
 const ATTACK_LINE_CENTER_OFFSET_Y = 9.8;
 const ATTACK_LINE_HASH_MARK_LENGTH = 0.574;
-class AttackLineLayer extends InternalCourtLayer {
+
+export default class AttackLineLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -36,5 +37,3 @@ class AttackLineLayer extends InternalCourtLayer {
     }
   }
 }
-
-module.exports = AttackLineLayer;

package/src/layers/court/layers/VOLLEYBALL/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/VOLLEYBALL/layers/{CenterLineLayer.js → CenterLineLayer.ts}

@@ -1,6 +1,6 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
-class CenterLineLayer extends 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 };
@@ -14,5 +14,3 @@ class CenterLineLayer extends InternalCourtLayer {
     this.ctx.beginPath();
   }
 }
-
-module.exports = CenterLineLayer;

package/src/layers/court/layers/VOLLEYBALL/layers/{HashMarkLayer.js → HashMarkLayer.ts}

@@ -1,7 +1,8 @@
-const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+import InternalCourtLayer from '../../../base/InternalCourtLayer';
 
 const HASH_MARK_LENGTH = 0.574;
-class HashMarkLayer extends InternalCourtLayer {
+
+export default class HashMarkLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
@@ -21,5 +22,3 @@ class HashMarkLayer extends InternalCourtLayer {
     this.ctx.stroke();
   }
 }
-
-module.exports = HashMarkLayer;

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

@@ -0,0 +1,6 @@
+import AttackLineLayer from './AttackLineLayer';
+import BorderRectLayer from './BorderRectLayer';
+import CenterLineLayer from './CenterLineLayer';
+import HashMarkLayer from './HashMarkLayer';
+
+export { AttackLineLayer, BorderRectLayer, CenterLineLayer, HashMarkLayer };

package/src/layers/line/base/{ActionLineLayer.js → ActionLineLayer.ts}

@@ -1,10 +1,8 @@
-const InternalLineLayer = require('./InternalLineLayer');
+import InternalLineLayer from './InternalLineLayer';
 
-class ActionLineLayer extends InternalLineLayer {
+export default class ActionLineLayer extends InternalLineLayer {
   allowDrawLineCap() {
     if (this.line.hideLineTip) return false;
     return !(this.options.magnetMode && !this.options.animationGlobalProgress);
   }
 }
-
-module.exports = ActionLineLayer;

package/src/layers/line/base/{InternalLineLayer.js → InternalLineLayer.ts}

@@ -1,11 +1,33 @@
-const InternalBaseLayer = require('../../base/InternalBaseLayer');
-const LineDrawingMath = require('../../../math/LineDrawingMath');
-const LineDrawOperationsTrait = require('../../../traits/LineDrawOperationsTrait');
+import InternalBaseLayer from '../../base/InternalBaseLayer';
+import { adjustedBezierCurveWithExclusionZones } from '../../../math/LineDrawingMath';
+import LineDrawOperationsTrait from '../../../traits/LineDrawOperationsTrait';
+import LineLayer from '../../LineLayer';
+import LineModel from '../../../models/LineModel';
+import { CourtPoint, LinePart } from '../../../types';
+
+export type MaskSettings = {
+  radius: number;
+  centerPoint: CourtPoint;
+};
+
+export default class InternalLineLayer extends InternalBaseLayer {
+  // ========= LineDrawOperationsTrait Methods ====================
+  protected drawLineFromControlPoints(): void {}
+  protected drawArrowLineCap(arrowTipPoint?: CourtPoint): void {}
+  protected handOffLineCap(lineParts: LinePart[]): void {}
+  protected drawPerpendicularLineCap(): void {}
+  protected angleBetweenLastTwoPoints(): number {
+    return 0;
+  }
+  // ==============================================================
+
+  protected lineWidth: number;
+  private readonly debugMasking: boolean;
+  private startMaskSettings: MaskSettings | null;
+  private endMaskSettings: MaskSettings | null;
 
-class InternalLineLayer extends InternalBaseLayer {
-  constructor(parentLayer, line) {
+  constructor(parentLayer: LineLayer, protected line: LineModel) {
     super(parentLayer);
-    this.line = line;
     this.lineWidth = parentLayer.lineWidth;
     this.debugMasking = false;
     this.startMaskSettings = null;
@@ -54,7 +76,7 @@ class InternalLineLayer extends InternalBaseLayer {
       // console.log('lineControlPointsBase', lineControlPoints);
 
       if (this.startMaskSettings) {
-        lineControlPoints = LineDrawingMath.adjustedBezierCurveWithExclusionZones(
+        lineControlPoints = adjustedBezierCurveWithExclusionZones(
           lineControlPoints,
           this.startMaskSettings.radius,
           this.startMaskSettings.centerPoint
@@ -66,7 +88,7 @@ class InternalLineLayer extends InternalBaseLayer {
       }
 
       if (this.endMaskSettings) {
-        lineControlPoints = LineDrawingMath.adjustedBezierCurveWithExclusionZones(
+        lineControlPoints = adjustedBezierCurveWithExclusionZones(
           lineControlPoints,
           null,
           null,
@@ -164,5 +186,3 @@ class InternalLineLayer extends InternalBaseLayer {
 }
 
 Object.assign(InternalLineLayer.prototype, LineDrawOperationsTrait);
-
-module.exports = InternalLineLayer;

package/src/layers/line/index.ts

@@ -0,0 +1,8 @@
+import CutLineLayer from './layers/CutLineLayer';
+import DribbleLineLayer from './layers/DribbleLineLayer';
+import HandoffLineLayer from './layers/HandoffLineLayer';
+import PassLineLayer from './layers/PassLineLayer';
+import ScreenLineLayer from './layers/ScreenLineLayer';
+import ShotLineLayer from './layers/ShotLineLayer';
+
+export { CutLineLayer, DribbleLineLayer, HandoffLineLayer, PassLineLayer, ScreenLineLayer, ShotLineLayer };

package/src/layers/line/layers/CutLineLayer.ts

@@ -0,0 +1,7 @@
+import ActionLineLayer from '../base/ActionLineLayer';
+
+export default class CutLineLayer extends ActionLineLayer {
+  drawLineCap() {
+    if (this.allowDrawLineCap()) this.drawArrowLineCap();
+  }
+}

package/src/layers/line/layers/{DribbleLineLayer.js → DribbleLineLayer.ts}

@@ -1,9 +1,17 @@
-const _ = require('lodash');
-const common = require('../../../helpers/common');
-const ActionLineLayer = require('../base/ActionLineLayer');
-const DribbleLineTrait = require('../../../traits/DribbleLineTrait');
+import _ from 'lodash';
+import { animationProgress } from '../../../helpers/common';
+import ActionLineLayer from '../base/ActionLineLayer';
+import DribbleLineTrait from '../../../traits/DribbleLineTrait';
+import { CourtPoint, LinePart } from '../../../types';
+import { LinePartAdjusted } from '../../../models/LineModel';
+
+export default class DribbleLineLayer extends ActionLineLayer {
+  // ================ DribbleLineTrait Methods ====================
+  private convertLinePartsToDribble(lineParts: LinePart[]): LinePartAdjusted[] {
+    return [];
+  }
+  // ==============================================================
 
-class DribbleLineLayer extends ActionLineLayer {
   drawLineCap() {
     if (this.allowDrawLineCap()) this.drawArrowLineCap();
   }
@@ -19,7 +27,7 @@ class DribbleLineLayer extends ActionLineLayer {
       if (this.options.animationGlobalProgress) {
         const [start, end] = this.line.animationKeyTimeChunks[lpIndex];
         if (_.inRange(this.options.animationGlobalProgress, start, end)) {
-          if (common.animationProgress(this.options.animationGlobalProgress, start, end) > firstPoint.time) {
+          if (animationProgress(this.options.animationGlobalProgress, start, end) > firstPoint.time) {
             alpha = 0.1;
           }
         }
@@ -30,5 +38,3 @@ class DribbleLineLayer extends ActionLineLayer {
 }
 
 Object.assign(DribbleLineLayer.prototype, DribbleLineTrait);
-
-module.exports = DribbleLineLayer;

package/src/layers/line/layers/{HandoffLineLayer.js → HandoffLineLayer.ts}

@@ -1,6 +1,7 @@
-const InternalLineLayer = require('../base/InternalLineLayer');
+import InternalLineLayer from '../base/InternalLineLayer';
+import { CourtPointAdjusted } from '../../../models/LineModel';
 
-class HandoffLineLayer extends InternalLineLayer {
+export default class HandoffLineLayer extends InternalLineLayer {
   drawLineCap() {
     this.handOffLineCap(this.line.baseLineParts());
   }
@@ -8,9 +9,7 @@ class HandoffLineLayer extends InternalLineLayer {
   getProcessedLinePaths() {
     return this.line.getLineParts().map(lp => {
       const cp = lp.controlPoints;
-      return { ...lp, controlPoints: [cp[0], cp[cp.length - 1]] };
+      return { ...lp, controlPoints: [cp[0], cp[cp.length - 1]] as [CourtPointAdjusted, CourtPointAdjusted] };
     });
   }
 }
-
-module.exports = HandoffLineLayer;

package/src/layers/line/layers/PassLineLayer.ts

@@ -0,0 +1,11 @@
+import InternalLineLayer from '../base/InternalLineLayer';
+
+export default class PassLineLayer extends InternalLineLayer {
+  setLineOptions() {
+    this.ctx.setLineDash([1, 0.5]);
+  }
+
+  drawLineCap() {
+    this.drawArrowLineCap();
+  }
+}

package/src/layers/line/layers/ScreenLineLayer.ts

@@ -0,0 +1,7 @@
+import ActionLineLayer from '../base/ActionLineLayer';
+
+export default class ScreenLineLayer extends ActionLineLayer {
+  drawLineCap() {
+    if (this.allowDrawLineCap()) this.drawPerpendicularLineCap();
+  }
+}

package/src/layers/line/layers/{ShotLineLayer.js → ShotLineLayer.ts}

@@ -1,6 +1,6 @@
-const ActionLineLayer = require('../base/ActionLineLayer');
+import ActionLineLayer from '../base/ActionLineLayer';
 
-class ShotLineLayer extends ActionLineLayer {
+export default class ShotLineLayer extends ActionLineLayer {
   drawLineCap() {
     if (this.allowDrawLineCap()) {
       const lastPoint = this.line.lastLinePartControlPoint;
@@ -84,5 +84,3 @@ class ShotLineLayer extends ActionLineLayer {
     this.ctx.restore();
   }
 }
-
-module.exports = ShotLineLayer;

package/src/layers/shape/base/{InternalShapeLayer.js → InternalShapeLayer.ts}

@@ -1,9 +1,13 @@
-const InternalBaseLayer = require('../../base/InternalBaseLayer');
+import InternalBaseLayer from '../../base/InternalBaseLayer';
+import ShapeLayer from '../../ShapeLayer';
+import ShapeModel from '../../../models/ShapeModel';
 
 const DEBUG_WRAP_POINTS = false;
 
-class InternalShapeLayer extends InternalBaseLayer {
-  constructor(parentLayer, shape) {
+export default class InternalShapeLayer extends InternalBaseLayer {
+  protected readonly shape: ShapeModel;
+
+  constructor(parentLayer: ShapeLayer, shape: ShapeModel) {
     super(parentLayer);
     this.shape = shape;
   }
@@ -72,5 +76,3 @@ class InternalShapeLayer extends InternalBaseLayer {
     // Override this function in a subclass
   }
 }
-
-module.exports = InternalShapeLayer;

package/src/layers/shape/index.ts

@@ -0,0 +1,28 @@
+import CutLineShapeLayer from './layers/line/CutLineShapeLayer';
+import DribbleLineShapeLayer from './layers/line/DribbleLineShapeLayer';
+import HandoffLineShapeLayer from './layers/line/HandoffLineShapeLayer';
+import PassLineShapeLayer from './layers/line/PassLineShapeLayer';
+import ScreenLineShapeLayer from './layers/line/ScreenLineShapeLayer';
+
+import CircleShapeLayer from './layers/CircleShapeLayer';
+import ConeShapeLayer from './layers/ConeShapeLayer';
+import FovShapeLayer from './layers/FovShapeLayer';
+import SquareShapeLayer from './layers/SquareShapeLayer';
+import StraightShapeLayer from './layers/StraightShapeLayer';
+import TriangleShapeLayer from './layers/TriangleShapeLayer';
+import XmarkShapeLayer from './layers/XmarkShapeLayer';
+
+export {
+  CutLineShapeLayer,
+  DribbleLineShapeLayer,
+  HandoffLineShapeLayer,
+  PassLineShapeLayer,
+  ScreenLineShapeLayer,
+  CircleShapeLayer,
+  ConeShapeLayer,
+  FovShapeLayer,
+  SquareShapeLayer,
+  StraightShapeLayer,
+  TriangleShapeLayer,
+  XmarkShapeLayer
+};

package/src/layers/shape/layers/{CircleShapeLayer.js → CircleShapeLayer.ts}

@@ -1,6 +1,6 @@
-const InternalShapeLayer = require('../base/InternalShapeLayer');
+import InternalShapeLayer from '../base/InternalShapeLayer';
 
-class CircleShapeLayer extends InternalShapeLayer {
+export default class CircleShapeLayer extends InternalShapeLayer {
   drawShapeLogic() {
     const { outerCircleRadius } = this.shape;
 
@@ -9,5 +9,3 @@ class CircleShapeLayer extends InternalShapeLayer {
     this.ctx.fill();
   }
 }
-
-module.exports = CircleShapeLayer;

package/src/layers/shape/layers/{ConeShapeLayer.js → ConeShapeLayer.ts}

@@ -1,6 +1,6 @@
-const InternalShapeLayer = require('../base/InternalShapeLayer');
+import InternalShapeLayer from '../base/InternalShapeLayer';
 
-class ConeShapeLayer extends InternalShapeLayer {
+export default class ConeShapeLayer extends InternalShapeLayer {
   drawShapeLogic() {
     const { color, outerCircleRadius } = this.shape;
     if (color.alpha === 0) return;
@@ -19,5 +19,3 @@ class ConeShapeLayer extends InternalShapeLayer {
     }
   }
 }
-
-module.exports = ConeShapeLayer;