135 lines
4.8 KiB
Rust
135 lines
4.8 KiB
Rust
use crate::components::websocket::WebSocketContext;
|
|
use html::{Input, Textarea};
|
|
use leptos::*;
|
|
use leptos_use::core::ConnectionReadyState;
|
|
use lib::*;
|
|
use serde_json::to_string;
|
|
|
|
#[component]
|
|
pub fn Chat() -> impl IntoView {
|
|
let websocket = expect_context::<WebSocketContext>();
|
|
let chat_context = expect_context::<ReadSignal<Option<ChatMessage>>>();
|
|
let chat_update_context = expect_context::<ReadSignal<Option<ChatUpdate>>>();
|
|
let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
|
|
|
|
// Chat stuff
|
|
let (chat_history, set_chat_history) = create_signal::<Vec<String>>(vec![]);
|
|
let (users, set_users) = create_signal::<Vec<String>>(vec![]);
|
|
let (chat_name, set_chat_name) = create_signal::<String>("".to_string());
|
|
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());
|
|
}
|
|
})
|
|
});
|
|
|
|
// Handle incoming chat messages
|
|
create_effect(move |_| {
|
|
chat_context.with(move |chat_message| {
|
|
if let Some(message) = chat_message {
|
|
update_chat_history(&set_chat_history, format!("{}\n", message.text));
|
|
}
|
|
})
|
|
});
|
|
|
|
// Handle users
|
|
create_effect(move |_| {
|
|
chat_update_context.with(move |chat_update| {
|
|
if let Some(update) = chat_update {
|
|
set_users(update.users.clone());
|
|
set_chat_name(update.room.clone());
|
|
}
|
|
})
|
|
});
|
|
|
|
// Clear user list on disconnect
|
|
create_effect(move |_| {
|
|
websocket.ready_state.with(move |status| {
|
|
if *status == ConnectionReadyState::Closed {
|
|
set_users(vec![]);
|
|
}
|
|
})
|
|
});
|
|
|
|
// Handle sending messages
|
|
let send_message = move |_| {
|
|
if let Some(input) = chat_input_ref.get() {
|
|
if input.value() != String::from("") {
|
|
websocket.send(
|
|
&to_string(&ChatMessage {
|
|
text: input.value(),
|
|
})
|
|
.unwrap(),
|
|
);
|
|
input.set_value("");
|
|
}
|
|
}
|
|
};
|
|
|
|
// 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="my-2">
|
|
<h2 class="text-2xl">Chat: {move || chat_name()}</h2>
|
|
<span class="flex">
|
|
<textarea
|
|
node_ref=chat_history_ref
|
|
class="w-96 h-60 font-mono rounded-sm resize-none bg-neutral-900 text-neutral-200"
|
|
readonly=true
|
|
wrap="soft"
|
|
>
|
|
{move || chat_history.get()}
|
|
</textarea>
|
|
<ul>
|
|
<h2 class="text-2xl">Users: {move || users().len()}</h2>
|
|
{move || users().into_iter().map(|n| view! { <li>{n}</li> }).collect_view()}
|
|
</ul>
|
|
</span>
|
|
<br />
|
|
<span>
|
|
<form onsubmit="return false" on:submit=send_message>
|
|
<input
|
|
class="w-80 h-11 font-mono rounded-sm bg-neutral-900 text-neutral-200"
|
|
placeholder="talk shit..."
|
|
node_ref=chat_input_ref
|
|
/>
|
|
<input
|
|
class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-neutral-600 border-neutral-800 hover:bg-neutral-700 hover:border-neutral-500"
|
|
type="submit"
|
|
value="Send"
|
|
disabled=move || !connected()
|
|
/>
|
|
</form>
|
|
</span>
|
|
</div>
|
|
}
|
|
}
|