@luceosports/play-rendering 2.0.3 → 2.0.5

package/package.json

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

package/src/layers/PlayerLayer.ts

@@ -90,8 +90,12 @@ export default class PlayerLayer extends BaseLayer {
 
   drawPlayerPuck(player: PlayerModel) {
     const { x, y } = player.location;
+    const radius =
+      this.staticData.playerHeadshots && this.options.labelsOverrideType === 'Headshot'
+        ? this.radius + this.courtTypeConstants.LINE_WIDTH / 2
+        : this.radius;
     this.ctx.beginPath();
-    this.ctx.arc(x, y, this.radius, 0, Math.PI * 2, true);
+    this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
     if (this.options.legacyPrintStyle) {
       if (player.possession) this.ctx.stroke();
       return;
@@ -105,18 +109,45 @@ export default class PlayerLayer extends BaseLayer {
     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();
+
+      this.ctx.translate(x, y);
+
       if (headshotImage) {
-        this.ctx.save();
-        this.ctx.translate(x, y);
-        if (this.options.flipPlayerLabels === true) {
+        const imageVertical = headshotImage.image.width < headshotImage.image.height;
+        const imageHorizontal = headshotImage.image.height < headshotImage.image.width;
+
+        const imageScale = imageVertical
+          ? headshotImage.image.height / headshotImage.image.width
+          : imageHorizontal
+          ? headshotImage.image.width / headshotImage.image.height
+          : 1;
+
+        const dw =
+          this.radius * 2 * (imageVertical ? headshotImage.image.width / headshotImage.image.height : 1) * imageScale;
+        const dh =
+          this.radius * 2 * (imageHorizontal ? headshotImage.image.height / headshotImage.image.width : 1) * imageScale;
+
+        const topLeftX = 0 - (imageHorizontal ? dw / 2 : this.radius);
+        const topLeftY = 0 - (imageVertical ? dh / 2 : this.radius);
+
+        if (this.options.flipPlayerLabels) {
           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;
+        this.ctx.drawImage(headshotImage.image, topLeftX, topLeftY, dw, dh);
       }
+
+      this.ctx.beginPath();
+      this.ctx.lineWidth = this.courtTypeConstants.LINE_WIDTH;
+      this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
+      this.ctx.stroke();
+
+      this.ctx.restore();
+
+      if (headshotImage) return;
     }
 
     const { alpha } = player.color;
@@ -135,7 +166,7 @@ export default class PlayerLayer extends BaseLayer {
     this.ctx.textAlign = 'center';
     this.ctx.font = `${fontSize}px Helvetica`;
 
-    if (this.options.mirror === true) {
+    if (this.options.mirror) {
       this.ctx.save();
       this.ctx.translate(x * 2, 0);
       this.ctx.scale(-1, 1);
@@ -144,7 +175,7 @@ export default class PlayerLayer extends BaseLayer {
     let px = x;
     let py = y;
 
-    if (this.options.flipPlayerLabels === true) {
+    if (this.options.flipPlayerLabels) {
       px = 0;
       py = 0;
       this.ctx.save();
@@ -154,11 +185,11 @@ export default class PlayerLayer extends BaseLayer {
 
     this.ctx.fillText(player.textLabel, px, py + textVerticalOffset);
 
-    if (this.options.flipPlayerLabels === true) {
+    if (this.options.flipPlayerLabels) {
       this.ctx.restore();
     }
 
-    if (this.options.mirror === true) {
+    if (this.options.mirror) {
       this.ctx.restore();
     }
   }