← All Workshops

MudEngine Part 6: Multiplayer

Step 12 / 18
◀ PrevNext ▶

Enhanced RoomCell

The RoomCell component from Part 5 gains a players: Vec<String> prop to show which adventurers are in each room, and a clickable: bool prop to restore click-to-move on reachable rooms.

Props:

  • name — room label text
  • active — highlights the current player's room in blue
  • clickable — when true, the cell gets a lighter background and the .cell.clickable CSS class; the onclick handler only fires when clickable
  • players — names of other players in this room (the current player is excluded by the parent)
  • onclick — EventHandler<MouseEvent> that fires when the cell is clicked; the parent wires it up to send a move message for the direction of that room

Player indicators render below the room name when the list is non-empty.

Replace the RoomCell in src/components/room_cell.rs with this enhanced version:

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

#[component]
pub fn RoomCell(
    name: String,
    active: bool,
    clickable: bool,
    players: Vec<String>,
    onclick: EventHandler<MouseEvent>,
) -> Element {
    rsx! {
        div {
            class: if active { "cell active" }
                   else if clickable { "cell clickable" }
                   else { "cell" },
            style: if active { "background: #3b82f6; color: #fff; font-weight: bold;" }
                   else if clickable { "background: #1a1a3e; color: #7a7aaa;" }
                   else { "background: #12122a; color: #5a5a7a;" },
            onclick: move |e| if clickable { onclick(e) },
            div { class: "room-name", "{name}" }
            for p in &players {
                div { class: "player-indicator", "{p}" }
            }
        }
    }
}
Step 12 / 18
◀ PrevNext ▶