@luceosports/play-rendering 1.10.14 → 1.10.15

package/index.js

@@ -3,6 +3,7 @@ module.exports.Frame = require('./src/models/Frame');
 module.exports.Animation = require('./src/models/Animation');
 module.exports.Line = require('./src/models/Line');
 module.exports.Player = require('./src/models/Player');
+module.exports.Note = require('./src/models/Note');
 module.exports.Shape = require('./src/models/Shape');
 module.exports.ShapeModels = require('./src/models/ShapeModels');
 module.exports.LineDrawingMath = require('./src/math/LineDrawingMath');

package/package.json

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

package/src/layers/NoteLayer.js

@@ -0,0 +1,187 @@
+const BaseLayer = require('./base/BaseLayer');
+
+const BOX_MAX_WIDTH = 250;
+const FONT_SIZE = 14;
+const LINE_HEIGHT_OFFSET = 4;
+const BOX_PADDING = 6;
+const PLAYER_TOKEN_RADIUS = 10;
+
+class NoteLayer extends BaseLayer {
+  get boxMaxWidth() {
+    return this.scale(BOX_MAX_WIDTH);
+  }
+
+  get boxPadding() {
+    return this.scale(BOX_PADDING);
+  }
+
+  get fontSize() {
+    return this.scale(FONT_SIZE);
+  }
+
+  get spaceWidth() {
+    return this.ctx.measureText(' ').width;
+  }
+
+  get lineHeight() {
+    return this.scale(FONT_SIZE + LINE_HEIGHT_OFFSET);
+  }
+
+  get lineHeightOffset() {
+    return this.scale(LINE_HEIGHT_OFFSET);
+  }
+
+  get playerTokenRadius() {
+    return this.scale(PLAYER_TOKEN_RADIUS);
+  }
+
+  apply() {
+    this.ctx.save();
+
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
+
+    this.setColor();
+
+    this.playData.notes.forEach(note => {
+      const { location } = note;
+      this.ctx.translate(location.x, location.y);
+
+      this.setFont(note);
+
+      const { lines, box } = this.preProcessText(note);
+      this.drawBubble(box);
+      this.drawText(lines);
+    });
+
+    this.ctx.restore();
+  }
+
+  setColor() {
+    this.ctx.fillStyle = `rgba(0, 133, 133, 0.5)`;
+    this.ctx.strokeStyle = `rgba(0, 133, 133, 1)`;
+  }
+
+  setFont() {
+    this.ctx.font = `${this.fontSize}px Arial`;
+    this.ctx.textBaseline = 'top';
+  }
+
+  preProcessText(note) {
+    const fitWidth = this.boxMaxWidth - this.boxPadding * 2;
+    const lines = this.getLines(note.text, fitWidth);
+    const maxLineWidth = lines.reduce((a, b) => (a.width > b.width ? a : b)).width;
+    return {
+      lines,
+      box: {
+        width: maxLineWidth + this.boxPadding * 2,
+        height: lines.length * this.lineHeight + this.boxPadding * 2 - this.lineHeightOffset
+      }
+    };
+  }
+
+  getLines(text, fitWidth) {
+    const getLineInfo = inputWords => {
+      let lineWidth = 0;
+      const wordsResult = [];
+      inputWords.forEach((w, i) => {
+        const matches = [...w.matchAll(/(<player=(\d*)>)/gi)];
+        const wordProcessed = {
+          text: w,
+          width: matches.length
+            ? this.ctx.measureText(w.replace(/<player=(\d*)>/, '')).width + this.playerTokenRadius * 2
+            : this.ctx.measureText(w).width
+        };
+        lineWidth += wordProcessed.width;
+        if (i !== inputWords.length - 1) {
+          lineWidth += this.spaceWidth;
+        }
+        wordsResult.push(wordProcessed);
+      });
+      return { words: wordsResult, width: lineWidth };
+    };
+
+    const lines = [];
+    const words = text.split(' ');
+    let wordIndex = 1;
+    while (words.length > 0) {
+      const wordsForIndex = words.slice(0, wordIndex);
+      if (getLineInfo(wordsForIndex).width < fitWidth && wordIndex <= words.length) {
+        wordIndex++;
+        continue;
+      }
+      if (wordIndex !== 1) wordIndex--;
+      lines.push(getLineInfo(words.splice(0, wordIndex)));
+      wordIndex = 1;
+    }
+    return lines;
+  }
+
+  drawBubble({ width, height }) {
+    this.ctx.beginPath();
+    this.ctx.rect(0, 0, width, height);
+    this.ctx.fill();
+    this.ctx.stroke();
+  }
+
+  drawText(lines) {
+    lines.forEach(({ words }, index) => {
+      this.ctx.save();
+
+      this.ctx.translate(this.boxPadding, this.boxPadding + this.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 += this.playerTokenRadius * 2;
+        }
+
+        this.ctx.fillStyle = '#000';
+        const wordText = matches.length ? word.text.replace(/(<player=(\d*)>)/gi, '') : word.text;
+        this.ctx.fillText(wordText, wordStartX, 0);
+        wordStartX += word.width;
+        if (matches.length) {
+          wordStartX -= this.playerTokenRadius * 2;
+        }
+
+        if (matches.length && matches[0].index > 0) {
+          this.drawPlayerToken(wordStartX, matches[0][2]);
+          wordStartX += this.playerTokenRadius * 2;
+        }
+
+        if (i !== words.length - 1) {
+          this.ctx.fillText(' ', wordStartX, 0);
+          wordStartX += this.spaceWidth;
+        }
+      });
+
+      this.ctx.restore();
+    });
+  }
+
+  drawPlayerToken(x, label) {
+    this.ctx.save();
+
+    this.ctx.translate(x + this.playerTokenRadius, 0);
+
+    this.ctx.beginPath();
+    this.ctx.strokeStyle = '#ffffff';
+    this.ctx.fillStyle = '#f36f21';
+    this.ctx.arc(0, this.fontSize / 2, this.playerTokenRadius, 0, Math.PI * 2);
+    this.ctx.fill();
+    this.ctx.stroke();
+
+    this.ctx.fillStyle = '#ffffff';
+    this.ctx.fillText(label, -this.ctx.measureText(label).width / 2, 0);
+
+    this.ctx.restore();
+  }
+
+  scale(value) {
+    return value / this.options.scale;
+  }
+}
+
+module.exports = NoteLayer;

package/src/models/Frame.js

@@ -6,10 +6,12 @@ const CourtLayer = require('../layers/CourtLayer');
 const LineLayer = require('../layers/LineLayer');
 const PlayerLayer = require('../layers/PlayerLayer');
 const ShapeLayer = require('../layers/ShapeLayer');
+const NoteLayer = require('../layers/NoteLayer');
 const LineControlPointLayer = require('../layers/LineControlPointLayer');
 const ShapeControlPointLayer = require('../layers/ShapeControlPointLayer');
 const Line = require('./Line');
 const Player = require('./Player');
+const Note = require('./Note');
 const ShapeModels = require('./ShapeModels');
 
 class Frame {
@@ -38,6 +40,7 @@ class Frame {
       lines: this.lines,
       players: this.players,
       shapes: this.shapes,
+      notes: this.notes,
       options: {
         ...this.play.options,
         staticData: this.play.staticData,
@@ -64,6 +67,13 @@ class Frame {
       });
   }
 
+  get notes() {
+    if (!this.play.playData.notes) return [];
+    return this.play.playData.notes.map(n => {
+      return new Note(n);
+    });
+  }
+
   get currentPhasePlayers() {
     const lines = this.play.options.huddleMode ? this.playDataLines : this.prevPhaseLines;
     const { currentPhaseLines } = this;
@@ -218,6 +228,7 @@ class Frame {
     new PlayerLayer(this.ctx, frameData).apply();
     new LineControlPointLayer(this.ctx, frameData).apply();
     new ShapeControlPointLayer(this.ctx, frameData).apply();
+    new NoteLayer(this.ctx, frameData).apply();
 
     // console.timeEnd('draw');
 

package/src/models/Note.js

@@ -0,0 +1,21 @@
+const Model = require('./Base/InternalFrameModel');
+
+class Note extends Model {
+  get id() {
+    return this._getAttr('id');
+  }
+
+  get headerText() {
+    return this._getAttr('headerText');
+  }
+
+  get text() {
+    return this._getAttr('text');
+  }
+
+  get location() {
+    return this._getAttr('location');
+  }
+}
+
+module.exports = Note;