TsunagiDrawOptionstype
DRAWING a board as SVG text: a string, to put in a page, a file or an image, with nothing to load and nothing run. Every picture here is made in code.
What is drawn is what the site that grew this package draws: marbles on a
board, the lines between them as thick rounded strokes through the cells'
middles, every cell a line runs through washed faintly in its colour and (as
fill: "marbles") holding a small marble of that colour too, so a finished
board is a board of marbles joined by their lines. Walls are thick bars on
the edge between two cells. A BRIDGE is drawn as a bridge: the line going
down passes UNDER its deck and is lost beneath it, and the line going across
is drawn over the deck. A waypoint is a ring in its line's colour. A board
that wraps has a ghost of the far edge all round it, faded, with a dashed rim
round the real board, and a line across the join is drawn out through one
edge and in through the other. A hexagon is a honeycomb of hexagons.
The drawing holds still: the same board is the same box whatever is drawn on it, and a page redraws it as lines change. Colours and numbers on the marbles, dots or only lines, a colour set and a board are all options.
Import it
import type { TsunagiDrawOptions } from "@johnmorrisdotca/tsunagi/draw";Definition
type TsunagiDrawOptions = {
lines?: Lines;
marks?: TsunagiMarks;
fill?: TsunagiFill;
colours?: TsunagiColourSetName | readonly TsunagiColour[];
board?: TsunagiBoardName | TsunagiBoardLook;
coordinates?: boolean;
ghosts?: boolean;
flagged?: Iterable<number>;
blasted?: Iterable<number>;
done?: boolean;
language?: TsunagiLanguage;
label?: string;
style?: boolean;
id?: string;
};Members
| Name | Type | Description |
|---|---|---|
lines (optional) | Lines | undefined | The lines drawn so far, one list of cells for each pair ( |
marks (optional) | TsunagiMarks | undefined | Tell the pairs apart by colour (the default) or by the number on their marbles. |
fill (optional) | TsunagiFill | undefined | A small marble in every cell a line runs through ( |
colours (optional) | "marble" | "bright" | "colour-blind" | "soft" | readonly TsunagiColour[] | undefined | The colour of each pair: a named set ( |
board (optional) | "paper" | "wood" | "green" | "blue" | "red" | "black" | TsunagiBoardLook | undefined | The board it is drawn on: |
coordinates (optional) | boolean | undefined | Row numbers and column letters down the board's sides. Not drawn on a board that wraps or a hexagon. |
ghosts (optional) | boolean | undefined | The ghost of the far edge round a board that wraps. Default true. |
flagged (optional) | Iterable<number> | undefined | Pairs whose marbles flash: the ones Check found not joined yet. |
blasted (optional) | Iterable<number> | undefined | Cells an explosion has just taken a line out of: each bursts. |
done (optional) | boolean | undefined | The board is solved: a faint wash of green over it, and |
language (optional) | TsunagiLanguage | undefined | The language a screen reader hears the drawing in: |
label (optional) | string | undefined | A description for screen readers, instead of the board's size. |
style (optional) | boolean | undefined | Put |
id (optional) | string | undefined | The prefix of the ids the drawing's gradients and mask are given, so two drawings on one page never share one. Made from the drawing itself, if left out. |
Examples
import type { TsunagiDrawOptions } from "@johnmorrisdotca/tsunagi/draw";
const value: TsunagiDrawOptions = {marks:"numbers",coordinates:true};
console.log(value);{ marks: 'numbers', coordinates: true }What it prints (run when this page was built)