cards/client/src/components/chat.rs

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="p-1">
            <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-slate-900 text-slate-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-slate-900 text-slate-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-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
                        type="submit"
                        value="Send"
                        disabled=move || !connected()
                    />
                </form>
            </span>
            <br/>
        </div>
    }
}