From 75d8db409874834871fe61cbe8e0142884edf95a Mon Sep 17 00:00:00 2001
From: Joel Therrien <joel@joeltherrien.ca>
Date: Thu, 21 Sep 2023 18:55:33 -0700
Subject: [PATCH] Improve 'Add to dictionary' UI

---
 ui/src/Game.tsx   | 33 ++++++++++++++++++++++-----------
 ui/src/style.less |  9 +++++++++
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/ui/src/Game.tsx b/ui/src/Game.tsx
index c2bd6f0..28874d4 100644
--- a/ui/src/Game.tsx
+++ b/ui/src/Game.tsx
@@ -107,7 +107,6 @@ export function Game(props: {
 
     function addWordFn(word: string) {
         props.wasm.add_word(word);
-        logDispatch(<div><em>{word} was added to dictionary.</em></div>);
     }
 
     const [playerLetters, trayDispatch] = useReducer(movePlayableLetters, []);
@@ -359,7 +358,7 @@ export function Game(props: {
                         if (message.endsWith("is not a valid word")) {
                             // extract out word
                             const word = message.split(" ")[0];
-                            logDispatch(<div><em>{message}</em><AddWordButton word={word} addWordFn={addWordFn} /></div>);
+                            logDispatch(<AddWordButton word={word} addWordFn={addWordFn} />);
                         } else {
                             logDispatch(<div><em>{message}</em></div>);
                         }
@@ -410,12 +409,24 @@ export function Game(props: {
 function AddWordButton(props: {word: string, addWordFn: (x: string) => void}) {
     const [isClicked, setIsClicked] = useState<boolean>(false);
 
-    return <button
-        disabled={isClicked}
-        onClick={() => {
-            setIsClicked(true);
-            props.addWordFn(props.word);
-    }}>
-        Add to dictionary
-    </button>
-}
\ No newline at end of file
+    if (!isClicked) {
+        return <div>
+            <em>{props.word} is not a valid word.</em>
+            <button
+                className="add-to-dictionary"
+                disabled={isClicked}
+                onClick={() => {
+                    setIsClicked(true);
+                    props.addWordFn(props.word);
+                }}>
+                Add to dictionary
+            </button>
+        </div>;
+    } else {
+        return <div>
+            <em>{props.word} was added to dictionary.</em>
+        </div>;
+    }
+
+}
+
diff --git a/ui/src/style.less b/ui/src/style.less
index 865561a..e893181 100644
--- a/ui/src/style.less
+++ b/ui/src/style.less
@@ -270,4 +270,13 @@ dialog {
 
   }
 
+}
+
+button.add-to-dictionary {
+  padding: 0;
+  margin: 0 0 0 1em;
+}
+
+div.log {
+    line-height: 1.5em;
 }
\ No newline at end of file