leon/knifer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Heatmaps to UI

Browse Source 
Add Heatmap analysis to website as well as a basic UI for viewing the Heatmaps.
There are still issues, like some players not getting a heatmap assigned and heatmaps including data
from warmup etc.
This commit is contained in:
Lol3rrr
2024-09-29 00:32:20 +02:00
parent 7f23f4882d
commit 83b4a24b15
19 changed files with 280 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -2,6 +2,8 @@
<html>
<head>
<link rel="stylesheet" href="/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body></body>
</html>

5
frontend/src/demo.rs
View File

@@ -1,6 +1,8 @@
use leptos::*;
use leptos_router::{Outlet, A};
pub mod heatmap;
#[leptos::component]
pub fn demo() -> impl leptos::IntoView {
let params = leptos_router::use_params_map();
@@ -39,7 +41,7 @@ pub fn demo() -> impl leptos::IntoView {
"Demo",
.analysis_bar {
display: grid;
grid-template-columns: auto auto;
grid-template-columns: auto auto auto;
column-gap: 20px;
background-color: #2d2d2d;
@@ -68,6 +70,7 @@ pub fn demo() -> impl leptos::IntoView {
<div class="analysis_bar">
<div class="analysis_selector" class:current=move || selected_tab() == "scoreboard"><A href="scoreboard"><span>Scoreboard</span></A></div>
<div class="analysis_selector" class:current=move || selected_tab() == "perround"><A href="perround"><span>Per Round</span></A></div>
<div class="analysis_selector" class:current=move || selected_tab() == "heatmaps"><A href="heatmaps"><span>Heatmaps</span></A></div>
</div>
<div>
<Outlet/>

83
frontend/src/demo/heatmap.rs Normal file
View File

@@ -0,0 +1,83 @@
use leptos::*;
#[leptos::component]
pub fn heatmaps() -> impl leptos::IntoView {
let heatmaps_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/heatmap", id))
.send()
.await
.unwrap();
res.json::<Vec<common::demo_analysis::PlayerHeatmap>>()
.await
.unwrap()
});
view! {
<h3>Heatmaps</h3>
<Suspense fallback=move || view! { <p>Loading Heatmaps</p> }>
<div>
{
move || {
heatmaps_resource.get().map(|h| {
view! { <HeatmapView heatmaps=h /> }
})
}
}
</div>
</Suspense>
}
}
#[leptos::component]
fn heatmap_view(heatmaps: Vec<common::demo_analysis::PlayerHeatmap>) -> impl leptos::IntoView {
let (idx, set_idx) = create_signal(0usize);
let (value, set_value) = create_signal(None::<common::demo_analysis::PlayerHeatmap>);
let h1 = heatmaps.clone();
let style = stylers::style! {
"Heatmap-View",
img {
width: 75vw;
height: 75vw;
display: block;
}
};
view! {
class=style,
<div>
<select on:change=move |ev| {
let new_value = event_target_value(&ev);
let idx: usize = new_value.parse().unwrap();
set_value(heatmaps.get(idx).cloned());
set_idx(idx);
} prop:value=move || idx.get().to_string()>
{ (move |heatmaps: Vec<common::demo_analysis::PlayerHeatmap>| {
heatmaps.iter().enumerate().map(|(idx, heatmap)| {
view! {
<option value={idx}>{heatmap.name.clone()}</option>
}
}).collect::<Vec<_>>()
})(h1.clone())}
</select>
<br />
{
move || {
match value.get() {
Some(heatmap) => view! {
<img class="heatmap_img" src=format!("data:image/jpeg;base64,{}", heatmap.png_data) />
}.into_any(),
None => view! { <p>ERROR</p> }.into_any(),
}
}
}
</div>
}
}

1
frontend/src/main.rs
View File

@@ -32,6 +32,7 @@ fn main() {
<Route path="/demo/:id" view=Demo>
<Route path="perround" view=frontend::demo::PerRound />
<Route path="scoreboard" view=frontend::demo::Scoreboard />
<Route path="heatmaps" view=frontend::demo::heatmap::Heatmaps />
<Route path="" view=frontend::demo::Scoreboard />
</Route>
</Routes>