@luceosports/play-rendering 1.9.25 → 1.9.29

package/package.json

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

package/src/layers/CourtLayer.js

@@ -1,15 +1,12 @@
 const courtLayers = require('./court');
-const constants = require('../constants');
+const constants = require('./court/constants');
 
 class CourtLayer {
   constructor(ctx, { court, options }) {
     this.ctx = ctx;
     this.options = {
-      ...court,
-      ...options,
-      courtLineWidth: constants.COURT_LINE_WIDTH,
-      courtRectWidth: constants.COURT_RECT_WIDTH,
-      courtRectHeight: constants.COURT_RECT_HEIGHT
+      court: JSON.parse(JSON.stringify(court)),
+      ...options
     };
   }
 
@@ -25,16 +22,32 @@ class CourtLayer {
     return this.options.staticData;
   }
 
+  get courtTypeLayers() {
+    if (!courtLayers[this.options.court.type]) throw new Error('unknown court type');
+    return courtLayers[this.options.court.type];
+  }
+
+  get courtTypeConstants() {
+    return constants[this.options.court.type];
+  }
+
+  get background() {
+    return this.options.background || this.options.court.type;
+  }
+
   apply() {
     this.init();
 
     this.ctx.save();
 
-    this.ctx.lineWidth = this.options.courtLineWidth;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
 
     this.setColor();
 
-    Object.values(courtLayers).forEach(LayerClass => {
+    console.log('courtTypeLayers', this.courtTypeLayers);
+    console.log('courtLayers', courtLayers);
+
+    Object.values(this.courtTypeLayers).forEach(LayerClass => {
       new LayerClass(this).apply();
     });
 
@@ -42,6 +55,7 @@ class CourtLayer {
   }
 
   init() {
+    console.log('this.options.court.courtRect.origin', this.options.court.courtRect.origin);
     this.ctx.save();
     this.ctx.setTransform(1, 0, 0, 1, 0, 0);
     this.setBackground();
@@ -55,21 +69,15 @@ class CourtLayer {
   }
 
   setBackground() {
-    if (this.options.background) {
-      if (this.staticData.background && this.staticData.background[this.options.background]) {
-        this.ctx.drawImage(
-          this.staticData.background[this.options.background],
-          0,
-          0,
-          this.ctx.canvas.width,
-          this.ctx.canvas.height
-        );
-      } else if (this.options.background.indexOf('#') === 0) {
-        this.ctx.save();
-        this.ctx.fillStyle = this.options.background;
-        this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-        this.ctx.restore();
-      }
+    if (this.staticData.backgroundOptions && this.staticData.backgroundOptions[this.background]) {
+      const ptrn = this.ctx.createPattern(this.staticData.backgroundOptions[this.background], 'repeat');
+      this.ctx.fillStyle = ptrn;
+      this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    } else if (this.background.indexOf('#') === 0) {
+      this.ctx.save();
+      this.ctx.fillStyle = this.background;
+      this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+      this.ctx.restore();
     }
   }
 
@@ -88,12 +96,12 @@ class CourtLayer {
       }
 
       const fullCourtIndentY =
-        this.options.courtRect.size.height > constants.COURT_RECT_HEIGHT
-          ? Math.abs(this.options.courtRect.origin.y)
+        this.options.court.courtRect.size.height > this.courtTypeConstants.COURT_RECT_HEIGHT
+          ? Math.abs(this.options.court.courtRect.origin.y)
           : 0;
 
-      const dx = (1 + Math.abs(this.options.courtRect.origin.x)) * this.scale;
-      const dy = (this.options.courtRect.size.height - fullCourtIndentY - 1) * this.scale - destination.height;
+      const dx = (1 + Math.abs(this.options.court.courtRect.origin.x)) * this.scale;
+      const dy = (this.options.court.courtRect.size.height - fullCourtIndentY - 1) * this.scale - destination.height;
 
       this.ctx.drawImage(
         this.staticData.watermark[this.options.watermark],

package/src/layers/PlayerLayer.js

@@ -36,13 +36,28 @@ class PlayerLayer {
       this.ctx.fillStyle = '#ffffff';
       this.ctx.textAlign = 'center';
 
+      let px = x;
+      let py = y;
+
       if (this.options.mirror === true) {
         this.ctx.save();
         this.ctx.translate(x * 2, 0);
         this.ctx.scale(-1, 1);
       }
 
-      this.ctx.fillText(player.textLabel, x, y + textVerticalOffset);
+      if (this.options.flipPlayerLabels === true) {
+        px = 0;
+        py = 0;
+        this.ctx.save();
+        this.ctx.translate(x, y);
+        this.ctx.rotate(Math.PI); // 180
+      }
+
+      this.ctx.fillText(player.textLabel, px, py + textVerticalOffset);
+
+      if (this.options.flipPlayerLabels === true) {
+        this.ctx.restore();
+      }
 
       if (this.options.mirror === true) {
         this.ctx.restore();

package/src/layers/base/BaseLayer.js

@@ -1,7 +1,6 @@
 class BaseLayer {
   constructor(parentLayer) {
     this.ctx = parentLayer.ctx;
-    this.playData = parentLayer.playData;
     this.options = parentLayer.options ? parentLayer.options : {};
   }
 

package/src/layers/court/base/InternalCourtLayer.js

@@ -1,6 +1,11 @@
 const BaseLayer = require('../../base/BaseLayer');
 
 class InternalCourtLayer extends BaseLayer {
+  constructor(parentLayer) {
+    super(parentLayer);
+    this.courtTypeConstants = parentLayer.courtTypeConstants;
+  }
+
   apply() {
     super.apply();
 
@@ -17,7 +22,7 @@ class InternalCourtLayer extends BaseLayer {
   }
 
   verticalFlipAndRotation() {
-    const verticalTranslationDist = this.options.courtRectHeight;
+    const verticalTranslationDist = this.courtTypeConstants.COURT_RECT_HEIGHT;
     this.ctx.scale(1, -1);
     this.ctx.translate(0, -Math.abs(verticalTranslationDist));
   }

package/src/layers/court/constants/FOOTBALL.js

@@ -0,0 +1,7 @@
+module.exports = Object.freeze({
+  COURT_LINE_WIDTH: 0.32,
+  COURT_RECT_WIDTH: 160.0,
+  COURT_RECT_HEIGHT: 360.0,
+  END_ZONE_HEIGHT: 30,
+  TEN_YARDS_HEIGHT: 30
+});

package/src/layers/court/constants/index.js

@@ -0,0 +1,11 @@
+// require all modules on the path and with the pattern defined
+const req = require.context('./', true, /.js$/);
+
+const modules = {};
+
+req.keys().forEach(key => {
+  const mName = key.replace('./', '').replace('.js', '');
+  modules[mName] = req(key);
+});
+
+module.exports = modules;

package/src/layers/court/index.js

@@ -4,8 +4,12 @@ const req = require.context('./layers/', true, /.js$/);
 const modules = {};
 
 req.keys().forEach(key => {
-  const mname = key.replace('./', '').replace('.js', '');
-  modules[mname] = req(key);
+  const mPath = key.replace('./', '').replace('.js', '');
+  const [mType, mName] = mPath.split('/');
+  if (!modules[mType]) modules[mType] = {};
+  modules[mType][mName] = req(key);
 });
 
+console.log('modules', modules);
+
 module.exports = modules;

package/src/layers/court/layers/FOOTBALL/BorderRectLayer.js

@@ -0,0 +1,13 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_WIDTH, COURT_RECT_HEIGHT, COURT_LINE_WIDTH } = require('../../constants/FOOTBALL');
+
+class BorderRectLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.beginPath();
+    this.ctx.lineWidth = COURT_LINE_WIDTH * 2;
+    this.ctx.rect(0, 0, COURT_RECT_WIDTH, COURT_RECT_HEIGHT);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = BorderRectLayer;

package/src/layers/court/layers/FOOTBALL/CenterLineLayer.js

@@ -0,0 +1,17 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_WIDTH, COURT_RECT_HEIGHT, COURT_LINE_WIDTH } = require('../../constants/FOOTBALL');
+
+class CenterLineLayer extends InternalCourtLayer {
+  drawLogic() {
+    const courtOrigin = { x: 0.0, y: COURT_RECT_HEIGHT / 2 };
+    const courtTerminus = { x: COURT_RECT_WIDTH, y: COURT_RECT_HEIGHT / 2 };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
+    this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CenterLineLayer;

package/src/layers/court/layers/FOOTBALL/EndZoneLayer.js

@@ -0,0 +1,21 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_WIDTH, COURT_LINE_WIDTH } = require('../../constants/FOOTBALL');
+
+class EndZoneLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const courtOrigin = { x: 0.0, y: 30 };
+    const courtTerminus = { x: COURT_RECT_WIDTH, y: 30 };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
+    this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = EndZoneLayer;

package/src/layers/court/layers/FOOTBALL/FieldNumberLayer.js

@@ -0,0 +1,36 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { END_ZONE_HEIGHT, COURT_RECT_WIDTH } = require('../../constants/FOOTBALL');
+
+const NUMBER_VERTICAL_OFFSET = -6;
+
+class FieldNumberLayer extends InternalCourtLayer {
+  drawLogic() {
+    const x = 20;
+    const y = END_ZONE_HEIGHT;
+
+    const thinSpaceChar = String.fromCharCode(8202);
+
+    this.ctx.fillStyle = '#ffffff';
+    this.ctx.translate(x, y);
+
+    for (let i = 1; i < 10; i++) {
+      const number = i <= 5 ? i : 10 - i;
+      const yardMarkLabel = `${number}${thinSpaceChar}0`;
+
+      this.ctx.translate(0, END_ZONE_HEIGHT);
+
+      this.ctx.save();
+
+      this.ctx.rotate(Math.PI / 2); // 90
+      this.ctx.fillText(yardMarkLabel, NUMBER_VERTICAL_OFFSET, 0);
+
+      this.ctx.translate(0, 20 * 2 - COURT_RECT_WIDTH);
+      this.ctx.rotate(Math.PI); // 180
+      this.ctx.fillText(yardMarkLabel, NUMBER_VERTICAL_OFFSET, 0);
+
+      this.ctx.restore();
+    }
+  }
+}
+
+module.exports = FieldNumberLayer;

package/src/layers/court/layers/FOOTBALL/HashMarkLayer.js

@@ -0,0 +1,42 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_HEIGHT, COURT_LINE_WIDTH, END_ZONE_HEIGHT, COURT_RECT_WIDTH } = require('../../constants/FOOTBALL');
+
+const HASH_MARK_OFFSET_X = 3;
+const HASH_MARK_LENGTH = 3;
+const HASH_MARK_X_POSITIONS = [
+  HASH_MARK_OFFSET_X,
+  53,
+  COURT_RECT_WIDTH - 53 - HASH_MARK_LENGTH,
+  COURT_RECT_WIDTH - HASH_MARK_OFFSET_X - HASH_MARK_LENGTH
+];
+
+class HashMarkLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.save();
+
+    this.ctx.lineWidth = COURT_LINE_WIDTH;
+
+    for (let y = END_ZONE_HEIGHT + 15; y <= COURT_RECT_HEIGHT / 2; y += 15) {
+      HASH_MARK_X_POSITIONS.forEach(px => {
+        for (let i = 0; i < 4; i++) {
+          const hashMarkVerticalStep = 3 + i * 3;
+          const courtOrigin = { x: px, y: y - hashMarkVerticalStep };
+          const courtTerminus = { x: px + HASH_MARK_LENGTH, y: y - hashMarkVerticalStep };
+
+          this.ctx.beginPath();
+          this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
+          this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
+          this.ctx.stroke();
+        }
+      });
+    }
+
+    this.ctx.restore();
+  }
+}
+
+module.exports = HashMarkLayer;

package/src/layers/court/layers/FOOTBALL/YardLineLayer.js

@@ -0,0 +1,23 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_WIDTH, COURT_RECT_HEIGHT, COURT_LINE_WIDTH, END_ZONE_HEIGHT } = require('../../constants/FOOTBALL');
+
+class YardLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    for (let y = END_ZONE_HEIGHT; y <= COURT_RECT_HEIGHT / 2; y += 15) {
+      const courtOrigin = { x: 0.0, y };
+      const courtTerminus = { x: COURT_RECT_WIDTH, y };
+
+      this.ctx.beginPath();
+      this.ctx.lineWidth = y % 30 === 0 ? COURT_LINE_WIDTH * 2 : COURT_LINE_WIDTH;
+      this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
+      this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
+      this.ctx.stroke();
+    }
+  }
+}
+
+module.exports = YardLineLayer;

package/src/layers/court/layers/{BaseLineMarkingLayer.js → NBA/BaseLineMarkingLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class BaseLineMarkingLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/court/layers/{BenchAreaLayer.js → NBA/BenchAreaLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class BenchAreaLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/court/layers/{Big3Layer.js → NBA/Big3Layer.js}

@@ -1,5 +1,5 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
-const { COURT_LINE_WIDTH } = require('../../../constants');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_LINE_WIDTH, COURT_RECT_WIDTH } = require('../../constants/NBA');
 
 class Big3Layer extends InternalCourtLayer {
   drawLogic() {
@@ -14,7 +14,7 @@ class Big3Layer extends InternalCourtLayer {
     const theta = 40;
     const radius = 2;
 
-    const centerPoint = { x: this.options.courtRectWidth / 2, y: courtHoopCenter.y + distance };
+    const centerPoint = { x: COURT_RECT_WIDTH / 2, y: courtHoopCenter.y + distance };
     const leftPoint = {
       x: courtHoopCenter.x - distance * Math.cos((Math.PI * (90 - theta)) / 180.0),
       y: courtHoopCenter.y + distance * Math.sin((Math.PI * (90 - theta)) / 180.0)

package/src/layers/court/layers/NBA/BorderRectLayer.js

@@ -0,0 +1,13 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_WIDTH, COURT_RECT_HEIGHT, COURT_LINE_WIDTH } = require('../../constants/NBA');
+
+class BorderRectLayer extends InternalCourtLayer {
+  drawLogic() {
+    this.ctx.beginPath();
+    this.ctx.lineWidth = COURT_LINE_WIDTH * 2;
+    this.ctx.rect(0, 0, COURT_RECT_WIDTH, COURT_RECT_HEIGHT);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = BorderRectLayer;

package/src/layers/court/layers/{CenterCircleLayer.js → NBA/CenterCircleLayer.js}

@@ -1,10 +1,11 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_WIDTH, COURT_RECT_HEIGHT } = require('../../constants/NBA');
 
 class CenterCircleLayer extends InternalCourtLayer {
   drawLogic() {
     const outerCenterRadius = 6.0;
     const innerCenterRadius = 2.0;
-    const centerCourtPoint = { x: this.options.courtRectWidth / 2, y: this.options.courtRectHeight / 2 };
+    const centerCourtPoint = { x: COURT_RECT_WIDTH / 2, y: COURT_RECT_HEIGHT / 2 };
 
     this.ctx.beginPath();
     this.ctx.arc(centerCourtPoint.x, centerCourtPoint.y, outerCenterRadius, 0, Math.PI * 2, true);

package/src/layers/court/layers/NBA/CenterLineLayer.js

@@ -0,0 +1,17 @@
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const { COURT_RECT_WIDTH, COURT_RECT_HEIGHT, COURT_LINE_WIDTH } = require('../../constants/NBA');
+
+class CenterLineLayer extends InternalCourtLayer {
+  drawLogic() {
+    const courtOrigin = { x: 0.0, y: COURT_RECT_HEIGHT / 2 };
+    const courtTerminus = { x: COURT_RECT_WIDTH, y: COURT_RECT_HEIGHT / 2 };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
+    this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CenterLineLayer;

package/src/layers/court/layers/{FreeThrowLayer.js → NBA/FreeThrowLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class FreeThrowLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/court/layers/{HoopLayer.js → NBA/HoopLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class HoopLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/court/layers/{InnerOuterRectLayer.js → NBA/InnerOuterRectLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class InnerOuterRectLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/court/layers/{LaneMarkingLayer.js → NBA/LaneMarkingLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class LaneMarkingLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/court/layers/{RestrictedAreaLayer.js → NBA/RestrictedAreaLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class RestrictedAreaLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/court/layers/{ThreePointLineLayer.js → NBA/ThreePointLineLayer.js}

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../base/InternalCourtLayer');
 
 class ThreePointLineLayer extends InternalCourtLayer {
   reflection() {

package/src/layers/line/base/InternalLineLayer.js

@@ -5,6 +5,7 @@ class InternalLineLayer extends BaseLayer {
   constructor(parentLineLayer, line) {
     super(parentLineLayer);
     this.line = line;
+    this.playData = parentLineLayer.playData;
     this.debugMasking = false;
     this.startMaskSettings = null;
     this.endMaskSettings = null;

package/src/layers/line/layers/CutLineLayer.js

@@ -2,7 +2,7 @@ const InternalLineLayer = require('../base/InternalLineLayer');
 
 class CutLineLayer extends InternalLineLayer {
   drawLineCap() {
-    if (this.options.linesHiddenTipIds.includes(this.line.id)) return;
+    if (this.line.hideLineTip) return;
     this.drawArrowLineCap();
   }
 }

package/src/layers/line/layers/DribbleLineLayer.js

@@ -5,7 +5,7 @@ const Bezier = require('../../../math/Bezier');
 
 class DribbleLineLayer extends InternalLineLayer {
   drawLineCap() {
-    if (this.options.linesHiddenTipIds.includes(this.line.id)) return;
+    if (this.line.hideLineTip) return;
     this.drawArrowLineCap();
   }
 

package/src/layers/line/layers/ScreenLineLayer.js

@@ -2,7 +2,7 @@ const InternalLineLayer = require('../base/InternalLineLayer');
 
 class ScreenLineLayer extends InternalLineLayer {
   drawLineCap() {
-    if (this.options.linesHiddenTipIds.includes(this.line.id)) return;
+    if (this.line.hideLineTip) return;
     this.drawPerpendicularLineCap();
   }
 }

package/src/models/Animation.js

@@ -109,7 +109,10 @@ class Animation {
     if (this.globalProgress >= this.linePhaseIntervalMaxRounded) {
       this.reset();
       cancelAnimationFrame(this.loopId);
-      return finishCallback();
+      setTimeout(() => {
+        finishCallback();
+      }, 1000);
+      return;
     }
 
     progressCallback(this.globalProgress);

package/src/models/Frame.js

@@ -214,7 +214,8 @@ class Frame {
     this.ctx.canvas.height = this.frameHeight;
 
     this.ctx.scale(this.play.scale, this.play.scale);
-    this.ctx.translate(Math.abs(this.court.courtRect.origin.x), Math.abs(this.court.courtRect.origin.y));
+    // this.ctx.translate(Math.abs(this.court.courtRect.origin.x), Math.abs(this.court.courtRect.origin.y));
+    this.ctx.translate(-this.court.courtRect.origin.x, -this.court.courtRect.origin.y);
     if (this.play.options.mirror) {
       this.ctx.scale(-1, 1);
       this.ctx.translate(Math.abs(this.court.courtRect.origin.x) * 2 - this.court.courtRect.size.width, 0);

package/src/models/Line.js

@@ -99,6 +99,10 @@ class Line extends Model {
     return this._getAttr('playerLineSequence');
   }
 
+  get hideLineTip() {
+    return this._getAttr('hideLineTip');
+  }
+
   get animations() {
     return this._getAttr('animations');
   }

package/src/models/Play.js

@@ -15,7 +15,6 @@ class Play {
       linesDisplayOnMoveOnly = true,
       linesHiddenIds = [],
       linesSelectedIds = [],
-      linesHiddenTipIds = [],
       playersHiddenPositions = [],
       background = '',
       watermark = null,
@@ -23,7 +22,8 @@ class Play {
       speed = 1,
       position = null,
       big3 = false,
-      huddleMode = false
+      huddleMode = false,
+      flipPlayerLabels = false
     } = {}
   ) {
     this.name = data.name;
@@ -34,7 +34,6 @@ class Play {
       linesDisplayOnMoveOnly,
       linesHiddenIds,
       linesSelectedIds,
-      linesHiddenTipIds,
       playersHiddenPositions,
       background,
       watermark,
@@ -42,7 +41,8 @@ class Play {
       speed,
       position,
       big3,
-      huddleMode
+      huddleMode,
+      flipPlayerLabels
     };
     this.setPlayData(data.playData);
   }
@@ -52,8 +52,12 @@ class Play {
 
     const hardwoodImageData = require('../assets/wood_bg.png');
     const hardwoodImage = await loadImage(hardwoodImageData);
-    Play.background = {
-      Hardwood: hardwoodImage
+    const grassImageData = require('../assets/grass_bg.png');
+    const grassImage = await loadImage(grassImageData);
+    Play.backgroundOptions = {
+      NBA: hardwoodImage,
+      NCAA: hardwoodImage,
+      FOOTBALL: grassImage
     };
 
     const luceoSportsWatermark = await loadImage(`${STORAGE_URL}/${LUCEOSPORTS_WATERMARK_PATH}`);
@@ -83,7 +87,7 @@ class Play {
 
   get staticData() {
     return {
-      background: Play.background,
+      backgroundOptions: Play.backgroundOptions,
       watermark: Play.watermark,
       playerHats: Play.playerHats
     };