Skip to content
Caps0.4.0
API reference

components/pixel-number

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/pixel-number";

Exports

Section titled “Exports”
Kind Export Description
type alias PixelNumberSize Supported PixelNumber sizes: one font pixel is 2, 3, 4 or 6 CSS pixels.
type alias PixelNumberTone Semantic tones supplied by the current theme.
type alias PixelNumberProps Props accepted by PixelNumber. Pass a value, or readout text.
constant PIXEL_NUMBER_CHARACTERS Characters the pixel face can draw.
constant PixelNumber Crisp pixel numerals drawn as SVG, so they stay sharp at every size and never depend on a font file. The readable text is kept for assistive tech.
function formatPixelNumber() Format a number the way PixelNumber draws it.
function checkPixelText() Reject characters the pixel face cannot draw, naming the ones it can.

PixelNumberSizetype alias

Section titled “PixelNumberSize”
Signature
type PixelNumberSize = "sm" | "md" | "lg" | "xl";

Supported PixelNumber sizes: one font pixel is 2, 3, 4 or 6 CSS pixels.

PixelNumberTonetype alias

Section titled “PixelNumberTone”
Signature
type PixelNumberTone =
  "current" | "primary" | "accent" | "success" | "warning" | "error";

Semantic tones supplied by the current theme.

PixelNumberPropstype alias

Section titled “PixelNumberProps”
Signature
type PixelNumberProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> &
  object;

Props accepted by PixelNumber. Pass a value, or readout text.

Type Declaration

Section titled “Type Declaration”
Name Type Description
value? number A number to draw.
text? string Readout text instead of a number: digits and : . + - / × % and spaces.
pad? number Left-pad the whole part of value with zeros to this many digits.
signed? boolean Prefix a positive value with +, for gains and floating numbers.
size? PixelNumberSize -
tone? PixelNumberTone -
outline? boolean Ring every lit pixel with the ink line, like a sprite outline, so the number reads over any world: damage, pickups and floating gains.

PIXEL_NUMBER_CHARACTERSconstant

Section titled “PIXEL_NUMBER_CHARACTERS”
Signature
const PIXEL_NUMBER_CHARACTERS: readonly string[];

Characters the pixel face can draw.

PixelNumberconstant

Section titled “PixelNumber”
Signature
const PixelNumber: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLSpanElement>, "children"> &
    object &
    RefAttributes<HTMLSpanElement>
>;

Crisp pixel numerals drawn as SVG, so they stay sharp at every size and never depend on a font file. The readable text is kept for assistive tech.

formatPixelNumber()function

Section titled “formatPixelNumber()”
Signature
function formatPixelNumber(value, pad?, signed?): string;

Format a number the way PixelNumber draws it.

Parameters

Section titled “Parameters”
Parameter Type Default value
value number undefined
pad number 0
signed boolean false

Returns

Section titled “Returns”

string

checkPixelText()function

Section titled “checkPixelText()”
Signature
function checkPixelText(text): string;

Reject characters the pixel face cannot draw, naming the ones it can.

Parameters

Section titled “Parameters”
Parameter Type
text string

Returns

Section titled “Returns”

string