From baa31ad3e795861ae8365715f33716089c7edb64 Mon Sep 17 00:00:00 2001
From: itsscb <dev@itsscb.de>
Date: Fri, 30 Aug 2024 13:15:12 +0200
Subject: [PATCH] feat(frontend): adds functionality and icon to button while
disabled
---
frontend/src/pages/home.rs | 20 +++++++++++++++++---
1 file changed, 17 insertions(+), 3 deletions(-)
diff --git a/frontend/src/pages/home.rs b/frontend/src/pages/home.rs
index 7fa089e..f489072 100644
--- a/frontend/src/pages/home.rs
+++ b/frontend/src/pages/home.rs
@@ -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"/>