A frame of a replay: the pitch

The same on the pitch, in Opta's frame, with a trail of three seconds and the goal marked by a star.

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: Replay, 0:08. 7 tracked objects. By team: home 4, away 2, ball 1. 2 events.Trail of the last 3 seconds1 eventBy outcome: goal 1. By team: home 1.Goal, home, 0:06PlayersBy team: home 4, away 2.home 1home 4home 8home 9away 5away 1Shirt numbers148951ball, puckball

The picture above was drawn when the docs were built. The script below draws it again with the published package.

import { drawFrame } from "@johnmorrisdotca/kyogijo-stadiums/replay";

const spot = (id, team, number, x, y, t) => ({ id, team, number, x: x + 4 * Math.sin(t / 1.7 + number), y: y + 5 * Math.cos(t / 1.3 + number) });
const frames = Array.from({ length: 41 }, (_, i) => {
  const t = i / 5;
  const objects = [spot("h1", "home", 1, 4, 50, t), spot("h4", "home", 4, 30, 35, t), spot("h8", "home", 8, 50, 55, t), spot("h9", "home", 9, 72, 45, t), spot("a5", "away", 5, 66, 60, t), spot("a1", "away", 1, 96, 50, 0)];
  const ball = objects[Math.min(3, Math.floor(t / 2))];
  return { t, possession: ball.id, objects: [...objects, { id: "ball", team: "ball", x: ball.x, y: ball.y }] };
});
const events = [{ t: 2, kind: "pass", team: "home", by: "h4", to: "h8", until: 2.4 }, { t: 6, kind: "goal", team: "home", x: 100, y: 48 }];
const svg = drawFrame({ sport: "soccer" }, { from: "opta", frames, events }, 6.4, { trail: 3 });

This page imports the package from jsDelivr (major version 0), which serves only versions that have been published to npm. A feature added after the last release is not in it: the page then keeps the picture above and says why. The docs were built from version 0.6.1.