Item Slots

Item Slots

TesseraUI provides three widgets for displaying and interacting with Minecraft items.

---

<item-slot> (HTML)

<!-- Display only -->
<item-slot size="24" item="minecraft:diamond"/>

<!-- With item count -->
<item-slot size="24" item="minecraft:gold_ingot" show-count="true"/>

<!-- Clickable (wires onclick handler) -->
<item-slot size="24" item="minecraft:netherite_sword" onclick="onSlotClick"/>

Slots can be styled with CSS. background changes the slot fill, :hover { background: ... } changes the hover fill, and border-color changes the 1 px frame drawn by the widget.

<item-slot class="reward-slot" size="24" item="minecraft:diamond"/>

.reward-slot {
  background: #120E0A;
  border-color: #5A3518;
}

Attribute	Default	Description
size	18	Width and height in pixels
item	—	namespace:id of the item to display
show-count	true	Show the stack count overlay
onclick	—	Java handler name

---

TesseraItemSlot (Java)

Display only

TesseraItemSlot slot = new TesseraItemSlot(x, y, 32);
slot.item(new ItemStack(Items.DIAMOND));

With inventory picker

Clicking opens a floating overlay of the player's inventory. The player can pick an item by clicking it.

TesseraItemSlot slot = new TesseraItemSlot(x, y, 32);
slot.item(new ItemStack(Items.AIR))
    .inventoryPicker(true)
    .onItemPicked(stack -> {
        this.selectedItem = stack;
        myConfig.save();
    });

When inventoryPicker(true) is set without onItemPicked, the picked item simply replaces the slot's current display item.

Options

slot.showCount(false);             // hide stack count
slot.size(24);                     // resize
slot.slotBg(0xFF120E0A);           // normal background
slot.hoverBg(0xFF1C120B);          // hover background
slot.borderColor(0xFF5A3518);      // 1 px frame
slot.onClick(this::handleClick);   // custom click handler

---

TesseraItemGrid

A rectangular grid of draggable item slots backed by a flat ItemStack[].

// 4 columns × 2 rows, each slot 22 px
TesseraItemGrid grid = new TesseraItemGrid(x, y, 4, 2, 22);

grid.setItem(0, new ItemStack(Items.DIAMOND));
grid.setItem(1, new ItemStack(Items.GOLD_INGOT, 3));
// Index formula: row * cols + col

panel.add(grid);

Items can be dragged between slots in the grid without any extra wiring.

Reading items

ItemStack stack = grid.getItem(index);

---

TesseraInventoryPicker

A floating overlay showing the player's full inventory (main 3×9 grid + hotbar 1×9). Opened automatically by TesseraItemSlot.inventoryPicker(true), or manually:

// Open near a widget; the picker clamps to screen bounds automatically
TesseraInventoryPicker.open(anchorX, anchorY, stack -> {
    mySlot.item(stack);
});

Clicking outside the picker panel closes it without picking anything.

The overlay is rendered by TesseraScreen.renderTesseraOverlays() — no manual wiring needed when extending TesseraScreen.