hide stuff when disconnected
This commit is contained in:
Adam
parent
103a92b486
commit
a9e7636c58
4 changed files with 184 additions and 173 deletions
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue