44 lines
1.6 KiB
Rust
44 lines
1.6 KiB
Rust
use crate::consts::{Key, KeyboardKeyType, VirtualKey, Status};
|
|
use yew::prelude::*;
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct KeyboardProps {
|
|
pub onclick: Callback<Key>,
|
|
pub keyboard: UseStateHandle<Vec<VirtualKey>>,
|
|
}
|
|
|
|
#[function_component]
|
|
pub fn Keyboard(props: &KeyboardProps) -> Html {
|
|
let handle_click = |k: Key| {
|
|
let onclick = props.onclick.clone();
|
|
|
|
Callback::from(move |_| {
|
|
onclick.emit(k);
|
|
}).clone()
|
|
};
|
|
|
|
html! {
|
|
<div class="keyboard"> {
|
|
for (props.keyboard).iter().map(|vk: &VirtualKey| {
|
|
match vk.key {
|
|
KeyboardKeyType::CharKey(c) => html! {
|
|
<button
|
|
class={
|
|
match vk.status {
|
|
Some(Status::Found) => "correct",
|
|
Some(Status::NotFound) => "missed",
|
|
Some(Status::Almost) => "almost",
|
|
None => ""
|
|
}
|
|
}
|
|
onclick={ handle_click(Key::CharKey(c)) }
|
|
> { c } </button>
|
|
},
|
|
KeyboardKeyType::Backspace => html! { <button onclick={ handle_click(Key::Backspace) } class="key-big"><i class="las la-undo"></i></button> },
|
|
KeyboardKeyType::Enter => html! { <button onclick={ handle_click(Key::Enter) } class="key-big"> { "Enviar" } </button> }
|
|
}
|
|
})
|
|
} </div>
|
|
}
|
|
}
|