inventory

Quick-Slot Inventory Bar

Use this skill when creating a reusable inventory bar with quick slots and an expandable bag panel for a 3D web game.

Pattern

Separate inventory ownership from inventory presentation. Game state decides what items exist, what the player owns, and what each item does. The UI renders slots, current selection, item assignment, and clear/select commands.

Use a fixed number of quick slots represented as an array of item keys or null. Track one selected slot index. The bag panel assigns owned items into the selected slot; the compact bar selects slots during play.

export type ItemKey = 'lamp' | 'medkit' | 'scanner' | 'snack'
export type InventorySlot = ItemKey | null

export interface ItemDefinition {
  name: string
  shortName: string
  description: string
  tone: string
}

export const items: Record<ItemKey, ItemDefinition> = {
  lamp: { name: 'Signal Lamp', shortName: 'Lamp', description: 'Improves visibility in dark areas.', tone: 'yellow' },
  medkit: { name: 'Medkit', shortName: 'Med', description: 'Stabilizes injured characters.', tone: 'red' },
  scanner: { name: 'Scanner', shortName: 'Scan', description: 'Reveals nearby interactables.', tone: 'blue' },
  snack: { name: 'Snack Pack', shortName: 'Snack', description: 'Restores a small amount of stamina.', tone: 'green' },
}

Component Contract

A reusable inventory component usually needs:

• slots: fixed-length list of item ids or empty values
• ownedItems: list of item ids available to assign
• selectedSlot: current slot index
• bagOpen: whether the expanded panel is visible
• onSelectSlot(index)
• onAssignSlot(index, itemId)
• onClearSlot(index)
• onToggleBag()

interface InventoryBarProps {
  slots: InventorySlot[]
  ownedItems: ItemKey[]
  selectedSlot: number
  bagOpen: boolean
  onSelectSlot: (slotIndex: number) => void
  onAssignSlot: (slotIndex: number, item: ItemKey) => void
  onClearSlot: (slotIndex: number) => void
  onToggleBag: () => void
}