aestheticss and stop spamming empty strings on join
This commit is contained in:
parent
693d57b089
commit
4d9b04659b
7 changed files with 201 additions and 164 deletions
|
@ -13,19 +13,24 @@ pub fn Browser() -> impl IntoView {
|
|||
let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
|
||||
let tx = websocket.clone();
|
||||
let (websocket_send, set_websocket_send) = create_signal("".to_string());
|
||||
|
||||
create_effect(move |_| {
|
||||
tx.send(&websocket_send());
|
||||
if websocket_send() != "".to_string() {
|
||||
tx.send(&websocket_send());
|
||||
}
|
||||
});
|
||||
|
||||
// Browser stuff
|
||||
let game_browser_context = expect_context::<ReadSignal<Vec<GameBrowserMeta>>>();
|
||||
let (join_id, set_join_id) = create_signal("".to_string());
|
||||
let (delete_id, set_delete_id) = create_signal("".to_string());
|
||||
|
||||
create_effect(move |_| {
|
||||
set_websocket_send(to_string(&GameJoinRequest { id: join_id() }).unwrap());
|
||||
set_websocket_send.set_untracked(to_string(&GameJoinRequest { id: join_id() }).unwrap());
|
||||
});
|
||||
|
||||
create_effect(move |_| {
|
||||
set_websocket_send(
|
||||
set_websocket_send.set_untracked(
|
||||
to_string(&GameDeleteRequest {
|
||||
delete_game_id: delete_id(),
|
||||
})
|
||||
|
@ -33,36 +38,14 @@ pub fn Browser() -> impl IntoView {
|
|||
);
|
||||
});
|
||||
|
||||
// New game stuff
|
||||
let card_packs = expect_context::<ReadSignal<CardPacksMeta>>();
|
||||
let new_game_name_ref = create_node_ref::<Input>();
|
||||
let (show_packs, set_show_packs) = create_signal(false);
|
||||
let show_packs_button = move |_| set_show_packs(!show_packs());
|
||||
let (selected_packs, set_selected_packs) = create_signal::<BTreeSet<u8>>(BTreeSet::new());
|
||||
let new_game = move |_| {
|
||||
if let Some(input) = new_game_name_ref.get() {
|
||||
if input.value() == *"" {
|
||||
logging::log!("New game name is empty!");
|
||||
} else if selected_packs().is_empty() {
|
||||
logging::log!("New game selected packs is empty!");
|
||||
} else {
|
||||
set_websocket_send(
|
||||
to_string(&NewGameRequest {
|
||||
name: input.value(),
|
||||
packs: selected_packs().into_iter().collect::<Vec<_>>(),
|
||||
})
|
||||
.unwrap(),
|
||||
);
|
||||
input.set_value("");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<Show when=move || connected() fallback=|| view! { <p>Disconnected.</p> }>
|
||||
<h2 class="text-2xl">Game Browser</h2>
|
||||
<p>"Yes, the delete button works. Please don't abuse it."</p>
|
||||
<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>
|
||||
|
@ -114,133 +97,6 @@ pub fn Browser() -> impl IntoView {
|
|||
/>
|
||||
</table>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<div class="flex">
|
||||
<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" checked />
|
||||
<label for="all">All</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600">
|
||||
<input type="checkbox" id="official" />
|
||||
<label for="official">Official</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600" on:click=show_packs_button>
|
||||
<label>Custom</label>
|
||||
</button>
|
||||
"click custom at least once for the new game button to work. there are worse problems right now (sorry (kinda))"
|
||||
</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()
|
||||
}}
|
||||
|
||||
</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);
|
||||
})
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
<label for=n.pack>{n.name}</label>
|
||||
<br />
|
||||
|
||||
// hax
|
||||
{set_selected_packs
|
||||
.update(|packs| {
|
||||
packs.insert(n.pack);
|
||||
})}
|
||||
}
|
||||
})
|
||||
.collect_view()
|
||||
}}
|
||||
|
||||
</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>
|
||||
}
|
||||
|
|
176
client/src/components/create_game.rs
Normal file
176
client/src/components/create_game.rs
Normal file
|
@ -0,0 +1,176 @@
|
|||
use crate::components::websocket::WebSocketContext;
|
||||
use leptos::html::Input;
|
||||
use leptos::*;
|
||||
use leptos_use::core::ConnectionReadyState;
|
||||
use lib::*;
|
||||
use serde_json::to_string;
|
||||
use std::collections::BTreeSet;
|
||||
|
||||
#[component]
|
||||
pub fn CreateGame() -> 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());
|
||||
create_effect(move |_| {
|
||||
tx.send(&websocket_send());
|
||||
});
|
||||
|
||||
// New game stuff
|
||||
let card_packs = expect_context::<ReadSignal<CardPacksMeta>>();
|
||||
let new_game_name_ref = create_node_ref::<Input>();
|
||||
let (show_packs, set_show_packs) = create_signal(false);
|
||||
let show_packs_button = move |_| set_show_packs(!show_packs());
|
||||
let (selected_packs, set_selected_packs) = create_signal::<BTreeSet<u8>>(BTreeSet::new());
|
||||
let new_game = move |_| {
|
||||
if let Some(input) = new_game_name_ref.get() {
|
||||
if input.value() == *"" {
|
||||
logging::log!("New game name is empty!");
|
||||
} else if selected_packs().is_empty() {
|
||||
logging::log!("New game selected packs is empty!");
|
||||
} else {
|
||||
set_websocket_send(
|
||||
to_string(&NewGameRequest {
|
||||
name: input.value(),
|
||||
packs: selected_packs().into_iter().collect::<Vec<_>>(),
|
||||
})
|
||||
.unwrap(),
|
||||
);
|
||||
input.set_value("");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
view! {
|
||||
<div class="my-2">
|
||||
<Show when=move || connected() fallback=|| view! { <p>Disconnected.</p> }>
|
||||
<div class="flex">
|
||||
<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" checked />
|
||||
<label for="all">All</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600">
|
||||
<input type="checkbox" id="official" />
|
||||
<label for="official">Official</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600" on:click=show_packs_button>
|
||||
<label>Custom</label>
|
||||
</button>
|
||||
"click custom at least once for the new game button to work. there are worse problems right now (sorry (kinda))"
|
||||
</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()
|
||||
}}
|
||||
|
||||
</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);
|
||||
})
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
<label for=n.pack>{n.name}</label>
|
||||
<br />
|
||||
|
||||
// hax
|
||||
{set_selected_packs
|
||||
.update(|packs| {
|
||||
packs.insert(n.pack);
|
||||
})}
|
||||
}
|
||||
})
|
||||
.collect_view()
|
||||
}}
|
||||
|
||||
</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>
|
||||
}
|
||||
}
|
|
@ -36,8 +36,7 @@ pub fn Debug() -> impl IntoView {
|
|||
});
|
||||
|
||||
view! {
|
||||
<div class="w-auto">
|
||||
<hr />
|
||||
<div class="my-2 w-auto">
|
||||
<h2 class="p-1 text-2xl">Debug:</h2>
|
||||
<p class="p-1">"Connection Status: " {status}</p>
|
||||
<p class="p-1">"Users Online: " {online_users}</p>
|
||||
|
|
|
@ -163,7 +163,7 @@ pub fn Game() -> impl IntoView {
|
|||
});
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<div class="my-2">
|
||||
<h2 class="text-2xl">Game</h2>
|
||||
<Show
|
||||
when=move || game_meta.get().is_some() && connected()
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
pub mod auth;
|
||||
pub mod browser;
|
||||
pub mod chat;
|
||||
pub mod create_game;
|
||||
pub mod debug;
|
||||
pub mod game;
|
||||
pub mod websocket;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
use crate::components::auth::*;
|
||||
use crate::components::browser::*;
|
||||
use crate::components::chat::*;
|
||||
use crate::components::create_game::*;
|
||||
use crate::components::debug::*;
|
||||
use crate::components::game::*;
|
||||
use crate::components::websocket::*;
|
||||
|
@ -48,13 +49,17 @@ pub fn Home() -> impl IntoView {
|
|||
<hr />
|
||||
<Browser />
|
||||
<hr />
|
||||
<CreateGame />
|
||||
<hr />
|
||||
<Game />
|
||||
<hr />
|
||||
<Chat />
|
||||
<hr />
|
||||
<Debug />
|
||||
<hr />
|
||||
<a href="https://git.doordesk.net/adam/cards/">git</a>
|
||||
<div class="my-2">
|
||||
<a href="https://git.doordesk.net/adam/cards/">git</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
|
|
@ -95,7 +95,7 @@ impl MessageHandler {
|
|||
.unwrap();
|
||||
}
|
||||
|
||||
_ => tracing::debug!("Unhandled text from {}", addr),
|
||||
_ => tracing::debug!("Unhandled text from {}\n{:#?}", addr, &text),
|
||||
},
|
||||
|
||||
Message::Binary(data) => tracing::debug!("{} sent binary: {:?}", addr, data),
|
||||
|
|
Loading…
Add table
Reference in a new issue