Add scoreboard with data to demo view

This commit is contained in:
Lol3rrr
2024-09-17 22:31:36 +02:00
parent b216022768
commit 118a25aa9a
3 changed files with 119 additions and 16 deletions

View File

@@ -70,26 +70,72 @@ pub fn demo() -> impl leptos::IntoView {
#[leptos::component]
pub fn scoreboard() -> impl leptos::IntoView {
use leptos::Suspense;
let scoreboard_resource = create_resource(leptos_router::use_params_map(), |params| async move {
let id = params.get("id").unwrap();
let res = reqwasm::http::Request::get(&format!("/api/demos/{}/analysis/scoreboard", id))
.send()
.await
.unwrap();
res.json::<common::demo_analysis::ScoreBoard>().await.unwrap()
});
let team_display_func = |team: &[common::demo_analysis::ScoreBoardPlayer]| {
team.iter().map(|player| {
view! {
<tr>
<td> { player.name.clone() } </td>
<td> { player.kills } </td>
<td> { player.deaths } </td>
</tr>
}
}).collect::<Vec<_>>()
};
view! {
<h2>Scoreboard</h2>
<div>
<h3>Team 1</h3>
<table>
<tr>
<th>Name</th>
</tr>
</table>
</div>
<Suspense
fallback=move || view! { <p>Loading Scoreboard data</p> }
>
<div>
<h3>Team 1</h3>
<table>
<tr>
<th>Name</th>
<th>Kills</th>
<th>Deaths</th>
</tr>
{
move || {
scoreboard_resource.get().map(|s| {
let team = s.team1;
team_display_func(&team)
})
}
}
</table>
</div>
<div>
<h3>Team 2</h3>
<table>
<tr>
<th>Name</th>
</tr>
</table>
</div>
<div>
<h3>Team 2</h3>
<table>
<tr>
<th>Name</th>
</tr>
{
move || {
scoreboard_resource.get().map(|s| {
let team = s.team2;
team_display_func(&team)
})
}
}
</table>
</div>
</Suspense>
}
}