← All Workshops

MudEngine Part 6: Multiplayer

Step 14 / 18
◀ PrevNext ▶

DirectionPad

The D-pad is extracted into its own DirectionPad component. Instead of mutating local state or calling socket.send() directly, it accepts an onmove callback prop.

  • onmove: Callback<String> — fires when a direction button is clicked, passing the direction name ("north", "south", "east", "west")

Callback<T> is Dioxus 0.7's general-purpose callback type (equivalent to EventHandler<T>). It is Copy and uses interior mutability so it can be called with &self. The parent component wires it up to socket.send(ClientMessage::Move { direction }).

The D-pad is one of three navigation methods — clicking a reachable room card and pressing the keyboard shortcuts fire the exact same onmove callback. In the next step the Game component passes one shared send_move closure to all three.

Create src/components/direction_pad.rs with this component. In the next step the Game component passes one shared send_move closure to all three navigation methods:

mud-engine/src/components/direction_pad.rs
use dioxus::prelude::*;

#[component]
pub fn DirectionPad(onmove: Callback<String>) -> Element {
    rsx! {
        div { class: "dpad",
            button {
                class: "dpad-btn up",
                onclick: move |_| onmove.call("north".into()),
                "▲"
            }
            div { class: "dpad-row",
                button {
                    class: "dpad-btn left",
                    onclick: move |_| onmove.call("west".into()),
                    "◀"
                }
                button { class: "dpad-btn center", disabled: "true", "●" }
                button {
                    class: "dpad-btn right",
                    onclick: move |_| onmove.call("east".into()),
                    "▶"
                }
            }
            button {
                class: "dpad-btn down",
                onclick: move |_| onmove.call("south".into()),
                "▼"
            }
        }
    }
}
Step 14 / 18
◀ PrevNext ▶