@luceosports/play-rendering 1.11.5 → 1.11.6

package/package.json

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

package/src/layers/NoteLayer.js

@@ -6,8 +6,6 @@ class NoteLayer extends BaseLayer {
   apply() {
     this.ctx.save();
 
-    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
-
     this.playData.notes.forEach(note => {
       this.ctx.save();
 
@@ -22,7 +20,7 @@ class NoteLayer extends BaseLayer {
 
       this.setFont(note);
       this.drawBubble(box);
-      this.drawText(lines);
+      this.drawText(note, lines);
 
       this.ctx.restore();
     });
@@ -71,30 +69,31 @@ class NoteLayer extends BaseLayer {
   }
 
   setFont(note) {
-    this.ctx.font = note.font;
+    this.ctx.font = note.fontComputed;
     this.ctx.textBaseline = note.textBaseline;
   }
 
   drawBubble({ 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();
   }
 
-  drawText(lines) {
+  drawText(note, lines) {
     lines.forEach(({ words }, index) => {
       this.ctx.save();
 
-      this.ctx.translate(Note.NOTE_WRAP_PADDING, Note.NOTE_WRAP_PADDING + Note.NOTE_LINE_HEIGHT * index);
+      this.ctx.translate(Note.NOTE_WRAP_PADDING, Note.NOTE_WRAP_PADDING + note.lineHeight * index);
 
       let wordStartX = 0;
       words.forEach((word, i) => {
         const matches = [...word.text.matchAll(/(<player=(\d*)>)/gi)];
 
         if (matches.length && matches[0].index === 0) {
-          this.drawPlayerToken(wordStartX, matches[0][2]);
-          wordStartX += Note.NOTE_PLAYER_TOKEN_RADIUS * 2;
+          this.drawPlayerToken(note, wordStartX, matches[0][2]);
+          wordStartX += note.playerTokenRadius * 2;
         }
 
         this.ctx.fillStyle = `rgba(0, 0, 0, ${this.noteAlpha})`;
@@ -102,12 +101,12 @@ class NoteLayer extends BaseLayer {
         this.ctx.fillText(wordText, wordStartX, 0);
         wordStartX += word.width;
         if (matches.length) {
-          wordStartX -= Note.NOTE_PLAYER_TOKEN_RADIUS * 2;
+          wordStartX -= note.playerTokenRadius * 2;
         }
 
         if (matches.length && matches[0].index > 0) {
-          this.drawPlayerToken(wordStartX, matches[0][2]);
-          wordStartX += Note.NOTE_PLAYER_TOKEN_RADIUS * 2;
+          this.drawPlayerToken(note, wordStartX, matches[0][2]);
+          wordStartX += note.playerTokenRadius * 2;
         }
 
         if (i !== words.length - 1) {
@@ -116,23 +115,38 @@ class NoteLayer extends BaseLayer {
         }
       });
 
+      if (note.font.underline || note.font.strikethrough) {
+        this.ctx.lineWidth = 0.07;
+        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);
+        }
+        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.stroke();
+      }
+
       this.ctx.restore();
     });
   }
 
-  drawPlayerToken(x, label) {
+  drawPlayerToken(note, x, label) {
     this.ctx.save();
 
-    this.ctx.translate(x + Note.NOTE_PLAYER_TOKEN_RADIUS, 0);
+    this.ctx.translate(x + note.playerTokenRadius, 0);
 
     this.ctx.beginPath();
-    this.ctx.strokeStyle = '#ffffff';
-    this.ctx.fillStyle = '#f36f21';
-    this.ctx.arc(0, Note.NOTE_FONT_SIZE / 2, Note.NOTE_PLAYER_TOKEN_RADIUS, 0, Math.PI * 2);
+    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.fill();
     this.ctx.stroke();
 
-    this.ctx.fillStyle = '#ffffff';
+    this.ctx.fillStyle = `rgba(255, 255, 255, ${this.noteAlpha})`;
     this.ctx.fillText(label, -this.ctx.measureText(label).width / 2, 0);
 
     this.ctx.restore();

package/src/models/Note.js

@@ -7,29 +7,17 @@ class Note extends Model {
   }
 
   static get NOTE_WRAP_MAX_WIDTH() {
-    return 18;
+    return 22;
   }
 
   static get NOTE_WRAP_PADDING() {
     return 0.43;
   }
 
-  static get NOTE_PLAYER_TOKEN_RADIUS() {
-    return 0.7;
-  }
-
   static get NOTE_LINE_HEIGHT_OFFSET() {
     return 0.3;
   }
 
-  static get NOTE_FONT_SIZE() {
-    return 1;
-  }
-
-  static get NOTE_LINE_HEIGHT() {
-    return Note.NOTE_FONT_SIZE + Note.NOTE_LINE_HEIGHT_OFFSET;
-  }
-
   get id() {
     return this._getAttr('id');
   }
@@ -47,7 +35,28 @@ class Note extends Model {
   }
 
   get font() {
-    return `${Note.NOTE_FONT_SIZE}px Arial`;
+    return this._getAttr('font');
+  }
+
+  get fontSize() {
+    return this.font.fontSize / 10;
+  }
+
+  get lineHeight() {
+    return this.fontSize + Note.NOTE_LINE_HEIGHT_OFFSET;
+  }
+
+  get playerTokenRadius() {
+    return 0.7 * this.fontSize;
+  }
+
+  get fontComputed() {
+    const fontOptions = [];
+    if (this.font.bold) fontOptions.push('bold');
+    if (this.font.italic) fontOptions.push('italic');
+    fontOptions.push(`${this.fontSize}px`);
+    fontOptions.push('Arial');
+    return fontOptions.join(' ');
   }
 
   get textBaseline() {
@@ -66,13 +75,13 @@ class Note extends Model {
       lines,
       box: {
         width: maxLineWidth + Note.NOTE_WRAP_PADDING * 2,
-        height: lines.length * Note.NOTE_LINE_HEIGHT + Note.NOTE_WRAP_PADDING * 2 - Note.NOTE_LINE_HEIGHT_OFFSET
+        height: lines.length * this.lineHeight + Note.NOTE_WRAP_PADDING * 2 - Note.NOTE_LINE_HEIGHT_OFFSET
       }
     };
   }
 
   _getLines() {
-    this.internalCtx.font = this.font;
+    this.internalCtx.font = this.fontComputed;
     this.internalCtx.textBaseline = this.textBaseline;
 
     const fitWidth = Note.NOTE_WRAP_MAX_WIDTH - Note.NOTE_WRAP_PADDING * 2;
@@ -123,7 +132,7 @@ class Note extends Model {
       const wordProcessed = {
         text: w,
         width: matches.length
-          ? this.internalCtx.measureText(w.replace(/<player=(\d*)>/, '')).width + Note.NOTE_PLAYER_TOKEN_RADIUS * 2
+          ? this.internalCtx.measureText(w.replace(/<player=(\d*)>/, '')).width + this.playerTokenRadius * 2
           : this.internalCtx.measureText(w).width
       };
       lineWidth += wordProcessed.width;