Como montar uma timeline de eventos do jogo

How to build a match events timeline

O endpoint /fixtures/events retorna todos os eventos de um jogo: gols, cartoes, substituicoes e decisoes do VAR. Neste tutorial veremos como buscar e renderizar uma timeline visual.

The /fixtures/events endpoint returns all match events: goals, cards, substitutions and VAR decisions. In this tutorial we'll fetch and render a visual timeline.

1. Buscar eventos / Get events

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

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

const events = await getEvents(1234567);

Resposta da API / API response:

{
  "get": "fixtures/events",
  "results": 14,
  "response": [
    {
      "time": { "elapsed": 15, "extra": null },
      "team": { "id": 131, "name": "Corinthians" },
      "player": { "id": 195548, "name": "Yuri Alberto" },
      "assist": { "id": 1100, "name": "Memphis Depay" },
      "type": "Goal",
      "detail": "Normal Goal",
      "comments": null
    },
    {
      "time": { "elapsed": 28, "extra": null },
      "team": { "id": 131, "name": "Corinthians" },
      "player": { "id": 153490, "name": "Felix Torres" },
      "assist": { "id": null, "name": null },
      "type": "Card",
      "detail": "Yellow Card",
      "comments": "Foul"
    },
    {
      "time": { "elapsed": 48, "extra": null },
      "team": { "id": 127, "name": "Flamengo" },
      "player": { "id": 25218, "name": "Arrascaeta" },
      "assist": { "id": 31026, "name": "Gerson" },
      "type": "Goal",
      "detail": "Normal Goal",
      "comments": null
    },
    ...
  ]
}

2. Tipos de evento / Event types

Goal — Gol normal, penalti, gol contra (detail: Normal Goal, Penalty, Own Goal)
Card — Cartao amarelo ou vermelho (detail: Yellow Card, Red Card, Second Yellow card)
subst — Substituicao. player = quem entrou, assist = quem saiu
Var — Decisao do VAR (detail: Goal cancelled, Penalty confirmed, etc.)

3. Renderizar a timeline / Render the timeline

function renderTimeline(events) {
  const icons = {
    Goal: '⚽',
    Card: '🟧',
    subst: '🔄',
    Var: '📺'
  };

  events.forEach(e => {
    const min = e.time.elapsed + (e.time.extra ? `+${e.time.extra}` : '');
    const icon = icons[e.type] || '●';
    let text = `${e.player.name}`;

    if (e.type === 'Goal' && e.assist.name) {
      text += ` (assist: ${e.assist.name})`;
    }
    if (e.type === 'subst') {
      text += ` replaces ${e.assist.name}`;
    }
    if (e.type === 'Card') {
      text += ` — ${e.detail}`;
    }

    console.log(`${min}' ${icon} ${text} (${e.team.name})`);
  });
}

15' ⚽ Yuri Alberto (assist: Memphis Depay) (Corinthians)
28' 🟧 Felix Torres — Yellow Card (Corinthians)
48' ⚽ Arrascaeta (assist: Gerson) (Flamengo)
56' 🔄 Romero replaces Rodrigo Garro (Corinthians)
67' ⚽ Pedro (assist: Gerson) (Flamengo)
75' 🟧 Felix Torres — Second Yellow card (Corinthians)
83' ⚽ Pedro (assist: Arrascaeta) (Flamengo)

Tempo real: Em jogos ao vivo, os eventos sao adicionados conforme acontecem. O cache do CDN e de 30 segundos, entao poll a cada 30s para ver novos eventos.
Real-time: During live matches, events are added as they happen. CDN cache is 30 seconds, so poll every 30s to see new events.

4. Acrescimos / Stoppage time

O campo time.extra indica minutos de acrescimo. Se elapsed e 45 e extra e 2, o evento aconteceu aos 45+2'.

function formatMinute(time) {
  if (time.extra) return `${time.elapsed}+${time.extra}'`;
  return `${time.elapsed}'`;
}

Back to Football API docs