112 lines
3.9 KiB
Rust
112 lines
3.9 KiB
Rust
use crate::components::websocket::WebSocketContext;
|
|
use html::{Input, Textarea};
|
|
use leptos::*;
|
|
use leptos_use::core::ConnectionReadyState;
|
|
use lib::models::*;
|
|
|
|
#[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,
|
|
"Connecting to game server...\n".to_string(),
|
|
);
|
|
}
|
|
ConnectionReadyState::Open => {
|
|
update_chat_history(&set_chat_history, "Connected!\n".to_string());
|
|
}
|
|
ConnectionReadyState::Closing => {
|
|
update_chat_history(&set_chat_history, "Disconnecting...\n".to_string());
|
|
}
|
|
ConnectionReadyState::Closed => {
|
|
update_chat_history(&set_chat_history, "Disconnected.\n".to_string());
|
|
}
|
|
})
|
|
});
|
|
|
|
// 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(_state_summary) =
|
|
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(&serde_json::to_string(&ChatMessage {
|
|
text: chat_input_ref.get().unwrap().value(),
|
|
}).unwrap());
|
|
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>
|
|
}
|
|
}
|