Team configuration

Team properties

A team consists of a squad (player positions) and optional style (visual appearance).

type Team = {
  squad: Squad;
  style?: TeamStyle;
};

Squad positions

The squad object defines players at different positions on the pitch:

type Squad = {
  gk?: Player;        // Goalkeeper
  df?: Player[];      // Defenders
  cdm?: Player[];     // Central Defensive Midfielders
  cm?: Player[];      // Central Midfielders
  cam?: Player[];     // Central Attacking Midfielders
  fw?: Player[];      // Forwards
};

Each position (except goalkeeper) accepts an array of players that will be distributed evenly across that line.

Basic team example

const team: Team = {
  squad: {
    gk: { number: 1 },
    df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
    cm: [{ number: 6 }, { number: 8 }, { number: 10 }],
    fw: [{ number: 9 }, { number: 11 }, { number: 7 }]
  }
};

1

2

4

5

3

6

8

10

9

11

7

Empty slots

Use null in arrays to create gaps in formation lines. For example, representing a player who has been sent off:

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 }, null, { number: 5 }, { number: 3 }],
  cm: [{ number: 6 }, { number: 8 }],
  cam: [{ number: 11 }, { number: 10 }, { number: 7 }],
  fw: [{ number: 9 }]
};

1

2

5

3

6

8

11

10

7

9

Or use gaps intentionally to create your perfect formation:

const squad: Squad = {
  gk: { number: 1 },
  df: [null, { number: 5 }, { number: 4 }, { number: 6 }, null],
  cdm: [{ number: 2 }, null, null, null, { number: 3 }],
  cm: [{ number: 10 }, { number: 8 }],
  cam: [{ number: 11 }, null, null, { number: 7 }],
  fw: [{ number: 9 }]
};

1

5

4

6

2

3

10

8

11

7

9

Team styling

Customize team appearance with the style property:

const team: Team = {
  squad: {
    gk: { number: 1, name: "Goalkeeper" },
    df: [
      { number: 2, name: "Right Defender" },
      { number: 4, name: "Defender" },
      { number: 5, name: "Defender" },
      { number: 3, name: "Left Defender" }
    ],
    cm: [
      { number: 6, name: "Right Midfielder" },
      { number: 8, name: "Central Midfielder" },
      { number: 10, name: "Left Midfielder" }
    ],
    fw: [
      { number: 9, name: "Right Forward" },
      { number: 11, name: "Forward" },
      { number: 7, name: "Left Forward" }
    ]
  },
  style: {
    color: '#eed49f',
    borderColor: '#333',
    numberColor: '#333',
    numberBackgroundColor: '#eed49f',
    pattern: 'stripes',
    patternColor: '#333',
    nameColor: '#333',
    nameBackgroundColor: '#eed49fdd'
  }
};

1

Goalkeeper

2

Right Defender

4

Defender

5

Defender

3

Left Defender

6

Right Midfielder

8

Central Midfielder

10

Left Midfielder

9

Right Forward

11

Forward

7

Left Forward

Pattern valid values

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

Default values

Property	Home Team	Away Team
color	#ffffff	#333333
borderColor	#ffffff	#333333
numberColor	#333333	#ffffff
numberBackgroundColor	'transparent'	'transparent'
nameColor	#333333	#ffffff
nameBackgroundColor	'transparent'	'transparent'
pattern	’none'	'none’
patternColor	'transparent'	'transparent'