tenkaMapSvgfunction

THE WORLD AS AN SVG ELEMENT, drawn from a model (tenkaMapModel): the sea, each territory in its owner's colour, the continents' borders and the sea links, the rings of a choice, and a counter of armies on each. Every territory's shape and counter carries data-territory with its number, so one listener on the element can tell which was pressed, and each shape data-owner and data-armies as well.

label is the drawing's accessible name; view the part of the map to show (continentView); pixels the drawing's width on the screen, so that counters and rings are one size whatever is shown. A territory is a button to a screen reader and can be focused (not by Tab: tabindex is -1, for the page to choose which one Tab lands on); describe words what a reader hears for each, and keys is the drawing's description.

import { tenkaMapSvg } from "@johnmorrisdotca/tenka/ui";

function tenkaMapSvg(model: TenkaMapModel, options?: { label?: string; view?: TenkaView; pixels?: number; describe?: (land: TenkaLand) => string; keys?: string; }): SVGSVGElement

import { startTenka } from "@johnmorrisdotca/tenka";
import { tenkaMapModel, tenkaMapSvg } from "@johnmorrisdotca/tenka/ui";

const game = startTenka(10,["Seat 1","Seat 2"],42)!;
const svg = tenkaMapSvg(tenkaMapModel(game),{label:"World conquest"});
document.body.append(svg);
console.log(svg.tagName);