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();
            let parts: Vec<&str> = cmd.splitn(2, ' ').collect();
            match parts[0] {
                "look" | "l" => feedback.write().clear(),
                "north" | "n" | "south" | "s"
                | "east" | "e" | "west" | "w" => {
                    let dir = match parts[0] {
                        "n" => "north",
                        "s" => "south",
                        "e" => "east",
                        "w" => "west",
                        d => d,
                    };
                    if world.write().go(dir) {
                        feedback.write().clear();
                    } else {
                        feedback.set(
                            format!("You cannot go {} from here.", dir),
                        );
                    }
                }
                "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(),
                    );
                }
            }
        }
    },
}