Files
knifer/frontend/src/demo.rs
2024-10-18 13:11:10 +02:00

92 lines
2.6 KiB
Rust

use leptos::*;
use leptos_router::{Outlet, A};
pub mod heatmap;
pub mod perround;
pub mod scoreboard;
#[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 {
let res = reqwasm::http::Request::get(&format!("/api/demos/{}/info", id()))
.send()
.await
.unwrap();
let value = res.json::<common::DemoInfo>().await.unwrap();
map_tx.set(value.map.clone());
value
},
);
let rerun_analysis = create_action(move |_: &()| async move {
let _ = reqwasm::http::Request::get(&format!("/api/demos/{}/reanalyse", id()))
.send()
.await;
});
let map = move || match demo_info.get() {
Some(v) => v.map.clone(),
None => String::new(),
};
let selected_tab = move || {
let loc = leptos_router::use_location();
let loc_path = loc.pathname.get();
let trailing = loc_path.split('/').last();
trailing.unwrap_or("/").to_owned()
};
let style = stylers::style! {
"Demo",
.analysis_bar {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 20px;
background-color: #2d2d2d;
}
.analysis_selector {
display: inline-block;
}
span {
display: inline-block;
padding: 1vw 1vh;
color: #d5d5d5;
background-color: #4d4d4d;
}
.current {
background-color: #5d5d5d;
}
};
view! {class = style,
<h2>Demo - { id } - { map }</h2>
<button on:click=move |_| rerun_analysis.dispatch(())>Rerun analysis</button>
<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/>
</div>
}
}