hide stuff when disconnected

This commit is contained in:
Adam 2024-08-28 00:06:59 -04:00
parent 103a92b486
commit a9e7636c58
4 changed files with 184 additions and 173 deletions

View file

@ -47,12 +47,13 @@ pub fn Auth() -> impl IntoView {
view! {
<div class="my-2">
<h2 class="text-2xl">Sign in:</h2>
<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 />
<p>Username:</p>
<form onsubmit="return false" on:submit=send_login>
<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()
@ -67,6 +68,7 @@ pub fn Auth() -> impl IntoView {
disabled=move || !connected()
/>
</form>
</Show>
</div>
}
}

View file

@ -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,11 +40,14 @@ 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 || { 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!" }
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>
@ -94,6 +100,7 @@ pub fn Browser() -> impl IntoView {
</table>
</div>
</Show>
</Show>
</div>
}
}

View file

@ -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"

View file

@ -165,6 +165,7 @@ pub fn Game() -> impl IntoView {
view! {
<div class="my-2">
<h2 class="text-2xl">Game</h2>
<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" }
@ -272,6 +273,7 @@ pub fn Game() -> impl IntoView {
/>
</div>
</Show>
</Show>
</div>
}