@luceosports/play-rendering 2.4.0 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luceosports/play-rendering",
3
- "version": "2.4.0",
3
+ "version": "2.4.1",
4
4
  "main": "dist/play-rendering.js",
5
5
  "types": "dist/play-rendering.d.ts",
6
6
  "scripts": {
@@ -1,13 +1,49 @@
1
1
  import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
2
2
 
3
3
  const REFEREE_CREASE_RADIUS = 10;
4
+ const REFEREE_CREASE_BOX_LENGTH = 24;
5
+ const REFEREE_CREASE_BOX_WIDTH = 5;
4
6
 
5
7
  export default class RefereeCreaseLayer extends InternalCourtLayer {
6
8
  drawLogic() {
7
9
  this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
8
10
 
11
+ // 1. Draw referee crease half arc
9
12
  this.ctx.beginPath();
10
13
  this.ctx.arc(0, this.courtCenter.y, REFEREE_CREASE_RADIUS, Math.PI / 2, -Math.PI / 2, true);
11
14
  this.ctx.stroke();
15
+
16
+ // 2. Draw referee crease half arc extended curves
17
+ this.ctx.beginPath();
18
+ this.ctx.moveTo(0, this.courtCenter.y - REFEREE_CREASE_RADIUS);
19
+ this.ctx.bezierCurveTo(
20
+ 0,
21
+ this.courtCenter.y - REFEREE_CREASE_RADIUS,
22
+ 0 - REFEREE_CREASE_BOX_WIDTH / 2,
23
+ this.courtCenter.y - REFEREE_CREASE_RADIUS,
24
+ 0 - REFEREE_CREASE_BOX_WIDTH,
25
+ this.courtCenter.y - REFEREE_CREASE_RADIUS
26
+ );
27
+ this.ctx.stroke();
28
+
29
+ this.ctx.beginPath();
30
+ this.ctx.moveTo(0, this.courtCenter.y + REFEREE_CREASE_RADIUS);
31
+ this.ctx.bezierCurveTo(
32
+ 0,
33
+ this.courtCenter.y + REFEREE_CREASE_RADIUS,
34
+ 0 - REFEREE_CREASE_BOX_WIDTH / 2,
35
+ this.courtCenter.y + REFEREE_CREASE_RADIUS,
36
+ 0 - REFEREE_CREASE_BOX_WIDTH,
37
+ this.courtCenter.y + REFEREE_CREASE_RADIUS
38
+ );
39
+ this.ctx.stroke();
40
+
41
+ // 3. Draw scorekeepers bench
42
+ this.ctx.beginPath();
43
+ this.ctx.moveTo(0, this.courtCenter.y - REFEREE_CREASE_BOX_LENGTH / 2);
44
+ this.ctx.lineTo(-REFEREE_CREASE_BOX_WIDTH, this.courtCenter.y - REFEREE_CREASE_BOX_LENGTH / 2);
45
+ this.ctx.lineTo(-REFEREE_CREASE_BOX_WIDTH, this.courtCenter.y + REFEREE_CREASE_BOX_LENGTH / 2);
46
+ this.ctx.lineTo(0, this.courtCenter.y + REFEREE_CREASE_BOX_LENGTH / 2);
47
+ this.ctx.stroke();
12
48
  }
13
49
  }
@@ -1,5 +1,8 @@
1
1
  import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
2
2
 
3
+ const PLAYERS_BENCH_LENGTH = 24;
4
+ const PLAYERS_BENCH_WIDTH = 5;
5
+
3
6
  export default class RestrainingLineLayer extends InternalCourtLayer {
4
7
  reflection() {
5
8
  return true;
@@ -12,10 +15,27 @@ export default class RestrainingLineLayer extends InternalCourtLayer {
12
15
  y: this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y
13
16
  };
14
17
 
18
+ // 1. Draw restraining line
15
19
  this.ctx.beginPath();
16
20
  this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
17
21
  this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
18
22
  this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
19
23
  this.ctx.stroke();
24
+
25
+ // 2. Draw players bench
26
+ const playersBenchCenterY = this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y / 2;
27
+
28
+ this.ctx.beginPath();
29
+ this.ctx.moveTo(this.courtTypeConstants.COURT_RECT_WIDTH, playersBenchCenterY - PLAYERS_BENCH_LENGTH / 2);
30
+ this.ctx.lineTo(
31
+ this.courtTypeConstants.COURT_RECT_WIDTH + PLAYERS_BENCH_WIDTH,
32
+ playersBenchCenterY - PLAYERS_BENCH_LENGTH / 2
33
+ );
34
+ this.ctx.lineTo(
35
+ this.courtTypeConstants.COURT_RECT_WIDTH + PLAYERS_BENCH_WIDTH,
36
+ playersBenchCenterY + PLAYERS_BENCH_LENGTH / 2
37
+ );
38
+ this.ctx.lineTo(this.courtTypeConstants.COURT_RECT_WIDTH, playersBenchCenterY + PLAYERS_BENCH_LENGTH / 2);
39
+ this.ctx.stroke();
20
40
  }
21
41
  }
@@ -1,14 +1,37 @@
1
1
  import InternalCourtLayer from '../../../base/InternalCourtLayer';
2
2
 
3
+ const EXCHANGE_AREA_WIDTH = 5;
4
+
3
5
  export default class CenterLineLayer extends InternalCourtLayer {
4
6
  drawLogic() {
5
7
  const courtOrigin = { x: 0.0, y: this.courtCenter.y };
6
8
  const courtTerminus = { x: this.courtTypeConstants.COURT_RECT_WIDTH, y: this.courtCenter.y };
7
9
 
10
+ // 1. Draw center line
8
11
  this.ctx.beginPath();
9
12
  this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH * 2;
10
13
  this.ctx.moveTo(courtOrigin.x, courtOrigin.y);
11
14
  this.ctx.lineTo(courtTerminus.x, courtTerminus.y);
12
15
  this.ctx.stroke();
16
+
17
+ // 2. Draw exchange area
18
+ this.ctx.beginPath();
19
+ this.ctx.moveTo(
20
+ this.courtTypeConstants.COURT_RECT_WIDTH,
21
+ this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y + 5
22
+ );
23
+ this.ctx.lineTo(
24
+ this.courtTypeConstants.COURT_RECT_WIDTH - EXCHANGE_AREA_WIDTH,
25
+ this.courtCenter.y - this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y + 5
26
+ );
27
+ this.ctx.lineTo(
28
+ this.courtTypeConstants.COURT_RECT_WIDTH - EXCHANGE_AREA_WIDTH,
29
+ this.courtCenter.y + this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y - 5
30
+ );
31
+ this.ctx.lineTo(
32
+ this.courtTypeConstants.COURT_RECT_WIDTH,
33
+ this.courtCenter.y + this.courtTypeConstants.RESTRAINING_LINE_OFFSET_Y - 5
34
+ );
35
+ this.ctx.stroke();
13
36
  }
14
37
  }