cards/client/src/components/game.rs

use crate::components::cards::*;
use crate::components::game::header::*;
use crate::components::websocket::WebSocketContext;
use leptos::*;
use leptos_use::core::ConnectionReadyState;
use lib::*;
use serde_json::to_string;
use std::collections::HashMap;
pub mod header;
pub mod meta;
pub mod scoreboard;

#[component]
pub fn Game() -> impl IntoView {
    // Websocket stuff
    let websocket = expect_context::<WebSocketContext>();
    let tx = websocket.clone();
    let (websocket_send, set_websocket_send) = create_signal("".to_string());
    create_effect(move |_| {
        tx.send(&websocket_send());
    });

    // Incoming
    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
    let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();
    let judge_round = expect_context::<ReadSignal<Option<JudgeRound>>>();

    // Internal
    let (selected_cards, set_selected_cards) = create_signal::<Vec<WhiteCardMeta>>(vec![]);
    let (card_clicked, set_card_clicked) = create_signal::<String>(String::new());
    let (white_map, set_white_map) =
        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());

    // For subcomponents
    provide_context::<WriteSignal<String>>(set_card_clicked);

    // Put cards in a map for easier lookup
    // The server sends a vec to preserve ordering
    create_effect(move |_| {
        if game_meta().is_some() {
            for card in game_meta().unwrap().white {
                set_white_map.update(|map| {
                    map.insert(card.uuid.clone(), card.clone());
                });
            }
        }
    });

    // Toggle selected status of cards
    create_effect(move |_| {
        if card_clicked() != "".to_string() {
            if !selected_cards().contains(white_map().get(&card_clicked()).unwrap()) {
                set_selected_cards
                    .update(|cards| cards.push(white_map().get(&card_clicked()).unwrap().clone()))
            } else if selected_cards().contains(white_map().get(&card_clicked()).unwrap()) {
                set_selected_cards.update(|cards| {
                    cards.remove(
                        cards
                            .iter()
                            .position(|card| card == white_map().get(&card_clicked()).unwrap())
                            .unwrap(),
                    );
                })
            }

            // You can't clear selected_cards without this line so don't fuck with it
            set_card_clicked("".to_string());
        }
    });

    // Runs when submit button is clicked
    let submit_move = move |_| {
        let msg = to_string(&PlayerMoveRequest {
            game_id: game_meta().unwrap().uuid.clone(),
            card_ids: selected_cards()
                .iter()
                .map(|card| card.uuid.clone())
                .collect(),
        })
        .unwrap();

        set_websocket_send(msg);
    };

    // On incoming judge
    create_effect(move |_| {
        // Clear selected cards
        if judge_round().is_some() {
            set_selected_cards.update(|list| {
                list.clear();
            });
        }
    });

    // Runs when judging submit button is clicked
    let submit_judge = move |_| {
        let msg = to_string(&JudgeDecisionRequest {
            game_id: game_meta().unwrap().uuid.clone(),
            winning_cards: selected_cards()
                .iter()
                .map(|card| card.uuid.clone())
                .collect(),
        })
        .unwrap();

        set_websocket_send(msg);
    };

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

            // ////////////////////
            // Player is judging //
            // ////////////////////

            <Show when=move || { judge_round.get().is_some() && connected() }>
                <div class="w-full ms-16 inline-flex flex-wrap">
                    <BlackCard card_data=game_meta().unwrap().black />

                    // Selected cards
                    <For
                        each=move || selected_cards()
                        key=move |card| card.uuid.clone()
                        children=move |card| {
                            view! { <WhiteCard card_data=card.clone() /> }
                        }
                    />
                </div>

                {judge_round()
                    .unwrap()
                    .cards_to_judge
                    .iter()
                    .map(|group| view! { {format!("{:#?}", group)} })
                    .collect_view()}

                <For
                    each=move || judge_round().unwrap().cards_to_judge
                    key=move |_| 69
                    children=move |group| { { format!("{:#?}", group) } }
                />

                // Submit button
                <div class="w-full inline-flex flex-wrap justify-center">
                    <button type="button" on:click=submit_judge>
                        Submit
                    </button>
                </div>
            </Show>

            // ////////////////////
            // Player is playing //
            // ////////////////////

            <Show when=move || game_meta.get().is_some() && connected() && !judge_round().is_some()>

                // Play cards
                <div class="w-full ms-16 inline-flex flex-wrap">
                    <BlackCard card_data=game_meta().unwrap().black />

                    // Selected cards
                    <For
                        each=move || selected_cards()
                        key=move |card| card.uuid.clone()
                        children=move |card| {
                            view! { <WhiteCard card_data=card.clone() /> }
                        }
                    />
                </div>

                // Submit button
                <div class="w-full inline-flex flex-wrap justify-center">
                    <button type="button" on:click=submit_move>
                        Submit
                    </button>
                </div>

                // Player hand
                <div class="inline-flex flex-wrap justify-center">
                    <For
                        each=move || game_meta().unwrap().white
                        key=move |card| card.uuid.clone()
                        children=move |card| {
                            view! {
                                // Hide cards from hand view when they exist as selected
                                <Show when={
                                    let id = card.uuid.clone();
                                    move || {
                                        if let Some(card) = white_map().get(&id) {
                                            !selected_cards().contains(card)
                                        } else {
                                            true
                                        }
                                    }
                                }>
                                    <WhiteCard card_data=card.clone() />
                                </Show>
                            }
                        }
                    />
                </div>
            </Show>

        </div>
    }
}