Player configuration

Player properties

Each player can have the following properties:

type Player = {
  name?: string;
  number?: number;
  style?: PlayerStyle;
  offset?: PlayerOffset;
  onClick?(): void;
};

Basic Player

Providing an empty object displays just the player marker:

const player: Player = { };

Player with number

Optionally, you can provide a jersey number:

const player: Player = { number: 7 };

Player with name

Or a name to display below the player:

const player: Player = {
  name: 'C. Ronaldo',
  number: 7
};

1

2

5

4

3

6

10

8

11

7

C. Ronaldo

9

Player styling

Override team styles for specific players:

const captain: Player = {
  name: 'Captain',
  number: 7,
  style: {
    color: '#ffd700', // Gold background
    numberColor: '#333',
    nameColor: '#333',
    nameBackgroundColor: '#ffd700'
  }
};

1

2

5

4

3

6

10

8

11

7

Captain

9

Position offset

Fine-tune player positions with the offset attribute:

Offset	Direction
x positive	Right
x negative	Left
y positive	Down
y negative	Up

const player: Player = {
  name: 'C. Ronaldo',
  number: 7
  offset: {
    x: 10,
    y: 10
  }
};

1

2

5

4

3

6

10

8

11

7

C. Ronaldo

9

Click handler

Add interactivity with onClick:

const player: Player = {
  name: 'C. Ronaldo',
  number: 7
  onClick: () => {
    console.log('Player clicked!');
    // Show player stats, open modal, etc.
  }
};

When onClick is provided, the player shows a pointer cursor on hover.