cards/client/src/components/websocket.rs

use std::rc::Rc;

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());
    };

    // Contexts for message handler
    let (state_summary, set_state_summary) =
        create_signal::<Option<ServerStateSummary>>(Option::None);
    let (game_object, set_game_object) = create_signal::<Option<Game>>(Option::None);
    let (chat_message, set_chat_message) = create_signal::<Option<ChatMessage>>(Option::None);

    provide_context::<ReadSignal<Option<Game>>>(game_object);
    provide_context::<ReadSignal<Option<ChatMessage>>>(chat_message);
    provide_context::<ReadSignal<Option<ServerStateSummary>>>(state_summary);

    // Message handler
    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) {
                    set_game_object(Some(game));
                } else if let Ok(state_summary) =
                    serde_json::from_str::<ServerStateSummary>(message)
                {
                    set_state_summary(Some(state_summary));
                } else if let Ok(chat_message) = serde_json::from_str::<ChatMessage>(message) {
                    set_chat_message(Some(chat_message));
                } else {
                    logging::log!("Unhandled message: {}", message);
                }
            }
        })
    });

    // Update server info -> move this to a new component
    create_effect(move |_| {
        state_summary.with(move |state_summary| {
            if let Some(state_summary) = state_summary {
                set_online_users(state_summary.online_users);
                set_active_games(state_summary.active_games);
            }
        })
    });

    view! {
        <div class="w-auto">
            <hr/>
            <h2 class="p-1 text-2xl">Server Info:</h2>
            <p class="p-1">"Connection Status: " {status}</p>
            <p class="p-1">"Users Online: " {online_users}</p>
            <p class="p-1">"Active Games: " {active_games}</p>
            <div class="p-1">
                <button on:click=open_connection disabled=connected>
                    "Connect"
                </button>
                <button on:click=close_connection disabled=move || !connected()>
                    "Disconnect"
                </button>
                <button on:click=new_game_test disabled=move || !connected()>
                    "Test New Game"
                </button>
            </div>
        </div>
    }
}