@luceosports/play-rendering 1.13.0 → 1.13.1

package/package.json

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

package/src/layers/CourtLayer.js

@@ -1,5 +1,5 @@
 const BaseLayer = require('./base/BaseLayer');
-const { layers: courtLayers } = require('./court');
+const { sportLayers, courtTypeLayers } = require('./court');
 
 class CourtLayer extends BaseLayer {
   get frameWidth() {
@@ -15,8 +15,11 @@ class CourtLayer extends BaseLayer {
   }
 
   get courtTypeLayers() {
-    if (!(courtLayers[this.playData.sport] || {})[this.playData.court.type]) throw new Error('unknown court type');
-    return courtLayers[this.playData.sport][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() {
@@ -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 { courtTypeConstants } = require('../court');
+const { sportConstants, courtTypeConstants } = require('../court');
 
 class BaseLayer {
   constructor(ctx, playData) {
@@ -8,7 +8,12 @@ class BaseLayer {
   }
 
   get courtTypeConstants() {
-    return courtTypeConstants[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,31 +1,46 @@
 // require all modules on the path and with the pattern defined
 const req = require.context('./layers/', true, /.js$/);
 
-const layers = {};
+const sportLayers = {};
+const courtTypeLayers = {};
 const sportConstants = {};
 const courtTypeConstants = {};
 
 req.keys().forEach(key => {
-  if (key.match(/\/layers\//)) {
+  if (key.match(/layers\//)) {
     return processLayers(key);
   }
   processConstants(key);
 });
 
 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, courtType, mName] = mPath.split('/');
-  if (!layers[sportName]) layers[sportName] = {};
-  if (!layers[sportName][courtType]) layers[sportName][courtType] = {};
-  layers[sportName][courtType][mName] = req(key);
+  const [sportName, mName] = mPath.split('/');
+  if (!sportLayers[sportName]) sportLayers[sportName] = {};
+  sportLayers[sportName][mName] = req(key);
 }
 
 function processConstants(key) {
-  if (key.match(/\/constants\/index.js$/)) {
-    const mPath = key.replace('./', '').replace('/constants/index.js', '');
+  if (key.match(/\/courtTypes\//)) {
+    const mPath = key
+      .replace('./', '')
+      .replace('/courtTypes', '')
+      .replace('/constants.js', '');
     const [, courtType] = mPath.split('/');
     courtTypeConstants[courtType] = req(key);
     return;
@@ -37,4 +52,4 @@ function processConstants(key) {
   }
 }
 
-module.exports = { layers, sportConstants, courtTypeConstants };
+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

@@ -1,7 +1,5 @@
 module.exports = Object.freeze({
   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,

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/BASKETBALL/{NBA → courtTypes/BIG3}/layers/Big3Layer.js

@@ -1,20 +1,17 @@
-const InternalCourtLayer = require('../../../../base/InternalCourtLayer');
-const { 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)
@@ -26,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/BASKETBALL/{NBA/layers → 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/BASKETBALL/{NBA/layers → 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;

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

@@ -1,4 +1,4 @@
-const InternalCourtLayer = require('../../../../base/InternalCourtLayer');
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
 
 class FreeThrowLayer extends InternalCourtLayer {
   reflection() {
@@ -6,8 +6,8 @@ class FreeThrowLayer extends InternalCourtLayer {
   }
 
   drawLogic() {
-    const freeThrowSemiCircleCenterPoint = { x: 25.0, y: 19.0 };
-    const freeThrowSemiCircleRadius = 6.0;
+    const freeThrowSemiCircleCenterPoint = { x: this.courtCenter.x, y: 19.0 };
+    const freeThrowSemiCircleRadius = this.courtTypeConstants.FREE_THROW_INNER_WIDTH / 2;
 
     this.ctx.beginPath();
     this.ctx.arc(
@@ -20,6 +20,8 @@ class FreeThrowLayer extends InternalCourtLayer {
     );
     this.ctx.stroke();
 
+    if (!this.courtTypeConstants.FREE_THROW_INNER_DASHED_CIRCLE) return;
+
     this.ctx.setLineDash([1, 0.5]);
     this.ctx.beginPath();
     this.ctx.arc(

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

@@ -0,0 +1,26 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const COURT_HOOP_LINE_OFFSET = 3;
+
+class HoopLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const courtHoopRadius = 0.75;
+    const courtHoopCenter = { x: this.courtCenter.x, y: 5.25 };
+    const courtHoopLineOrigin = { x: courtHoopCenter.x - COURT_HOOP_LINE_OFFSET, y: 4.0 };
+    const courtHoopLineTerminus = { x: courtHoopCenter.x + COURT_HOOP_LINE_OFFSET, y: 4.0 };
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(courtHoopLineOrigin.x, courtHoopLineOrigin.y);
+    this.ctx.lineTo(courtHoopLineTerminus.x, courtHoopLineTerminus.y);
+    this.ctx.stroke();
+    this.ctx.beginPath();
+    this.ctx.arc(courtHoopCenter.x, courtHoopCenter.y, courtHoopRadius, 0, 2 * Math.PI, true);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = HoopLayer;