Grid Inventory

a 4x3 grid of selectable item slots.

▶ Run in browser

Tags: ui inventory game-ui

What it demonstrates

  • A GridContainer laying out item slots in a fixed-column grid.

  • Each slot is a Button carrying an item name and colour swatch.

  • Clicking a slot selects it and updates a detail label below the grid.

  • The grid is wrapped in a centred panel anchored with AnchorPreset.CENTER.

Run: uv run python examples/features/ui/inventory.py

Source

 1"""Grid Inventory: a 4x3 grid of selectable item slots.
 2
 3# /// simvx
 4# tags = ["ui", "inventory", "game-ui"]
 5# web = { root = "InventoryDemo", width = 800, height = 600, responsive = true }
 6# ///
 7
 8## What it demonstrates
 9- A `GridContainer` laying out item slots in a fixed-column grid.
10- Each slot is a `Button` carrying an item name and colour swatch.
11- Clicking a slot selects it and updates a detail label below the grid.
12- The grid is wrapped in a centred panel anchored with `AnchorPreset.CENTER`.
13
14Run: uv run python examples/features/ui/inventory.py
15"""
16
17from simvx.core import AnchorPreset, Colour, Label, Node, Panel, Vec2
18from simvx.core.ui import Button, GridContainer, VBoxContainer
19from simvx.graphics import App
20
21# (name, swatch colour). Empty slots have a None colour.
22ITEMS = [
23    ("Sword", "#C0392B"), ("Shield", "#2980B9"), ("Potion", "#27AE60"), ("Key", "#F1C40F"),
24    ("Bow", "#8E44AD"), ("Arrow", "#7F8C8D"), ("Gem", "#16A085"), ("Map", "#E67E22"),
25    ("Bread", "#D35400"), (None, None), ("Torch", "#E74C3C"), (None, None),
26]
27COLUMNS = 4
28
29
30class InventoryDemo(Node):
31    """Root node: a centred grid inventory with click-to-select slots."""
32
33    def on_ready(self):
34        self._selected = None
35
36        # Centred panel hosting the grid and detail line.
37        panel = Panel(name="InventoryPanel")
38        panel.set_anchor_preset(AnchorPreset.CENTER)
39        panel.margin_left = -240
40        panel.margin_right = 240
41        panel.margin_top = -200
42        panel.margin_bottom = 200
43        panel.bg_colour = Colour.hex("#1B1B26")
44        self.add_child(panel)
45
46        column = VBoxContainer(name="Column")
47        column.separation = 16.0
48        column.set_anchor_preset(AnchorPreset.FULL_RECT)
49        column.margin_left = 24
50        column.margin_right = -24
51        column.margin_top = 20
52        column.margin_bottom = -20
53        panel.add_child(column)
54
55        title = Label("Inventory")
56        title.font_size = 22.0
57        title.alignment = "center"
58        column.add_child(title)
59
60        # The grid: GridContainer sets .position on its children, which is the
61        # sanctioned container layout policy.
62        grid = GridContainer(columns=COLUMNS, name="ItemGrid")
63        grid.separation = 8.0
64        for i, (name, swatch) in enumerate(ITEMS):
65            label = name or "(empty)"
66            slot = Button(label, on_press=self._make_select(i))
67            slot.name = f"Slot{i}"
68            slot.size = Vec2(96, 64)
69            if swatch is not None:
70                slot.bg_colour = Colour.hex(swatch)
71            grid.add_child(slot)
72        column.add_child(grid)
73
74        # Detail line: shows the selected item's name.
75        self._detail = Label("Select an item.")
76        self._detail.font_size = 15.0
77        self._detail.text_colour = Colour.LIGHT_GRAY
78        self._detail.alignment = "center"
79        column.add_child(self._detail)
80
81        self._slots = grid
82
83    def _make_select(self, index: int):
84        """Return a click handler bound to the slot at index."""
85
86        def handler():
87            name = ITEMS[index][0]
88            self._selected = index
89            if name is None:
90                self._detail.text = f"Slot {index + 1} is empty."
91            else:
92                self._detail.text = f"Selected: {name} (slot {index + 1})"
93
94        return handler
95
96
97if __name__ == "__main__":
98    App(title="SimVX Inventory", width=800, height=600).run(InventoryDemo())