Some minor styles and add very basic sorting support

frontend/src/demo/heatmap.rs

@@ -56,7 +56,7 @@ fn heatmap_view(heatmaps: Vec<common::demo_analysis::PlayerHeatmap>) -> impl lep
         "Heatmap-View",
         .heatmap_image {
             width: 1024px;
-            height: 1024px;
+            height: min(70vw, 70vh);
             display: block;
             position: relative;
         }

frontend/src/demo/scoreboard.rs

@@ -30,8 +30,23 @@ pub fn scoreboard() -> impl leptos::IntoView {
     }
 }
 
+fn damage_sorting(p1: &common::demo_analysis::ScoreBoardPlayer, p2: &common::demo_analysis::ScoreBoardPlayer) -> core::cmp::Ordering {
+    p2.damage.cmp(&p1.damage)
+}
+fn kill_sorting(p1: &common::demo_analysis::ScoreBoardPlayer, p2: &common::demo_analysis::ScoreBoardPlayer) -> core::cmp::Ordering {
+    p2.kills.cmp(&p1.kills)
+}
+fn assists_sorting(p1: &common::demo_analysis::ScoreBoardPlayer, p2: &common::demo_analysis::ScoreBoardPlayer) -> core::cmp::Ordering {
+    p2.assists.cmp(&p1.assists)
+}
+fn deaths_sorting(p1: &common::demo_analysis::ScoreBoardPlayer, p2: &common::demo_analysis::ScoreBoardPlayer) -> core::cmp::Ordering {
+    p2.deaths.cmp(&p1.deaths)
+}
+
 #[leptos::component]
 fn team_scoreboard(info: Resource<leptos_router::ParamsMap, common::demo_analysis::ScoreBoard>, team_name: String, part: fn(common::demo_analysis::ScoreBoard) -> Vec<common::demo_analysis::ScoreBoardPlayer>) -> impl IntoView {
+    let (ordering, set_ordering) = create_signal::<fn(&common::demo_analysis::ScoreBoardPlayer, &common::demo_analysis::ScoreBoardPlayer) -> core::cmp::Ordering>(damage_sorting);
+
     let style = stylers::style! {
         "Team-Scoreboard",
         tr:nth-child(even) {
@@ -54,15 +69,27 @@ fn team_scoreboard(info: Resource<leptos_router::ParamsMap, common::demo_analysi
             <table>
                 <tr>
                     <th>Name</th>
-                    <th>Kills</th>
+                    <th on:click=move |_| {
-                    <th>Assists</th>
+            set_ordering(kill_sorting);
-                    <th>Deaths</th>
+        }>Kills</th>
-                    <th>Damage</th>
+                    <th on:click=move |_| {
+            set_ordering(assists_sorting);
+        }>Assists</th>
+                    <th on:click=move |_| {
+            set_ordering(deaths_sorting);
+        }>Deaths</th>
+                    <th on:click=move |_| {
+            set_ordering(damage_sorting);
+        }>Damage</th>
                 </tr>
         {
             move || {
                 let value = info.get().map(|v| part(v));
-                (value).into_iter().flat_map(|v| v).map(|s| {
+                let mut players: Vec<_> = value.into_iter().flat_map(|v| v).collect();
+                let sorting = ordering.get();
+                players.sort_unstable_by(|p1, p2| sorting(p1, p2));
+
+                players.into_iter().map(|s| {
                     view! {
                         class=style,
                         <tr><td>{ s.name }</td><td>{ s.kills }</td><td>{ s.assists }</td><td>{ s.deaths }</td><td>{ s.damage }</td></tr>