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! {
|
view! {
|
||||||
<div class="my-2">
|
<div class="my-2">
|
||||||
<h2 class="text-2xl">Sign in:</h2>
|
<h2 class="text-2xl">Sign in:</h2>
|
||||||
<p>
|
<Show when=move || { connected() } fallback=|| view! { <p>"Disconnected."</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>
|
||||||
</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)."
|
||||||
<br />
|
</p>
|
||||||
<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()
|
|
||||||
/>
|
|
||||||
<br />
|
<br />
|
||||||
<input
|
<p>Username:</p>
|
||||||
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"
|
<form onsubmit="return false" on:submit=send_login.clone()>
|
||||||
type="submit"
|
<input
|
||||||
value="Send"
|
class="w-96 font-mono rounded-sm bg-neutral-900 text-neutral-200"
|
||||||
disabled=move || !connected()
|
placeholder=move || username.get()
|
||||||
/>
|
node_ref=username_input_ref
|
||||||
</form>
|
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>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
use crate::components::websocket::WebSocketContext;
|
use crate::components::websocket::WebSocketContext;
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
|
use leptos_use::core::ConnectionReadyState;
|
||||||
use lib::*;
|
use lib::*;
|
||||||
use serde_json::to_string;
|
use serde_json::to_string;
|
||||||
|
|
||||||
|
|
@ -7,6 +8,8 @@ use serde_json::to_string;
|
||||||
pub fn Browser() -> impl IntoView {
|
pub fn Browser() -> impl IntoView {
|
||||||
// Websocket stuff
|
// Websocket stuff
|
||||||
let websocket = expect_context::<WebSocketContext>();
|
let websocket = expect_context::<WebSocketContext>();
|
||||||
|
let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
|
||||||
|
|
||||||
let tx = websocket.clone();
|
let tx = websocket.clone();
|
||||||
let (websocket_send, set_websocket_send) = create_signal("".to_string());
|
let (websocket_send, set_websocket_send) = create_signal("".to_string());
|
||||||
|
|
||||||
|
|
@ -37,62 +40,66 @@ pub fn Browser() -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
<div class="my-2">
|
<div class="my-2">
|
||||||
<h2 class="text-2xl">Game Browser</h2>
|
<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
|
<Show
|
||||||
when=move || { game_browser_context().len() > 0 }
|
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!" }
|
||||||
<div>
|
}
|
||||||
<table class="min-w-full border border-collapse table-auto">
|
>
|
||||||
<thead>
|
<p>"Yes, the delete button works. Please don't abuse it."</p>
|
||||||
<tr>
|
<div>
|
||||||
<th class="border-b">Name</th>
|
<table class="min-w-full border border-collapse table-auto">
|
||||||
<th class="border-b">Host</th>
|
<thead>
|
||||||
<th class="border-b">Players</th>
|
<tr>
|
||||||
<th class="border-b">Card Packs</th>
|
<th class="border-b">Name</th>
|
||||||
<th class="border-b"></th>
|
<th class="border-b">Host</th>
|
||||||
</tr>
|
<th class="border-b">Players</th>
|
||||||
</thead>
|
<th class="border-b">Card Packs</th>
|
||||||
<For
|
<th class="border-b"></th>
|
||||||
each=move || game_browser_context()
|
</tr>
|
||||||
key=|game| game.uuid.clone()
|
</thead>
|
||||||
children=move |game| {
|
<For
|
||||||
view! {
|
each=move || game_browser_context()
|
||||||
<tr>
|
key=|game| game.uuid.clone()
|
||||||
<td class="text-center border-b">{&game.name}</td>
|
children=move |game| {
|
||||||
<td class="text-center border-b">{&game.host}</td>
|
view! {
|
||||||
<td class="text-center border-b">
|
<tr>
|
||||||
{&game.players.to_string()}
|
<td class="text-center border-b">{&game.name}</td>
|
||||||
</td>
|
<td class="text-center border-b">{&game.host}</td>
|
||||||
<td class="text-center border-b">
|
<td class="text-center border-b">
|
||||||
{&game.packs.len().to_string()}
|
{&game.players.to_string()}
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center border-b">
|
<td class="text-center border-b">
|
||||||
<button
|
{&game.packs.len().to_string()}
|
||||||
type="button"
|
</td>
|
||||||
value=&game.uuid
|
<td class="text-center border-b">
|
||||||
on:click=move |e| {
|
<button
|
||||||
set_join_id(event_target_value(&e));
|
type="button"
|
||||||
}
|
value=&game.uuid
|
||||||
>
|
on:click=move |e| {
|
||||||
Join
|
set_join_id(event_target_value(&e));
|
||||||
</button>
|
}
|
||||||
<button
|
>
|
||||||
type="button"
|
Join
|
||||||
value=&game.uuid
|
</button>
|
||||||
on:click=move |e| {
|
<button
|
||||||
set_delete_id(event_target_value(&e));
|
type="button"
|
||||||
}
|
value=&game.uuid
|
||||||
>
|
on:click=move |e| {
|
||||||
Delete
|
set_delete_id(event_target_value(&e));
|
||||||
</button>
|
}
|
||||||
</td>
|
>
|
||||||
</tr>
|
Delete
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
/>
|
||||||
/>
|
</table>
|
||||||
</table>
|
</div>
|
||||||
</div>
|
</Show>
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -62,10 +62,10 @@ pub fn CreateGame() -> impl IntoView {
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<div class="my-2">
|
<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">
|
<div class="flex">
|
||||||
<form onsubmit="return false" on:submit=request_new_game>
|
<form onsubmit="return false" on:submit=request_new_game>
|
||||||
<h2 class="text-2xl">Create Game</h2>
|
|
||||||
<input
|
<input
|
||||||
class="w-80 h-11 font-mono rounded-sm bg-neutral-900 text-neutral-200"
|
class="w-80 h-11 font-mono rounded-sm bg-neutral-900 text-neutral-200"
|
||||||
placeholder="Name"
|
placeholder="Name"
|
||||||
|
|
|
||||||
|
|
@ -165,112 +165,114 @@ pub fn Game() -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
<div class="my-2">
|
<div class="my-2">
|
||||||
<h2 class="text-2xl">Game</h2>
|
<h2 class="text-2xl">Game</h2>
|
||||||
<Show
|
<Show when=move || { connected() } fallback=|| view! { <p>"Disconnected."</p> }>
|
||||||
when=move || game_meta.get().is_some() && connected()
|
<Show
|
||||||
fallback=|| view! { "You are not in a game" }
|
when=move || game_meta.get().is_some() && connected()
|
||||||
>
|
fallback=|| view! { "You are not in a game" }
|
||||||
<Header game_meta=game_meta().unwrap() />
|
>
|
||||||
</Show>
|
<Header game_meta=game_meta().unwrap() />
|
||||||
|
</Show>
|
||||||
|
|
||||||
// Judging view //
|
// Judging view //
|
||||||
|
|
||||||
<Show when=move || { judging() && connected() }>
|
<Show when=move || { judging() && connected() }>
|
||||||
<div class="w-full ms-16 inline-flex flex-wrap">
|
<div class="w-full ms-16 inline-flex flex-wrap">
|
||||||
<BlackCard card_data=game_meta().unwrap().black />
|
<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
|
<For
|
||||||
each=move || selected_cards()
|
each=move || judge_round().unwrap().cards_to_judge
|
||||||
key=move |card| card.uuid.clone()
|
key=move |_| 69
|
||||||
children=move |card| {
|
children=move |group| {
|
||||||
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| {
|
|
||||||
view! {
|
view! {
|
||||||
// Hide cards from hand view when they exist as selected
|
<div class="m-2 inline-flex flex-wrap justify-center">
|
||||||
<Show when={
|
<For
|
||||||
let id = card.uuid.clone();
|
each=move || group.clone()
|
||||||
move || {
|
key=move |card| card.uuid.clone()
|
||||||
if let Some(card) = player_hand().get(&id) {
|
children=move |card| {
|
||||||
!selected_cards().contains(card)
|
view! {
|
||||||
} else {
|
// Hide cards from hand view when they exist as selected
|
||||||
true
|
<Show when={
|
||||||
|
let waste_of_memory = card.clone();
|
||||||
|
move || { !selected_cards().contains(&waste_of_memory) }
|
||||||
|
}>
|
||||||
|
<WhiteCard card_data=card.clone() />
|
||||||
|
</Show>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
/>
|
||||||
}>
|
</div>
|
||||||
<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| {
|
||||||
|
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>
|
</Show>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue