cards/client/src/components/browser.rs

174 lines
8.3 KiB
Rust
Raw Normal View History

2024-07-28 02:36:04 -04:00
use crate::components::websocket::WebSocketContext;
2024-09-07 01:17:51 -04:00
use leptos::prelude::*;
2024-08-28 00:06:59 -04:00
use leptos_use::core::ConnectionReadyState;
2024-08-04 18:14:10 -04:00
use lib::*;
2024-08-01 20:32:49 -04:00
use serde_json::to_string;
2024-09-09 19:46:56 -04:00
use thaw::*;
pub mod create_game;
2024-07-28 02:36:04 -04:00
#[component]
pub fn Browser() -> impl IntoView {
2024-08-19 18:40:22 -04:00
// Websocket stuff
2024-07-28 02:36:04 -04:00
let websocket = expect_context::<WebSocketContext>();
2024-08-28 00:06:59 -04:00
let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
2024-08-19 18:40:22 -04:00
let tx = websocket.clone();
2024-09-07 01:17:51 -04:00
let (websocket_send, set_websocket_send) = signal("".to_string());
2024-09-07 01:17:51 -04:00
Effect::new(move |_| {
if websocket_send() != "".to_string() {
tx.send(&websocket_send());
}
2024-08-19 18:40:22 -04:00
});
2024-07-28 02:36:04 -04:00
2024-08-19 18:40:22 -04:00
// Browser stuff
2024-08-13 18:16:31 -04:00
let game_browser_context = expect_context::<ReadSignal<Vec<GameBrowserMeta>>>();
2024-09-10 01:59:35 -04:00
let join_id = RwSignal::new("".to_string());
let delete_id = RwSignal::new("".to_string());
let nav_context = expect_context::<RwSignal<String>>();
2024-09-07 01:17:51 -04:00
Effect::new(move |_| {
2024-09-10 01:59:35 -04:00
if join_id() != "" {
set_websocket_send(to_string(&GameJoinRequest { id: join_id() }).unwrap());
nav_context.set("game".to_string());
join_id.set("".to_string());
}
2024-08-19 18:40:22 -04:00
});
2024-09-07 01:17:51 -04:00
Effect::new(move |_| {
2024-09-10 01:59:35 -04:00
if delete_id() != "" {
set_websocket_send(
to_string(&GameDeleteRequest {
delete_game_id: delete_id(),
})
.unwrap(),
);
delete_id.set("".to_string());
}
2024-08-19 18:40:22 -04:00
});
2024-07-28 02:36:04 -04:00
2024-09-09 19:46:56 -04:00
let show_create_game = RwSignal::new(false);
provide_context(show_create_game);
2024-07-28 02:36:04 -04:00
view! {
<div class="my-2">
2024-09-09 19:46:56 -04:00
<div class="flex flex-wrap justify-between">
<Popover
trigger_type=PopoverTriggerType::Click
position=PopoverPosition::BottomStart
>
<PopoverTrigger slot>
2024-09-10 01:59:35 -04:00
<Button
icon=icondata::TbHelp
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
/>
2024-09-09 19:46:56 -04:00
</PopoverTrigger>
<p>"Yes, the delete button works. Please don't abuse it."</p>
</Popover>
<Button
icon=icondata::AiPlusOutlined
appearance=ButtonAppearance::Primary
size=ButtonSize::Small
2024-09-12 02:38:16 -04:00
on_click=move |_| nav_context.set("create".to_string())
2024-09-09 19:46:56 -04:00
>
"Create Game"
</Button>
</div>
2024-08-28 00:06:59 -04:00
<Show when=move || { connected() } fallback=|| view! { <p>"Disconnected."</p> }>
<Show
when=move || { game_browser_context().len() > 0 }
fallback=|| {
2024-09-09 19:46:56 -04:00
view! { <p>"No games to show right now.. Maybe you should create one!"</p> }
2024-08-28 00:06:59 -04:00
}
>
<div>
2024-09-09 19:46:56 -04:00
<Table>
<TableHeader>
<TableRow>
<TableHeaderCell class="justify-center">
<p>Name</p>
</TableHeaderCell>
<TableHeaderCell class="justify-center">
<p>Host</p>
</TableHeaderCell>
<TableHeaderCell class="justify-center">
<p>Players</p>
</TableHeaderCell>
<TableHeaderCell class="justify-center">
<p>Card Packs</p>
</TableHeaderCell>
<TableHeaderCell></TableHeaderCell>
</TableRow>
</TableHeader>
2024-08-29 21:44:39 -04:00
// This rebuilds the entire browser each time it runs but using <For /> won't update the children if the id doesn't change
2024-09-09 19:46:56 -04:00
{move || {
game_browser_context()
.iter()
.cloned()
.map(|game| {
view! {
<TableBody>
<TableRow>
<TableCell>
<TableCellLayout class="justify-center">
<p>{game.name}</p>
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout class="justify-center">
{game.host}
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout class="justify-center">
{game.players}
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout class="justify-center">
{game.packs.len()}
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout class="flex flex-wrap justify-center">
<Button
appearance=ButtonAppearance::Primary
size=ButtonSize::Small
on_click={
let game_id = game.uuid.clone();
move |_| {
2024-09-10 01:59:35 -04:00
join_id.set(game_id.clone());
2024-09-09 19:46:56 -04:00
}
}
>
"Join"
</Button>
<Button
appearance=ButtonAppearance::Secondary
size=ButtonSize::Small
icon=icondata::TiDeleteOutline
on_click=move |_| {
2024-09-10 01:59:35 -04:00
delete_id.set(game.uuid.clone());
2024-09-09 19:46:56 -04:00
}
>
"Delete"
</Button>
</TableCellLayout>
</TableCell>
</TableRow>
</TableBody>
}
})
.collect_view()
}}
</Table>
2024-08-28 00:06:59 -04:00
</div>
</Show>
2024-08-26 23:54:47 -04:00
</Show>
2024-07-28 02:36:04 -04:00
</div>
}
}