MudEngine Part 5: Polished UI with dioxus-components

Step 8 / 11

Add a direction Button pad

The current app requires typing north, south, etc. into an input box. Let us add a D-pad of direction buttons so the player can click to move.

We will add the buttons just below the description card, inside the App component's rsx! block. Each button calls world.write().go(dir) and clears feedback.

mud-engine/src/main.rs

use crate::components::button::{Button, ButtonVariant};

// inside App's rsx!, after the Card:

div {
    class: "direction-pad",
    style: "display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px 0;",
    Button {
        variant: ButtonVariant::Outline,
        onclick: move |_| {
            if world.write().go("north") {
                feedback.write().clear();
            } else {
                feedback.set("You cannot go north from here.".into());
            }
        },
        "⬆ North"
    }
    div {
        style: "display: flex; gap: 4px;",
        Button {
            variant: ButtonVariant::Outline,
            onclick: move |_| {
                if world.write().go("west") {
                    feedback.write().clear();
                } else {
                    feedback.set("You cannot go west from here.".into());
                }
            },
            "⬅ West"
        }
        Button {
            variant: ButtonVariant::Outline,
            onclick: move |_| {
                if world.write().go("east") {
                    feedback.write().clear();
                } else {
                    feedback.set("You cannot go east from here.".into());
                }
            },
            "➡ East"
        }
    }
    Button {
        variant: ButtonVariant::Outline,
        onclick: move |_| {
            if world.write().go("south") {
                feedback.write().clear();
            } else {
                feedback.set("You cannot go south from here.".into());
            }
        },
        "⬇ South"
    }
}

🎯 How the D-pad works

The outer div uses flex-direction: column to stack North above the middle row and South below.
The middle row is a horizontal flex container holding West and East side by side.
Each Button with variant: ButtonVariant::Outline has a visible border and transparent background — it fits the dark theme.
The onclick handler moves the player if the exit exists, or sets feedback to an error message, just like the text command handler did.

The player can now click direction buttons or type commands. The keyboard input box (which we keep) still works for look, help, quit and for players who prefer typing.

Step 8 / 11

◀ Prev Next ▶