@luceosports/play-rendering 1.12.5 → 1.13.1

package/index.js

@@ -8,4 +8,5 @@ module.exports.Shape = require('./src/models/Shape');
 module.exports.ShapeModels = require('./src/models/ShapeModels');
 module.exports.LineDrawingMath = require('./src/math/LineDrawingMath');
 module.exports.Bezier = require('./src/math/Bezier').Bezier;
-module.exports.CourtTypeConstants = require('./src/constants');
+module.exports.CourtTypeConstants = require('./src/layers/court').courtTypeConstants;
+module.exports.Constants = require('./src/constants');

package/package.json

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

package/src/constants.js

@@ -1,21 +1,21 @@
 module.exports = Object.freeze({
-  NBA: {
-    COURT_LINE_WIDTH: 0.1667,
-    COURT_RECT_WIDTH: 50.0,
-    COURT_RECT_HEIGHT: 94.0,
-    PLAYER_TOKEN_RADIUS: 1.5,
-    PLAYER_TOKEN_SCALE: 1,
-    LINE_WIDTH: 0.33,
-    LINE_MASKING: true
-  },
-  FOOTBALL: {
-    COURT_LINE_WIDTH: 0.32,
-    COURT_RECT_WIDTH: 160.0,
-    COURT_RECT_HEIGHT: 360.0,
-    END_ZONE_HEIGHT: 30,
-    PLAYER_TOKEN_RADIUS: 1.5,
-    PLAYER_TOKEN_SCALE: 2,
-    LINE_WIDTH: 0.55,
-    LINE_MASKING: false
-  }
+  SPORT_TYPE_BASKETBALL: 'BASKETBALL',
+  SPORT_TYPE_FOOTBALL: 'FOOTBALL',
+
+  COURT_TYPE_NBA: 'NBA',
+  COURT_TYPE_HIGH_SCHOOL_FOOTBALL: 'HIGH_SCHOOL_FOOTBALL',
+  COURT_TYPE_HIGH_SCHOOL_FOOTBALL_LEGACY: 'FOOTBALL',
+
+  SHAPE_TYPE_CIRCLE: 'CIRCLE',
+  SHAPE_TYPE_SQUARE: 'SQUARE',
+  SHAPE_TYPE_TRIANGLE: 'TRIANGLE',
+  SHAPE_TYPE_FOV: 'FOV',
+  SHAPE_TYPE_XMARK: 'XMARK',
+  SHAPE_TYPE_STRAIGHT: 'STRAIGHT',
+  SHAPE_TYPE_CONE: 'CONE',
+  SHAPE_TYPE_LINE_CUT: 'LINE.CUT',
+  SHAPE_TYPE_LINE_SCREEN: 'LINE.SCREEN',
+  SHAPE_TYPE_LINE_DRIBBLE: 'LINE.DRIBBLE',
+  SHAPE_TYPE_LINE_PASS: 'LINE.PASS',
+  SHAPE_TYPE_LINE_HANDOFF: 'LINE.HANDOFF'
 });

package/src/layers/CourtLayer.js

@@ -1,5 +1,5 @@
 const BaseLayer = require('./base/BaseLayer');
-const courtLayers = require('./court');
+const { sportLayers, courtTypeLayers } = require('./court');
 
 class CourtLayer extends BaseLayer {
   get frameWidth() {
@@ -15,12 +15,15 @@ class CourtLayer extends BaseLayer {
   }
 
   get courtTypeLayers() {
-    if (!courtLayers[this.playData.court.type]) throw new Error('unknown court type');
-    return courtLayers[this.playData.court.type];
+    if (!sportLayers[this.playData.sport]) throw new Error('unknown sport type layer');
+    return {
+      ...sportLayers[this.playData.sport],
+      ...((courtTypeLayers[this.playData.sport] || {})[this.playData.court.type] || {})
+    };
   }
 
   get background() {
-    return this.options.background || this.playData.court.type;
+    return this.options.background || this.playData.sport;
   }
 
   apply() {
@@ -50,6 +53,7 @@ class CourtLayer extends BaseLayer {
   setColor() {
     const courtBorderColor = this.options.lineColor || '#fff';
     this.ctx.strokeStyle = courtBorderColor;
+    this.ctx.fillStyle = courtBorderColor;
   }
 
   setBackground() {

package/src/layers/base/BaseLayer.js

@@ -1,4 +1,4 @@
-const constants = require('../../constants');
+const { sportConstants, courtTypeConstants } = require('../court');
 
 class BaseLayer {
   constructor(ctx, playData) {
@@ -8,7 +8,12 @@ class BaseLayer {
   }
 
   get courtTypeConstants() {
-    return constants[this.playData.court.type];
+    if (!sportConstants[this.playData.sport]) throw new Error('unknown sport type constants');
+    if (!courtTypeConstants[this.playData.court.type]) throw new Error('unknown court type constants');
+    return {
+      ...sportConstants[this.playData.sport],
+      ...courtTypeConstants[this.playData.court.type]
+    };
   }
 }
 

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

@@ -1,6 +1,13 @@
 const InternalBaseLayer = require('../../base/InternalBaseLayer');
 
 class InternalCourtLayer extends InternalBaseLayer {
+  get courtCenter() {
+    return {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH / 2,
+      y: this.courtTypeConstants.COURT_RECT_HEIGHT / 2
+    };
+  }
+
   apply() {
     super.apply();
 

package/src/layers/court/index.js

@@ -1,13 +1,55 @@
 // require all modules on the path and with the pattern defined
 const req = require.context('./layers/', true, /.js$/);
 
-const modules = {};
+const sportLayers = {};
+const courtTypeLayers = {};
+const sportConstants = {};
+const courtTypeConstants = {};
 
 req.keys().forEach(key => {
-  const mPath = key.replace('./', '').replace('.js', '');
-  const [mType, mName] = mPath.split('/');
-  if (!modules[mType]) modules[mType] = {};
-  modules[mType][mName] = req(key);
+  if (key.match(/layers\//)) {
+    return processLayers(key);
+  }
+  processConstants(key);
 });
 
-module.exports = modules;
+function processLayers(key) {
+  if (key.match(/\/courtTypes\//)) {
+    const mPath = key
+      .replace('./', '')
+      .replace('/courtTypes', '')
+      .replace('/layers', '')
+      .replace('.js', '');
+    const [sportName, courtType, mName] = mPath.split('/');
+    if (!courtTypeLayers[sportName]) courtTypeLayers[sportName] = {};
+    if (!courtTypeLayers[sportName][courtType]) courtTypeLayers[sportName][courtType] = {};
+    courtTypeLayers[sportName][courtType][mName] = req(key);
+    return;
+  }
+  const mPath = key
+    .replace('./', '')
+    .replace('/layers', '')
+    .replace('.js', '');
+  const [sportName, mName] = mPath.split('/');
+  if (!sportLayers[sportName]) sportLayers[sportName] = {};
+  sportLayers[sportName][mName] = req(key);
+}
+
+function processConstants(key) {
+  if (key.match(/\/courtTypes\//)) {
+    const mPath = key
+      .replace('./', '')
+      .replace('/courtTypes', '')
+      .replace('/constants.js', '');
+    const [, courtType] = mPath.split('/');
+    courtTypeConstants[courtType] = req(key);
+    return;
+  }
+  const mPath = key.replace('./', '').replace('/constants.js', '');
+  const [sportName, courtType] = mPath.split('/');
+  if (!courtType) {
+    sportConstants[sportName] = req(key);
+  }
+}
+
+module.exports = { sportLayers, courtTypeLayers, sportConstants, courtTypeConstants };

package/src/layers/court/layers/BASKETBALL/common/LaneMarkingNBATrait.js

@@ -0,0 +1,34 @@
+const COURT_INNER_MARK_OFFSET = 5;
+
+module.exports = {
+  drawLogic() {
+    const courtMarkingWidth = 0.667;
+    const courtOuterRectOffset = this.courtTypeConstants.FREE_THROW_OUTER_WIDTH / 2;
+    const courtOuterRectLeftX = this.courtCenter.x - courtOuterRectOffset;
+    const courtOuterRectRightX = this.courtCenter.x + courtOuterRectOffset;
+    const courtInnerMarkLeftX = this.courtCenter.x - COURT_INNER_MARK_OFFSET;
+    const courtInnerMarkRightX = this.courtCenter.x + COURT_INNER_MARK_OFFSET;
+
+    [7.0, 8.0, 11.0, 14.0].forEach(y => {
+      this.ctx.beginPath();
+
+      this.ctx.moveTo(courtOuterRectLeftX, y);
+      this.ctx.lineTo(courtOuterRectLeftX - courtMarkingWidth, y);
+
+      this.ctx.moveTo(courtOuterRectRightX, y);
+      this.ctx.lineTo(courtOuterRectRightX + courtMarkingWidth, y);
+
+      this.ctx.stroke();
+    });
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(courtInnerMarkLeftX, 13.0);
+    this.ctx.lineTo(courtInnerMarkLeftX + 0.5, 13.0);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(courtInnerMarkRightX, 13.0);
+    this.ctx.lineTo(courtInnerMarkRightX - 0.5, 13.0);
+    this.ctx.stroke();
+  }
+};

package/src/layers/court/layers/BASKETBALL/common/LaneMarkingNCAATrait.js

@@ -0,0 +1,30 @@
+module.exports = {
+  drawLogic() {
+    const courtMarkingWidth = 0.667;
+    const courtOuterRectOffset = this.courtTypeConstants.FREE_THROW_OUTER_WIDTH / 2;
+    const courtOuterRectLeftX = this.courtCenter.x - courtOuterRectOffset;
+    const courtOuterRectRightX = this.courtCenter.x + courtOuterRectOffset;
+
+    [11.0, 14.0, 17.0].forEach(y => {
+      this.ctx.beginPath();
+
+      this.ctx.moveTo(courtOuterRectLeftX, y);
+      this.ctx.lineTo(courtOuterRectLeftX - courtMarkingWidth, y);
+
+      this.ctx.moveTo(courtOuterRectRightX, y);
+      this.ctx.lineTo(courtOuterRectRightX + courtMarkingWidth, y);
+
+      this.ctx.stroke();
+    });
+
+    this.ctx.beginPath();
+    this.ctx.rect(courtOuterRectLeftX, 7.0, -1.2, 0.8);
+    this.ctx.fill();
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.rect(courtOuterRectRightX, 7.0, 1.2, 0.8);
+    this.ctx.fill();
+    this.ctx.stroke();
+  }
+};

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

@@ -0,0 +1,7 @@
+module.exports = Object.freeze({
+  COURT_LINE_WIDTH: 0.1667,
+  PLAYER_TOKEN_RADIUS: 1.5,
+  PLAYER_TOKEN_SCALE: 1,
+  LINE_WIDTH: 0.33,
+  LINE_MASKING: true
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/BIG3/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 50.0,
+  COURT_RECT_HEIGHT: 94.0,
+  HOOP_CORNER_DISTANCE: 22,
+  THREE_POINT_ARC_RADIUS: 23.6762,
+  THREE_POINT_ASIN_APPROX: 10.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 14.0,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 16.0,
+  FREE_THROW_INNER_DASHED_CIRCLE: true,
+  CENTER_INNER_CIRCLE: true,
+  BENCH_MARKING: true
+});

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

@@ -1,22 +1,17 @@
-const InternalCourtLayer = require('../../base/InternalCourtLayer');
-const {
-  NBA: { COURT_RECT_WIDTH, COURT_LINE_WIDTH }
-} = require('../../../../constants');
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
 
 class Big3Layer extends InternalCourtLayer {
   drawLogic() {
-    if (!this.options.big3) return;
-
     const fontSize = 4;
     const textHorizontalOffset = 1.1;
     const textVerticalOffset = 1.4;
 
-    const courtHoopCenter = { x: 25.0, y: 5.25 };
+    const courtHoopCenter = { x: this.courtCenter.x, y: 5.25 };
     const distance = 30;
     const theta = 40;
     const radius = 2;
 
-    const centerPoint = { x: COURT_RECT_WIDTH / 2, y: courtHoopCenter.y + distance };
+    const centerPoint = { x: this.courtCenter.x, 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)
@@ -28,7 +23,7 @@ class Big3Layer extends InternalCourtLayer {
 
     const big3 = [leftPoint, centerPoint, rightPoint];
 
-    this.ctx.lineWidth = COURT_LINE_WIDTH * 3;
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 3;
     this.ctx.font = `${fontSize}px Helvetica`;
 
     big3.forEach(point => {

package/src/layers/court/layers/BASKETBALL/courtTypes/BIG3/layers/LaneMarkingLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const LaneMarkingNBATrait = require('../../../common/LaneMarkingNBATrait');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+}
+
+Object.assign(LaneMarkingLayer.prototype, LaneMarkingNBATrait);
+
+module.exports = LaneMarkingLayer;

package/src/layers/court/layers/BASKETBALL/courtTypes/FIBA/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 49.21,
+  COURT_RECT_HEIGHT: 91.86,
+  HOOP_CORNER_DISTANCE: 21.65,
+  THREE_POINT_ARC_RADIUS: 22.15,
+  THREE_POINT_ASIN_APPROX: 6.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 8.0,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 16.08,
+  FREE_THROW_INNER_DASHED_CIRCLE: false,
+  CENTER_INNER_CIRCLE: false,
+  BENCH_MARKING: false
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/FIBA/layers/LaneMarkingLayer.js

@@ -0,0 +1,38 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const courtMarkingWidth = 0.333;
+    const courtOuterRectOffset = this.courtTypeConstants.FREE_THROW_OUTER_WIDTH / 2;
+    const courtOuterRectLeftX = this.courtCenter.x - courtOuterRectOffset;
+    const courtOuterRectRightX = this.courtCenter.x + courtOuterRectOffset;
+
+    [5.9, 13.6, 16.5].forEach(y => {
+      this.ctx.beginPath();
+
+      this.ctx.moveTo(courtOuterRectLeftX, y);
+      this.ctx.lineTo(courtOuterRectLeftX - courtMarkingWidth, y);
+
+      this.ctx.moveTo(courtOuterRectRightX, y);
+      this.ctx.lineTo(courtOuterRectRightX + courtMarkingWidth, y);
+
+      this.ctx.stroke();
+    });
+
+    this.ctx.beginPath();
+    this.ctx.rect(courtOuterRectLeftX, 8.8, -courtMarkingWidth, 1.9);
+    this.ctx.fill();
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.rect(courtOuterRectRightX, 8.8, courtMarkingWidth, 1.9);
+    this.ctx.fill();
+    this.ctx.stroke();
+  }
+}
+
+module.exports = LaneMarkingLayer;

package/src/layers/court/layers/BASKETBALL/courtTypes/NBA/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 50.0,
+  COURT_RECT_HEIGHT: 94.0,
+  HOOP_CORNER_DISTANCE: 22,
+  THREE_POINT_ARC_RADIUS: 23.6762,
+  THREE_POINT_ASIN_APPROX: 10.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 14.0,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 16.0,
+  FREE_THROW_INNER_DASHED_CIRCLE: true,
+  CENTER_INNER_CIRCLE: true,
+  BENCH_MARKING: true
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/NBA/layers/LaneMarkingLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const LaneMarkingNBATrait = require('../../../common/LaneMarkingNBATrait');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+}
+
+Object.assign(LaneMarkingLayer.prototype, LaneMarkingNBATrait);
+
+module.exports = LaneMarkingLayer;

package/src/layers/court/layers/BASKETBALL/courtTypes/NCAAM/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 50.0,
+  COURT_RECT_HEIGHT: 94.0,
+  HOOP_CORNER_DISTANCE: 20.75,
+  THREE_POINT_ARC_RADIUS: 20.75,
+  THREE_POINT_ASIN_APPROX: 2.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 6.0,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 12.0,
+  FREE_THROW_INNER_DASHED_CIRCLE: false,
+  CENTER_INNER_CIRCLE: false,
+  BENCH_MARKING: false
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/NCAAM/layers/LaneMarkingLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const LaneMarkingNCAATrait = require('../../../common/LaneMarkingNCAATrait');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+}
+
+Object.assign(LaneMarkingLayer.prototype, LaneMarkingNCAATrait);
+
+module.exports = LaneMarkingLayer;

package/src/layers/court/layers/BASKETBALL/courtTypes/NCAAW/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 50.0,
+  COURT_RECT_HEIGHT: 94.0,
+  HOOP_CORNER_DISTANCE: 20.75,
+  THREE_POINT_ARC_RADIUS: 20.75,
+  THREE_POINT_ASIN_APPROX: 2.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 6.0,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 12.0,
+  FREE_THROW_INNER_DASHED_CIRCLE: false,
+  CENTER_INNER_CIRCLE: false,
+  BENCH_MARKING: true
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/NCAAW/layers/LaneMarkingLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const LaneMarkingNCAATrait = require('../../../common/LaneMarkingNCAATrait');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+}
+
+Object.assign(LaneMarkingLayer.prototype, LaneMarkingNCAATrait);
+
+module.exports = LaneMarkingLayer;

package/src/layers/court/layers/BASKETBALL/courtTypes/US_HIGH_SCHOOL/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 50.0,
+  COURT_RECT_HEIGHT: 84.0,
+  HOOP_CORNER_DISTANCE: 19.75,
+  THREE_POINT_ARC_RADIUS: 19.75,
+  THREE_POINT_ASIN_APPROX: 2.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 6,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 12.0,
+  FREE_THROW_INNER_DASHED_CIRCLE: false,
+  CENTER_INNER_CIRCLE: false,
+  BENCH_MARKING: false
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/US_HIGH_SCHOOL/layers/LaneMarkingLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const LaneMarkingNCAATrait = require('../../../common/LaneMarkingNCAATrait');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+}
+
+Object.assign(LaneMarkingLayer.prototype, LaneMarkingNCAATrait);
+
+module.exports = LaneMarkingLayer;

package/src/layers/court/layers/BASKETBALL/courtTypes/US_JUNIOR_HIGH/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 42.0,
+  COURT_RECT_HEIGHT: 74.0,
+  HOOP_CORNER_DISTANCE: 19.75,
+  THREE_POINT_ARC_RADIUS: 19.75,
+  THREE_POINT_ASIN_APPROX: 2.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 6,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 12.0,
+  FREE_THROW_INNER_DASHED_CIRCLE: false,
+  CENTER_INNER_CIRCLE: false,
+  BENCH_MARKING: false
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/US_JUNIOR_HIGH/layers/LaneMarkingLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const LaneMarkingNCAATrait = require('../../../common/LaneMarkingNCAATrait');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+}
+
+Object.assign(LaneMarkingLayer.prototype, LaneMarkingNCAATrait);
+
+module.exports = LaneMarkingLayer;

package/src/layers/court/layers/BASKETBALL/courtTypes/WNBA/constants.js

@@ -0,0 +1,13 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 50.0,
+  COURT_RECT_HEIGHT: 94.0,
+  HOOP_CORNER_DISTANCE: 21.65,
+  THREE_POINT_ARC_RADIUS: 22.15,
+  THREE_POINT_ASIN_APPROX: 6.0,
+  THREE_POINT_OFFSET_ORIGIN_Y_APPROX: 9.0,
+  FREE_THROW_INNER_WIDTH: 12.0,
+  FREE_THROW_OUTER_WIDTH: 16.0,
+  FREE_THROW_INNER_DASHED_CIRCLE: true,
+  CENTER_INNER_CIRCLE: true,
+  BENCH_MARKING: true
+});

package/src/layers/court/layers/BASKETBALL/courtTypes/WNBA/layers/LaneMarkingLayer.js

@@ -0,0 +1,12 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+const LaneMarkingNBATrait = require('../../../common/LaneMarkingNBATrait');
+
+class LaneMarkingLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+}
+
+Object.assign(LaneMarkingLayer.prototype, LaneMarkingNBATrait);
+
+module.exports = LaneMarkingLayer;

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

@@ -1,15 +1,18 @@
-const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
 
+const COURT_BENCH_OFFSET_X = 11;
 class BaseLineMarkingLayer extends InternalCourtLayer {
   reflection() {
     return true;
   }
 
   drawLogic() {
-    const benchPartLeftCourtOrigin = { x: 14.0, y: 0.0 };
-    const benchPartLeftCourtTerminus = { x: 14.0, y: 0.5 };
-    const benchPartRightCourtOrigin = { x: 36.0, y: 0.0 };
-    const benchPartRightCourtTerminus = { x: 36.0, y: 0.5 };
+    if (!this.courtTypeConstants.BENCH_MARKING) return;
+
+    const benchPartLeftCourtOrigin = { x: this.courtCenter.x - COURT_BENCH_OFFSET_X, y: 0.0 };
+    const benchPartLeftCourtTerminus = { x: this.courtCenter.x - COURT_BENCH_OFFSET_X, y: 0.5 };
+    const benchPartRightCourtOrigin = { x: this.courtCenter.x + COURT_BENCH_OFFSET_X, y: 0.0 };
+    const benchPartRightCourtTerminus = { x: this.courtCenter.x + COURT_BENCH_OFFSET_X, y: 0.5 };
 
     this.ctx.beginPath();
     this.ctx.moveTo(benchPartLeftCourtOrigin.x, benchPartLeftCourtOrigin.y);

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

@@ -1,4 +1,6 @@
-const InternalCourtLayer = require('../../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const BENCH_AREA_OFFSET = 3.0;
 
 class BenchAreaLayer extends InternalCourtLayer {
   reflection() {
@@ -7,9 +9,9 @@ class BenchAreaLayer extends InternalCourtLayer {
 
   drawLogic() {
     const benchAreaCourtOrigin = { x: 0.0, y: 28.0 };
-    const benchAreaCourtTerminus = { x: 3.0, y: 28.0 };
-    const benchAreaCourtOrigin2 = { x: 50.0, y: 28.0 };
-    const benchAreaCourtTerminus2 = { x: 47.0, y: 28.0 };
+    const benchAreaCourtTerminus = { x: BENCH_AREA_OFFSET, y: 28.0 };
+    const benchAreaCourtOrigin2 = { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: 28.0 };
+    const benchAreaCourtTerminus2 = { x: this.courtTypeConstants.COURT_RECT_WIDTH - BENCH_AREA_OFFSET, y: 28.0 };
 
     this.ctx.beginPath();
     this.ctx.moveTo(benchAreaCourtOrigin.x, benchAreaCourtOrigin.y);

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

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

package/src/layers/court/layers/BASKETBALL/layers/CenterCircleLayer.js

@@ -0,0 +1,21 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+class CenterCircleLayer extends InternalCourtLayer {
+  drawLogic() {
+    if (!this.options.showHalfCourtCircle) return;
+
+    const outerCenterRadius = 6.0;
+    const innerCenterRadius = 2.0;
+
+    this.ctx.beginPath();
+
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, outerCenterRadius, 0, Math.PI * 2, true);
+    if (this.courtTypeConstants.CENTER_INNER_CIRCLE) {
+      this.ctx.arc(this.courtCenter.x, this.courtCenter.y, innerCenterRadius, 0, Math.PI * 2, true);
+    }
+
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CenterCircleLayer;

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

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