Reference

SVG faces and looks

import { … } from "@johnmorrisdotca/jarajara/faces";

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

The tiles, drawn: each of the 42 faces as SVG text, a tile on its own, its back, and a whole layout of stacked tiles, on a cloth if you like. Strings, not components, so they go into any page with any framework or none.

Exports

Name	Kind	What it is
`backBase`	function	The colour of a back's plate, which is also the colour of the tile's thickness seen from the back: a built-in back's own base (with the caller's `colour`), a design's body, or null for a name with no back here.
`blockColours`	function	The colours of a design's blocks, from its own: the back plate is `colours.body` (the green of most real tiles unless the design says another, or the caller's `body`), the ivory layer a shade of the face, and the seam round the face is the design's `rim` if it stands out from the face, otherwise a line that does: darker on a light face, lighter on a dark one.
`BlockColours`	type	The colours a block is drawn in.
`BlockDirection`	type	Which way a view lifts the layers and shows the thickness: `x` is 1 when each layer is lifted to the right (and the thickness shows on the left), -1 the other way round; `y` is 1 when it is lifted upward (thickness below), -1 downward.
`blockSvg`	function	The block drawn behind a face: the back plate and the ivory layer in steps from the far side to the face, and the shading of the sides (the side the light falls on lighter, the other darker).
`Cloth`	type	A cloth's name.
`CLOTHS`	constant	The cloths, in the order the family lists them.
`clothVars`	function	A cloth as CSS custom properties (`--jarajara-felt`, `--jarajara-felt-deep`, `--jarajara-felt-ink`); nothing for a name that is not a cloth.
`directionOf`	function	The direction a view draws in.
`faceEdgeSvg`	function	The outline and the raised edge laid over a face, in the face's own units.
`faceWords`	function	What a face is called, in English: "3 of characters", "east wind", "red dragon", "plum (flower)".
`isBuiltInBack`	function	Whether a name is one of the five backs drawn here.
`isCloth`	function	Whether a text names a cloth.
`isTileDesignName`	function	Whether a text names one of the designs.
`isTileMirror`	function	Whether a text names a view.
`JARAJARA_CLOTHS`	constant	THE CLOTHS A TABLE MAY BE LAID IN: the same five the whole family offers, and itsutsu.com's boards: green (the family's own), blue, red, black, and wood.
`jarajaraDesign`	function	Jarajara's own design as a design, made the first time it is asked for: the 42 faces, its jade back and the plain ivory tile.
`layoutBox`	function	The drawing's width and height for a layout's size, room left for the thickness and the layers.
`layoutFrame`	function	THE TILES' DRAWN EXTENT, plus an even margin: the smallest box that holds every tile of a layout as it is drawn, with its thickness and its layer offsets, in whichever view (`mirror`) puts them.
`LayoutFrame`	type	The drawing's viewBox: where it starts and how large it is, in the face's units.
`layoutSvg`	function	The whole layout as one `<svg>`, the tiles in `cells` where they lie (a face letter a slot, "." for one taken).
`LayoutSvgOptions`	type	Native tile, highlight, artwork, cloth and layout-view choices for SVG rendering.
`loadTileDesign`	function	A design by name.
`RED_FIVE_CODES`	constant	The codes of the fives of characters, circles and bamboo: the tiles a set may make red.
`redFiveIndexes`	function	WHICH TILES OF A LIST ARE THE RED FIVES.
`shadowSvg`	function	The shadow a tile casts on what lies under it: soft, in three widening layers, falling the way the thickness shows and reaching further the higher the tile (`layer` 0 is a tile on the table: a tight contact shadow).
`TILE_BACKS`	constant	THE BACKS OF THE TILES, drawn as SVG in the tile's own 30 by 40: what a tile lying face down shows.
`TILE_BODY`	constant	The tile itself: its ivory face, the rim round it, the bone of its side (the sliver a flat picture shows) and the green of the back plate its thickness is drawn in.
`TILE_BOX`	constant	The box a solid tile is drawn in, in the face's units: the face, its thickness down and to the left, and a margin for the outlines.
`TILE_DEPTH`	constant	How thick a tile is, and so how far each layer is lifted, in the face's units.
`TILE_DESIGNS`	constant	THE DESIGNS A TILE MAY BE DRAWN IN.
`TILE_FONT`	constant	The fonts the characters are drawn in, Japanese serif first; a page may load its own and name it here.
`TILE_INK`	constant	The inks a face is drawn in.
`TILE_MARKS`	constant	The marks a page may put on tiles: the one chosen, ones hinted, the matches Find lights, and a wash over the blocked.
`TILE_MIRRORS`	constant	The ways a board may be looked at: as it is, turned left to right, turned top to bottom, or both.
`TILE_SIZE`	constant	THE FACES OF THE TILES, as SVG text: a Japanese-style set in the plainest strokes that still read at thirty pixels.
`tileAt`	function	Where a slot's tile face is drawn, raised by its layer along the thickness's direction.
`tileBackDrawing`	function	The back of a tile in a design, plate and pattern, fitted to the tile's 30 by 40.
`tileBackFace`	function	A back's plate and pattern in the tile's 30 by 40, without the sliver of side or the `<svg>`: the inside of a `<symbol>`, or the back an element puts behind a tile it turns over.
`TileBackName`	type	A back's name: one of the five drawn here, or a design's own (`riichi`, `riichi-black`).
`TileBackOptions`	type	How a back is drawn.
`tileBackSvg`	function	One tile's back on its own, as a whole `<svg>` in the same box as `tileSvg`: the back plate over a solid block, its thickness showing on two sides (the back plate's own colour, with the ivory layer beyond it).
`tileBodySvg`	function	The tile's own plate in a design, fitted to the tile's 30 by 40; null for a design that draws the plain rounded rectangle.
`tileColours`	function	The colours of a tile's rim and thickness: a design's, or Jarajara's own ivory and jade.
`TileDesign`	type	A SET OF DRAWN TILES, a design: how the tile itself is drawn, its back, and each face's picture.
`TileDesignName`	type	A design's name.
`tileFaceSvg`	function	One face's drawing, in the tile's own 30 by 40, with no tile under it: the inside of a `<symbol>` or a `<g>`, for a board that draws its own tiles.
`tileFaceSymbols`	function	Every face as a `<symbol>` in one `<defs>`, ids `<prefix>-<code>`, so a board of 144 tiles draws 42 pictures and places each with a `<use>`.
`TileMirror`	type	One of the four views.
`tileSvg`	function	One tile on its own, as a whole `<svg>`: a solid block, the face on its ivory over a back plate whose thickness shows on two sides, named for a screen reader.
`TileSvgOptions`	type	How a tile on its own is drawn.
`TileSymbolOptions`	type	How a set of symbols is made.

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