@luceosports/play-rendering 2.0.1 → 2.0.3

package/src/models/AnimationModel.ts

@@ -12,8 +12,8 @@ export default class AnimationModel {
   private running: boolean;
   private framesLoadTime: number[];
   private timeStart: number | null;
-  private timeElapsed: number;
-  private timeElapsedSaved: number;
+  private timeElapsed: number | null;
+  private timeElapsedSaved: number | null;
 
   constructor(private ctx: CanvasRenderingContext2D, play: PlayModel) {
     this.play = _.cloneDeep(play);
@@ -35,7 +35,7 @@ export default class AnimationModel {
   }
 
   get globalProgress() {
-    return (this.timeElapsed * 100) / (this.animationDuration * 1000) / 100;
+    return ((this.timeElapsed || 0) * 100) / (this.animationDuration * 1000) / 100;
   }
 
   get currentPlayPhase() {
@@ -43,7 +43,7 @@ export default class AnimationModel {
       return _.inRange(this.globalProgress, interval.min, interval.max);
     });
 
-    return parseInt(phaseInterval ? phaseInterval[0] : Object.keys(this.linesPhaseIntervals).pop());
+    return parseInt(phaseInterval ? phaseInterval[0] : Object.keys(this.linesPhaseIntervals).pop()!);
   }
 
   get linesPhaseIntervals(): Record<number, { min: number; max: number }> {
@@ -52,7 +52,7 @@ export default class AnimationModel {
       if (!result[line.phase]) result[line.phase] = { min: 0, max: 0 };
       line.animations.forEach(({ keyTimes }) => {
         const [from] = keyTimes;
-        const to = [...keyTimes].pop();
+        const to = [...keyTimes].pop()!;
         if (from < result[line.phase].min || (!result[line.phase].min && line.phase > 1)) result[line.phase].min = from;
         if (to > result[line.phase].max) result[line.phase].max = to;
       });
@@ -61,9 +61,9 @@ export default class AnimationModel {
   }
 
   get lastLineAnimationMax() {
-    return this.play.playData.lines.reduce((result, line) => {
+    return this.play.playData.lines.reduce<number>((result, line) => {
       const lineModel = new LineModel(line);
-      return result > lineModel.lastAnimEndTime ? result : lineModel.lastAnimEndTime;
+      return result > lineModel.lastAnimEndTime! ? result : lineModel.lastAnimEndTime!;
     }, 0);
   }
 
@@ -78,7 +78,7 @@ export default class AnimationModel {
   }
 
   pause() {
-    cancelAnimationFrame(this.loopId);
+    cancelAnimationFrame(this.loopId!);
     this.running = false;
     this.timeStart = null;
     this.timeElapsedSaved = this.timeElapsed;
@@ -117,7 +117,7 @@ export default class AnimationModel {
     if (this.globalProgress >= this.lastLineAnimationMax) {
       progressCallback(this.lastLineAnimationMax);
       this.reset();
-      cancelAnimationFrame(this.loopId);
+      cancelAnimationFrame(this.loopId!);
       setTimeout(() => {
         finishCallback();
       }, 1000);
@@ -128,10 +128,10 @@ export default class AnimationModel {
 
     if (!this.timeStart) this.timeStart = timestamp;
 
-    const frameTime = timestamp - this.timeStart + this.timeElapsedSaved - this.timeElapsed;
+    const frameTime = timestamp - this.timeStart + (this.timeElapsedSaved || 0) - (this.timeElapsed || 0);
     this.framesLoadTime.push(frameTime);
 
-    this.timeElapsed = timestamp - this.timeStart + this.timeElapsedSaved;
+    this.timeElapsed = timestamp - this.timeStart + (this.timeElapsedSaved || 0);
 
     if (debug) {
       console.log(

package/src/models/Base/InternalFrameModel.ts

@@ -10,11 +10,11 @@ export default class Model<M extends Line | Player | Note | Shape, A extends Lin
   }
 
   _getAttrOriginal<K extends keyof M>(attr: K) {
-    return typeof this.originalData[attr] !== 'undefined' ? this.originalData[attr] : null;
+    return this.originalData[attr];
   }
 
   _getAttr<K extends keyof A>(attr: K) {
-    return typeof this.adjustedData[attr] !== 'undefined' ? this.adjustedData[attr] : null;
+    return this.adjustedData[attr];
   }
 
   _setAttr<K extends keyof A>(attr: K, value: A[K]) {

package/src/models/FrameModel.ts

@@ -9,7 +9,7 @@ import ShapeLayer from '../layers/ShapeLayer';
 import NoteLayer from '../layers/NoteLayer';
 import LineControlPointLayer from '../layers/LineControlPointLayer';
 import ShapeControlPointLayer from '../layers/ShapeControlPointLayer';
-import LineModel from './LineModel';
+import LineModel, { LinePartAdjusted } from './LineModel';
 import PlayerModel from './PlayerModel';
 import NoteModel from './NoteModel';
 import * as ShapeModels from './ShapeModels';
@@ -22,7 +22,7 @@ import {
 } from '../constants';
 
 import PlayModel, { PlayModelOptions, PlayStaticData } from './PlayModel';
-import { Court, CourtPoint, SportType } from '../types';
+import { Court, CourtPoint, ShapeType, SportType } from '../types';
 import ShapeModel from './ShapeModel';
 
 export type FrameData = {
@@ -56,11 +56,12 @@ type InferEntityFromObjectType<T> = T extends 'player'
   : LineModel;
 
 export default class FrameModel {
-  private ctx: CanvasRenderingContext2D;
+  private ctx: CanvasRenderingContext2D | null;
   private animationGlobalProgressPrev: number;
 
   constructor(private play: PlayModel, private phase = 1, private animationGlobalProgress = 0) {
     this.animationGlobalProgressPrev = animationGlobalProgress;
+    this.ctx = null;
   }
 
   get sport(): SportType {
@@ -109,9 +110,9 @@ export default class FrameModel {
   }
 
   get playAnimationDuration() {
-    return this.play.playData.lines.reduce((result, l) => {
+    return this.play.playData.lines.reduce<number>((result, l) => {
       const line = new LineModel(l);
-      const lineLastAnimEndTime = line.lastAnimEndTime;
+      const lineLastAnimEndTime = line.lastAnimEndTime!;
       return result > lineLastAnimEndTime ? result : lineLastAnimEndTime;
     }, 0);
   }
@@ -128,10 +129,10 @@ export default class FrameModel {
     if (!this.play.playData.shapes) return [];
     return this.play.playData.shapes
       .filter(s => {
-        return ShapeModels[transformShapeTypeToImportKey(s.type)] !== undefined;
+        return ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels] !== undefined;
       })
       .map(s => {
-        return new ShapeModels[transformShapeTypeToImportKey(s.type)](s);
+        return new ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels](s);
       });
   }
 
@@ -203,7 +204,7 @@ export default class FrameModel {
       if (!player.animations.length) return player;
 
       player.animations.forEach(animation => {
-        const keyTimesChunks = [];
+        const keyTimesChunks: [number, number][] = [];
         animation.keyTimes.forEach((value, index) => {
           if (index) keyTimesChunks.push([animation.keyTimes[index - 1], value]);
         });
@@ -222,8 +223,8 @@ export default class FrameModel {
         });
       });
 
-      if (this.animationGlobalProgress >= player.lastAnimEndTime) {
-        player.location = player.lastAnimationLastLinePartControlPoint;
+      if (this.animationGlobalProgress >= player.lastAnimEndTime!) {
+        player.location = player.lastAnimationLastLinePartControlPoint!;
       }
 
       return player;
@@ -237,10 +238,10 @@ export default class FrameModel {
         const line = new LineModel(l);
 
         line.setAnimationKeyTimesChunked(
-          this.play.playData.players.find(p => p.position === line.playerPositionOrigin)
+          this.play.playData.players.find(p => p.position === line.playerPositionOrigin)!
         );
 
-        const linePartsAdjusted = [];
+        const linePartsAdjusted: LinePartAdjusted[] = [];
         line.animationKeyTimeChunks.forEach(([start, end], index) => {
           if (this.animationGlobalProgressPrev < end && this.animationGlobalProgress >= end) {
             window.dispatchEvent(
@@ -254,7 +255,7 @@ export default class FrameModel {
             const linePathSplitted = splitBezierCurveAtTVal(
               line.getLineParts()[index].controlPoints,
               this.animationProgress(start, end)
-            );
+            ) as LinePartAdjusted['controlPoints'][];
             linePartsAdjusted.push({ controlPoints: linePathSplitted[0], alpha: 0.1 });
             linePartsAdjusted.push({ controlPoints: linePathSplitted[1], alpha: line.color.alpha });
           } else if (this.animationGlobalProgress > end) {
@@ -265,7 +266,7 @@ export default class FrameModel {
         });
         line.setLinePartsAdjusted(linePartsAdjusted);
 
-        if (this.animationGlobalProgress > line.lastAnimEndTime) {
+        if (this.animationGlobalProgress > line.lastAnimEndTime!) {
           line.color = { ...line.color, alpha: 0.1 }; // To adjust line cap opacity
         }
 
@@ -292,7 +293,7 @@ export default class FrameModel {
   }
 
   get prevAnimationLines() {
-    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime);
+    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime!);
   }
 
   draw() {
@@ -319,6 +320,8 @@ export default class FrameModel {
   }
 
   _init() {
+    if (!this.ctx) throw new Error('Canvas context is not provided. Please use setContext() method.');
+
     this.ctx.canvas.width = this.frameWidth;
     this.ctx.canvas.height = this.frameHeight;
 

package/src/models/LineModel.ts

@@ -48,7 +48,7 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
   }
 
   setAnimationKeyTimesChunked(linePlayer: Player) {
-    let keyTimesChunks = [];
+    let keyTimesChunks: [number, number][] = [];
     this.animations[0].keyTimes.forEach((value, index) => {
       if (index) keyTimesChunks.push([this.animations[0].keyTimes[index - 1], value]);
     });
@@ -142,6 +142,6 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
   }
 
   get lastLinePartControlPoint() {
-    return [...[...this.lineParts].pop().controlPoints].pop();
+    return [...[...this.lineParts].pop()!.controlPoints].pop()!;
   }
 }

package/src/models/NoteModel.ts

@@ -1,5 +1,5 @@
 import Model from './Base/InternalFrameModel';
-import { Note as NoteData } from '../types';
+import { CourtPoint, Note as NoteData } from '../types';
 
 const NOTE_GREY_COLOR = { red: 0.502, green: 0.502, blue: 0.502, alpha: 0.35 };
 
@@ -84,9 +84,9 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     return 'top';
   }
 
-  get internalCtx() {
+  get internalCtx(): CanvasRenderingContext2D {
     // used only for measureText feature to get a text width
-    return this.internalCanvas.getContext('2d');
+    return this.internalCanvas.getContext('2d')!;
   }
 
   preProcessedTextForContext() {
@@ -108,13 +108,13 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     const fitWidth = NoteModel.NOTE_WRAP_MAX_WIDTH - NoteModel.NOTE_WRAP_PADDING * 2;
 
     const lines = [];
-    const words = this.text.split(' ').reduce((result, word) => {
+    const words = this.text.split(' ').reduce<string[]>((result, word) => {
       if (!word.match(/\n/)) {
         result.push(word);
         return result;
       }
 
-      const nlSegments = [];
+      const nlSegments: string[] = [];
       let curSeg = '';
       for (let i = 0; i < word.length; i++) {
         const char = word[i];
@@ -164,7 +164,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
   _getLineInfo(inputWords: string[]) {
     let lineWidth = 0;
     let hasLineBreak = false;
-    const wordsResult = [];
+    const wordsResult: { text: string; width: number }[] = [];
     inputWords.forEach((w, i) => {
       if (w === '\n') {
         hasLineBreak = true;
@@ -186,7 +186,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     return { words: wordsResult, width: lineWidth, hasLineBreak };
   }
 
-  noteWrapperContains({ x, y }) {
+  noteWrapperContains({ x, y }: CourtPoint) {
     const { box } = this.preProcessedTextForContext();
 
     const topLeft = this.location;

package/src/models/Play/Options.ts

@@ -22,7 +22,9 @@ export function useDefaults(options?: Partial<PlayModelOptions>): PlayModelOptio
     legacyPrintStyle: false,
     playerTokenScale: 1,
     // TODO: refactor NBA court type constants below
-    showHalfCourtCircle: true
+    showHalfCourtCircle: true,
+    playersMap: [],
+    labelsOverrideType: null
   };
   return {
     ...defaults,

package/src/models/PlayModel.ts

@@ -13,7 +13,7 @@ import {
   SPORT_TYPE_VOLLEYBALL
 } from '../constants';
 
-import { PlayConstructData, PlayData, SportType } from '../types';
+import { PlayConstructData, PlayData, Position, SportType } from '../types';
 
 import hardwoodImageData from '../assets/wood_bg.png';
 import grassImageData from '../assets/grass_bg.png';
@@ -31,49 +31,65 @@ export type ImageConfigItem = {
   reverse?: boolean;
 };
 
+export type PlayerHeadshotItem = {
+  id: string;
+  image: HTMLImageElement;
+};
+
 export type PlayStaticData = {
   backgroundOptions: typeof PlayModel.backgroundOptions;
   watermark: typeof PlayModel.watermark;
   playerHats: readonly ImageConfigItem[];
   shapes: readonly ImageConfigItem[];
+  playerHeadshots: typeof PlayModel.playerHeadshots;
+};
+
+export type PlayersMapItem = {
+  position: Position;
+  textOverride: string | null;
+  teamPlayerId: string | null;
+  playerHatKey?: string | null;
 };
 
 export type PlayModelOptions = {
-  width?: number;
-  lineColor?: string;
-  linesDisplay?: boolean;
-  linesSelectedIds?: string[];
-  shapeSelectedId?: string | null;
-  noteSelectedId?: string | null;
-  playersHiddenPositions?: string[];
-  background?: string;
-  watermark?: string | null;
-  mirror?: boolean;
-  speed?: number;
-  position?: string | null;
-  huddleMode?: boolean;
-  magnetMode?: boolean;
-  playerTokenScale?: number;
-  flipPlayerLabels?: boolean;
-  linesDisplayOnMoveOnly?: boolean;
-  linesHiddenIds?: string[];
-  legacyPrintStyle?: boolean;
-  showHalfCourtCircle?: boolean;
+  width: number;
+  lineColor: string;
+  linesDisplay: boolean;
+  linesSelectedIds: string[];
+  shapeSelectedId: string | null;
+  noteSelectedId: string | null;
+  playersHiddenPositions: string[];
+  background: string;
+  watermark: string | null;
+  mirror: boolean;
+  speed: number;
+  position: string | null;
+  huddleMode: boolean;
+  magnetMode: boolean;
+  playerTokenScale: number;
+  flipPlayerLabels: boolean;
+  linesDisplayOnMoveOnly: boolean;
+  linesHiddenIds: string[];
+  legacyPrintStyle: boolean;
+  showHalfCourtCircle: boolean;
+  playersMap: PlayersMapItem[];
+  labelsOverrideType: 'Headshot' | null;
 };
 
 export default class PlayModel {
   public name: string;
   public playData: PlayData;
   public options: PlayModelOptions;
+  public static playerHeadshots: PlayerHeadshotItem[] = [];
   public static playerHats: readonly ImageConfigItem[];
   public static shapes: readonly ImageConfigItem[];
-  public static watermark: { LuceoSports: HTMLImageElement; TeamLogo: HTMLImageElement };
+  public static watermark: { LuceoSports: HTMLImageElement; TeamLogo: HTMLImageElement | null };
   public static backgroundOptions: Record<SportType, HTMLImageElement> & { Hardwood: HTMLImageElement };
 
   constructor(data: PlayConstructData, options?: Partial<PlayModelOptions>) {
     this.name = data.name;
     this.options = useDefaults(options);
-    this.setPlayData(data.playData);
+    this.playData = data.playData;
   }
 
   static async init({ teamLogoPath = '' } = {}) {
@@ -103,6 +119,22 @@ export default class PlayModel {
     };
   }
 
+  static async loadPlayerHeadshots(data: { id: string; headshotUrl?: string | null }[]) {
+    await Promise.all(
+      data.map(async ({ id, headshotUrl }) => {
+        try {
+          if (headshotUrl) {
+            const image = await loadImage(headshotUrl);
+            PlayModel.playerHeadshots.push({ id, image });
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        return true;
+      })
+    );
+  }
+
   get totalPhasesCount() {
     const distinctPhases = _.uniq(_.map(this.playData.lines, 'phase'));
     return distinctPhases.length || 1;
@@ -125,7 +157,8 @@ export default class PlayModel {
       backgroundOptions: PlayModel.backgroundOptions,
       watermark: PlayModel.watermark,
       playerHats: PlayModel.playerHats,
-      shapes: PlayModel.shapes
+      shapes: PlayModel.shapes,
+      playerHeadshots: PlayModel.playerHeadshots
     };
   }
 

package/src/models/PlayerModel.ts

@@ -7,6 +7,14 @@ export default class PlayerModel extends Model<PlayerData, PlayerData> {
     return this._getAttr('id');
   }
 
+  get textOverride() {
+    return this._getAttr('textOverride');
+  }
+
+  set textOverride(data) {
+    this._setAttr('textOverride', data);
+  }
+
   get textLabel() {
     return this._getAttr('textOverride') || this.position;
   }
@@ -39,10 +47,6 @@ export default class PlayerModel extends Model<PlayerData, PlayerData> {
     return this._getAttr('color');
   }
 
-  get playerHatKey() {
-    return this._getAttr('playerHatKey');
-  }
-
   get animations() {
     return this._getAttr('animations');
   }
@@ -60,7 +64,7 @@ export default class PlayerModel extends Model<PlayerData, PlayerData> {
   }
 
   get lastAnimationLastLinePartControlPoint() {
-    return [...[...this.lastAnimation.lineParts].pop().controlPoints].pop();
+    return [...[...this.lastAnimation!.lineParts].pop()!.controlPoints].pop();
   }
 
   setPossession(prevPassLines: Line[]) {

package/src/models/ShapeModel.ts

@@ -8,7 +8,7 @@ const WRAP_POINT_TOP_RIGHT_INDEX = 1;
 const WRAP_POINT_BOT_RIGHT_INDEX = 2;
 const WRAP_POINT_BOT_LEFT_INDEX = 3;
 
-export default class ShapeModel extends Model<ShapeData, ShapeData> {
+export default abstract class ShapeModel extends Model<ShapeData, ShapeData> {
   get id() {
     return this._getAttr('id');
   }
@@ -76,10 +76,7 @@ export default class ShapeModel extends Model<ShapeData, ShapeData> {
     return +(aDistance * bDistance).toFixed(2);
   }
 
-  get shapeControlPoints() {
-    // Override this function in a subclass if needed
-    return [];
-  }
+  abstract get shapeControlPoints(): CourtPoint[];
 
   rectWrapperContains(point: CourtPoint) {
     // https://stackoverflow.com/questions/17136084/checking-if-a-point-is-inside-a-rotated-rectangle
@@ -102,7 +99,7 @@ export default class ShapeModel extends Model<ShapeData, ShapeData> {
     return trianglesAreaSum <= this.rectWrapAreaTranslated;
   }
 
-  computeCenterForRect([topLeft, topRight, botRight, botLeft]) {
+  computeCenterForRect([topLeft, topRight, botRight, botLeft]: [CourtPoint, CourtPoint, CourtPoint, CourtPoint]) {
     return {
       x: (topLeft.x + botRight.x) / 2,
       y: (topRight.y + botLeft.y) / 2

package/src/models/ShapeModels/CircleShape.ts

@@ -12,4 +12,8 @@ export default class CircleShape extends ShapeModel {
     const botLeft = { x: -this.outerCircleRadius, y: this.outerCircleRadius };
     return [topLeft, topRight, botRight, botLeft];
   }
+
+  get shapeControlPoints() {
+    return [];
+  }
 }

package/src/models/ShapeModels/LineShape.ts

@@ -1,18 +1,23 @@
 import ShapeModel from '../ShapeModel';
 import { rotatePoint } from '../../helpers/common';
 import { bezierBoundingBox } from '../../math/LineDrawingMath';
+import { CourtPoint } from '../../types';
 
 export default class LineShape extends ShapeModel {
   get rectWrapPointsPure() {
-    const { controlPoints } = this.linePart;
+    const { controlPoints } = this.linePart!;
     return bezierBoundingBox(controlPoints);
   }
 
   get controlPointsTranslated() {
-    return this.linePart.controlPoints.map(point => {
+    return this.linePart!.controlPoints.map(point => {
       const scaled = { x: point.x * this.scale.x, y: point.y * this.scale.y };
       const rotated = rotatePoint(scaled.x, scaled.y, 0, 0, this.angle);
       return { x: rotated.x + this.location.x, y: rotated.y + this.location.y };
     });
   }
+
+  get shapeControlPoints() {
+    return [];
+  }
 }

package/src/traits/DribbleLineTrait.ts

@@ -1,7 +1,22 @@
 import Bezier from '../math/Bezier';
-import { LinePart } from '../types';
+import { CourtPoint, LinePart } from '../types';
 import { CourtPointAdjusted, LinePartAdjusted } from '../models/LineModel';
 
+interface InheritedPropsAndMethods {}
+
+interface DribbleLineTrait extends InheritedPropsAndMethods {
+  convertLinePartsToDribble: (lineParts: LinePart[]) => LinePartAdjusted[];
+  drawArrowLineCap: () => void;
+  drawPerpendicularLineCap: () => void;
+  drawPerpendicularLineAtCourtPoint: (point: CourtPoint, angle: number) => void;
+  handOffLineCap: (baseLineParts: LinePart[]) => void;
+  calcMidPoint: (point1: CourtPoint, point2: CourtPoint) => CourtPoint;
+  angleBetweenLastTwoPoints: () => number;
+  angleBetweenTwoPoints: (cpFrom: CourtPoint, cpTo: CourtPoint) => number;
+  arrowTipPoint: () => CourtPoint;
+  setLineOptions: () => void;
+}
+
 export default {
   convertLinePartsToDribble(lineParts: LinePart[]): LinePartAdjusted[] {
     const processedLineParts: LinePartAdjusted[] = [];
@@ -56,4 +71,4 @@ export default {
 
     return processedLineParts;
   }
-};
+} as DribbleLineTrait;

package/src/traits/LineDrawOperationsTrait.ts

@@ -1,5 +1,27 @@
 import { CourtPoint, LinePart } from '../types';
-import { LinePartAdjusted } from '../models/LineModel';
+import LineModel, { LinePartAdjusted } from '../models/LineModel';
+import ShapeModel from '../models/ShapeModel';
+
+interface InheritedPropsAndMethods {
+  ctx: CanvasRenderingContext2D;
+  getProcessedLinePaths: () => LinePartAdjusted[];
+  setColor: (alpha?: number) => void;
+  line?: LineModel;
+  shape?: ShapeModel;
+}
+
+interface LineDrawOperationsTrait extends InheritedPropsAndMethods {
+  drawLineFromControlPoints: () => void;
+  drawArrowLineCap: () => void;
+  drawPerpendicularLineCap: () => void;
+  drawPerpendicularLineAtCourtPoint: (point: CourtPoint, angle: number) => void;
+  handOffLineCap: (baseLineParts: LinePart[]) => void;
+  calcMidPoint: (point1: CourtPoint, point2: CourtPoint) => CourtPoint;
+  angleBetweenLastTwoPoints: () => number;
+  angleBetweenTwoPoints: (cpFrom: CourtPoint, cpTo: CourtPoint) => number;
+  arrowTipPoint: () => CourtPoint;
+  setLineOptions: () => void;
+}
 
 export default {
   drawLineFromControlPoints() {
@@ -9,7 +31,7 @@ export default {
 
     this.ctx.lineJoin = 'round';
 
-    (this.getProcessedLinePaths() as LinePartAdjusted[]).forEach(linePart => {
+    this.getProcessedLinePaths().forEach(linePart => {
       this.ctx.save();
 
       if (linePart.alpha) {
@@ -23,7 +45,7 @@ export default {
 
       if (cp.length === 2) {
         // TODO refactor next line to avoid access to line/shape model
-        if ((this.line || this.shape).type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
+        if ((this.line || this.shape || {}).type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
         this.ctx.lineTo(cp[1].x, cp[1].y);
       }
       if (cp.length === 3) {
@@ -41,7 +63,9 @@ export default {
     this.ctx.restore();
   },
 
-  drawArrowLineCap(arrowTipPoint: CourtPoint = this.arrowTipPoint()) {
+  drawArrowLineCap(point?: CourtPoint) {
+    const arrowTipPoint = point || this.arrowTipPoint();
+
     this.ctx.save();
 
     const arrowTipLength = 1.4;
@@ -135,7 +159,7 @@ export default {
 
   angleBetweenLastTwoPoints() {
     const lastLinePart = [...this.getProcessedLinePaths()].pop();
-    const cp = lastLinePart.controlPoints;
+    const cp = lastLinePart!.controlPoints;
 
     const cpTo = cp[cp.length - 1];
     const cpFrom = cp[cp.length - 2];
@@ -150,7 +174,7 @@ export default {
   },
 
   arrowTipPoint() {
-    const lastLinePart: LinePart = [...this.getProcessedLinePaths()].pop();
+    const lastLinePart = [...this.getProcessedLinePaths()].pop() as LinePartAdjusted;
     const cp = lastLinePart.controlPoints;
     return cp[cp.length - 1];
   },
@@ -158,4 +182,4 @@ export default {
   setLineOptions() {
     // Override this method in a subclass
   }
-};
+} as LineDrawOperationsTrait;

package/src/types/index.ts

@@ -126,7 +126,6 @@ export interface Player {
   position: Position;
   location: CourtPoint;
   textOverride?: string;
-  playerHatKey?: string;
   animations: PlayerAnimation[];
 }
 

package/tsconfig.json

@@ -13,7 +13,9 @@
       "dom"
     ],
     "target": "es2015",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "strictNullChecks": true,
+    "strict": true,
   },
   "exclude": [
     "node_modules"