@luceosports/play-rendering 1.11.7 → 1.11.10

package/package.json

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

package/src/layers/NoteLayer.js

@@ -19,7 +19,7 @@ class NoteLayer extends BaseLayer {
       const { lines, box } = note.preProcessedTextForContext();
 
       this.setFont(note);
-      this.drawBubble(box);
+      this.drawBubble(note, box);
       this.drawText(note, lines);
 
       this.ctx.restore();
@@ -60,8 +60,15 @@ class NoteLayer extends BaseLayer {
   }
 
   setColor(note) {
-    this.ctx.fillStyle = `rgba(0, 133, 133, ${this.noteAlpha / 2})`;
-    this.ctx.strokeStyle = `rgba(0, 133, 133, ${this.noteAlpha})`;
+    const { alpha, blue, green, red } = note.color;
+
+    const r = Math.ceil(red * 255);
+    const g = Math.ceil(green * 255);
+    const b = Math.ceil(blue * 255);
+
+    this.ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha * this.noteAlpha})`;
+    this.ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${this.noteAlpha})`;
+
     if (this.options.noteSelectedId === note.id) {
       this.ctx.setLineDash([0.5, 0.5]);
       this.ctx.strokeStyle = `rgba(28, 127, 181, ${this.noteAlpha})`;
@@ -73,12 +80,14 @@ class NoteLayer extends BaseLayer {
     this.ctx.textBaseline = note.textBaseline;
   }
 
-  drawBubble({ width, height }) {
+  drawBubble(note, { width, height }) {
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
     this.ctx.beginPath();
     this.ctx.rect(0, 0, width, height);
     this.ctx.fill();
-    this.ctx.stroke();
+    if (note.showBorder || this.options.noteSelectedId === note.id) {
+      this.ctx.stroke();
+    }
   }
 
   drawText(note, lines) {
@@ -116,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();
       }
@@ -142,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/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() {
@@ -30,6 +30,14 @@ class Note extends Model {
     return this._getAttr('location');
   }
 
+  get color() {
+    return this._getAttr('color');
+  }
+
+  get showBorder() {
+    return this._getAttr('showBorder');
+  }
+
   get animations() {
     return this._getAttr('animations');
   }
@@ -47,7 +55,7 @@ class Note extends Model {
   }
 
   get playerTokenRadius() {
-    return 0.7 * this.fontSize;
+    return this.fontSize / 2;
   }
 
   get fontComputed() {