@luceosports/play-rendering 2.0.0 → 2.0.2

package/dist/types/models/PlayModel.d.ts

@@ -1,40 +1,51 @@
-import { PlayConstructData, PlayData } from "../../play-rendering";
-
-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;
-}
-
-export class PlayModel {
-    name: string;
-    playData: PlayData;
-    options: PlayModelOptions;
-    constructor(data: PlayConstructData, options?: Partial<PlayModelOptions>);
-    static init({ teamLogoPath }?: {
-        teamLogoPath?: string;
-    }): Promise<void>;
-    get totalPhasesCount(): number;
-    get scale(): number;
-    get width(): number;
-    get height(): number;
-    setOptions(options: Partial<PlayModelOptions>): void;
-    setPlayData(playData: PlayData): void;
+import { PlayConstructData, PlayData,  } from "../../play-rendering";
+import { Position } from '../../../src/types';
+
+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;
+    playersMap: PlayersMapItem[];
+    labelsOverrideType: 'Headshot' | null;
+}
+
+export class PlayModel {
+    name: string;
+    playData: PlayData;
+    options: PlayModelOptions;
+    constructor(data: PlayConstructData, options?: Partial<PlayModelOptions>);
+    static init({ teamLogoPath }?: {
+        teamLogoPath?: string;
+    }): Promise<void>;
+    static loadPlayerHeadshots(data: { id: string; headshotUrl?: string | null }[]): Promise<void>
+    get totalPhasesCount(): number;
+    get scale(): number;
+    get width(): number;
+    get height(): number;
+    setOptions(options: Partial<PlayModelOptions>): void;
+    setPlayData(playData: PlayData): void;
 }

package/dist/types/models/PlayerModel.d.ts

@@ -3,6 +3,8 @@ import { Color, CourtPoint, Line, Player, PlayerAnimation, Position } from "../.
 export class PlayerModel {
     constructor(data: Player);
     get id(): string;
+    get textOverride(): string;
+    set textOverride(data: string);
     get textLabel(): string;
     get isDefender(): boolean;
     get possession(): boolean;
@@ -10,7 +12,6 @@ export class PlayerModel {
     get position(): Position;
     get location(): CourtPoint;
     get color(): Color;
-    get playerHatKey(): string;
     get animations(): PlayerAnimation[];
     get animationsByEndTime(): number[];
     get lastAnimEndTime(): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "main": "dist/play-rendering.js",
   "types": "dist/play-rendering.d.ts",
   "scripts": {
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-typescript": "^7.24.6",

package/src/layers/PlayerLayer.ts

@@ -31,8 +31,9 @@ export default class PlayerLayer extends BaseLayer {
       this.setPlayerLabel(player);
 
       if (this.staticData.playerHats && this.staticData.playerHats.length) {
+        const playerMapItem = this.options.playersMap.find(item => item.position === player.position);
         const playerHat = this.staticData.playerHats.find(hat => {
-          return player.playerHatKey ? hat.key === player.playerHatKey : false;
+          return playerMapItem?.playerHatKey ? hat.key === playerMapItem.playerHatKey : false;
         });
         if (playerHat) {
           if (playerHat.reverse === true) {
@@ -100,6 +101,24 @@ export default class PlayerLayer extends BaseLayer {
 
   setPlayerLabel(player: PlayerModel) {
     const { x, y } = player.location;
+
+    if (this.staticData.playerHeadshots && this.options.labelsOverrideType === 'Headshot') {
+      const playerMapItem = this.options.playersMap.find(item => item.position === player.position);
+      const headshotImage = this.staticData.playerHeadshots.find(item => item.id === playerMapItem?.teamPlayerId);
+      if (headshotImage) {
+        this.ctx.save();
+        this.ctx.translate(x, y);
+        if (this.options.flipPlayerLabels === true) {
+          this.ctx.rotate(Math.PI);
+        }
+        this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
+        this.ctx.clip();
+        this.ctx.drawImage(headshotImage.image, 0 - this.radius, 0 - this.radius, this.radius * 2, this.radius * 2);
+        this.ctx.restore();
+        return;
+      }
+    }
+
     const { alpha } = player.color;
 
     const fontSizeLength = 3 - player.textLabel.length * 0.5;

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,40 +31,56 @@ 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;
+  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;
+  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 };
@@ -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');
   }

package/src/models/ShapeModels/{XMarkShape.ts → XmarkShape.ts}

@@ -1,6 +1,6 @@
 import ShapeModel from '../ShapeModel';
 
-export default class XMarkShape extends ShapeModel {
+export default class XmarkShape extends ShapeModel {
   get outerCircleRadius() {
     return 10;
   }

package/src/models/ShapeModels/index.ts

@@ -11,7 +11,7 @@ import LineShape from './LineShape';
 import SquareShape from './SquareShape';
 import StraightShape from './StraightShape';
 import TriangleShape from './TriangleShape';
-import XMarkShape from './XMarkShape';
+import XmarkShape from './XmarkShape';
 
 export {
   CutLineShape,
@@ -26,5 +26,5 @@ export {
   SquareShape,
   StraightShape,
   TriangleShape,
-  XMarkShape
+  XmarkShape
 };

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,8 @@
       "dom"
     ],
     "target": "es2015",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "strictNullChecks": false // TODO make everything strict
   },
   "exclude": [
     "node_modules"