react-soccer-lineup 0.4.3 → 1.0.0-beta.10
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/README.md +107 -62
- package/dist/assets/main.css +1 -0
- package/dist/components/pitch/Pitch.d.ts +4 -127
- package/dist/components/pitch/Pitch.types.d.ts +12 -0
- package/dist/components/pitch/team/Team.d.ts +4 -0
- package/dist/components/pitch/team/Team.types.d.ts +39 -0
- package/dist/components/pitch/team/player/Player.d.ts +4 -0
- package/dist/components/pitch/team/player/Player.types.d.ts +6 -0
- package/dist/components/pitch/team/player/utils/index.d.ts +2 -0
- package/dist/main.d.ts +3 -0
- package/dist/main.js +579 -0
- package/package.json +50 -51
- package/dist/components/team/Team.d.ts +0 -99
- package/dist/components/team/player/Player.d.ts +0 -28
- package/dist/index.d.ts +0 -1
- package/dist/index.es.js +0 -283
- package/dist/index.es.js.map +0 -1
- package/dist/index.js +0 -290
- package/dist/index.js.map +0 -1
- package/dist/test.d.ts +0 -1
package/README.md
CHANGED
|
@@ -1,95 +1,140 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img alt="React Soccer Lineup" width="72px" height="72px" src="/playground/public/favicon.png">
|
|
3
|
+
</div>
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
<div align="center">
|
|
6
|
+
<h3>React Soccer Lineup </h3>
|
|
7
|
+
<p>⚽ A soccer pitch representation component for React ⚛️</p>
|
|
8
|
+
</div>
|
|
4
9
|
|
|
5
|
-
|
|
10
|
+
<div align="center">
|
|
11
|
+
|
|
12
|
+
[](https://www.npmjs.com/package/react-soccer-lineup) [](https://standardjs.com) [](https://npm-stat.com/charts.html?package=react-soccer-lineup&from=2020-01-01&to=2027-01-01)
|
|
13
|
+
|
|
14
|
+
</div>
|
|
6
15
|
|
|
7
16
|
## Install
|
|
8
17
|
|
|
9
18
|
```bash
|
|
10
|
-
npm install
|
|
19
|
+
npm install react-soccer-lineup
|
|
11
20
|
```
|
|
12
21
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## Usage
|
|
16
|
-
|
|
17
|
-
```jsx
|
|
18
|
-
import React, { Component } from 'react'
|
|
19
|
-
|
|
20
|
-
import SoccerLineUp from 'react-soccer-lineup'
|
|
21
|
-
|
|
22
|
+
## Basic usage
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
```tsx
|
|
25
|
+
import SoccerLineUp from 'react-soccer-lineup';
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
function App () {
|
|
28
|
+
return <SoccerLineUp />;
|
|
29
|
+
}
|
|
30
|
+
```
|
|
26
31
|
|
|
27
|
-
|
|
28
|
-
<SoccerLineUp
|
|
29
|
-
size={ "small" }
|
|
30
|
-
color={ "lightseagreen" }
|
|
31
|
-
pattern={ "lines" }
|
|
32
|
-
/>
|
|
33
|
-
)
|
|
32
|
+
|
|
34
33
|
|
|
35
|
-
|
|
34
|
+
## Render teams
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import SoccerLineUp, { type Team } from 'react-soccer-lineup';
|
|
38
|
+
|
|
39
|
+
function App () {
|
|
40
|
+
const homeTeam: Team = {
|
|
41
|
+
squad: {
|
|
42
|
+
gk: { number: 1 },
|
|
43
|
+
df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
|
|
44
|
+
cm: [{ number: 11 }, { number: 6 }, { number: 8 }, { number: 7 }],
|
|
45
|
+
fw: [{ number: 9 }, { number: 10 }]
|
|
46
|
+
},
|
|
47
|
+
style: {
|
|
48
|
+
borderColor: '#333333'
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const awayTeam: Team = {
|
|
53
|
+
squad: {
|
|
54
|
+
gk: { number: 1 },
|
|
55
|
+
df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
|
|
56
|
+
cm: [{ number: 6 }, { number: 8 }, { number: 10 }],
|
|
57
|
+
fw: [{ number: 11 }, { number: 9 }, { number: 7 }]
|
|
58
|
+
},
|
|
59
|
+
style: {
|
|
60
|
+
borderColor: '#ffffff'
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<SoccerLineUp
|
|
66
|
+
size='responsive'
|
|
67
|
+
color='#327D61'
|
|
68
|
+
pattern='squares'
|
|
69
|
+
homeTeam={homeTeam}
|
|
70
|
+
awayTeam={awayTeam}
|
|
71
|
+
/>
|
|
72
|
+
);
|
|
36
73
|
}
|
|
37
74
|
```
|
|
38
75
|
|
|
76
|
+
|
|
77
|
+
|
|
39
78
|
|
|
40
79
|
## API
|
|
41
80
|
|
|
42
|
-
Prop
|
|
43
|
-
|
|
44
|
-
`color`
|
|
45
|
-
`size`
|
|
46
|
-
`pattern`
|
|
47
|
-
`
|
|
48
|
-
`
|
|
81
|
+
| Prop | Type | Required | Default value | Description |
|
|
82
|
+
|------------|----------|----------|--------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
|
|
83
|
+
| `color` | `string` | No |  `#588f58` | The pitch background color |
|
|
84
|
+
| `size` | `string` | No | `'normal'` | Pitch dimensions. Supported values: `small`, `normal`, `big`, `responsive`, `fill` |
|
|
85
|
+
| `pattern` | `string` | No | - | The pattern applied to the pitch grass. Supported values: `lines`, `squares`, `circles` |
|
|
86
|
+
| `orientation` | `string` | No | `'horizontal'` | The pitch orientation. Supported values: `horizontal`, `vertical` |
|
|
87
|
+
| `homeTeam` | `Team` | No | - | The home team |
|
|
88
|
+
| `awayTeam` | `Team` | No | - | The away team |
|
|
49
89
|
|
|
50
90
|
#### Team
|
|
51
91
|
|
|
52
|
-
Attribute | Type
|
|
53
|
-
|
|
54
|
-
`squad`
|
|
55
|
-
`style`
|
|
92
|
+
| Attribute | Type | Required | Default value | Description |
|
|
93
|
+
|-----------|---------|----------|---------------|--------------------------|
|
|
94
|
+
| `squad` | `Squad` | Yes | - | The team players by role |
|
|
95
|
+
| `style` | `Style` | No | - | The team style |
|
|
56
96
|
|
|
57
97
|
#### Squad
|
|
58
98
|
|
|
59
|
-
Attribute | Type
|
|
60
|
-
|
|
61
|
-
`gk`
|
|
62
|
-
`df`
|
|
63
|
-
`cdm`
|
|
64
|
-
`cm`
|
|
65
|
-
`cam`
|
|
66
|
-
`fw`
|
|
99
|
+
| Attribute | Type | Required | Default value | Description |
|
|
100
|
+
|-----------|------------|----------|---------------|-----------------------------------------|
|
|
101
|
+
| `gk` | `Player` | No | - | The squad goalkeeper |
|
|
102
|
+
| `df` | `Player[]` | No | - | The squad defenders |
|
|
103
|
+
| `cdm` | `Player[]` | No | - | The squad central defensive midfielders |
|
|
104
|
+
| `cm` | `Player[]` | No | - | The squad central midfielders |
|
|
105
|
+
| `cam` | `Player[]` | No | - | The squad central attack midfielders |
|
|
106
|
+
| `fw` | `Player[]` | No | - | The squad forwards |
|
|
67
107
|
|
|
68
108
|
#### Style
|
|
69
109
|
|
|
70
|
-
Attribute
|
|
71
|
-
|
|
72
|
-
`color`
|
|
73
|
-
`
|
|
74
|
-
`
|
|
75
|
-
|
|
110
|
+
| Attribute | Type | Required | Default value | Description |
|
|
111
|
+
|-------------------------|----------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------|
|
|
112
|
+
| `color` | `string` | No |  `#ffffff` (home) /  `#333333` (away) | The team color |
|
|
113
|
+
| `borderColor` | `string` | No |  `#ffffff` (home) /  `#333333` (away) | The team border color |
|
|
114
|
+
| `numberColor` | `string` | No |  `#333333` (home) /  `#ffffff` (away) | The team number color |
|
|
115
|
+
| `numberBackgroundColor` | `string` | No | - | The team number background color |
|
|
116
|
+
| `pattern` | `string` | No | `'none'` | The team jersey pattern |
|
|
117
|
+
| `patternColor` | `string` | No | - | The team jersey pattern color |
|
|
118
|
+
| `nameColor` | `string` | No |  `#333333` (home) /  `#ffffff` (away) | The team players' name color |
|
|
119
|
+
| `nameBackgroundColor` | `string` | No | - | The team players' name background color |
|
|
120
|
+
|
|
76
121
|
#### Player
|
|
77
122
|
|
|
78
|
-
Attribute | Type
|
|
79
|
-
|
|
80
|
-
`name`
|
|
81
|
-
`number`
|
|
82
|
-
`
|
|
83
|
-
`
|
|
84
|
-
`
|
|
85
|
-
`onCLick` | `Function` | No | - | Callback to invoke when clicking on the player
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
## Live
|
|
123
|
+
| Attribute | Type | Required | Default value | Description |
|
|
124
|
+
|-----------|----------------|----------|----------------|------------------------------------------------|
|
|
125
|
+
| `name` | `string` | No | - | The displayed player name |
|
|
126
|
+
| `number` | `number` | No | - | The displayed player number |
|
|
127
|
+
| `style` | `Style` | No | The team style | The player style |
|
|
128
|
+
| `offset` | `PlayerOffset` | No | - | The player position offset |
|
|
129
|
+
| `onCLick` | `Function` | No | - | Callback to invoke when clicking on the player |
|
|
89
130
|
|
|
90
|
-
|
|
131
|
+
#### PlayerOffset
|
|
91
132
|
|
|
133
|
+
| Attribute | Type | Required | Default value | Description |
|
|
134
|
+
|-----------|----------|----------|---------------|-----------------------|
|
|
135
|
+
| `x` | `number` | No | 0 | The horizontal offset |
|
|
136
|
+
| `y` | `number` | No | 0 | The vertical offset |
|
|
92
137
|
|
|
93
|
-
##
|
|
138
|
+
## Live
|
|
94
139
|
|
|
95
|
-
|
|
140
|
+
Check the playground [here](https://rsl-playground.netlify.app).
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.c8m6j1s{height:20%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.c1ae8d3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:absolute;border-radius:50%;padding-top:4.5%;width:4.5%;font-size:16px;font-weight:600;background:var(--c1ae8d3x-0);-webkit-background-size:var(--c1ae8d3x-1);background-size:var(--c1ae8d3x-1);-webkit-background-position:var(--c1ae8d3x-2);background-position:var(--c1ae8d3x-2);border:var(--c1ae8d3x-3);--offset-x:var(--c1ae8d3x-4);--offset-y:var(--c1ae8d3x-5);-webkit-transform:translateX(var(--offset-x)) translateY(var(--offset-y)) var(--rsl-counter-rotation, rotate(0deg));-moz-transform:translateX(var(--offset-x)) translateY(var(--offset-y)) var(--rsl-counter-rotation, rotate(0deg));-ms-transform:translateX(var(--offset-x)) translateY(var(--offset-y)) var(--rsl-counter-rotation, rotate(0deg));transform:translate(var(--offset-x)) translateY(var(--offset-y)) var(--rsl-counter-rotation, rotate(0deg))}.c1ae8d3x:hover{cursor:var(--c1ae8d3x-6)}.nc3g56z{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);line-height:1;padding:4% 8%;color:var(--nc3g56z-0);background-color:var(--nc3g56z-1);border-radius:4px}.n1nj9eua{position:absolute;bottom:-28px;text-align:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0 6px;color:var(--n1nj9eua-0);background-color:var(--n1nj9eua-1);border-radius:8px}.c14z87d5{height:100%;width:80%;display:inline;margin-left:var(--c14z87d5-0);container-type:size}.sgx9nhj{height:100%;width:100%;float:right;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--sgx9nhj-0);-ms-flex-direction:var(--sgx9nhj-0);flex-direction:var(--sgx9nhj-0)}.gfsog8k{height:100%;width:140%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.l2zm4w1{height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--l2zm4w1-0);-ms-flex-direction:var(--l2zm4w1-0);flex-direction:var(--l2zm4w1-0);-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;-webkit-justify-content:space-evenly;justify-content:space-evenly;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.clgy323{position:relative;overflow:hidden;height:var(--clgy323-0);width:var(--clgy323-1);aspect-ratio:var(--clgy323-2);container-type:var(--clgy323-3)}.c8qpsfv{position:var(--c8qpsfv-0);background-color:var(--c8qpsfv-1);background-image:var(--c8qpsfv-2);-webkit-background-size:contain;background-size:contain;height:var(--c8qpsfv-3);width:var(--c8qpsfv-4);top:var(--c8qpsfv-5);left:var(--c8qpsfv-5);-webkit-transform:var(--c8qpsfv-6);-moz-transform:var(--c8qpsfv-6);-ms-transform:var(--c8qpsfv-6);transform:var(--c8qpsfv-6);--rsl-counter-rotation:var(--c8qpsfv-7)}.ty376cs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;box-sizing:border-box;padding:20px}.ty376cs *>*{box-sizing:content-box}
|
|
@@ -1,127 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
declare type PitchSize = "small" | "normal" | "big" | "responsive" | "fill";
|
|
6
|
-
declare type PitchPattern = "lines" | "squares" | "circles";
|
|
7
|
-
interface PitchProps {
|
|
8
|
-
color?: string;
|
|
9
|
-
size?: PitchSize;
|
|
10
|
-
pattern?: PitchPattern;
|
|
11
|
-
homeTeam?: Team;
|
|
12
|
-
awayTeam?: Team;
|
|
13
|
-
}
|
|
14
|
-
interface PitchState {
|
|
15
|
-
}
|
|
16
|
-
declare class Pitch extends Component<PitchProps, PitchState> {
|
|
17
|
-
static propTypes: {
|
|
18
|
-
color: PropTypes.Requireable<string>;
|
|
19
|
-
size: PropTypes.Requireable<string>;
|
|
20
|
-
pattern: PropTypes.Requireable<string>;
|
|
21
|
-
homeTeam: PropTypes.Requireable<PropTypes.InferProps<{
|
|
22
|
-
squad: PropTypes.Validator<PropTypes.InferProps<{
|
|
23
|
-
gk: PropTypes.Requireable<PropTypes.InferProps<{
|
|
24
|
-
name: PropTypes.Requireable<string>;
|
|
25
|
-
number: PropTypes.Requireable<number>;
|
|
26
|
-
color: PropTypes.Requireable<string>;
|
|
27
|
-
numberColor: PropTypes.Requireable<string>;
|
|
28
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
29
|
-
}>>;
|
|
30
|
-
df: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
31
|
-
name: PropTypes.Requireable<string>;
|
|
32
|
-
number: PropTypes.Requireable<number>;
|
|
33
|
-
color: PropTypes.Requireable<string>;
|
|
34
|
-
numberColor: PropTypes.Requireable<string>;
|
|
35
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
36
|
-
}> | null | undefined)[]>;
|
|
37
|
-
cdm: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
38
|
-
name: PropTypes.Requireable<string>;
|
|
39
|
-
number: PropTypes.Requireable<number>;
|
|
40
|
-
color: PropTypes.Requireable<string>;
|
|
41
|
-
numberColor: PropTypes.Requireable<string>;
|
|
42
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
43
|
-
}> | null | undefined)[]>;
|
|
44
|
-
cm: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
45
|
-
name: PropTypes.Requireable<string>;
|
|
46
|
-
number: PropTypes.Requireable<number>;
|
|
47
|
-
color: PropTypes.Requireable<string>;
|
|
48
|
-
numberColor: PropTypes.Requireable<string>;
|
|
49
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
50
|
-
}> | null | undefined)[]>;
|
|
51
|
-
cam: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
52
|
-
name: PropTypes.Requireable<string>;
|
|
53
|
-
number: PropTypes.Requireable<number>;
|
|
54
|
-
color: PropTypes.Requireable<string>;
|
|
55
|
-
numberColor: PropTypes.Requireable<string>;
|
|
56
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
57
|
-
}> | null | undefined)[]>;
|
|
58
|
-
fw: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
59
|
-
name: PropTypes.Requireable<string>;
|
|
60
|
-
number: PropTypes.Requireable<number>;
|
|
61
|
-
color: PropTypes.Requireable<string>;
|
|
62
|
-
numberColor: PropTypes.Requireable<string>;
|
|
63
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
64
|
-
}> | null | undefined)[]>;
|
|
65
|
-
}>>;
|
|
66
|
-
style: PropTypes.Requireable<PropTypes.InferProps<{
|
|
67
|
-
color: PropTypes.Validator<string>;
|
|
68
|
-
numberColor: PropTypes.Validator<string>;
|
|
69
|
-
}>>;
|
|
70
|
-
}>>;
|
|
71
|
-
awayTeam: PropTypes.Requireable<PropTypes.InferProps<{
|
|
72
|
-
squad: PropTypes.Validator<PropTypes.InferProps<{
|
|
73
|
-
gk: PropTypes.Requireable<PropTypes.InferProps<{
|
|
74
|
-
name: PropTypes.Requireable<string>;
|
|
75
|
-
number: PropTypes.Requireable<number>;
|
|
76
|
-
color: PropTypes.Requireable<string>;
|
|
77
|
-
numberColor: PropTypes.Requireable<string>;
|
|
78
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
79
|
-
}>>;
|
|
80
|
-
df: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
81
|
-
name: PropTypes.Requireable<string>;
|
|
82
|
-
number: PropTypes.Requireable<number>;
|
|
83
|
-
color: PropTypes.Requireable<string>;
|
|
84
|
-
numberColor: PropTypes.Requireable<string>;
|
|
85
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
86
|
-
}> | null | undefined)[]>;
|
|
87
|
-
cdm: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
88
|
-
name: PropTypes.Requireable<string>;
|
|
89
|
-
number: PropTypes.Requireable<number>;
|
|
90
|
-
color: PropTypes.Requireable<string>;
|
|
91
|
-
numberColor: PropTypes.Requireable<string>;
|
|
92
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
93
|
-
}> | null | undefined)[]>;
|
|
94
|
-
cm: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
95
|
-
name: PropTypes.Requireable<string>;
|
|
96
|
-
number: PropTypes.Requireable<number>;
|
|
97
|
-
color: PropTypes.Requireable<string>;
|
|
98
|
-
numberColor: PropTypes.Requireable<string>;
|
|
99
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
100
|
-
}> | null | undefined)[]>;
|
|
101
|
-
cam: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
102
|
-
name: PropTypes.Requireable<string>;
|
|
103
|
-
number: PropTypes.Requireable<number>;
|
|
104
|
-
color: PropTypes.Requireable<string>;
|
|
105
|
-
numberColor: PropTypes.Requireable<string>;
|
|
106
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
107
|
-
}> | null | undefined)[]>;
|
|
108
|
-
fw: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
109
|
-
name: PropTypes.Requireable<string>;
|
|
110
|
-
number: PropTypes.Requireable<number>;
|
|
111
|
-
color: PropTypes.Requireable<string>;
|
|
112
|
-
numberColor: PropTypes.Requireable<string>;
|
|
113
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
114
|
-
}> | null | undefined)[]>;
|
|
115
|
-
}>>;
|
|
116
|
-
style: PropTypes.Requireable<PropTypes.InferProps<{
|
|
117
|
-
color: PropTypes.Validator<string>;
|
|
118
|
-
numberColor: PropTypes.Validator<string>;
|
|
119
|
-
}>>;
|
|
120
|
-
}>>;
|
|
121
|
-
};
|
|
122
|
-
render(): JSX.Element;
|
|
123
|
-
getPitchBackground: (pattern?: "lines" | "squares" | "circles" | undefined) => string;
|
|
124
|
-
getPatternImage: (pattern: PitchPattern) => any;
|
|
125
|
-
renderTeams: (homeTeam?: Team | undefined, awayTeam?: Team | undefined) => JSX.Element;
|
|
126
|
-
}
|
|
127
|
-
export default Pitch;
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { PitchViewProps } from './Pitch.types.ts';
|
|
3
|
+
declare const PitchView: React.FC<PitchViewProps>;
|
|
4
|
+
export default PitchView;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Team } from './team/Team.types.ts';
|
|
2
|
+
export interface PitchViewProps {
|
|
3
|
+
color?: string;
|
|
4
|
+
size?: PitchSize;
|
|
5
|
+
pattern?: PitchPattern;
|
|
6
|
+
orientation?: PitchOrientation;
|
|
7
|
+
homeTeam?: Team;
|
|
8
|
+
awayTeam?: Team;
|
|
9
|
+
}
|
|
10
|
+
export type PitchSize = 'small' | 'normal' | 'big' | 'responsive' | 'fill';
|
|
11
|
+
export type PitchPattern = 'lines' | 'squares' | 'circles';
|
|
12
|
+
export type PitchOrientation = 'horizontal' | 'vertical';
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export interface TeamViewProps {
|
|
2
|
+
away?: boolean;
|
|
3
|
+
team: Team;
|
|
4
|
+
}
|
|
5
|
+
export type Team = {
|
|
6
|
+
squad: Squad;
|
|
7
|
+
style?: TeamStyle;
|
|
8
|
+
};
|
|
9
|
+
export type Squad = {
|
|
10
|
+
gk?: Player | null | undefined;
|
|
11
|
+
df?: (Player | null | undefined)[];
|
|
12
|
+
cdm?: (Player | null | undefined)[];
|
|
13
|
+
cm?: (Player | null | undefined)[];
|
|
14
|
+
cam?: (Player | null | undefined)[];
|
|
15
|
+
fw?: (Player | null | undefined)[];
|
|
16
|
+
};
|
|
17
|
+
export type Player = {
|
|
18
|
+
name?: string;
|
|
19
|
+
number?: number;
|
|
20
|
+
style?: PlayerStyle;
|
|
21
|
+
offset?: PlayerOffset;
|
|
22
|
+
onClick?(): void;
|
|
23
|
+
};
|
|
24
|
+
export type PlayerStyle = TeamStyle;
|
|
25
|
+
export type TeamStyle = {
|
|
26
|
+
color?: string;
|
|
27
|
+
borderColor?: string;
|
|
28
|
+
numberColor?: string;
|
|
29
|
+
numberBackgroundColor?: string;
|
|
30
|
+
nameColor?: string;
|
|
31
|
+
nameBackgroundColor?: string;
|
|
32
|
+
pattern?: PlayerPattern;
|
|
33
|
+
patternColor?: string;
|
|
34
|
+
};
|
|
35
|
+
export type PlayerPattern = 'lines' | 'thin-lines' | 'thick-lines' | 'stripes' | 'thin-stripes' | 'thick-stripes' | 'line' | 'thin-line' | 'thick-line' | 'stripe' | 'thin-stripe' | 'thick-stripe' | 'bar' | 'thin-bar' | 'thick-bar' | 'bars' | 'thin-bars' | 'thick-bars' | 'left-half' | 'right-half' | 'top-half' | 'bottom-half' | 'left-slash' | 'left-thin-slash' | 'left-thick-slash' | 'right-slash' | 'right-thin-slash' | 'right-thick-slash' | 'cross' | 'x' | 'squares' | 'none';
|
|
36
|
+
export type PlayerOffset = {
|
|
37
|
+
x?: number;
|
|
38
|
+
y?: number;
|
|
39
|
+
};
|
package/dist/main.d.ts
ADDED