PixelGlyph
PixelGlyph is how a card gets a picture without an image file. A glyph is nine strings of nine characters: x for a lit pixel, o for a half-lit one, a dot for nothing. It is drawn in one colour, the card's tier, so the same glyph reads as common or legendary by colour alone.
mountainboltflameglobechecktreepalmeyelockrocketcalendarmoonduckplantmugcatowlhedgehogoctopusfoxdragonphoenixcrowntrophyquestion
The twenty five that ship, by name.
Usage
import { GLYPHS, PixelGlyph } from "@react-cards-opening/ui";
<PixelGlyph art={GLYPHS.dragon} colour="#f2cc60" cell={14} />Props
| Prop | Type | What it does |
|---|---|---|
art | PixelArt | Nine strings of nine characters. |
colour | string | Lit pixels wear it. Half-lit ones wear half of it. |
cell? | number | The size of one pixel. 11 by default: 14 on a card, 3 in a badge. |
Draw your own
import type { PixelArt } from "@react-cards-opening/ui";
export const heart: PixelArt = [
".........",
".xx...xx.",
"xxxx.xxxx",
"xxxxxxxxx",
"xxxxxxxxx",
".xxxxxxx.",
"..xxxxx..",
"...xxx...",
"....x....",
];Use o for shading: the inside of a shape, a shadow under it. Nine by nine is small enough that every pixel is a decision, which is the charm of it.
Or use a picture
Nothing requires glyphs. A card's face is a slot: put an image, an SVG or a 3D canvas in it with renderFace. See Custom card face.