cards/client/src/components/websocket.rs

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 {
        ready_state,
        message,
        send,
        open,
        close,
        ..
    } = 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);

    // Websocket stuff
    let status = move || ready_state.get().to_string();
    let connected = move || ready_state.get() == ConnectionReadyState::Open;
    let open_connection = move |_| {
        open();
    };
    let fake_new_game_request = NewGameRequest {
        name: String::from("Ligma"),
        host: Player {
            name: String::from("Adam"),
            role: PlayerRole::Host,
            white: vec![],
            black: vec![],
        },
        packs: vec![0],
    };

    let close_connection = move |_| {
        close();
        set_online_users(0);
        set_active_games(0);
    };

    // Game stuff
    let new_game_test = move |_| {
        send(&to_string(&fake_new_game_request).unwrap());
    };

    // handle incoming messages

    create_effect(move |_| {
        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.");
                } else if let Ok(state_summary) =
                    serde_json::from_str::<ServerStateSummary>(message)
                {
                    logging::log!(
                        "Users: {}\nGames: {}",
                        state_summary.online_users,
                        state_summary.active_games
                    );
                    set_online_users(state_summary.online_users);
                    set_active_games(state_summary.active_games);
                } else {
                    logging::log!("Send {} to Chat component", message);
                    // update_chat_history(&set_chat_history, format!("{}\n", message));
                }
            }
        })
    });

    view! {
        <div class="w-auto bg-slate-500">
            <hr/>
            <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>
            <div class="p-1">
                <button on:click=open_connection disabled=connected>
                    "Connect"
                </button>
                <button on:click=close_connection disabled=move || !connected()>
                    "Disconnect"
                </button>
            </div>
            <hr/>
            <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>
    }
}