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-08-27 22:44:59 -04:00
|
|
|
|
2024-09-07 01:17:51 -04:00
|
|
|
Effect::new(move |_| {
|
2024-08-27 22:44:59 -04:00
|
|
|
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-08-27 22:44:59 -04:00
|
|
|
|
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-08-27 22:44:59 -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! {
|
2024-08-27 22:44:59 -04:00
|
|
|
<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>
|
|
|
|
}
|
|
|
|
}
|