Game objects

Implementation contract

Use it in the product

Retain game conventions while making quality, eligibility and source understandable in words.

Exports

ItemIcon, ItemName, ItemTooltipBody, GearSlot, TalentTree, DungeonCard, BossRow, QuestCard, Recipe, MapDemo

Source

src/components/waypoint/ui/game.tsx; src/components/waypoint/ui/game-live.tsx; src/components/character-workspace/character-equipment.tsx; src/components/character-workspace/consume-workspace.tsx

Props and defaults

ItemIcon requires icon FileDataID, name and quality. GearSlot requires slot and optional item; state defaults to filled. TalentTree requires talents and defaults level to 60. DungeonCard requires name, href, art, players, bosses and kind.

HTML and keyboard

An icon is decorative beside its name. Show quality as a word as well as its hue (itemQualityName in src/lib/item-quality.ts), as the gear workspace and boss loot do; a slot says filled, wanted or empty. Locked talents say why and do not allocate on focus.

States and themes

Filled, wanted, empty, locked, available, full and unavailable have text and affordance. Runtime art failure keeps a readable name and source. The character workspace has Gear/Consumables/Talents/Plan/Import/Export/Simulator sections inside a bronze frame that follows the site theme. Creation and identity editing use inline class emblems, race portraits and an equipped client model against a crop of the site's existing landscape. Phones switch Class / Race / Build inside the same chamber, with an inline model preview. Save/Create applies the draft; Cancel preserves the current build. Gear defaults to a nonmodal attached browser, with comparison and filters inside it. The optional focused desktop layout uses one native modal dialog. Phones keep selection inside Gear and Undo in its header, leaving room for readable choices. Stats and contributions open inline. Gear selection carries a bronze edge and a labeled selected-item footer. Consumables use a viewport board with Preparation, Combat and Extras banks, section buttons on smaller screens and a category selector on short phones. Gear stats and explanatory prose yield space to the board. Selected consumes carry a bronze icon frame and check; toggle buffs act immediately. Choices use an anchored nonmodal icon menu, with name/effect previews on hover or focus and immediate selection. Escape returns focus, Tab continues, and outside clicks dismiss. Hover and focus light the icon; unavailable slots explain why. Undo and Clear all remain quiet 44px actions. Controls have at least 44px targets and a 2px focus ring. Quality words remain accessible beside the quality hue. Only picker choices scroll when necessary, and reduced motion retains every state.

Data and provenance

Use FileDataIDs at runtime; do not store game images in the repo. Stats and sources require a named client build or labelled Classic fallback. The character sheet fits the viewport with adjacent enchant targets, key role-specific stats, expandable all-stats and an inline phone Stats view. Phones default to a readable gear/enchant ledger, with an optional full-width model view. Level 5–60 is shared by controls, talent budgets, links and named local loadouts; rating and proficiency training levels come from the pinned client. Incompatible gear and consumes are removed with Undo; invalid talent budgets block a level change. Saved sets compare gear/enchant deltas only at the same class, level and build. Active named sets mark edits without overwriting, and rename preserves equipment. Preparation checks open exact slots. Wanted/owned targets stay separate until Equip. Plan selection stays inline, returns focus, and puts acquisition provenance before stat deltas; Equip remains outside the scrolling detail. Imports preview recognized/rejected inputs before Apply with full-character Undo. Stat details show exact gear/enchant contributions, verified client set thresholds and item effects; conditional effects stay outside flat totals. Missing records remain unknown. The simulator transfer is explicitly level-60 only, with a selected-build ledger, visible omissions and fixed transfer actions; detailed defaults are disclosed separately. The native character renderer dresses the selected race/body preset with mapped equipped armor and weapons; missing visuals are named. Appearance controls affect only the preview. Enchants follow the pinned simulator’s compatibility rules and stay in shared links and exports. Distinguish simulator enchant bonuses from client item stats; the current simulator has no gem or socket records. The current gear catalog is build 1.60.1.70245.

import { ItemIcon } from "@/components/waypoint/ui/game";

export function LionheartIcon() {
  return <ItemIcon icon={133138} name="Lionheart Helm" quality={4} size="md" />;
}