Lineups: a ballpark with the designated hitter

Baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Data: Lineup in Baseball, standard defence: 10 players. Players: Cole (Pitcher), Rutschman (Catcher), Alonso (First baseman), Albies (Second baseman), Witt (Shortstop), Ramirez (Third baseman), Soto (Left fielder), Trout (Centre fielder), Judge (Right fielder), Ohtani (Designated hitter). The nine fielders where they usually stand: a straight infield and the outfielders in their fields.Lineup in Baseball, standard defence: 10 playersPlayers: Cole (Pitcher), Rutschman (Catcher), Alonso (First baseman), Albies (Second baseman), Witt (Shortstop), Ramirez (Third baseman), Soto (Left fielder), Trout (Centre fielder), Judge (Right fielder), Ohtani (Designated hitter). The nine fielders where they usually stand: a straight infield and the outfielders in their fields.Pitcher: Cole 1Catcher: Rutschman 2First baseman: Alonso 3Second baseman: Albies 4Shortstop: Witt 5Third baseman: Ramirez 6Left fielder: Soto 7Centre fielder: Trout 8Right fielder: Judge 9Designated hitter: Ohtani 101Cole2Rutschman3Alonso4Albies5Witt6Ramirez7Soto8Trout9Judge10Ohtani

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 codes = ["P", "C", "1B", "2B", "SS", "3B", "LF", "CF", "RF", "DH"];
const names = ["Cole", "Rutschman", "Alonso", "Albies", "Witt", "Ramirez", "Soto", "Trout", "Judge", "Ohtani"];
const players = codes.map((pos, i) => ({ pos, name: names[i], number: i + 1 }));
const svg = drawKyogijo({ sport: "mlb", layers: [{ kind: "lineup", shape: "jersey", players }] });

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.