Reference

SVG board

import { … } from "@johnmorrisdotca/tsunagi/draw";

13.7 kB minified and gzipped, with everything it imports (measured with esbuild)

Tsunagi's drawing: a board as SVG text, with its colour sets, its boards, the style that gives the drawing its look, and where everything sits in it (so a page can tell which cell a finger is over). A separate entry (@johnmorrisdotca/tsunagi/draw), so a server that only checks an answer never loads any of it.

Exports

Name	Kind	What it is
`beadShades`	function	A marble on a line's way between its ends: the pair's colour, or for numbers the line's own soft tint, with nothing written on it.
`CELL`	constant	How wide a cell is in the drawing's units.
`cellAtPoint`	function	The cell under a point of the drawing, or null where there is none: off the board, in the frame, on a hexagon's missing corner.
`colourOfPair`	function	The colour of a pair in a set, round and round.
`COORDINATE_ROOM`	constant	The room the row numbers and column letters take on every side, where they are drawn.
`drawTsunagi`	function	A board as SVG text, with the lines in `options.lines` drawn on it.
`drawTsunagiCode`	function	A level's layout code drawn, or an empty string for a code that is no layout at that size.
`drawTsunagiMarble`	function	One marble on its own, as SVG text: for a legend or an icon.
`drawTsunagiPair`	function	What one pair's line is made of in a drawing, for a page that keeps a drawing in its DOM and redraws only the pair whose line changed: its washes and its little marbles, each to go inside the group of that pair's (`.tsu-washes > [data-pair]` and `.tsu-beads > [data-pair]`, and `.tsu-ghosts > [data-pair]` on a board that wraps), and its line (a `.tsu-line` for the `.tsu-lines` group, to replace any of that pair's).
`FRAME`	constant	The frame round the playing surface, in the drawing's units.
`GeometryOptions`	type	Coordinate labels and wrap ghost-cell choices for geometry.
`HEX_RADIUS`	constant	A hexagon's centre to its corner, in cells: a pointy-top hexagon one cell wide.
`hexagonPoints`	function	A hexagon's corners about a centre, pointy at the top, as an SVG points list.
`hsl`	function	A colour as a CSS string, lightened or darkened by `shift` percentage points, at an opacity.
`lineColour`	function	The stroke a pair's line is drawn in: its colour, or a soft tint of it for numbers.
`lineRuns`	function	A line as the runs it is drawn in, each a list of points through its cells' middles.
`marbleShades`	function	A marble's shading: the highlight at its upper left, its body, and its rim, and the ink its number is written in.
`PORTAL_STUB`	constant	How far from the middle of a portal's cell a line stops going in, and starts coming out, as a share of a cell: just inside the ring.
`portalMark`	function	The mark of portal `index`, from 0: its Greek letter, or its number once the letters are used up.
`round`	function	A number as short as it can be written for a drawing: two places.
`TSUNAGI_BOARD_NAMES`	constant	The ready-made boards.
`TSUNAGI_BOARDS`	constant	Every ready-made board's look.
`TSUNAGI_COLOUR_SET_NAMES`	constant	The colour sets there are.
`TSUNAGI_COLOUR_SETS`	constant	Every set carries a colour for each of the eighty-two pairs a board can have (`PAIR_LETTERS`): its sixteen, which every board to 15×15 has been drawn in, then the same hues again turned round the colour wheel and made lighter or darker, round after round, so that no two pairs of a 30×30 board wear exactly one colour.
`TSUNAGI_DEFAULT_BOARD`	constant	The default: paper, which takes its colours from the page (`--tsu-paper` and the rest of `TSUNAGI_STYLE`), light or dark.
`TSUNAGI_DEFAULT_COLOUR_SET`	constant	The sets' default: the one itsutsu.com plays in.
`TSUNAGI_PORTAL_COLOURS`	constant	The colours and the marks of a board's portals: the two rings of a portal are drawn alike, in one of these colours and with one of these letters, so that they can be told from any other pair and from a marble.
`TSUNAGI_PORTAL_GLYPHS`	constant	The letters that mark portals: Greek, which no marble or number is.
`TSUNAGI_SHELL`	constant	The plain shell marble a number is written on: highlight, body, rim, and the ink.
`TSUNAGI_STRINGS`	constant	Native board words, with the same keys in every shipped language.
`TSUNAGI_STYLE`	constant	THE STYLE a Tsunagi drawing wears: the colours of its board as custom properties, the two things that move (a flashing ring round a marble Check found unjoined, and the burst where an explosion took a line out), and the one rule that matters for a puzzle played with fingers: nothing in the drawing can be selected, dragged or double-tapped.
`tsunagiBoardLook`	function	A board as asked: a ready-made one by name, or a look of your own.
`TsunagiBoardLook`	type	What a board is made of: every part a CSS colour.
`TsunagiBoardName`	type	A supported named native board appearance.
`TsunagiColour`	type	A colour as hue (0 to 360), saturation and lightness (each 0 to 100).
`tsunagiColourSet`	function	A colour set as asked: one of the named sets, or colours of your own (used round and round when a board has more pairs than you gave).
`TsunagiColourSetName`	type	A supported named palette for the native board.
`TsunagiDrawOptions`	type	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.
`TsunagiFill`	type	Marbles along every line (the dots), or the line alone.
`tsunagiGeometry`	function	The geometry of a layout's drawing.
`TsunagiGeometry`	type	The board dimensions, cell centres and playable-cell mapping used by SVG and pointer input.
`TsunagiLanguage`	type	THE WORDS A TSUNAGI BOARD SAYS, in English and Japanese: what a screen reader hears of the drawing, the buttons and the lines under a playable board, and what each challenge on a level means.
`tsunagiLanguageOf`	function	The language a piece of text is in: Japanese for anything starting `ja`, English for everything else.
`TsunagiMarks`	type	How the pairs are told apart: by colour, or by the number on each pair's marbles.
`TsunagiPoint`	type	A point in the drawing.
`tsunagiSay`	function	A line in a language, with its values filled in; the line itself if there is none by that name.
`washColour`	function	The faint wash a line leaves on the cells it runs through.

View source Edit on GitHubMade from the source of @johnmorrisdotca/tsunagi 1.7.0.