cards/client/src/components/game/views/playing.rs

use crate::components::game::cards::*;
use crate::components::websocket::WebSocketContext;
use leptos::*;
use lib::*;
use serde_json::to_string;
use std::collections::{HashMap, HashSet};

#[component]
pub fn PlayingView() -> impl IntoView {
    // Incoming
    let websocket = expect_context::<WebSocketContext>();
    let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();

    // Signals
    let (selected_cards, set_selected_cards) = create_signal::<Vec<WhiteCardMeta>>(vec![]);
    let (submitted_cards, set_submitted_cards) =
        create_signal::<HashSet<WhiteCardMeta>>(HashSet::new());
    let (card_clicked, set_card_clicked) = create_signal::<String>(String::new());
    let (submitted, set_submitted) = create_signal(false);
    let (player_hand, set_player_hand) =
        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());

    // Outoging
    provide_context::<WriteSignal<String>>(set_card_clicked);

    // On Incoming Meta //
    // 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_player_hand.update(|map| {
                    map.insert(card.uuid.clone(), card.clone());
                });
            }
        }
        set_selected_cards.update(|list| {
            list.clear();
        });
        set_submitted_cards.update(|list| {
            list.clear();
        });
        set_submitted(false);
    });

    // Card selection
    // Toggle selected status of cards
    create_effect(move |_| {
        if card_clicked() != "".to_string()
            && !submitted()
            && submitted_cards().len() < game_meta().unwrap().black.1.into()
        {
            if let Some(clicked_card) = player_hand
                .get_untracked()
                .get(&card_clicked.get_untracked())
            {
                if !selected_cards.get_untracked().contains(clicked_card) {
                    set_selected_cards.update(|cards| cards.push(clicked_card.to_owned()))
                } else if selected_cards.get_untracked().contains(clicked_card)
                    && !submitted_cards.get_untracked().contains(clicked_card)
                {
                    set_selected_cards.update(|cards| {
                        cards.remove(cards.iter().position(|card| card == clicked_card).unwrap());
                    })
                }
            }
            // Clear the signal otherwise it selects the last selected card again
            set_card_clicked.update_untracked(|value| value.clear());
        }
    });

    // Player Submit Handler //
    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_submitted_cards.update_untracked(|cards| {
            for card in selected_cards.get_untracked() {
                cards.insert(card);
            }
        });

        if submitted_cards().len() < game_meta().unwrap().black.1.into() {
            return;
        }

        websocket.send(&msg);
        set_selected_cards.update_untracked(|list| {
            list.clear();
        });
        set_submitted(true);
    };

    view! {
        <div class="w-full ms-16 inline-flex flex-wrap">
            <BlackCard />

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

        </div>

        // Submit button
        <div class="w-full inline-flex flex-wrap justify-center">
            <Show
                when=move || !submitted()
                fallback=move || {
                    view! { <p>"Card(s) submitted. Waiting for other players..."</p> }
                }
            >

                <button type="button" on:click=submit_move.clone()>
                    Submit
                </button>
            </Show>
        </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 or submitted
                        <Show when={
                            let id = card.uuid.clone();
                            move || {
                                if let Some(card) = player_hand().get(&id) {
                                    !selected_cards().contains(card)
                                        && !submitted_cards().contains(card)
                                } else {
                                    true
                                }
                            }
                        }>
                            <WhiteCard card_data=card.clone() />
                        </Show>
                    }
                }
            />

        </div>
    }
}