From 89344c6042d96baca2f3a80a61096ba2d735a9fd Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Mon, 26 Aug 2024 23:54:47 -0400
Subject: [PATCH] clean up stuff on disconnect

---
 client/src/components/browser.rs   | 342 +++++++++++++++--------------
 client/src/components/websocket.rs |  14 +-
 2 files changed, 185 insertions(+), 171 deletions(-)

diff --git a/client/src/components/browser.rs b/client/src/components/browser.rs
index e64ebea..ef46a00 100644
--- a/client/src/components/browser.rs
+++ b/client/src/components/browser.rs
@@ -60,185 +60,187 @@ pub fn Browser() -> impl IntoView {
 
     view! {
         <div class="p-1">
-            <h2 class="text-2xl">Game Browser</h2>
-            <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>
-                {move || {
-                    game_browser_context()
-                        .iter()
-                        .map(|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> }>
+                <h2 class="text-2xl">Game Browser</h2>
+                <div class="p-1">
+                    <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>
+                                }
                             }
-                        })
-                        .collect_view()
-                }}
-
-            </table>
-        </div>
-        <hr />
-
-        <div class="flex p-1">
-            <form onsubmit="return false" on:submit=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"
-                    disabled=move || !connected()
-                    node_ref=new_game_name_ref
-                />
-                <h2 class="text-2xl">Packs</h2>
-                <div class="p-2">
-                    <button type="button" class="bg-neutral-600">
-                        <input type="checkbox" id="all" />
-                        <label for="all">All</label>
-                    </button>
-                    <button type="button" class="bg-neutral-600">
-                        <input type="checkbox" id="official" checked />
-                        <label for="official">Official</label>
-                    </button>
-                    <button type="button" class="bg-neutral-600" on:click=show_packs_button>
-                        <label>Custom</label>
-                    </button>
-                    TODO: finish this
+                        />
+                    </table>
                 </div>
-                <Show when=move || show_packs()>
-                    <span class="flex">
-                        <div>
-                            <h2 class="text-xl">Official</h2>
-                            {move || {
-                                card_packs()
-                                    .official_meta
-                                    .into_iter()
-                                    .map(|n| {
-                                        view! {
-                                            <input
-                                                type="checkbox"
-                                                value=n.pack
-                                                id=n.pack
-                                                checked
-                                                on:change=move |e| {
-                                                    if event_target_checked(&e) {
-                                                        logging::log!("insert");
-                                                        set_selected_packs
-                                                            .update(|packs| {
-                                                                packs.insert(n.pack);
-                                                            })
-                                                    } else {
-                                                        logging::log!("remove");
-                                                        set_selected_packs
-                                                            .update(|packs| {
-                                                                packs.remove(&n.pack);
-                                                            })
-                                                    }
-                                                }
-                                            />
-
-                                            <label for=n.pack>{n.name}</label>
-                                            <br />
-
-                                            // hax
-                                            {set_selected_packs
-                                                .update(|packs| {
-                                                    packs.insert(n.pack);
-                                                })}
-                                        }
-                                    })
-                                    .collect_view()
-                            }}
+                <hr />
 
+                <div class="flex p-1">
+                    <form onsubmit="return false" on:submit=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"
+                            disabled=move || !connected()
+                            node_ref=new_game_name_ref
+                        />
+                        <h2 class="text-2xl">Packs</h2>
+                        <div class="p-2">
+                            <button type="button" class="bg-neutral-600">
+                                <input type="checkbox" id="all" />
+                                <label for="all">All</label>
+                            </button>
+                            <button type="button" class="bg-neutral-600">
+                                <input type="checkbox" id="official" checked />
+                                <label for="official">Official</label>
+                            </button>
+                            <button type="button" class="bg-neutral-600" on:click=show_packs_button>
+                                <label>Custom</label>
+                            </button>
+                            TODO: finish this
                         </div>
-                        <div>
-                            <h2 class="text-xl">Unofficial</h2>
-                            {move || {
-                                card_packs()
-                                    .unofficial_meta
-                                    .into_iter()
-                                    .map(|n| {
-                                        view! {
-                                            <input
-                                                checked
-                                                type="checkbox"
-                                                value=n.pack
-                                                id=n.pack
-                                                on:change=move |e| {
-                                                    if event_target_checked(&e) {
-                                                        logging::log!("insert");
-                                                        set_selected_packs
-                                                            .update(|packs| {
-                                                                packs.insert(n.pack);
-                                                            })
-                                                    } else {
-                                                        logging::log!("remove");
-                                                        set_selected_packs
-                                                            .update(|packs| {
-                                                                packs.remove(&n.pack);
-                                                            })
-                                                    }
+                        <Show when=move || show_packs()>
+                            <span class="flex">
+                                <div>
+                                    <h2 class="text-xl">Official</h2>
+                                    {move || {
+                                        card_packs()
+                                            .official_meta
+                                            .into_iter()
+                                            .map(|n| {
+                                                view! {
+                                                    <input
+                                                        type="checkbox"
+                                                        value=n.pack
+                                                        id=n.pack
+                                                        checked
+                                                        on:change=move |e| {
+                                                            if event_target_checked(&e) {
+                                                                logging::log!("insert");
+                                                                set_selected_packs
+                                                                    .update(|packs| {
+                                                                        packs.insert(n.pack);
+                                                                    })
+                                                            } else {
+                                                                logging::log!("remove");
+                                                                set_selected_packs
+                                                                    .update(|packs| {
+                                                                        packs.remove(&n.pack);
+                                                                    })
+                                                            }
+                                                        }
+                                                    />
+
+                                                    <label for=n.pack>{n.name}</label>
+                                                    <br />
+
+                                                    // hax
+                                                    {set_selected_packs
+                                                        .update(|packs| {
+                                                            packs.insert(n.pack);
+                                                        })}
                                                 }
-                                            />
+                                            })
+                                            .collect_view()
+                                    }}
 
-                                            <label for=n.pack>{n.name}</label>
-                                            <br />
+                                </div>
+                                <div>
+                                    <h2 class="text-xl">Unofficial</h2>
+                                    {move || {
+                                        card_packs()
+                                            .unofficial_meta
+                                            .into_iter()
+                                            .map(|n| {
+                                                view! {
+                                                    <input
+                                                        checked
+                                                        type="checkbox"
+                                                        value=n.pack
+                                                        id=n.pack
+                                                        on:change=move |e| {
+                                                            if event_target_checked(&e) {
+                                                                logging::log!("insert");
+                                                                set_selected_packs
+                                                                    .update(|packs| {
+                                                                        packs.insert(n.pack);
+                                                                    })
+                                                            } else {
+                                                                logging::log!("remove");
+                                                                set_selected_packs
+                                                                    .update(|packs| {
+                                                                        packs.remove(&n.pack);
+                                                                    })
+                                                            }
+                                                        }
+                                                    />
 
-                                            // hax
-                                            {set_selected_packs
-                                                .update(|packs| {
-                                                    packs.insert(n.pack);
-                                                })}
-                                        }
-                                    })
-                                    .collect_view()
-                            }}
+                                                    <label for=n.pack>{n.name}</label>
+                                                    <br />
 
-                        </div>
-                    </span>
-                </Show>
+                                                    // hax
+                                                    {set_selected_packs
+                                                        .update(|packs| {
+                                                            packs.insert(n.pack);
+                                                        })}
+                                                }
+                                            })
+                                            .collect_view()
+                                    }}
 
-                <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"
-                    disabled=move || !connected()
-                    value="New Game"
-                />
-            </form>
+                                </div>
+                            </span>
+                        </Show>
+
+                        <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"
+                            disabled=move || !connected()
+                            value="New Game"
+                        />
+                    </form>
+                </div>
+            </Show>
         </div>
     }
 }
diff --git a/client/src/components/websocket.rs b/client/src/components/websocket.rs
index 46771f6..6a52f6e 100644
--- a/client/src/components/websocket.rs
+++ b/client/src/components/websocket.rs
@@ -54,9 +54,10 @@ pub fn Websocket() -> impl IntoView {
         Rc::new(close.clone()),
     ));
 
-    // TODO: This context stuff can probably be done better
+    let connected = move || ready_state.get() == ConnectionReadyState::Open;
 
     // Contexts for message handler
+    // TODO: This context stuff can probably be done better
     let (state_summary, set_state_summary) =
         create_signal::<Option<ServerStateSummary>>(Option::None);
     let (active_games, set_active_games) = create_signal::<Vec<GameBrowserMeta>>(vec![]);
@@ -70,6 +71,17 @@ pub fn Websocket() -> impl IntoView {
         unofficial_meta: vec![],
     });
 
+    create_effect(move |_| {
+        if !connected() {
+            set_active_games.set_untracked(vec![]);
+            set_user_update.set_untracked(None);
+            set_chat_update.set_untracked(None);
+            set_judge_round.set_untracked(None);
+            set_chat_message.set_untracked(None);
+            set_current_game.set_untracked(None);
+        }
+    });
+
     provide_context::<ReadSignal<CardPacksMeta>>(card_packs_meta);
     provide_context::<ReadSignal<Option<UserUpdate>>>(user_update);
     provide_context::<ReadSignal<Option<ChatUpdate>>>(chat_update);