@luceosports/play-rendering 2.0.3 → 2.0.4

package/package.json

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

package/src/layers/PlayerLayer.ts

@@ -106,14 +106,31 @@ export default class PlayerLayer extends BaseLayer {
       const playerMapItem = this.options.playersMap.find(item => item.position === player.position);
       const headshotImage = this.staticData.playerHeadshots.find(item => item.id === playerMapItem?.teamPlayerId);
       if (headshotImage) {
+        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);
+
         this.ctx.save();
         this.ctx.translate(x, y);
-        if (this.options.flipPlayerLabels === true) {
+        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.drawImage(headshotImage.image, topLeftX, topLeftY, dw, dh);
         this.ctx.restore();
         return;
       }
@@ -135,7 +152,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 +161,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 +171,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();
     }
   }