MudEngine Part 5: Polished UI with dioxus-components

Step 7 / 11

Custom RoomCell component

The WorldGrid component renders room names in a CSS grid. Instead of a library component, we will write a custom RoomCell component — a small building block that we can extend later when multiplayer arrives.

The component takes the room name and whether it is active, and renders a styled <div>. When multiplayer is added in Part 6, this same component will also display which players are in each room.

Add this component right after the WorldGrid component in src/main.rs:

mud-engine/src/main.rs

#[component]
fn RoomCell(name: String, active: bool) -> Element {
    rsx! {
        div {
            class: if active { "cell active" } else { "cell" },
            style: if active { "background: #3b82f6; color: #fff; font-weight: bold;" } else { "background: #12122a; color: #5a5a7a;" },
            "{name}"
        }
    }
}

🎯 RoomCell props

name — the room name displayed in the cell
active — whether this is the player's current room
The inline styles match the dark theme. In Part 6 we will add a players prop to show who is in each room.

Using a dedicated component here — instead of inlining the <div> in the for loop — makes it trivial to add player indicators later without touching the grid loop.

🔁 Update WorldGrid to use RoomCell

Now update WorldGrid to use the new RoomCell instead of the raw <div>. Replace the for loop inside the grid with:

mud-engine/src/main.rs

for (idx, name) in names.iter().enumerate() {
    RoomCell {
        key: "{idx}",
        name: name.clone(),
        active: idx == player_room,
    }
}

🎯 What changed

The for loop body now delegates each cell to RoomCell, keeping WorldGrid focused on layout. When multiplayer arrives, you will add a players prop to RoomCell and pass player data here — the loop itself stays unchanged.

Step 7 / 11

◀ Prev Next ▶