itsscb/wordl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): adds functionality and icon to button while disabled

Browse Source 
feat(frontend): adds functionality and icon to button while disabled
This commit is contained in:
itsscb 2024-08-30 13:16:16 +02:00 committed by GitHub
commit c1bb52462b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/pages/home.rs
View File

@ -233,6 +233,14 @@ pub fn Home() -> Html {
})
};
let on_disabled = {
let curr_index = curr_index.clone();
Callback::from(move |_e: MouseEvent| {
set_focus(*curr_index);
})
};
let on_submit = {
let input_values = input_values.clone();
let submitted_words = submitted_words.clone();
@ -525,7 +533,7 @@ pub fn Home() -> Html {
}
>
<button
disabled={input_values.iter().any(std::string::String::is_empty)}
// disabled={input_values.iter().any(std::string::String::is_empty)}
tabindex={(*length + 1).to_string()}
class={
classes!(
@ -540,7 +548,7 @@ pub fn Home() -> Html {
{if input_values.iter().any(std::string::String::is_empty) {"bg-gray-700"} else {"bg-green-600"}},
)
}
onclick={on_submit} type="submit">
onclick={if input_values.iter().any(std::string::String::is_empty) {on_disabled} else {on_submit}} type="submit">
{
if *game_over {
html!{
@ -549,7 +557,13 @@ pub fn Home() -> Html {
</svg>
}
}
else {
else if input_values.iter().any(std::string::String::is_empty) {
html!{
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 -960 960 960" width="24px" fill="white">
<path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/>
</svg>
}
} else {
html!{
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 -960 960 960" fill="white">
<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>