From a9e7636c58fe4db3585f5d5750a6c67b653b812d Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Wed, 28 Aug 2024 00:06:59 -0400
Subject: [PATCH] hide stuff when disconnected

---
 client/src/components/auth.rs        |  40 +++---
 client/src/components/browser.rs     | 117 ++++++++--------
 client/src/components/create_game.rs |   4 +-
 client/src/components/game.rs        | 196 ++++++++++++++-------------
 4 files changed, 184 insertions(+), 173 deletions(-)

diff --git a/client/src/components/auth.rs b/client/src/components/auth.rs
index bcf619c..29d2289 100644
--- a/client/src/components/auth.rs
+++ b/client/src/components/auth.rs
@@ -47,26 +47,28 @@ pub fn Auth() -> impl IntoView {
     view! {
         <div class="my-2">
             <h2 class="text-2xl">Sign in:</h2>
-            <p>
-                "You were already given a random name but if you'd like to change it this is the place. Identities are saved once created so if you leave or get disconnected just enter your old name here to \"log back in\". Please don't steal each other's identities (yes, you can)."
-            </p>
-            <br />
-            <p>Username:</p>
-            <form onsubmit="return false" on:submit=send_login>
-                <input
-                    class="w-96 font-mono rounded-sm bg-neutral-900 text-neutral-200"
-                    placeholder=move || username.get()
-                    node_ref=username_input_ref
-                    disabled=move || !connected()
-                />
+            <Show when=move || { connected() } fallback=|| view! { <p>"Disconnected."</p> }>
+                <p>
+                    "You were already given a random name but if you'd like to change it this is the place. Identities are saved once created so if you leave or get disconnected just enter your old name here to \"log back in\". Please don't steal each other's identities (yes, you can)."
+                </p>
                 <br />
-                <input
-                    class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-neutral-600 border-neutral-800 hover:bg-neutral-700 hover:border-neutral-500"
-                    type="submit"
-                    value="Send"
-                    disabled=move || !connected()
-                />
-            </form>
+                <p>Username:</p>
+                <form onsubmit="return false" on:submit=send_login.clone()>
+                    <input
+                        class="w-96 font-mono rounded-sm bg-neutral-900 text-neutral-200"
+                        placeholder=move || username.get()
+                        node_ref=username_input_ref
+                        disabled=move || !connected()
+                    />
+                    <br />
+                    <input
+                        class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-neutral-600 border-neutral-800 hover:bg-neutral-700 hover:border-neutral-500"
+                        type="submit"
+                        value="Send"
+                        disabled=move || !connected()
+                    />
+                </form>
+            </Show>
         </div>
     }
 }
diff --git a/client/src/components/browser.rs b/client/src/components/browser.rs
index b365204..ae33049 100644
--- a/client/src/components/browser.rs
+++ b/client/src/components/browser.rs
@@ -1,5 +1,6 @@
 use crate::components::websocket::WebSocketContext;
 use leptos::*;
+use leptos_use::core::ConnectionReadyState;
 use lib::*;
 use serde_json::to_string;
 
@@ -7,6 +8,8 @@ use serde_json::to_string;
 pub fn Browser() -> impl IntoView {
     // Websocket stuff
     let websocket = expect_context::<WebSocketContext>();
+    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
+
     let tx = websocket.clone();
     let (websocket_send, set_websocket_send) = create_signal("".to_string());
 
@@ -37,62 +40,66 @@ pub fn Browser() -> impl IntoView {
     view! {
         <div class="my-2">
             <h2 class="text-2xl">Game Browser</h2>
-            <p>"Yes, the delete button works. Please don't abuse it."</p>
-            <Show
-                when=move || { game_browser_context().len() > 0 }
-                fallback=|| view! { "No games to show right now.. Maybe you should create one!" }
-            >
-                <div>
-                    <table class="min-w-full border border-collapse table-auto">
-                        <thead>
-                            <tr>
-                                <th class="border-b">Name</th>
-                                <th class="border-b">Host</th>
-                                <th class="border-b">Players</th>
-                                <th class="border-b">Card Packs</th>
-                                <th class="border-b"></th>
-                            </tr>
-                        </thead>
-                        <For
-                            each=move || game_browser_context()
-                            key=|game| game.uuid.clone()
-                            children=move |game| {
-                                view! {
-                                    <tr>
-                                        <td class="text-center border-b">{&game.name}</td>
-                                        <td class="text-center border-b">{&game.host}</td>
-                                        <td class="text-center border-b">
-                                            {&game.players.to_string()}
-                                        </td>
-                                        <td class="text-center border-b">
-                                            {&game.packs.len().to_string()}
-                                        </td>
-                                        <td class="text-center border-b">
-                                            <button
-                                                type="button"
-                                                value=&game.uuid
-                                                on:click=move |e| {
-                                                    set_join_id(event_target_value(&e));
-                                                }
-                                            >
-                                                Join
-                                            </button>
-                                            <button
-                                                type="button"
-                                                value=&game.uuid
-                                                on:click=move |e| {
-                                                    set_delete_id(event_target_value(&e));
-                                                }
-                                            >
-                                                Delete
-                                            </button>
-                                        </td>
-                                    </tr>
+            <Show when=move || { connected() } fallback=|| view! { <p>"Disconnected."</p> }>
+                <Show
+                    when=move || { game_browser_context().len() > 0 }
+                    fallback=|| {
+                        view! { "No games to show right now.. Maybe you should create one!" }
+                    }
+                >
+                    <p>"Yes, the delete button works. Please don't abuse it."</p>
+                    <div>
+                        <table class="min-w-full border border-collapse table-auto">
+                            <thead>
+                                <tr>
+                                    <th class="border-b">Name</th>
+                                    <th class="border-b">Host</th>
+                                    <th class="border-b">Players</th>
+                                    <th class="border-b">Card Packs</th>
+                                    <th class="border-b"></th>
+                                </tr>
+                            </thead>
+                            <For
+                                each=move || game_browser_context()
+                                key=|game| game.uuid.clone()
+                                children=move |game| {
+                                    view! {
+                                        <tr>
+                                            <td class="text-center border-b">{&game.name}</td>
+                                            <td class="text-center border-b">{&game.host}</td>
+                                            <td class="text-center border-b">
+                                                {&game.players.to_string()}
+                                            </td>
+                                            <td class="text-center border-b">
+                                                {&game.packs.len().to_string()}
+                                            </td>
+                                            <td class="text-center border-b">
+                                                <button
+                                                    type="button"
+                                                    value=&game.uuid
+                                                    on:click=move |e| {
+                                                        set_join_id(event_target_value(&e));
+                                                    }
+                                                >
+                                                    Join
+                                                </button>
+                                                <button
+                                                    type="button"
+                                                    value=&game.uuid
+                                                    on:click=move |e| {
+                                                        set_delete_id(event_target_value(&e));
+                                                    }
+                                                >
+                                                    Delete
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    }
                                 }
-                            }
-                        />
-                    </table>
-                </div>
+                            />
+                        </table>
+                    </div>
+                </Show>
             </Show>
         </div>
     }
diff --git a/client/src/components/create_game.rs b/client/src/components/create_game.rs
index 0818023..df48ec5 100644
--- a/client/src/components/create_game.rs
+++ b/client/src/components/create_game.rs
@@ -62,10 +62,10 @@ pub fn CreateGame() -> impl IntoView {
 
     view! {
         <div class="my-2">
-            <Show when=move || connected() fallback=|| view! { <p>Disconnected.</p> }>
+            <h2 class="text-2xl">Create Game</h2>
+            <Show when=move || connected() fallback=|| view! { <p>"Disconnected."</p> }>
                 <div class="flex">
                     <form onsubmit="return false" on:submit=request_new_game>
-                        <h2 class="text-2xl">Create Game</h2>
                         <input
                             class="w-80 h-11 font-mono rounded-sm bg-neutral-900 text-neutral-200"
                             placeholder="Name"
diff --git a/client/src/components/game.rs b/client/src/components/game.rs
index f4b5910..dbab2e5 100644
--- a/client/src/components/game.rs
+++ b/client/src/components/game.rs
@@ -165,112 +165,114 @@ pub fn Game() -> impl IntoView {
     view! {
         <div class="my-2">
             <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>
+            <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 game_meta=game_meta().unwrap() />
+                </Show>
 
-            // Judging view //
+                // Judging view //
 
-            <Show when=move || { judging() && connected() }>
-                <div class="w-full ms-16 inline-flex flex-wrap">
-                    <BlackCard card_data=game_meta().unwrap().black />
+                <Show when=move || { judging() && 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>
+
+                    // Submit button
+                    <div class="w-full inline-flex flex-wrap justify-center">
+                        <button type="button" on:click=submit_judge>
+                            Submit
+                        </button>
+                    </div>
 
-                    // 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_judge>
-                        Submit
-                    </button>
-                </div>
-
-                <For
-                    each=move || judge_round().unwrap().cards_to_judge
-                    key=move |_| 69
-                    children=move |group| {
-                        view! {
-                            <div class="m-2 inline-flex flex-wrap justify-center">
-                                <For
-                                    each=move || group.clone()
-                                    key=move |card| card.uuid.clone()
-                                    children=move |card| {
-                                        view! {
-                                            // Hide cards from hand view when they exist as selected
-                                            <Show when={
-                                                let waste_of_memory = card.clone();
-                                                move || { !selected_cards().contains(&waste_of_memory) }
-                                            }>
-                                                <WhiteCard card_data=card.clone() />
-                                            </Show>
-                                        }
-                                    }
-                                />
-                            </div>
-                        }
-                    }
-                />
-            </Show>
-
-            // Playing view //
-
-            <Show when=move || game_meta.get().is_some() && connected() && !judging()>
-
-                // 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| {
+                        each=move || judge_round().unwrap().cards_to_judge
+                        key=move |_| 69
+                        children=move |group| {
                             view! {
-                                // Hide cards from hand view when they exist as selected
-                                <Show when={
-                                    let id = card.uuid.clone();
-                                    move || {
-                                        if let Some(card) = player_hand().get(&id) {
-                                            !selected_cards().contains(card)
-                                        } else {
-                                            true
+                                <div class="m-2 inline-flex flex-wrap justify-center">
+                                    <For
+                                        each=move || group.clone()
+                                        key=move |card| card.uuid.clone()
+                                        children=move |card| {
+                                            view! {
+                                                // Hide cards from hand view when they exist as selected
+                                                <Show when={
+                                                    let waste_of_memory = card.clone();
+                                                    move || { !selected_cards().contains(&waste_of_memory) }
+                                                }>
+                                                    <WhiteCard card_data=card.clone() />
+                                                </Show>
+                                            }
                                         }
-                                    }
-                                }>
-                                    <WhiteCard card_data=card.clone() />
-                                </Show>
+                                    />
+                                </div>
                             }
                         }
                     />
-                </div>
+                </Show>
+
+                // Playing view //
+
+                <Show when=move || game_meta.get().is_some() && connected() && !judging()>
+
+                    // 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) = player_hand().get(&id) {
+                                                !selected_cards().contains(card)
+                                            } else {
+                                                true
+                                            }
+                                        }
+                                    }>
+                                        <WhiteCard card_data=card.clone() />
+                                    </Show>
+                                }
+                            }
+                        />
+                    </div>
+                </Show>
             </Show>
 
         </div>