MudEngine Part 5: Polished UI with dioxus-components

use crate::components::input::Input;

// inside App's rsx!, replace the existing <input>:

Input {
    style: "width: 100%;",
    placeholder: "Type a command and press Enter...",
    value: input,
    oninput: move |e: FormEvent| input.set(e.value()),
    onkeydown: move |e: KeyboardEvent| {
        if e.key() == Key::Enter {
            let cmd = input.read().trim().to_lowercase();
            if cmd.is_empty() { return; }
            input.write().clear();
            match cmd.as_str() {
                "look" | "l" => feedback.write().clear(),
                "north" | "n" | "south" | "s"
                | "east" | "e" | "west" | "w" => {
                    let dir = match cmd.as_str() {
                        "north" | "n" => Direction::North,
                        "south" | "s" => Direction::South,
                        "east" | "e" => Direction::East,
                        "west" | "w" => Direction::West,
                        _ => unreachable!(),
                    };
                    if world.write().go(dir) {
                        feedback.write().clear();
                    } else {
                        feedback.set(
                            format!("You cannot go {dir} from here."),
                        );
                    }
                }
                "help" | "?" => {
                    feedback.set(
                        "Commands: look/l | north/n south/s east/e west/w | help/? | quit/exit"
                            .into(),
                    );
                }
                "quit" | "exit" => {
                    feedback.set("Farewell, adventurer!".into());
                }
                _ => {
                    feedback.set(
                        "Unknown command. Type 'help' or '?' for a list."
                            .into(),
                    );
                }
            }
        }
    },
}