@luceosports/play-rendering 2.1.5 → 2.2.0

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

@@ -30,10 +30,18 @@ export type PlayModelOptions = {
     legacyPrintStyle: boolean;
     showHalfCourtCircle: boolean;
     playersMap: PlayersMapItem[];
-    labelsOverrideType: 'Headshot' | null;
+    labelsOverrideType: 'Initials' | 'Jersey number' | 'Headshot' | null;
     inDrawingState: boolean;
 }
 
+export type TeamPlayer = {
+    id: string;
+    User_Name: string;
+    Initials: string;
+    jersey_number: number;
+    headshotUrl?: string;
+};
+
 export class PlayModel {
     name: string;
     playData: PlayData;
@@ -42,7 +50,7 @@ export class PlayModel {
     static init({ teamLogoPath }?: {
         teamLogoPath?: string;
     }): Promise<void>;
-    static loadPlayerHeadshots(data: { id: string; headshotUrl?: string | null }[]): Promise<void>
+    static setTeamPlayers(data: TeamPlayer[]): Promise<void>
     get totalPhasesCount(): number;
     get scale(): number;
     get width(): number;

package/package.json

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

package/src/layers/PlayerLayer.ts

@@ -102,8 +102,9 @@ export default class PlayerLayer extends BaseLayer {
   setPlayerLabel(player: PlayerModel) {
     const { x, y } = player.location;
 
+    const playerMapItem = this.options.playersMap.find(item => item.position === player.position);
+
     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);
 
       this.ctx.save();
@@ -148,13 +149,33 @@ export default class PlayerLayer extends BaseLayer {
       if (headshotImage) return;
     }
 
+    let playerTextLabel = player.textLabel;
+    if (playerMapItem) {
+      if (playerMapItem.textOverride) {
+        playerTextLabel = playerMapItem.textOverride;
+      }
+      if (playerMapItem.teamPlayerId) {
+        const teamPlayer = this.staticData.teamPlayers.find(p => p.id === playerMapItem.teamPlayerId);
+        if (teamPlayer) {
+          const fallbackLabel = teamPlayer.User_Name.split(' ')
+            .map(n => n[0])
+            .join('')
+            .slice(0, 2);
+          playerTextLabel = teamPlayer.Initials || fallbackLabel;
+          if (this.options.labelsOverrideType === 'Jersey number') {
+            playerTextLabel = `${teamPlayer.jersey_number}` || fallbackLabel;
+          }
+        }
+      }
+    }
+
     const { alpha } = player.color;
 
-    const fontSizeLength = 3 - player.textLabel.length * 0.5;
+    const fontSizeLength = 3 - playerTextLabel.length * 0.5;
     const fontSizeMultiplier = this.options.legacyPrintStyle ? 1.3 : 1;
     const fontSize = fontSizeLength * fontSizeMultiplier * this.playerScale;
 
-    const textVOffsetLength = 1 - player.textLabel.length * 0.15;
+    const textVOffsetLength = 1 - playerTextLabel.length * 0.15;
     const textVOffsetMultiplier = this.options.legacyPrintStyle ? 1.4 : 1;
     const textVerticalOffset = textVOffsetLength * textVOffsetMultiplier * this.playerScale;
 
@@ -181,7 +202,7 @@ export default class PlayerLayer extends BaseLayer {
       this.ctx.rotate(Math.PI); // 180
     }
 
-    this.ctx.fillText(player.textLabel, px, py + textVerticalOffset);
+    this.ctx.fillText(playerTextLabel, px, py + textVerticalOffset);
 
     if (this.options.flipPlayerLabels) {
       this.ctx.restore();

package/src/models/PlayModel.ts

@@ -42,6 +42,7 @@ export type PlayStaticData = {
   playerHats: readonly ImageConfigItem[];
   shapes: readonly ImageConfigItem[];
   playerHeadshots: typeof PlayModel.playerHeadshots;
+  teamPlayers: typeof PlayModel.teamPlayers;
 };
 
 export type PlayersMapItem = {
@@ -51,6 +52,14 @@ export type PlayersMapItem = {
   playerHatKey?: string | null;
 };
 
+export type TeamPlayer = {
+  id: string;
+  User_Name: string;
+  Initials: string;
+  jersey_number: number;
+  headshotUrl?: string;
+};
+
 export type PlayModelOptions = {
   width: number;
   lineColor: string;
@@ -73,7 +82,7 @@ export type PlayModelOptions = {
   legacyPrintStyle: boolean;
   showHalfCourtCircle: boolean;
   playersMap: PlayersMapItem[];
-  labelsOverrideType: 'Headshot' | null;
+  labelsOverrideType: 'Initials' | 'Jersey number' | 'Headshot' | null;
   inDrawingState: boolean;
 };
 
@@ -81,6 +90,7 @@ export default class PlayModel {
   public name: string;
   public playData: PlayData;
   public options: PlayModelOptions;
+  public static teamPlayers: TeamPlayer[] = [];
   public static playerHeadshots: PlayerHeadshotItem[] = [];
   public static playerHats: readonly ImageConfigItem[];
   public static shapes: readonly ImageConfigItem[];
@@ -120,7 +130,8 @@ export default class PlayModel {
     };
   }
 
-  static async loadPlayerHeadshots(data: { id: string; headshotUrl?: string | null }[]) {
+  static async setTeamPlayers(data: TeamPlayer[]) {
+    PlayModel.teamPlayers = data;
     await Promise.all(
       data.map(async ({ id, headshotUrl }) => {
         try {
@@ -159,7 +170,8 @@ export default class PlayModel {
       watermark: PlayModel.watermark,
       playerHats: PlayModel.playerHats,
       shapes: PlayModel.shapes,
-      playerHeadshots: PlayModel.playerHeadshots
+      playerHeadshots: PlayModel.playerHeadshots,
+      teamPlayers: PlayModel.teamPlayers
     };
   }