@luceosports/play-rendering 1.11.8 → 1.11.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "1.11.8",
+  "version": "1.11.11",
   "description": "",
   "main": "dist/play-rendering.js",
   "scripts": {

package/src/layers/NoteLayer.js

@@ -85,7 +85,7 @@ class NoteLayer extends BaseLayer {
     this.ctx.beginPath();
     this.ctx.rect(0, 0, width, height);
     this.ctx.fill();
-    if (note.showBorder) {
+    if (note.showBorder || this.options.noteSelectedId === note.id) {
       this.ctx.stroke();
     }
   }
@@ -125,16 +125,16 @@ class NoteLayer extends BaseLayer {
       });
 
       if (note.font.underline || note.font.strikethrough) {
-        this.ctx.lineWidth = 0.07;
+        this.ctx.lineWidth = 0.07 * note.fontSize;
         this.ctx.strokeStyle = `rgba(0, 0, 0, ${this.noteAlpha})`;
         this.ctx.beginPath();
         if (note.font.underline) {
-          this.ctx.moveTo(0, note.lineHeight - Note.NOTE_LINE_HEIGHT_OFFSET);
-          this.ctx.lineTo(wordStartX, note.lineHeight - Note.NOTE_LINE_HEIGHT_OFFSET);
+          this.ctx.moveTo(0, note.fontSize - Note.NOTE_LINE_HEIGHT_OFFSET / 2);
+          this.ctx.lineTo(wordStartX, note.fontSize - Note.NOTE_LINE_HEIGHT_OFFSET / 2);
         }
         if (note.font.strikethrough) {
-          this.ctx.moveTo(0, note.lineHeight / 2 - Note.NOTE_LINE_HEIGHT_OFFSET);
-          this.ctx.lineTo(wordStartX, note.lineHeight / 2 - Note.NOTE_LINE_HEIGHT_OFFSET);
+          this.ctx.moveTo(0, note.lineHeight / 2 - Note.NOTE_LINE_HEIGHT_OFFSET / 3);
+          this.ctx.lineTo(wordStartX, note.lineHeight / 2 - Note.NOTE_LINE_HEIGHT_OFFSET / 3);
         }
         this.ctx.stroke();
       }
@@ -151,12 +151,16 @@ class NoteLayer extends BaseLayer {
     this.ctx.beginPath();
     this.ctx.strokeStyle = `rgba(255, 255, 255, ${this.noteAlpha})`;
     this.ctx.fillStyle = `rgba(243, 111, 33, ${this.noteAlpha})`;
-    this.ctx.arc(0, note.fontSize / 2, note.playerTokenRadius, 0, Math.PI * 2);
+    this.ctx.arc(0, note.playerTokenRadius, 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 + Note.NOTE_LINE_HEIGHT_OFFSET);
     this.ctx.fillStyle = `rgba(255, 255, 255, ${this.noteAlpha})`;
-    this.ctx.fillText(label, -this.ctx.measureText(label).width / 2, 0);
+    this.ctx.fillText(label, textX, textY);
 
     this.ctx.restore();
   }

package/src/models/Frame.js

@@ -130,10 +130,10 @@ class Frame {
     const passLines = this.prevAnimationLines.filter(l => ['PASS', 'HANDOFF'].includes(l.type));
     return this.play.playData.players.map(p => {
       const player = new Player(p);
-      if (!player.animations.length) return player;
-
       player.setPossession(passLines);
 
+      if (!player.animations.length) return player;
+
       player.animations.forEach(animation => {
         const keyTimesChunks = [];
         animation.keyTimes.forEach((value, index) => {

package/src/models/Note.js

@@ -7,7 +7,7 @@ class Note extends Model {
   }
 
   static get NOTE_WRAP_MAX_WIDTH() {
-    return 22;
+    return 40;
   }
 
   static get NOTE_WRAP_PADDING() {
@@ -55,7 +55,7 @@ class Note extends Model {
   }
 
   get playerTokenRadius() {
-    return 0.7 * this.fontSize;
+    return this.fontSize / 2;
   }
 
   get fontComputed() {