Skip to content
Caps0.4.0
API reference

components/item-grid

Import

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

Exports

Section titled “Exports”
Kind Export Description
type alias ItemGridItem One item placed on the grid. Coordinates are cells from the top left.
type alias ItemGridGhost A drop preview: where the held item would land, and whether it may.
type alias ItemGridCell A grid cell, with the item covering it if any.
type alias ItemGridCellSize Cell sizes: pockets, a backpack and a big chest view.
type alias ItemGridProps Props accepted by ItemGrid.
type alias ItemSlotState How a slot answers the item being held over it.
type alias ItemSlotProps Props accepted by ItemSlot.
constant ItemGrid A Diablo-style item grid. Cells carry the keyboard and pointer interface; items and the drop ghost are drawn above them from the host’s facts. The grid never moves, merges or validates items: it shows what the host says.
constant ItemSlot One equipment slot for a paper doll: a pocket, its item and its name.

ItemGridItemtype alias

Section titled “ItemGridItem”
Signature
type ItemGridItem = object;

One item placed on the grid. Coordinates are cells from the top left.

Properties

Section titled “Properties”

id

Section titled “id”
Signature
id: string;

label

Section titled “label”
Signature
label: string;

Accessible name, e.g. “Axe” or “Bread”.

x

Section titled “x”
Signature
x: number;

y

Section titled “y”
Signature
y: number;

w?

Section titled “w?”
Signature
optional w?: number;

Footprint width in cells after rotation. Defaults to 1.

h?

Section titled “h?”
Signature
optional h?: number;

Footprint height in cells after rotation. Defaults to 1.

icon?

Section titled “icon?”
Signature
optional icon?: ReactNode;

Decorative art: a sprite, an image or an SVG.

quantity?

Section titled “quantity?”
Signature
optional quantity?: number;

Stack count, drawn in pixel numerals when above 1.

selected?

Section titled “selected?”
Signature
optional selected?: boolean;

ItemGridGhosttype alias

Section titled “ItemGridGhost”
Signature
type ItemGridGhost = object;

A drop preview: where the held item would land, and whether it may.

Properties

Section titled “Properties”

x

Section titled “x”
Signature
x: number;

y

Section titled “y”
Signature
y: number;

w

Section titled “w”
Signature
w: number;

h

Section titled “h”
Signature
h: number;
Section titled “legal”
Signature
legal: boolean;

reason?

Section titled “reason?”
Signature
optional reason?: string;

Why an illegal drop is refused, in the host’s words.

ItemGridCelltype alias

Section titled “ItemGridCell”
Signature
type ItemGridCell = object;

A grid cell, with the item covering it if any.

Properties

Section titled “Properties”

x

Section titled “x”
Signature
x: number;

y

Section titled “y”
Signature
y: number;

item

Section titled “item”
Signature
item: ItemGridItem | null;

ItemGridCellSizetype alias

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

Cell sizes: pockets, a backpack and a big chest view.

ItemGridPropstype alias

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

Props accepted by ItemGrid.

Type Declaration

Section titled “Type Declaration”
Name Type Description
label string Accessible name of the container, e.g. “Backpack”.
columns number -
rows number -
items readonly ItemGridItem[] -
ghost? ItemGridGhost | null -
cellSize? ItemGridCellSize -
activeCell? object Controlled keyboard cursor. Omit to let the grid keep its own.
activeCell.x number -
activeCell.y number -
onActiveCellChange()? (cell) => void The keyboard cursor moved to another cell.
onCellActivate()? (cell) => void Click, Enter or Space on a cell. The host decides pick up, drop or use.
onCellHover()? (cell) => void Pointer over a cell, or null on leaving the grid; for drag ghosts.

ItemSlotStatetype alias

Section titled “ItemSlotState”
Signature
type ItemSlotState = "idle" | "legal" | "illegal";

How a slot answers the item being held over it.

ItemSlotPropstype alias

Section titled “ItemSlotProps”
Signature
type ItemSlotProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> &
  object;

Props accepted by ItemSlot.

Type Declaration

Section titled “Type Declaration”
Name Type Description
label string Slot name, e.g. “Head” or “Main hand”.
item? | { label: string; icon?: ReactNode; } | null The equipped item, if any.
placeholder? ReactNode Faint outline art shown while the slot is empty.
state? ItemSlotState -

ItemGridconstant

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

A Diablo-style item grid. Cells carry the keyboard and pointer interface; items and the drop ghost are drawn above them from the host’s facts. The grid never moves, merges or validates items: it shows what the host says.

ItemSlotconstant

Section titled “ItemSlot”
Signature
const ItemSlot: ForwardRefExoticComponent<
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> &
    object &
    RefAttributes<HTMLButtonElement>
>;

One equipment slot for a paper doll: a pocket, its item and its name.