clean up stuff on disconnect
This commit is contained in:
Adam
parent
35afcf7dd4
commit
89344c6042
2 changed files with 185 additions and 171 deletions
|
|
@ -60,185 +60,187 @@ pub fn Browser() -> impl IntoView {
|
|||
|
||||
view! {
|
||||
<div class="p-1">
|
||||
<h2 class="text-2xl">Game Browser</h2>
|
||||
<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>
|
||||
{move || {
|
||||
game_browser_context()
|
||||
.iter()
|
||||
.map(|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> }>
|
||||
<h2 class="text-2xl">Game Browser</h2>
|
||||
<div class="p-1">
|
||||
<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>
|
||||
}
|
||||
}
|
||||
})
|
||||
.collect_view()
|
||||
}}
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<div class="flex p-1">
|
||||
<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" />
|
||||
<label for="all">All</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600">
|
||||
<input type="checkbox" id="official" checked />
|
||||
<label for="official">Official</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600" on:click=show_packs_button>
|
||||
<label>Custom</label>
|
||||
</button>
|
||||
TODO: finish this
|
||||
/>
|
||||
</table>
|
||||
</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()
|
||||
}}
|
||||
<hr />
|
||||
|
||||
<div class="flex p-1">
|
||||
<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" />
|
||||
<label for="all">All</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600">
|
||||
<input type="checkbox" id="official" checked />
|
||||
<label for="official">Official</label>
|
||||
</button>
|
||||
<button type="button" class="bg-neutral-600" on:click=show_packs_button>
|
||||
<label>Custom</label>
|
||||
</button>
|
||||
TODO: finish this
|
||||
</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);
|
||||
})
|
||||
}
|
||||
<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()
|
||||
}}
|
||||
|
||||
<label for=n.pack>{n.name}</label>
|
||||
<br />
|
||||
</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);
|
||||
})
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
// hax
|
||||
{set_selected_packs
|
||||
.update(|packs| {
|
||||
packs.insert(n.pack);
|
||||
})}
|
||||
}
|
||||
})
|
||||
.collect_view()
|
||||
}}
|
||||
<label for=n.pack>{n.name}</label>
|
||||
<br />
|
||||
|
||||
</div>
|
||||
</span>
|
||||
</Show>
|
||||
// hax
|
||||
{set_selected_packs
|
||||
.update(|packs| {
|
||||
packs.insert(n.pack);
|
||||
})}
|
||||
}
|
||||
})
|
||||
.collect_view()
|
||||
}}
|
||||
|
||||
<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>
|
||||
</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>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,9 +54,10 @@ pub fn Websocket() -> impl IntoView {
|
|||
Rc::new(close.clone()),
|
||||
));
|
||||
|
||||
// TODO: This context stuff can probably be done better
|
||||
let connected = move || ready_state.get() == ConnectionReadyState::Open;
|
||||
|
||||
// Contexts for message handler
|
||||
// TODO: This context stuff can probably be done better
|
||||
let (state_summary, set_state_summary) =
|
||||
create_signal::<Option<ServerStateSummary>>(Option::None);
|
||||
let (active_games, set_active_games) = create_signal::<Vec<GameBrowserMeta>>(vec![]);
|
||||
|
|
@ -70,6 +71,17 @@ pub fn Websocket() -> impl IntoView {
|
|||
unofficial_meta: vec![],
|
||||
});
|
||||
|
||||
create_effect(move |_| {
|
||||
if !connected() {
|
||||
set_active_games.set_untracked(vec![]);
|
||||
set_user_update.set_untracked(None);
|
||||
set_chat_update.set_untracked(None);
|
||||
set_judge_round.set_untracked(None);
|
||||
set_chat_message.set_untracked(None);
|
||||
set_current_game.set_untracked(None);
|
||||
}
|
||||
});
|
||||
|
||||
provide_context::<ReadSignal<CardPacksMeta>>(card_packs_meta);
|
||||
provide_context::<ReadSignal<Option<UserUpdate>>>(user_update);
|
||||
provide_context::<ReadSignal<Option<ChatUpdate>>>(chat_update);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue