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"/>