[arenabuddy] Add match statistics page with detailed win rate tracking (#299)

# Add Match Statistics Page

This PR adds a new statistics page to the application that provides users with detailed insights into their match performance. The statistics include:

- Overall match and game records with win rates
- Performance breakdown when on the play vs. on the draw
- Mulligan statistics showing win rates based on cards kept
- Top opponents with match records

Key changes:
- Created a new `stats.rs` module with components for displaying statistics
- Added a Stats route to the navigation menu
- Implemented backend service methods to retrieve match statistics
- Created data models for representing match statistics
- Added database queries to calculate win rates and other metrics
- Fixed a bug in the match replay logic related to game number tracking

The UI is responsive with a grid layout that adjusts based on screen size and includes cards for different stat categories with clean formatting of win/loss records and percentages.

Author: gazure

arenabuddy/arenabuddy/assets/tailwind.css

@@ -308,6 +308,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -452,6 +455,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -627,6 +633,9 @@
   .border-blue-600 {
     border-color: var(--color-blue-600);
   }
+  .border-gray-100 {
+    border-color: var(--color-gray-100);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -793,6 +802,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -956,9 +968,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1003,6 +1012,12 @@
       }
     }
   }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);
@@ -1144,6 +1159,11 @@
       padding: calc(var(--spacing) * 6);
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:grid-cols-4 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -1320,59 +1340,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -1424,19 +1391,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
     }
   }

arenabuddy/arenabuddy/src/app/mod.rs

@@ -6,6 +6,7 @@ mod error_logs;
 mod match_details;
 mod matches;
 mod pages;
+mod stats;
 use dioxus::prelude::*;
 use pages::Route;
 const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");

arenabuddy/arenabuddy/src/app/pages.rs

@@ -4,7 +4,7 @@ use dioxus_router::{Link, Outlet, Routable};
 use crate::{
     app::{
         debug_logs::DebugLogs, draft_details::DraftDetails, drafts::Drafts, error_logs::ErrorLogs,
-        match_details::MatchDetails, matches::Matches,
+        match_details::MatchDetails, matches::Matches, stats::Stats,
     },
     backend::{BackgroundRuntime, SharedAuthState},
 };
@@ -35,6 +35,8 @@ pub enum Route {
         DraftDetails { id: String },
         #[route("/debug")]
         DebugLogs {},
+        #[route("/stats")]
+        Stats {},
     #[end_layout]
     #[route("/:..route")]
     PageNotFound { route: Vec<String> },
@@ -195,6 +197,13 @@ fn Layout() -> Element {
                             "Drafts"
                         }
                     }
+                    li {
+                        Link {
+                            to: Route::Stats {},
+                            class: "hover:text-blue-400 transition-colors duration-200",
+                            "Stats"
+                        }
+                    }
                     li {
                         Link {
                             to: Route::ErrorLogs {},

arenabuddy/arenabuddy/src/app/stats.rs

@@ -0,0 +1,178 @@
+use arenabuddy_core::display::stats::MatchStats;
+use dioxus::prelude::*;
+
+use crate::backend::Service;
+
+fn format_rate(rate: Option<f64>) -> String {
+    rate.map_or("N/A".to_string(), |r| format!("{r:.1}%"))
+}
+
+#[component]
+fn StatCard(title: &'static str, children: Element) -> Element {
+    rsx! {
+        div { class: "bg-white rounded-lg shadow-md p-6",
+            h2 { class: "text-lg font-semibold text-gray-700 mb-4", "{title}" }
+            {children}
+        }
+    }
+}
+
+#[component]
+fn RecordLine(label: &'static str, wins: i64, losses: i64, rate: Option<f64>) -> Element {
+    rsx! {
+        div { class: "flex justify-between items-center py-2 border-b border-gray-100 last:border-0",
+            span { class: "text-gray-600", "{label}" }
+            div { class: "flex items-center space-x-3",
+                span { class: "text-green-600 font-medium", "{wins}W" }
+                span { class: "text-gray-400", "-" }
+                span { class: "text-red-600 font-medium", "{losses}L" }
+                span { class: "text-gray-500 text-sm ml-2", "({format_rate(rate)})" }
+            }
+        }
+    }
+}
+
+#[component]
+fn StatsDisplay(stats: MatchStats) -> Element {
+    rsx! {
+        div { class: "grid grid-cols-1 md:grid-cols-2 gap-6",
+            StatCard { title: "Match Record",
+                RecordLine {
+                    label: "Overall",
+                    wins: stats.match_wins,
+                    losses: stats.match_losses,
+                    rate: stats.match_win_rate(),
+                }
+                div { class: "pt-2 text-sm text-gray-500",
+                    "{stats.total_matches} matches played"
+                }
+            }
+
+            StatCard { title: "Game Record",
+                RecordLine {
+                    label: "Overall",
+                    wins: stats.game_wins,
+                    losses: stats.game_losses,
+                    rate: stats.game_win_rate(),
+                }
+                div { class: "pt-2 text-sm text-gray-500",
+                    "{stats.total_games} games played"
+                }
+            }
+
+            StatCard { title: "Play / Draw Game Win Rate",
+                RecordLine {
+                    label: "On the Play",
+                    wins: stats.play_wins,
+                    losses: stats.play_losses,
+                    rate: stats.play_win_rate(),
+                }
+                RecordLine {
+                    label: "On the Draw",
+                    wins: stats.draw_wins,
+                    losses: stats.draw_losses,
+                    rate: stats.draw_win_rate(),
+                }
+            }
+
+            StatCard { title: "Mulligans",
+                if stats.mulligan_stats.is_empty() {
+                    p { class: "text-gray-500 text-sm", "No mulligan data available" }
+                } else {
+                    for bucket in stats.mulligan_stats.iter() {
+                        RecordLine {
+                            label: match bucket.cards_kept {
+                                7 => "Kept 7",
+                                6 => "Kept 6",
+                                5 => "Kept 5",
+                                4 => "Kept 4",
+                                _ => "Other",
+                            },
+                            wins: bucket.wins,
+                            losses: bucket.losses,
+                            rate: bucket.win_rate(),
+                        }
+                    }
+                }
+            }
+
+            if !stats.opponents.is_empty() {
+                StatCard { title: "Top Opponents",
+                    for opp in stats.opponents.iter() {
+                        div { class: "flex justify-between items-center py-2 border-b border-gray-100 last:border-0",
+                            span { class: "text-gray-600 truncate mr-4", "{opp.name}" }
+                            div { class: "flex items-center space-x-3 flex-shrink-0",
+                                span { class: "text-green-600 font-medium", "{opp.wins}W" }
+                                span { class: "text-gray-400", "-" }
+                                span { class: "text-red-600 font-medium", "{opp.losses}L" }
+                                span { class: "text-gray-500 text-sm ml-2",
+                                    "({opp.matches} matches)"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[component]
+pub(crate) fn Stats() -> Element {
+    let service = use_context::<Service>();
+    let mut stats_resource = use_resource(move || {
+        let service = service.clone();
+        async move { service.get_stats().await }
+    });
+
+    let refresh = move |_| {
+        stats_resource.restart();
+    };
+
+    let resource_value = stats_resource.value();
+    let data = resource_value.read();
+
+    rsx! {
+        div { class: "container mx-auto px-4 py-8 max-w-5xl",
+            div { class: "flex justify-between items-center mb-6",
+                h1 { class: "text-2xl font-bold text-gray-800", "Match Statistics" }
+                button {
+                    onclick: refresh,
+                    class: "bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded shadow transition-colors duration-150",
+                    disabled: data.is_none(),
+                    if data.is_none() {
+                        "Loading..."
+                    } else {
+                        "Refresh"
+                    }
+                }
+            }
+
+            match &*data {
+                None => rsx! {
+                    div { class: "bg-white rounded-lg shadow-md p-12 text-center text-gray-500",
+                        div { class: "animate-pulse", "Loading statistics..." }
+                    }
+                },
+
+                Some(Err(err)) => rsx! {
+                    div { class: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded",
+                        p { "Failed to load statistics: {err}" }
+                    }
+                },
+
+                Some(Ok(stats)) => {
+                    if stats.total_matches == 0 {
+                        rsx! {
+                            div { class: "bg-white rounded-lg shadow-md p-12 text-center text-gray-500",
+                                "No match data available. Play some games in MTG Arena!"
+                            }
+                        }
+                    } else {
+                        rsx! { StatsDisplay { stats: stats.clone() } }
+                    }
+                }
+            }
+        }
+    }
+}

arenabuddy/arenabuddy/src/backend/service.rs

@@ -8,6 +8,7 @@ use arenabuddy_core::{
         game::GameResultDisplay,
         match_details::MatchDetails,
         mulligan::Mulligan,
+        stats::MatchStats,
     },
     models::{Draft, MTGAMatch},
 };
@@ -150,6 +151,10 @@ where
         Ok(DraftDetailsDisplay::new(draft, &self.cards))
     }
 
+    pub async fn get_stats(&self) -> Result<MatchStats> {
+        Ok(self.db.get_match_stats(None).await?)
+    }
+
     pub async fn get_error_logs(&self) -> Result<Vec<String>> {
         let logs = self.log_collector.lock().await;
         Ok(logs.clone())

arenabuddy/core/src/display/mod.rs

@@ -5,3 +5,4 @@ pub mod event_log;
 pub mod game;
 pub mod match_details;
 pub mod mulligan;
+pub mod stats;