@luceosports/play-rendering 1.14.0 → 1.16.0

package/package.json

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

package/src/constants.js

@@ -2,6 +2,8 @@ module.exports = Object.freeze({
   SPORT_TYPE_BASKETBALL: 'BASKETBALL',
   SPORT_TYPE_VOLLEYBALL: 'VOLLEYBALL',
   SPORT_TYPE_FOOTBALL: 'FOOTBALL',
+  SPORT_TYPE_LACROSSE: 'LACROSSE',
+  SPORT_TYPE_SOCCER: 'SOCCER',
 
   COURT_TYPE_BIG3: 'BIG3',
   COURT_TYPE_FIBA: 'FIBA',
@@ -17,6 +19,11 @@ module.exports = Object.freeze({
 
   COURT_TYPE_INDOOR: 'INDOOR',
 
+  COURT_TYPE_US_LACROSSE_M: 'US_LACROSSE_M',
+  COURT_TYPE_US_LACROSSE_W: 'US_LACROSSE_W',
+
+  COURT_TYPE_SOCCER_FIFA: 'SOCCER_FIFA',
+
   SHAPE_TYPE_CIRCLE: 'CIRCLE',
   SHAPE_TYPE_SQUARE: 'SQUARE',
   SHAPE_TYPE_TRIANGLE: 'TRIANGLE',

package/src/layers/court/layers/LACROSSE/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/LACROSSE/courtTypes/US_LACROSSE_M/constants.js

@@ -0,0 +1,6 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 60,
+  COURT_RECT_HEIGHT: 110,
+  WING_OFFSET_X: 10,
+  RESTRAINING_CENTER_OFFSET_Y: 20
+});

package/src/layers/court/layers/LACROSSE/courtTypes/US_LACROSSE_M/layers/CenterLineLayer.js

@@ -0,0 +1,33 @@
+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();
+
+    const xAsRectangle = [
+      { x: this.courtCenter.x - 1, y: this.courtCenter.y - 1 },
+      { x: this.courtCenter.x + 1, y: this.courtCenter.y - 1 },
+      { x: this.courtCenter.x + 1, y: this.courtCenter.y + 1 },
+      { x: this.courtCenter.x - 1, y: this.courtCenter.y + 1 }
+    ];
+
+    this.ctx.beginPath();
+
+    this.ctx.moveTo(xAsRectangle[0].x, xAsRectangle[0].y);
+    this.ctx.lineTo(xAsRectangle[2].x, xAsRectangle[2].y);
+
+    this.ctx.moveTo(xAsRectangle[1].x, xAsRectangle[1].y);
+    this.ctx.lineTo(xAsRectangle[3].x, xAsRectangle[3].y);
+
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CenterLineLayer;

package/src/layers/court/layers/LACROSSE/courtTypes/US_LACROSSE_M/layers/GoalAreaLineLayer.js

@@ -0,0 +1,57 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+
+const GOAL_LINE_WIDTH = 2;
+const GOAL_LINE_OFFSET_Y = 15;
+const GOAL_LINE_RADIUS = 3;
+
+class GoalAreaLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const sideLineLeftOrigin = { x: this.courtTypeConstants.WING_OFFSET_X, y: 0 };
+    const sideLineLeftTerminus = {
+      x: this.courtTypeConstants.WING_OFFSET_X,
+      y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_CENTER_OFFSET_Y
+    };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(sideLineLeftOrigin.x, sideLineLeftOrigin.y);
+    this.ctx.lineTo(sideLineLeftTerminus.x, sideLineLeftTerminus.y);
+    this.ctx.stroke();
+
+    const sideLineRightOrigin = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.WING_OFFSET_X,
+      y: 0
+    };
+    const sideLineRightTerminus = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.WING_OFFSET_X,
+      y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_CENTER_OFFSET_Y
+    };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(sideLineRightOrigin.x, sideLineRightOrigin.y);
+    this.ctx.lineTo(sideLineRightTerminus.x, sideLineRightTerminus.y);
+    this.ctx.stroke();
+
+    const goalLineCenter = {
+      x: this.courtCenter.x,
+      y: GOAL_LINE_OFFSET_Y
+    };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(goalLineCenter.x - GOAL_LINE_WIDTH / 2, goalLineCenter.y);
+    this.ctx.lineTo(goalLineCenter.x + GOAL_LINE_WIDTH / 2, goalLineCenter.y);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.arc(goalLineCenter.x, goalLineCenter.y, GOAL_LINE_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = GoalAreaLineLayer;

package/src/layers/court/layers/LACROSSE/courtTypes/US_LACROSSE_M/layers/WingAreaLineLayer.js

@@ -0,0 +1,43 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+
+const WING_LINE_CENTER_OFFSET_Y = 10;
+
+class WingAreaLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const wingLineLeftOrigin = {
+      x: this.courtTypeConstants.WING_OFFSET_X,
+      y: this.courtCenter.y - WING_LINE_CENTER_OFFSET_Y
+    };
+    const wingLineLeftTerminus = {
+      x: this.courtTypeConstants.WING_OFFSET_X,
+      y: this.courtCenter.y
+    };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(wingLineLeftOrigin.x, wingLineLeftOrigin.y);
+    this.ctx.lineTo(wingLineLeftTerminus.x, wingLineLeftTerminus.y);
+    this.ctx.stroke();
+
+    const wingLineRightOrigin = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.WING_OFFSET_X,
+      y: this.courtCenter.y - WING_LINE_CENTER_OFFSET_Y
+    };
+    const wingLineRightTerminus = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH - this.courtTypeConstants.WING_OFFSET_X,
+      y: this.courtCenter.y
+    };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(wingLineRightOrigin.x, wingLineRightOrigin.y);
+    this.ctx.lineTo(wingLineRightTerminus.x, wingLineRightTerminus.y);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = WingAreaLineLayer;

package/src/layers/court/layers/LACROSSE/courtTypes/US_LACROSSE_W/constants.js

@@ -0,0 +1,5 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 60,
+  COURT_RECT_HEIGHT: 130,
+  RESTRAINING_CENTER_OFFSET_Y: 20
+});

package/src/layers/court/layers/LACROSSE/courtTypes/US_LACROSSE_W/layers/CenterLineLayer.js

@@ -0,0 +1,23 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+
+const CENTER_DASH_WIDTH = 3;
+const CENTER_CIRCLE_RADIUS = 10;
+
+class CenterLineLayer extends InternalCourtLayer {
+  drawLogic() {
+    const centerDashOrigin = { x: this.courtCenter.x - CENTER_DASH_WIDTH / 2, y: this.courtCenter.y };
+    const centerDashTerminus = { x: this.courtCenter.x + CENTER_DASH_WIDTH / 2, y: this.courtCenter.y };
+
+    this.ctx.beginPath();
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+    this.ctx.moveTo(centerDashOrigin.x, centerDashOrigin.y);
+    this.ctx.lineTo(centerDashTerminus.x, centerDashTerminus.y);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, CENTER_CIRCLE_RADIUS, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CenterLineLayer;

package/src/layers/court/layers/LACROSSE/courtTypes/US_LACROSSE_W/layers/FanLineLayer.js

@@ -0,0 +1,147 @@
+const InternalCourtLayer = require('../../../../../base/InternalCourtLayer');
+
+const ARC_8M_RADIUS = 11.59;
+const ARC_12M_RADIUS = 15.97;
+const GOAL_CIRCLE_RADIUS = 2.84;
+const GOAL_LINE_RESTRAINING_OFFSET_Y = 30;
+const GOAL_LINE_CIRCLE_HASH_MARK_OFFSET = 8.75;
+const GOAL_LINE_BACK_CIRCLES_OFFSET_Y = 5;
+const GOAL_LINE_BACK_CIRCLES_RADIUS = 0.5;
+const GOAL_LINE_CAGE_LENGTH = 2;
+const HASH_MARK_LENGTH = 1;
+
+class CenterLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const goalLineCenter = {
+      x: this.courtCenter.x,
+      y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_CENTER_OFFSET_Y - GOAL_LINE_RESTRAINING_OFFSET_Y
+    };
+
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    // 1. Draw goal circle
+    this.ctx.beginPath();
+    this.ctx.arc(goalLineCenter.x, goalLineCenter.y, GOAL_CIRCLE_RADIUS, 0, Math.PI * 2, false);
+    this.ctx.stroke();
+
+    // 2. Draw 12 meter arc
+    this.ctx.beginPath();
+    this.ctx.arc(goalLineCenter.x, goalLineCenter.y, ARC_12M_RADIUS, 0, Math.PI, false);
+    this.ctx.stroke();
+
+    // 3. Draw 12 meter arc semi-circle flat side
+    const leftFlatOrigin = { x: goalLineCenter.x - ARC_12M_RADIUS, y: goalLineCenter.y };
+    const leftFlatTerminus = { x: goalLineCenter.x - GOAL_CIRCLE_RADIUS, y: goalLineCenter.y };
+    const rightFlatOrigin = { x: goalLineCenter.x + ARC_12M_RADIUS, y: goalLineCenter.y };
+    const rightFlatTerminus = { x: goalLineCenter.x + GOAL_CIRCLE_RADIUS, y: goalLineCenter.y };
+    this.ctx.beginPath();
+    this.ctx.moveTo(leftFlatOrigin.x, leftFlatOrigin.y);
+    this.ctx.lineTo(leftFlatTerminus.x, leftFlatTerminus.y);
+    this.ctx.moveTo(rightFlatOrigin.x, rightFlatOrigin.y);
+    this.ctx.lineTo(rightFlatTerminus.x, rightFlatTerminus.y);
+    this.ctx.stroke();
+
+    // 4. Draw 8 meter arc
+    const goalCircleBackCenter = { x: goalLineCenter.x, y: goalLineCenter.y - GOAL_CIRCLE_RADIUS };
+    const goalCircleBackCenterRadius = ARC_8M_RADIUS + GOAL_CIRCLE_RADIUS;
+    const arcStartAngle = Math.PI / 4;
+    const arcEndAngle = Math.PI / 2 + Math.PI / 4;
+
+    this.ctx.beginPath();
+    this.ctx.arc(
+      goalCircleBackCenter.x,
+      goalCircleBackCenter.y,
+      goalCircleBackCenterRadius,
+      arcStartAngle,
+      arcEndAngle,
+      false
+    );
+    this.ctx.stroke();
+
+    // 5. Connect 8 meter arc edge points with goal circle
+    const arcEdgePointLeft = getArcPointForAngle(goalCircleBackCenter, goalCircleBackCenterRadius, arcEndAngle);
+    const arcEdgePointRight = getArcPointForAngle(goalCircleBackCenter, goalCircleBackCenterRadius, arcStartAngle);
+
+    const goalCircleLeftX = goalLineCenter.x - GOAL_CIRCLE_RADIUS;
+    const goalCircleRightX = goalLineCenter.x + GOAL_CIRCLE_RADIUS;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(arcEdgePointLeft.x, arcEdgePointLeft.y);
+    this.ctx.lineTo(goalCircleLeftX, goalLineCenter.y);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(arcEdgePointRight.x, arcEdgePointRight.y);
+    this.ctx.lineTo(goalCircleRightX, goalLineCenter.y);
+    this.ctx.stroke();
+
+    // 6. Add 2 additional hash marks on the sides of goal circle
+    const hashMarkLeft = { x: goalCircleLeftX - GOAL_LINE_CIRCLE_HASH_MARK_OFFSET, y: goalLineCenter.y };
+    const hashMarkRight = { x: goalCircleRightX + GOAL_LINE_CIRCLE_HASH_MARK_OFFSET, y: goalLineCenter.y };
+    this.ctx.beginPath();
+    this.ctx.moveTo(hashMarkLeft.x, hashMarkLeft.y);
+    this.ctx.lineTo(hashMarkLeft.x, hashMarkLeft.y + HASH_MARK_LENGTH);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(hashMarkRight.x, hashMarkRight.y);
+    this.ctx.lineTo(hashMarkRight.x, hashMarkRight.y + HASH_MARK_LENGTH);
+    this.ctx.stroke();
+
+    // 9. Draw hash marks 8 meter arc
+    const hashMarkMidPoint = getArcPointForAngle(goalCircleBackCenter, goalCircleBackCenterRadius, Math.PI / 2);
+    this.ctx.beginPath();
+    this.ctx.moveTo(hashMarkMidPoint.x, hashMarkMidPoint.y - HASH_MARK_LENGTH);
+    this.ctx.lineTo(hashMarkMidPoint.x, hashMarkMidPoint.y + HASH_MARK_LENGTH);
+    this.ctx.stroke();
+
+    for (let i = 1; i <= 3; i++) {
+      [1, -1].forEach(signChanger => {
+        const arcHashAngle = Math.PI / 2 + (Math.PI / 10) * signChanger * i;
+        const hashMarkPointForAngle = getArcPointForAngle(
+          goalCircleBackCenter,
+          goalCircleBackCenterRadius,
+          arcHashAngle
+        );
+        this.ctx.save();
+        this.ctx.translate(hashMarkPointForAngle.x, hashMarkPointForAngle.y);
+        this.ctx.rotate((Math.PI / 10) * signChanger * i);
+        this.ctx.beginPath();
+        this.ctx.moveTo(0, -HASH_MARK_LENGTH);
+        this.ctx.lineTo(0, HASH_MARK_LENGTH);
+        this.ctx.stroke();
+        this.ctx.restore();
+      });
+    }
+
+    // 8. Draw goal line back circles
+    const goalBackCircleLeft = { x: hashMarkLeft.x, y: hashMarkLeft.y - GOAL_LINE_BACK_CIRCLES_OFFSET_Y };
+    const goalBackCircleRight = { x: hashMarkRight.x, y: hashMarkRight.y - GOAL_LINE_BACK_CIRCLES_OFFSET_Y };
+    this.ctx.beginPath();
+    this.ctx.arc(goalBackCircleLeft.x, goalBackCircleLeft.y, GOAL_LINE_BACK_CIRCLES_RADIUS, 0, Math.PI * 2, false);
+    this.ctx.arc(goalBackCircleRight.x, goalBackCircleRight.y, GOAL_LINE_BACK_CIRCLES_RADIUS, 0, Math.PI * 2, false);
+    this.ctx.fill();
+
+    // 9. Draw goal line cage
+    const goalCageLeft = { x: goalLineCenter.x - GOAL_LINE_CAGE_LENGTH / 2, y: goalLineCenter.y };
+    const goalCageRight = { x: goalLineCenter.x + GOAL_LINE_CAGE_LENGTH / 2, y: goalLineCenter.y };
+    const goalCageTop = { x: goalLineCenter.x, y: goalLineCenter.y - GOAL_LINE_CAGE_LENGTH / 2 };
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(goalCageLeft.x, goalCageLeft.y);
+    this.ctx.lineTo(goalCageRight.x, goalCageRight.y);
+    this.ctx.lineTo(goalCageTop.x, goalCageTop.y);
+    this.ctx.closePath();
+    this.ctx.stroke();
+  }
+}
+
+function getArcPointForAngle(c, radius, angle) {
+  return { x: c.x + Math.cos(angle) * radius, y: c.y + Math.sin(angle) * radius };
+}
+
+module.exports = CenterLineLayer;

package/src/layers/court/layers/LACROSSE/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/LACROSSE/layers/RestrainingLineLayer.js

@@ -0,0 +1,23 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+class RestrainingLineLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const courtOrigin = { x: 0.0, y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_CENTER_OFFSET_Y };
+    const courtTerminus = {
+      x: this.courtTypeConstants.COURT_RECT_WIDTH,
+      y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_CENTER_OFFSET_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 = RestrainingLineLayer;

package/src/layers/court/layers/SOCCER/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/SOCCER/courtTypes/SOCCER_FIFA/constants.js

@@ -0,0 +1,4 @@
+module.exports = Object.freeze({
+  COURT_RECT_WIDTH: 60,
+  COURT_RECT_HEIGHT: 110
+});

package/src/layers/court/layers/SOCCER/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/SOCCER/layers/CenterCircleLayer.js

@@ -0,0 +1,20 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+class CenterCircleLayer extends InternalCourtLayer {
+  drawLogic() {
+    const circleOuterRadius = 10.0;
+    const circleInnerRadius = 0.5;
+
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, circleOuterRadius, 0, Math.PI * 2, true);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, this.courtCenter.y, circleInnerRadius, 0, Math.PI * 2, true);
+    this.ctx.fill();
+  }
+}
+
+module.exports = CenterCircleLayer;

package/src/layers/court/layers/SOCCER/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/SOCCER/layers/CornerLayer.js

@@ -0,0 +1,25 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const CORNER_RADIUS = 1;
+class CornerLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    const leftCorner = { x: 0, y: 0 };
+    const rightCorner = { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: 0 };
+
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    this.ctx.beginPath();
+    this.ctx.arc(leftCorner.x, leftCorner.y, CORNER_RADIUS, 0, Math.PI / 2, false);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.arc(rightCorner.x, rightCorner.y, CORNER_RADIUS, Math.PI, Math.PI / 2, true);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = CornerLayer;

package/src/layers/court/layers/SOCCER/layers/PenaltyAreaLayer.js

@@ -0,0 +1,52 @@
+const InternalCourtLayer = require('../../../base/InternalCourtLayer');
+
+const GOAL = { width: 8, height: 2.66 };
+const GOAL_AREA = { width: 20, height: 6 };
+const PENALTY_AREA = { width: 44, height: 18 };
+const PENALTY_SPOT_OFFSET_Y = 12;
+const PENALTY_SPOT_RADIUS = 0.5;
+const PENALTY_ARC_RADIUS = 10;
+
+class PenaltyAreaLayer extends InternalCourtLayer {
+  reflection() {
+    return true;
+  }
+
+  drawLogic() {
+    this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
+
+    // 1. Draw penalty area rect
+    this.ctx.beginPath();
+    this.ctx.rect(this.courtCenter.x - PENALTY_AREA.width / 2, 0, PENALTY_AREA.width, PENALTY_AREA.height);
+    this.ctx.stroke();
+
+    // 2. Draw penalty spot
+    this.ctx.beginPath();
+    this.ctx.arc(this.courtCenter.x, PENALTY_SPOT_OFFSET_Y, PENALTY_SPOT_RADIUS, 0, Math.PI * 2, false);
+    this.ctx.fill();
+
+    // 3. Draw penalty area arc
+    this.ctx.beginPath();
+    this.ctx.arc(
+      this.courtCenter.x,
+      PENALTY_SPOT_OFFSET_Y,
+      PENALTY_ARC_RADIUS,
+      Math.PI / 5,
+      Math.PI - Math.PI / 5,
+      false
+    );
+    this.ctx.stroke();
+
+    // 4. Draw goal area rect
+    this.ctx.beginPath();
+    this.ctx.rect(this.courtCenter.x - GOAL_AREA.width / 2, 0, GOAL_AREA.width, GOAL_AREA.height);
+    this.ctx.stroke();
+
+    // 5. Draw goal rect
+    this.ctx.beginPath();
+    this.ctx.rect(this.courtCenter.x - GOAL.width / 2, -GOAL.height, GOAL.width, GOAL.height);
+    this.ctx.stroke();
+  }
+}
+
+module.exports = PenaltyAreaLayer;

package/src/models/Play.js

@@ -3,7 +3,13 @@ const { loadImage } = require('canvas');
 const playerHatsConfig = require('../playerHatsConfig');
 const shapesConfig = require('../shapesConfig');
 const { useDefaults } = require('./Play/Options');
-const { SPORT_TYPE_BASKETBALL, SPORT_TYPE_VOLLEYBALL, SPORT_TYPE_FOOTBALL } = require('../constants');
+const {
+  SPORT_TYPE_BASKETBALL,
+  SPORT_TYPE_VOLLEYBALL,
+  SPORT_TYPE_FOOTBALL,
+  SPORT_TYPE_LACROSSE,
+  SPORT_TYPE_SOCCER
+} = require('../constants');
 
 const STORAGE_URL = 'https://playbooksstore.blob.core.windows.net/public';
 const LUCEOSPORTS_WATERMARK_PATH = 'partners/LuceoSports/luceo-sports-logo-powered-by-sm.png';
@@ -28,7 +34,9 @@ class Play {
       Hardwood: hardwoodImage,
       [SPORT_TYPE_BASKETBALL]: hardwoodImage,
       [SPORT_TYPE_VOLLEYBALL]: hardwoodImage,
-      [SPORT_TYPE_FOOTBALL]: grassImage
+      [SPORT_TYPE_FOOTBALL]: grassImage,
+      [SPORT_TYPE_LACROSSE]: grassImage,
+      [SPORT_TYPE_SOCCER]: grassImage
     };
 
     const luceoSportsWatermark = await loadImage(`${STORAGE_URL}/${LUCEOSPORTS_WATERMARK_PATH}`);