A frame of a replay: the rink

Tracking data in the NHL API's frame, played on the rink: the players with their numbers, the puck with its trail, and the events that are on the surface at 7.8 seconds (the pass has gone, the shot is on its way). Played, with controls, it is mountKyogijo(...).replay(...).

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 skater = (id, team, number, x, y, t) => ({ id, team, number, x: x + 6 * Math.sin(t / 1.4 + number), y: y + 4 * Math.cos(t / 1.1 + number) });
const frames = Array.from({ length: 51 }, (_, i) => {
  const t = i / 5;
  const objects = [skater("h9", "home", 9, 30, 0, t), skater("h17", "home", 17, 48, 18, t), skater("h28", "home", 28, 48, -18, t), skater("a4", "away", 4, 62, 8, t), skater("a8", "away", 8, 62, -8, t), skater("a31", "away", 31, 89, 0, 0)];
  const puck = objects[Math.min(2, Math.floor(t / 3.5))];
  return { t, objects: [...objects, { id: "puck", team: "puck", x: puck.x, y: puck.y }] };
});
const events = [
  { t: 3.5, kind: "pass", team: "home", by: "h9", to: "h17", until: 4 },
  { t: 7, kind: "shot", team: "home", by: "h28", x2: 89, y2: 2, until: 7.6 },
];
const svg = drawFrame({ sport: "nhl" }, { from: "nhl-api", frames, events }, 7.8);

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.