Display the two heatmaps per player side-by-side

frontend/src/demo/heatmap.rs

@@ -46,17 +46,19 @@ pub fn heatmaps() -> impl leptos::IntoView {
 #[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 (value, set_value) = create_signal(Vec::<common::demo_analysis::PlayerHeatmap>::new());
-
-    let h1 = heatmaps.clone();
 
     let map = use_context::<CurrentDemoName>().unwrap();
 
     let style = stylers::style! {
         "Heatmap-View",
+        .heatmap_container {
+            display: inline-block;
+        }
+    
         .heatmap_image {
-            width: 1024px;
+            width: min(40vw, 60vh);
-            height: min(70vw, 70vh);
+            height: min(40vw, 60vh);
             display: block;
             position: relative;
         }
@@ -69,48 +71,68 @@ fn heatmap_view(heatmaps: Vec<common::demo_analysis::PlayerHeatmap>) -> impl lep
         }
 
         .heatmap_image > img {
-            width: min(70vw, 70vh);
+            width: min(40vw, 60vh);
-            height: min(70vh, 70vw);
+            height: min(40vw, 60vh);
         }
 
         .player_select {
-            width: min(70vw, 70vh);
+            width: min(40vw, 60vh);
         }
     };
 
+    let heatmap_view = move || {
+        let heatmaps = value.get();
+        if heatmaps.is_empty() {
+            return Vec::new();
+        }
+
+        heatmaps.into_iter().map(|heatmap| {
+            view! {
+                class=style,
+                <div class="heatmap_container">
+                    <span>{ heatmap.team }</span>
+                    <div class="heatmap_image">
+                        <img class="radar" src=format!("/static/minimaps/{}.png", map.0.get()) />
+                        <img class="heatmap" src=format!("data:image/png;base64,{}", heatmap.png_data) />
+                    </div>
+                </div>
+            }.into_view()
+        }).collect::<Vec<_>>()
+    };
+
+    let mut og_players: Vec<_> = heatmaps.iter().map(|h| h.name.clone()).collect();
+    og_players.sort_unstable();
+    og_players.dedup();
+
+    let players = og_players.clone();
+    let select_handler = move |ev| {
+        let new_value = event_target_value(&ev);
+        let idx: usize = new_value.parse().unwrap();
+
+        let player = players.get(idx).unwrap();
+
+        set_value(heatmaps.iter().filter(|h| &h.name == player).cloned().collect());
+        set_idx(idx);
+    };
+
+    let players = og_players;
+    let select_values = move || {
+        players.iter().enumerate().map(|(idx, name)| {
+            view! {
+                <option value={idx}>{ format!("{}", name) }</option>
+            }
+        }).collect::<Vec<_>>()
+    };
+
     view! {
         class=style,
         <div>
-            <select class="player_select" on:change=move |ev| {
+            <select class="player_select" on:change=select_handler prop:value=move || idx.get().to_string()>
-                let new_value = event_target_value(&ev);
+                { select_values }
-                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}>{ format!("[{}] {}", heatmap.team, heatmap.name) }</option>
-                }
-            }).collect::<Vec<_>>()
-        })(h1.clone())}
             </select>
             <br />
 
-            {
+            { heatmap_view } 
-                    move || {
-                        match value.get() {
-                            Some(heatmap) => view! {
-                                class=style,
-                                <div class="heatmap_image">
-                                    <img class="radar" src=format!("/static/minimaps/{}.png", map.0.get()) />
-                                    <img class="heatmap" src=format!("data:image/png;base64,{}", heatmap.png_data) />
-                                </div>
-                            }.into_any(),
-                            None => view! { <p>ERROR</p> }.into_any(),
-                        }
-                    }
-                }
         </div>
     }
 }