@luceosports/play-rendering 2.1.4 → 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.4",
+  "version": "2.2.0",
   "main": "dist/play-rendering.js",
   "types": "dist/play-rendering.d.ts",
   "scripts": {

package/src/layers/NoteLayer.ts

@@ -67,7 +67,10 @@ export default class NoteLayer extends BaseLayer {
     lines.forEach(({ words }, index) => {
       this.ctx.save();
 
-      this.ctx.translate(NoteModel.NOTE_WRAP_PADDING, NoteModel.NOTE_WRAP_PADDING + note.lineHeight * index);
+      this.ctx.translate(
+        NoteModel.NOTE_WRAP_PADDING,
+        note.fontSize + NoteModel.NOTE_WRAP_PADDING + note.lineHeight * index
+      );
 
       let wordStartX = 0;
       words.forEach((word, i) => {
@@ -80,7 +83,17 @@ export default class NoteLayer extends BaseLayer {
 
         this.ctx.fillStyle = `rgba(0, 0, 0, ${this.animationAlpha})`;
         const wordText = matches.length ? word.text.replace(/(<player=(\d*)>)/gi, '') : word.text;
-        this.ctx.fillText(wordText, wordStartX, 0);
+        this.ctx.fillText(wordText, wordStartX, -note.baseLineOffset);
+
+        // BASELINE FOR TESTING
+        // this.ctx.save();
+        // this.ctx.strokeStyle = 'red';
+        // this.ctx.beginPath();
+        // this.ctx.moveTo(wordStartX, 0);
+        // this.ctx.lineTo(word.width, 0);
+        // this.ctx.stroke();
+        // this.ctx.restore();
+
         wordStartX += word.width;
         if (matches.length) {
           wordStartX -= note.playerTokenRadius * 2;
@@ -92,7 +105,7 @@ export default class NoteLayer extends BaseLayer {
         }
 
         if (i !== words.length - 1) {
-          this.ctx.fillText(' ', wordStartX, 0);
+          this.ctx.fillText(' ', wordStartX, -note.baseLineOffset);
           wordStartX += this.ctx.measureText(' ').width;
         }
       });
@@ -102,12 +115,12 @@ export default class NoteLayer extends BaseLayer {
         this.ctx.strokeStyle = `rgba(0, 0, 0, ${this.animationAlpha})`;
         this.ctx.beginPath();
         if (note.font.underline) {
-          this.ctx.moveTo(0, note.fontSize - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 2);
-          this.ctx.lineTo(wordStartX, note.fontSize - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 2);
+          this.ctx.moveTo(0, note.baseLineOffset);
+          this.ctx.lineTo(wordStartX, note.baseLineOffset);
         }
         if (note.font.strikethrough) {
-          this.ctx.moveTo(0, note.lineHeight / 2 - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 3);
-          this.ctx.lineTo(wordStartX, note.lineHeight / 2 - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 3);
+          this.ctx.moveTo(0, -note.fontSize / 2 + note.baseLineOffset);
+          this.ctx.lineTo(wordStartX, -note.fontSize / 2 + note.baseLineOffset);
         }
         this.ctx.stroke();
       }
@@ -124,14 +137,14 @@ export default class NoteLayer extends BaseLayer {
     this.ctx.beginPath();
     this.ctx.strokeStyle = `rgba(255, 255, 255, ${this.animationAlpha})`;
     this.ctx.fillStyle = `rgba(243, 111, 33, ${this.animationAlpha})`;
-    this.ctx.arc(0, note.playerTokenRadius, note.playerTokenRadius, 0, Math.PI * 2);
+    this.ctx.arc(0, -note.fontSize / 2, note.playerTokenRadius, 0, Math.PI * 2);
     this.ctx.fill();
     this.ctx.stroke();
 
     const playerFontSize = note.fontSize * 0.8;
     this.ctx.font = `${playerFontSize}px Arial`;
     const textX = -this.ctx.measureText(label).width / 2;
-    const textY = ((note.playerTokenRadius * 2 - playerFontSize) / 2) * (1 + NoteModel.NOTE_LINE_HEIGHT_OFFSET);
+    const textY = -playerFontSize / 4;
     this.ctx.fillStyle = `rgba(255, 255, 255, ${this.animationAlpha})`;
     this.ctx.fillText(label, textX, textY);
 

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/NoteModel.ts

@@ -2,6 +2,8 @@ import Model from './Base/InternalFrameModel';
 import { CourtPoint, Note as NoteData } from '../types';
 
 const NOTE_GREY_COLOR = { red: 0.502, green: 0.502, blue: 0.502, alpha: 0.35 };
+const NOTE_LINE_HEIGHT_OFFSET = 0.3;
+const NOTE_BASE_LINE_ALPHABETIC_OFFSET = 0.1;
 
 export default class NoteModel extends Model<NoteData, NoteData> {
   private internalCanvas: HTMLCanvasElement;
@@ -19,10 +21,6 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     return 0.43;
   }
 
-  static get NOTE_LINE_HEIGHT_OFFSET() {
-    return 0.3;
-  }
-
   get id() {
     return this._getAttr('id');
   }
@@ -68,7 +66,15 @@ export default class NoteModel extends Model<NoteData, NoteData> {
   }
 
   get lineHeight() {
-    return this.fontSize + NoteModel.NOTE_LINE_HEIGHT_OFFSET;
+    return this.fontSize + this.lineHeightOffset;
+  }
+
+  get lineHeightOffset() {
+    return this.fontSize * NOTE_LINE_HEIGHT_OFFSET;
+  }
+
+  get baseLineOffset() {
+    return this.fontSize * NOTE_BASE_LINE_ALPHABETIC_OFFSET;
   }
 
   get playerTokenRadius() {
@@ -85,7 +91,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
   }
 
   get textBaseline(): CanvasTextBaseline {
-    return 'top';
+    return 'alphabetic';
   }
 
   get internalCtx(): CanvasRenderingContext2D {
@@ -100,7 +106,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
       lines,
       box: {
         width: maxLineWidth + NoteModel.NOTE_WRAP_PADDING * 2,
-        height: lines.length * this.lineHeight + NoteModel.NOTE_WRAP_PADDING * 2 - NoteModel.NOTE_LINE_HEIGHT_OFFSET
+        height: lines.length * this.lineHeight + NoteModel.NOTE_WRAP_PADDING * 2
       }
     };
   }

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