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

Initial work on the actual maps for the heatmap overview

Browse Source
This commit is contained in:
Lol3rrr
2024-10-05 05:18:28 +02:00
parent ae85177697
commit f7273b5a39
15 changed files with 228 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/demo.rs
View File

@@ -3,11 +3,17 @@ use leptos_router::{Outlet, A};
pub mod heatmap;
#[derive(Debug, Clone)]
struct CurrentDemoName(ReadSignal<String>);
#[leptos::component]
pub fn demo() -> impl leptos::IntoView {
let params = leptos_router::use_params_map();
let id = move || params.with(|params| params.get("id").cloned().unwrap_or_default());
let (rx, map_tx) = create_signal(String::new());
provide_context(CurrentDemoName(rx.clone()));
let demo_info = create_resource(
|| (),
move |_| async move {
@@ -15,7 +21,11 @@ pub fn demo() -> impl leptos::IntoView {
.send()
.await
.unwrap();
res.json::<common::DemoInfo>().await.unwrap()
let value = res.json::<common::DemoInfo>().await.unwrap();
map_tx.set(value.map.clone());
value
},
);

24
frontend/src/demo/heatmap.rs
View File

@@ -1,5 +1,7 @@
use leptos::*;
use super::CurrentDemoName;
#[leptos::component]
pub fn heatmaps() -> impl leptos::IntoView {
let heatmaps_resource =
@@ -40,12 +42,22 @@ fn heatmap_view(heatmaps: Vec<common::demo_analysis::PlayerHeatmap>) -> impl lep
let h1 = heatmaps.clone();
let map = use_context::<CurrentDemoName>().unwrap();
let style = stylers::style! {
"Heatmap-View",
img {
width: 75vw;
height: 75vw;
.heatmap_image {
width: 1024px;
height: 1024px;
display: block;
position: relative;
}
.heatmap_image > * {
position: absolute;
}
.heatmap_image > .heatmap {
opacity: 0.5;
}
};
@@ -72,7 +84,11 @@ fn heatmap_view(heatmaps: Vec<common::demo_analysis::PlayerHeatmap>) -> impl lep
move || {
match value.get() {
Some(heatmap) => view! {
<img class="heatmap_img" src=format!("data:image/png;base64,{}", heatmap.png_data) />
class=style,
<div class="heatmap_image">
<img class="radar" src=format!("/static/minimaps/{}.png", map.0.get()) />
<img class="heatmap" width=1024 height=1024 src=format!("data:image/png;base64,{}", heatmap.png_data) />
</div>
}.into_any(),
None => view! { <p>ERROR</p> }.into_any(),
}