With a drive chart

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. Drawn as: an American football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone. Drive by Harbour City Gulls, from own 25 to own 48: punt. Drive by Harbour City Gulls, from own 30 to opponent's 0: touchdown. Drive by Harbour City Gulls, from own 20 to opponent's 38: field goal. Drive by Prairie Ridge Bison, from own 25 to own 40: interception.HARBOUR CITY GULLSPRAIRIE RIDGE BISON102030405040302010010203040504030201PUNTTDFGINT3rd & 7OPP 12HCG27PRB24–Live

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

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

const svg = drawKyogijo({
  sport: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  situation: {
    ballOn: 88,
    toGo: 7,
    down: 3,
    possession: "away",
    drive: [
      { from: 25, to: 48, result: "punt" },
      { from: 30, to: 100, result: "touchdown" },
      { from: 20, to: 62, result: "field-goal" },
      { team: "home", from: 25, to: 40, result: "interception" },
    ],
  },
});

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.