@luceosports/play-rendering 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "2.0.4",
+  "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,6 +109,11 @@ 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) {
         const imageVertical = headshotImage.image.width < headshotImage.image.height;
         const imageHorizontal = headshotImage.image.height < headshotImage.image.width;
@@ -123,17 +132,22 @@ export default class PlayerLayer extends BaseLayer {
         const topLeftX = 0 - (imageHorizontal ? dw / 2 : this.radius);
         const topLeftY = 0 - (imageVertical ? dh / 2 : this.radius);
 
-        this.ctx.save();
-        this.ctx.translate(x, y);
         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, topLeftX, topLeftY, dw, dh);
-        this.ctx.restore();
-        return;
       }
+
+      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;