From 8e3758c254ca13ab2dd1d0fc611746e5deb62b3d Mon Sep 17 00:00:00 2001
From: Lol3rrr <lol3r@lol3r.net>
Date: Thu, 10 Oct 2024 16:35:35 +0200
Subject: [PATCH] Some minor styles and add very basic sorting support

---
 frontend/src/demo/heatmap.rs    |  2 +-
 frontend/src/demo/scoreboard.rs | 41 +++++++++++++++++++++++++++------
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/frontend/src/demo/heatmap.rs b/frontend/src/demo/heatmap.rs
index 76fa11f..1c0a1d5 100644
--- a/frontend/src/demo/heatmap.rs
+++ b/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;
         }
diff --git a/frontend/src/demo/scoreboard.rs b/frontend/src/demo/scoreboard.rs
index ee6b8fb..b10b0e8 100644
--- a/frontend/src/demo/scoreboard.rs
+++ b/frontend/src/demo/scoreboard.rs
@@ -24,14 +24,29 @@ pub fn scoreboard() -> impl leptos::IntoView {
         <Suspense
             fallback=move || view! { <p>Loading Scoreboard data</p> }
         >
-            <TeamScoreboard info=scoreboard_resource team_name="Team 1".to_string() part=|s| s.team1  />
-            <TeamScoreboard info=scoreboard_resource team_name="Team 2".to_string() part=|s| s.team2  />
+            <TeamScoreboard info=scoreboard_resource team_name="Team 1".to_string() part=|s| s.team1 />
+            <TeamScoreboard info=scoreboard_resource team_name="Team 2".to_string() part=|s| s.team2 />
         </Suspense>
     }
 }
 
+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>Assists</th>
-                    <th>Deaths</th>
-                    <th>Damage</th>
+                    <th on:click=move |_| {
+            set_ordering(kill_sorting);
+        }>Kills</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>