@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/dist/play-rendering.js +4 -4
- package/dist/play-rendering.js.map +1 -1
- package/package.json +1 -1
- package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_US/layers/RefereeCreaseLayer.ts +36 -0
- package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_US/layers/RestrainingLineLayer.ts +20 -0
- package/src/layers/court/layers/LACROSSE_BOX/layers/CenterLineLayer.ts +23 -0
package/package.json
CHANGED
package/src/layers/court/layers/LACROSSE_BOX/courtTypes/LACROSSE_BOX_US/layers/RefereeCreaseLayer.ts
CHANGED
|
@@ -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
|
}
|