components/item-grid
Type Aliases
Section titled “Type Aliases”ItemGridItem
Section titled “ItemGridItem”ItemGridItem =
object
One item placed on the grid. Coordinates are cells from the top left.
Properties
Section titled “Properties”id:
string
label:
string
Accessible name, e.g. “Axe” or “Bread”.
x:
number
y:
number
optionalw?:number
Footprint width in cells after rotation. Defaults to 1.
optionalh?:number
Footprint height in cells after rotation. Defaults to 1.
optionalicon?:ReactNode
Decorative art: a sprite, an image or an SVG.
quantity?
Section titled “quantity?”
optionalquantity?:number
Stack count, drawn in pixel numerals when above 1.
selected?
Section titled “selected?”
optionalselected?:boolean
ItemGridGhost
Section titled “ItemGridGhost”ItemGridGhost =
object
A drop preview: where the held item would land, and whether it may.
Properties
Section titled “Properties”x:
number
y:
number
w:
number
h:
number
legal:
boolean
reason?
Section titled “reason?”
optionalreason?:string
Why an illegal drop is refused, in the host’s words.
ItemGridCell
Section titled “ItemGridCell”ItemGridCell =
object
A grid cell, with the item covering it if any.
Properties
Section titled “Properties”x:
number
y:
number
item:
ItemGridItem|null
ItemGridCellSize
Section titled “ItemGridCellSize”ItemGridCellSize =
"sm"|"md"|"lg"
Cell sizes: pockets, a backpack and a big chest view.
ItemGridProps
Section titled “ItemGridProps”ItemGridProps =
Omit<HTMLAttributes<HTMLDivElement>>,"children"> > &object
Props accepted by ItemGrid.
Type Declaration
Section titled “Type Declaration”label:
string
Accessible name of the container, e.g. “Backpack”.
columns
Section titled “columns”columns:
number
rows:
number
items: readonly
ItemGridItem[]
ghost?
Section titled “ghost?”
optionalghost?:ItemGridGhost|null
cellSize?
Section titled “cellSize?”
optionalcellSize?:ItemGridCellSize
activeCell?
Section titled “activeCell?”
optionalactiveCell?:object
Controlled keyboard cursor. Omit to let the grid keep its own.
activeCell.x
Section titled “activeCell.x”x:
number
activeCell.y
Section titled “activeCell.y”y:
number
onActiveCellChange?
Section titled “onActiveCellChange?”
optionalonActiveCellChange?: (cell) =>void
The keyboard cursor moved to another cell.
Parameters
Section titled “Parameters”Returns
Section titled “Returns”void
onCellActivate?
Section titled “onCellActivate?”
optionalonCellActivate?: (cell) =>void
Click, Enter or Space on a cell. The host decides pick up, drop or use.
Parameters
Section titled “Parameters”Returns
Section titled “Returns”void
onCellHover?
Section titled “onCellHover?”
optionalonCellHover?: (cell) =>void
Pointer over a cell, or null on leaving the grid; for drag ghosts.
Parameters
Section titled “Parameters”ItemGridCell | null
Returns
Section titled “Returns”void
ItemSlotState
Section titled “ItemSlotState”ItemSlotState =
"idle"|"legal"|"illegal"
How a slot answers the item being held over it.
ItemSlotProps
Section titled “ItemSlotProps”ItemSlotProps =
Omit<ButtonHTMLAttributes<HTMLButtonElement>>,"children"> > &object
Props accepted by ItemSlot.
Type Declaration
Section titled “Type Declaration”label:
string
Slot name, e.g. “Head” or “Main hand”.
optionalitem?: {label:string;icon?:ReactNode; } |null
The equipped item, if any.
placeholder?
Section titled “placeholder?”
optionalplaceholder?:ReactNode
Faint outline art shown while the slot is empty.
state?
Section titled “state?”
optionalstate?:ItemSlotState
Variables
Section titled “Variables”ItemGrid
Section titled “ItemGrid”
constItemGrid: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.
ItemSlot
Section titled “ItemSlot”
constItemSlot:ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>>,"children"> > &object&RefAttributes<HTMLButtonElement>>>>
One equipment slot for a paper doll: a pocket, its item and its name.