Como renderizar a escalacao de um jogo

How to render a match lineup / formation view

O endpoint /fixtures/lineups retorna a escalacao de ambos os times com a formacao e posicao dos jogadores em uma grade.

The /fixtures/lineups endpoint returns both teams' lineups with formation and player positions on a grid.

1. Buscar escalacao / Get lineup

const API_KEY = 'YOUR_API_KEY';
const BASE = 'https://football.api.insyde.one';

async function getLineup(fixtureId) {
  const url = `${BASE}/fixtures/lineups?fixture=${fixtureId}&key=${API_KEY}`;
  const res = await fetch(url);
  const data = await res.json();
  return data.response;
}

const lineups = await getLineup(1234567);
// lineups[0] = home team, lineups[1] = away team

Resposta / Response:

{
  "team": { "id": 127, "name": "Flamengo", "colors": { "player": { "primary": "cc0000" } } },
  "coach": { "name": "Filipe Luis" },
  "formation": "4-3-3",
  "startXI": [
    { "player": { "id": 9930, "name": "Rossi", "number": 1, "pos": "G", "grid": "1:1" } },
    { "player": { "id": 330082, "name": "Wesley", "number": 43, "pos": "D", "grid": "2:4" } },
    { "player": { "id": 195186, "name": "Fabricio Bruno", "number": 15, "pos": "D", "grid": "2:3" } },
    ...
  ],
  "substitutes": [
    { "player": { "id": 12345, "name": "David Luiz", "number": 23, "pos": "D" } },
    ...
  ]
}

2. Entender o campo grid / Understanding the grid field

Cada jogador titular tem um campo grid no formato "row:col". O goleiro esta na linha 1, defensores na linha 2, e assim por diante.

• "1:1" — Goleiro (unico na linha 1) / Goalkeeper (alone in row 1)
• "2:1" a "2:4" — Defensores / Defenders
• "3:1" a "3:3" — Meio-campistas / Midfielders
• "4:1" a "4:3" — Atacantes / Forwards

3. Posicionar jogadores no campo / Position players on the pitch

function gridToPixel(grid, pitchW, pitchH) {
  const [row, col] = grid.split(':').map(Number);

  // Count players in each row to distribute horizontally
  const rowPlayers = startXI.filter(p => {
    return p.player.grid.startsWith(row + ':');
  });

  const totalRows = 4; // typical for most formations
  const y = pitchH - (row / totalRows) * (pitchH * 0.85) - pitchH * 0.08;
  const x = (col / (rowPlayers.length + 1)) * pitchW;

  return { x, y };
}

4. Resumo / Summary

1. Chamar /fixtures/lineups?fixture=ID para obter as escalacoes / Call to get lineups
2. A resposta inclui dois times (home index 0, away index 1) / Response includes both teams
3. Usar o campo grid para posicionar jogadores em um campo SVG / Use grid to position on SVG pitch
4. Substitutos estao na lista substitutes sem campo grid / Subs are in substitutes without grid

Back to Football API docs