Your First Choice Menu

This tutorial walks you through creating a complete interactive choice menu with TUIX Core — from engine initialization to rendering and handling keyboard input.

Step 1: Initialize the Engine

Start by creating a TuixEngine instance. This sets up all subsystems (styles, components, layout, render, input).

from tuix.core import TuixEngine

engine = TuixEngine()

Step 2: Create a Component

Use engine.components.create() to register a new component. The first argument is the type ('choice', 'progress_bar', or 'text_input'), and the second is a unique string ID.

engine.components.create('choice', 'main_menu')

Step 3: Set Properties

Configure the component's label and choices. The choices parameter is a list of rows, where each row is a list of button dicts with 'name' and 'action' keys. Multiple buttons in the same row appear side by side.

engine.components.set_property(
    id='main_menu',
    param='label',
    value='Welcome! Choose an option:'
)

engine.components.set_property(
    id='main_menu',
    param='choices',
    value=[
        [{'name': 'New Game', 'action': 'new_game'}, {'name': 'Load Game', 'action': 'load'}],
        [{'name': 'Settings', 'action': 'settings'}],
        [{'name': 'Exit', 'action': 'exit'}]
    ]
)

Step 4: Configure Layout

Set the component size and position. Dimensions use modifiers from 0.0 to 1.0 relative to the terminal size. Use margin_mode to center the component.

engine.layout.set_dimensions(
    id='main_menu',
    width_modifier=0.5,
    height_modifier=0.5
)

engine.layout.margin_mode(
    id='main_menu',
    param=['margin_top', 'margin_left'],
    mode='centered'
)

Step 5: Render

Call engine.render.draw() to clear the screen, compute layout, render the box-drawn menu, and start the keyboard input loop. Use arrow keys to navigate and Enter to select.

engine.render.draw()