mwg API
    Preparing search index...

    Class IconGrid

    A grid of icons, driven by the keyboard or the pointer.

    ListView is a menu; this is a bag. SPD-sized item counts read better as rows of icons than as a scrolling list of names, and a grid is what supports two cells apart in the same row being adjacent choices rather than everything being one long column.

    Reordering is tap-then-tap, not a continuously-dragged ghost sprite: touch one cell to pick it up, touch a second to swap them. It reads as "drag and drop" to a player and costs none of the drag-threshold and global-pointer-tracking fragility an actually-followed ghost sprite would - and unlike a live drag, every step of it is a plain method call a test can drive without simulating pointer events at all.

    import { IconGrid } from '@datamoc/mw_games/two-d/ui';
    import { Shape2D } from '@datamoc/mw_games/two-d/render';

    const potionIcon = new Shape2D().rect(0, 0, 16, 16).fill(0x66cc66);
    const swordIcon = new Shape2D().rect(0, 0, 16, 16).fill(0xcccccc);

    const bag = new IconGrid({
    	width: 160,
    	height: 80,
    	columns: 4,
    	items: [
    		{ icon: potionIcon, quantity: 3 },
    		{ icon: swordIcon },
    	],
    	onSelect: (item, index) => console.log('used', index, item.value),
    });

    bag.handleAction('right'); // moves the highlight to the sword
    bag.handleAction('confirm'); // fires onSelect for the highlighted cell

    Hierarchy

    • Container
      • IconGrid
    Index
    constructor
    onHighlight onQuickslot onReorder onSelect
    length rows selected selectedIndex visibleRows
    cancelPickup confirm destroy handleAction move resize select setItems tapCell update
    onHighlight: ((item: IconGridItem, index: number) => void) | null
    onQuickslot: ((item: IconGridItem, index: number) => void) | null
    onReorder: ((fromIndex: number, toIndex: number) => void) | null
    onSelect: ((item: IconGridItem, index: number) => void) | null

    • cancels a pending pick-up without swapping anything - what cancel should do

      Returns void

    • Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling destroy.

      Parameters

      • Optionaloptions: DestroyOptions

        Options parameter. A boolean will act as if all options have been set to that value

      Returns void

      container.destroy();
      container.destroy(true);
      container.destroy({ children: true });
      container.destroy({ children: true, texture: true, textureSource: true });

    • Parameters

      • action: string

      Returns boolean

      true when the action was used

    • Moves the highlight by a row/column step, skipping disabled cells.

      Wraps at both ends of the grid, the same as ListView.move. dx/dy step by one cell each; a caller wanting arrow-key navigation passes (±1, 0) or (0, ±1).

      Parameters

      • dx: number
      • dy: number

      Returns boolean

    • first tap on a cell picks it up; a second tap on another swaps the two

      Parameters

      • index: number

      Returns void

    • A frame-driven long-press timer, the same shape as WindowStack.update - no raw setTimeout, so a test can drive it exactly by calling update rather than waiting on a real clock.

      Parameters

      • dt: number

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods