cards/client/src/components/game.rs

use crate::components::game::header::*;
use crate::components::game::views::judging::*;
use crate::components::game::views::playing::*;
use crate::components::websocket::WebSocketContext;
use leptos::*;
use leptos_use::core::ConnectionReadyState;
use lib::*;
pub mod cards;
pub mod header;
pub mod views;

#[component]
pub fn Game() -> impl IntoView {
    // Websocket stuff
    let websocket = expect_context::<WebSocketContext>();
    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;

    // Incoming
    let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();
    let user_update = expect_context::<ReadSignal<Option<UserUpdate>>>();

    // Signals //
    let (judging, set_judging) = create_signal(false);

    // Determine judging
    create_effect(move |_| {
        user_update.with(move |user_meta| {
            if let Some(user_meta) = user_meta {
                if let Some(game_meta) = game_meta() {
                    if user_meta.username == game_meta.czar {
                        set_judging(true);
                    } else {
                        set_judging(false);
                    }
                }
            }
        })
    });

    view! {
        <div class="my-2">
            <h2 class="text-2xl">Game</h2>
            <Show when=move || { connected() } fallback=|| view! { <p>"Disconnected."</p> }>
                <Show
                    when=move || game_meta.get().is_some() && connected()
                    fallback=|| view! { "You are not in a game" }
                >
                    <Header />
                </Show>

                // Judging view //
                <Show when=move || { judging() && connected() && game_meta().is_some() }>
                    <JudgingView />
                </Show>

                // Playing view //
                <Show when=move || game_meta.get().is_some() && connected() && !judging()>
                    <PlayingView />
                </Show>
            </Show>
        </div>
    }
}