From 0021c0be794e239e763c4d2869ee243b5adfd3f5 Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Tue, 23 Jul 2024 22:21:05 -0400
Subject: [PATCH] chat

---
 client/src/components/websocket.rs | 225 +++++++++++++++++++++--------
 client/src/pages/home.rs           |   2 +-
 server/src/api.rs                  |   2 +-
 3 files changed, 166 insertions(+), 63 deletions(-)

diff --git a/client/src/components/websocket.rs b/client/src/components/websocket.rs
index 5405e2e..7a76679 100644
--- a/client/src/components/websocket.rs
+++ b/client/src/components/websocket.rs
@@ -1,9 +1,37 @@
-use html::Textarea;
+use std::rc::Rc;
+
+use html::{Input, Textarea};
 use leptos::*;
 use leptos_use::{core::ConnectionReadyState, use_websocket, UseWebsocketReturn};
 use lib::models::*;
 use serde_json::to_string;
 
+#[derive(Clone)]
+pub struct WebSocketContext {
+    pub ready_state: Signal<ConnectionReadyState>,
+    pub message: Signal<Option<String>>,
+    send: Rc<dyn Fn(&str)>,
+}
+
+impl WebSocketContext {
+    pub fn new(
+        ready_state: Signal<ConnectionReadyState>,
+        message: Signal<Option<String>>,
+        send: Rc<dyn Fn(&str)>,
+    ) -> Self {
+        Self {
+            ready_state,
+            message,
+            send,
+        }
+    }
+
+    #[inline(always)]
+    pub fn send(&self, message: &str) {
+        (self.send)(message)
+    }
+}
+
 #[component]
 pub fn Websocket() -> impl IntoView {
     let UseWebsocketReturn {
@@ -15,10 +43,15 @@ pub fn Websocket() -> impl IntoView {
         ..
     } = use_websocket("ws://0.0.0.0:3030/websocket");
 
+    provide_context(WebSocketContext::new(
+        ready_state,
+        message,
+        Rc::new(send.clone()),
+    ));
+
     // Signals
     let (online_users, set_online_users) = create_signal(0);
     let (active_games, set_active_games) = create_signal(0);
-    let (chat_history, set_chat_history) = create_signal::<Vec<String>>(vec![]);
 
     // Websocket stuff
     let status = move || ready_state.get().to_string();
@@ -37,23 +70,16 @@ pub fn Websocket() -> impl IntoView {
         packs: vec![0],
     };
 
-    // Game stuff
-    let new_game_test = move |_| {
-        send(&to_string(&fake_new_game_request).unwrap());
-    };
-
     let close_connection = move |_| {
         close();
         set_online_users(0);
         set_active_games(0);
-        update_chat_history(&set_chat_history, format!("Disconnected.\n"));
     };
-    // Chat stuff
-    let chat_history_ref = create_node_ref::<Textarea>();
 
-    fn update_chat_history(&history: &WriteSignal<Vec<String>>, message: String) {
-        let _ = &history.update(|history: &mut Vec<_>| history.push(message));
-    }
+    // Game stuff
+    let new_game_test = move |_| {
+        send(&to_string(&fake_new_game_request).unwrap());
+    };
 
     // handle incoming messages
 
@@ -75,29 +101,17 @@ pub fn Websocket() -> impl IntoView {
                     set_online_users(state_summary.online_users);
                     set_active_games(state_summary.active_games);
                 } else {
-                    update_chat_history(&set_chat_history, format!("{}\n", message));
+                    logging::log!("Send {} to Chat component", message);
+                    // update_chat_history(&set_chat_history, format!("{}\n", message));
                 }
             }
         })
     });
 
-    create_effect(move |_| {
-        chat_history.with(move |_| {
-            // Scroll chat textarea to bottom
-            if let Some(hist) = chat_history_ref.get() {
-                hist.set_scroll_top(hist.scroll_height());
-            }
-        })
-    });
-
-    // Login stuff
-    let (username, _set_username) = create_signal("ligma");
-
     view! {
         <div class="w-auto bg-slate-500">
             <hr/>
-            <h2 class="text-2xl">Connection</h2>
-
+            <h2 class="p-1 text-2xl">Server Info:</h2>
             <p class="p-1">"Users Online: " {online_users}</p>
             <p class="p-1">"Active Games: " {active_games}</p>
             <p class="p-1">"Connection Status: " {status}</p>
@@ -110,40 +124,129 @@ pub fn Websocket() -> impl IntoView {
                 </button>
             </div>
             <hr/>
-            <div class="p-1">
-                <h2 class="text-2xl">Sign in</h2>
-                <p>Username:</p>
-                <input
-                    class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
-                    placeholder={move || username.get()}
-                />
-            </div>
-            <hr />
-            <div class="p-1">
-                <h2 class="text-2xl">Chat</h2>
-                <textarea
-                    node_ref=chat_history_ref
-                    class="w-96 h-60 font-mono rounded-sm resize-none bg-slate-900 text-slate-200"
-                    readonly=true
-                    wrap="soft"
-                >
-                    {move || chat_history.get()}
-                </textarea>
-                <br/>
-                <input
-                    class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
-                    placeholder="talk shit..."
-                />
-                <br/>
-                // <button on:click=send_message disabled=move || !connected()>
-                //     "Send"
-                // </button>
-                <br />
-                <button on:click=new_game_test disabled=move || !connected()>
-                    "Test New Game"
-                </button>
-            </div>
+            <Auth/>
             <hr/>
+            <Chat/>
+            <hr/>
+            <button on:click=new_game_test disabled=move || !connected()>
+                "Test New Game"
+            </button>
+        </div>
+    }
+}
+
+#[component]
+pub fn Chat() -> impl IntoView {
+    let websocket = expect_context::<WebSocketContext>();
+
+    // Chat stuff
+    let (chat_history, set_chat_history) = create_signal::<Vec<String>>(vec![]);
+    let chat_history_ref = create_node_ref::<Textarea>();
+    let chat_input_ref = create_node_ref::<Input>();
+
+    fn update_chat_history(&history: &WriteSignal<Vec<String>>, message: String) {
+        let _ = &history.update(|history: &mut Vec<_>| history.push(message));
+    }
+
+    // Connection status updates in chat window
+    create_effect(move |_| {
+        websocket.ready_state.with(move |state| match *state {
+            ConnectionReadyState::Connecting => {
+                update_chat_history(&set_chat_history, format!("Connecting to game server...\n"));
+            }
+            ConnectionReadyState::Open => {
+                update_chat_history(&set_chat_history, format!("Connected!\n"));
+            }
+            ConnectionReadyState::Closing => {
+                update_chat_history(&set_chat_history, format!("Disconnecting...\n"));
+            }
+            ConnectionReadyState::Closed => {
+                update_chat_history(&set_chat_history, format!("Disconnected.\n"));
+            }
+        })
+    });
+
+    // let chat = move || {
+    //     if let Some(ye) = chat_input_ref.get() {
+    //         &websocket.send(&ye.value());
+    //     };
+    // };
+
+    // This should be done elsewhere
+    create_effect(move |_| {
+        websocket.message.with(move |message_raw| {
+            // Send all messages as strings into chat box
+            if let Some(message) = message_raw {
+                if let Ok(_game) = serde_json::from_str::<Game>(message) {
+                    logging::log!("Game object received at chat component");
+                } else if let Ok(_) = serde_json::from_str::<ServerStateSummary>(message) {
+                    logging::log!("State Summary received at chat component");
+                } else {
+                    update_chat_history(&set_chat_history, format!("{}\n", message));
+                }
+            }
+        })
+    });
+
+    let send_message = move |_| {
+        websocket.send(&chat_input_ref.get().unwrap().value());
+        chat_input_ref.get().unwrap().set_value("");
+        logging::log!("Send Message");
+    };
+
+    // Keep chat scrolled to the bottom
+    create_effect(move |_| {
+        chat_history.with(move |_| {
+            // Scroll chat textarea to bottom
+            if let Some(hist) = chat_history_ref.get() {
+                hist.set_scroll_top(hist.scroll_height());
+            }
+        })
+    });
+
+    view! {
+        <div class="p-1">
+            <h2 class="text-2xl">Chat:</h2>
+            <textarea
+                node_ref=chat_history_ref
+                class="w-96 h-60 font-mono rounded-sm resize-none bg-slate-900 text-slate-200"
+                readonly=true
+                wrap="soft"
+            >
+                {move || chat_history.get()}
+            </textarea>
+            <br/>
+            <span>
+                <input
+                    class="w-80 h-11 font-mono rounded-sm bg-slate-900 text-slate-200"
+                    placeholder="talk shit..."
+                    node_ref=chat_input_ref
+                    on:change=send_message.clone()
+                />
+                <input
+                    class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
+                    type="submit"
+                    value="Send"
+                    on:change=send_message.clone()
+                />
+            </span>
+            <br/>
+        </div>
+    }
+}
+
+#[component]
+pub fn Auth() -> impl IntoView {
+    let (username, _set_username) = create_signal("Anonymous");
+
+    view! {
+        <div class="p-1">
+            <h2 class="text-2xl">Sign in:</h2>
+            <p>Username:</p>
+            <input
+                class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
+                placeholder=move || username.get()
+            />
         </div>
     }
 }
diff --git a/client/src/pages/home.rs b/client/src/pages/home.rs
index 049095d..0d5418e 100644
--- a/client/src/pages/home.rs
+++ b/client/src/pages/home.rs
@@ -27,7 +27,7 @@ pub fn Home() -> impl IntoView {
             <div class="container m-auto">
                 <h1 class="text-6xl text-slate-300">"Cards For Humanity"</h1>
                 <Websocket/>
-            <a href="https://git.doordesk.net/adam/cards/">git</a>
+                <a href="https://git.doordesk.net/adam/cards/">git</a>
             </div>
         </ErrorBoundary>
     }
diff --git a/server/src/api.rs b/server/src/api.rs
index 6004713..304568e 100644
--- a/server/src/api.rs
+++ b/server/src/api.rs
@@ -15,7 +15,7 @@ use crate::message_handler::*;
 
 fn motd() -> String {
     format!(
-        "Welcome!"
+        "Greetings from the game server!"
     )
 }