cards/client/src/components/game.rs

use crate::components::cards::*;
use crate::components::websocket::WebSocketContext;
use leptos::*;
use leptos_use::core::ConnectionReadyState;
use lib::*;
use serde_json::to_string;
use std::collections::HashMap;

#[component]
pub fn Game() -> impl IntoView {
    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());
    });
    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>>>();

    let (game_id, set_game_id) = create_signal("".to_string());
    let (game_name, set_game_name) = create_signal("".to_string());
    let (game_host, set_game_host) = create_signal("".to_string());
    let (game_players, set_game_players) = create_signal(vec![]);
    let (game_czar, set_game_czar) = create_signal("".to_string());
    let (game_white_count, set_game_white_count) = create_signal(0usize);
    let (game_black_count, set_game_black_count) = create_signal(0usize);
    let (game_white_discard_count, set_game_white_discard_count) = create_signal(0usize);
    let (game_black, set_game_black) = create_signal(("".to_string(), 0u8));
    let (selected_cards_ordered, set_selected_cards_ordered) = create_signal::<Vec<String>>(vec![]);
    let (player_hand, set_player_hand) = create_signal::<Vec<String>>(vec![]);
    let (player_white, set_player_white) =
        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());
    let (card_clicked, set_card_clicked) = create_signal::<String>(String::new());
    provide_context::<WriteSignal<String>>(set_card_clicked);

    // Clear everything on disconnect
    create_effect(move |_| {
        if !connected() {
            set_game_id("".to_string());
            set_game_name("".to_string());
            set_game_host("".to_string());
            set_game_players(vec![]);
            set_game_czar("".to_string());
            set_game_black(("".to_string(), 0u8));
            set_selected_cards_ordered(vec![]);
            set_player_hand(vec![]);
            set_player_white.update(|hand| {
                hand.clear();
            });
            set_game_white_count(0usize);
            set_game_black_count(0usize);
            set_game_white_discard_count(0usize);
        }
    });

    // Handle incoming judge message
    create_effect(move |_| {
        judge_round.with(move |judge_round| {
            set_player_hand.update(|list| {
                list.clear();
            });
            set_player_white.update(|list| {
                list.clear();
            });
            set_card_clicked.update(|list| {
                list.clear();
            });

            // Load hand
            if let Some(judge) = judge_round {
                for cards in judge.cards_to_judge.clone() {
                    for card in cards {
                        set_player_white.update(|hand| {
                            hand.insert(card.uuid.clone(), card.clone());
                        });
                        set_player_hand.update(|hand| {
                            hand.push(card.uuid.clone());
                        });
                    }
                }
            }
        });
    });

    // Handle incoming state update
    create_effect(move |_| {
        if let Some(game) = game_meta() {
            // Clear in case of (re-)joining game
            set_card_clicked.update(|list| {
                list.clear();
            });
            set_selected_cards_ordered.update(|list| {
                list.clear();
            });
            set_player_hand.update(|list| {
                list.clear();
            });
            set_player_white.update(|list| {
                list.clear();
            });

            // Load meta
            set_game_id(game.uuid.clone());
            set_game_name(game.name.clone());
            set_game_host(game.host.clone());
            set_game_players(game.players.clone());
            set_game_czar(game.czar.clone());
            set_game_black(game.black.clone());
            set_game_white_count(game.white_count.clone());
            set_game_black_count(game.black_count.clone());
            set_game_white_discard_count(game.white_discard_count.clone());

            // Load hand
            for card in game.white {
                set_player_white.update(|hand| {
                    hand.insert(card.uuid.clone(), card.clone());
                });
                set_player_hand.update(|hand| {
                    hand.push(card.uuid.clone());
                });
            }
        }
    });

    // Move cards back and forth between hand and selected when clicked
    create_effect(move |_| {
        if let Some(card_index) = player_hand()
            .iter()
            .position(|card| *card == card_clicked())
        {
            set_player_hand.update(|list| {
                list.remove(card_index);
            });

            set_selected_cards_ordered.update(|list| {
                list.push(card_clicked());
            })
        } else if let Some(card_index) = selected_cards_ordered()
            .iter()
            .position(|card| *card == card_clicked())
        {
            set_selected_cards_ordered.update(|list| {
                list.remove(card_index);
            });

            set_player_hand.update(|list| {
                list.push(card_clicked());
            })
        }
    });

    let submit_move = move |_| {
        let msg = to_string(&PlayerMoveRequest {
            game_id: game_id(),
            card_ids: selected_cards_ordered(),
        })
        .unwrap();

        set_websocket_send(msg);
    };

    let submit_judge = move |_| {
        let msg = to_string(&JudgeDecisionRequest {
            game_id: game_id(),
            winning_cards: selected_cards_ordered(),
        })
        .unwrap();

        set_websocket_send(msg);
    };

    view! {
        <div class="p-1">
            <div class="relative">
                <h2 class="text-2xl">Game</h2>
                <span>
                    <p>Name: {move || game_name()}</p>
                    <p>Host: {move || game_host()}</p>
                    <p>Czar: {move || game_czar()}</p>
                    <p>White Deck: {move || game_white_count().to_string()}</p>
                    <p>White Discard: {move || game_white_discard_count().to_string()}</p>
                    <p>Black Deck: {move || game_black_count().to_string()}</p>
                </span>
                <span class="absolute top-0 right-0">
                    <p>Players:</p>
                    <table class="min-w-full border border-collapse table-auto">
                        <thead>
                            <tr>
                                <th class="border-b">Name</th>
                                <th class="border-b">Score</th>
                            </tr>
                        </thead>
                        {move || {
                            game_players()
                                .iter()
                                .map(|player| {
                                    view! {
                                        <tr>
                                            <td class="text-center border-b">{&player.name}</td>
                                            <td class="text-center border-b">
                                                {&player.score.to_string()}
                                            </td>
                                        </tr>
                                    }
                                })
                                .collect_view()
                        }}
                    </table>
                </span>
            </div>

            // Game cards
            // TODO: offset this correctly
            <div class="w-full ms-16 inline-flex flex-wrap">
                <BlackCard card_data=game_black />

                // Card selection
                <For
                    each=move || selected_cards_ordered()
                    key=move |card| player_white().get(card).unwrap().uuid.clone()
                    children=move |card| {
                        view! { <WhiteCard card_data=player_white().get(&card).unwrap().clone() /> }
                    }
                />
            </div>
            <div class="w-full inline-flex flex-wrap justify-center">
                <button type="button" on:click=submit_move>
                    Submit
                </button>
            </div>
            <div class="w-full inline-flex flex-wrap justify-center">
                <button type="button" on:click=submit_judge>
                    Judge
                </button>
            </div>

            // Player cards
            <div class="inline-flex flex-wrap justify-center">
                <For
                    each=move || player_hand()
                    key=move |card| player_white().get(card).unwrap().uuid.clone()
                    children=move |card| {
                        view! { <WhiteCard card_data=player_white().get(&card).unwrap().clone() /> }
                    }
                />

            </div>
        </div>
    }
}