Merge pull request #44 from qlemaire22/winrates-by-match

Winrates by matchups

src/components/views/Leaderboard.tsx

@@ -175,7 +175,7 @@ export function Leaderboard(props: Props) {
       <Widget title="Leaderboard" label="Ranked Beta" class="-mx-3 sm:mx-0">
         <Suspense fallback={<div>Loading...</div>}>
           {data()?.total == 0 && <div class="my-6 text-center text-gray-400">No results found</div>}
-          <div class="-mx-3 -mb-3 md:-mb-3.5 sm:-mx-4">
+          <div class="-mx-3 -mb-3 sm:-mx-4 md:-mb-3.5">
             <table
               class={classes(
                 "mx-auto w-full table-auto whitespace-nowrap text-left transition-opacity md:text-lg",

src/components/widgets/PlayerMatchupStats.astro

@@ -0,0 +1,47 @@
+---
+import { Race, type PlayerMatchupsStats } from "../../lib/api"
+import Widget from "../Widget.astro"
+import { classes, styles } from "../../lib/theme"
+import { Image } from "astro:assets"
+import infernals from "../../assets/game/factions/infernals-small.png"
+import vanguard from "../../assets/game/factions/vanguard-small.png"
+
+type Theme = keyof typeof styles.badges
+interface Props {
+  playerMatchupStats: PlayerMatchupsStats
+}
+
+const { playerMatchupStats } = Astro.props
+const matchupsSortedByRace = playerMatchupStats.matchups.sort((a, b) => a.race.localeCompare(b.race))
+---
+
+<Widget title="Winrates by matchup">
+  <table class="mx-auto w-full table-auto whitespace-nowrap text-left text-sm transition-opacity">
+    <tbody>
+      {
+        matchupsSortedByRace.map((matchup) => (
+          <tr class="border-b border-gray-700/50 last:border-b-0">
+            <td class="flex w-full  gap-2 truncate p-2 font-semibold text-gray-50">
+              <Image src={matchup.race === "infernals" ? infernals : vanguard} alt={matchup.race} class="size-6" />
+              vs
+              <Image
+                src={matchup.opponent_race === "infernals" ? infernals : vanguard}
+                alt={matchup.opponent_race}
+                class="size-6"
+              />
+            </td>
+            <td class="pr-2 text-right text-sm text-gray-100">
+              {matchup.aggregated.wins_count}
+              <span class="text-green-400"> W</span>
+            </td>
+            <td class="pr-2 text-right  text-sm text-gray-100">
+              {matchup.aggregated.wins_count}
+              <span class="text-red-400"> L</span>
+            </td>
+            <td class=" text-right text-sm text-gray-100">{Math.round(matchup.aggregated.win_rate)}%</td>
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</Widget>

src/lib/theme.ts

@@ -37,6 +37,20 @@ export const styles = {
         outline-none
         transition duration-200 px-3 py-1.5 text-sm`,
   },
+  badges: {
+    infernals: {
+      badge: "bg-red-800/20 border-red-500/50",
+      badgeLabel: "text-red-500",
+    },
+    vanguard: {
+      badge: "bg-blue-800/20 border-blue-500/50",
+      badgeLabel: "text-blue-500",
+    },
+    default: {
+      badge: "bg-gray-800/20 border-gray-500/50",
+      badgeLabel: "text-gray-600",
+    },
+  },
 }
 
 export function classes(...args: (string | undefined | number)[]) {

src/pages/players/[id]-[username].astro

@@ -6,25 +6,14 @@ import { Image } from "astro:assets"
 import infernals from "../../assets/game/factions/infernals-small.png"
 import vanguard from "../../assets/game/factions/vanguard-small.png"
 import MatchPreview from "../../components/widgets/MatchPreview.astro"
-import { PlayersApi, type PlayerActivityStats, type PlayerResponse, type PlayerMatchesResponse } from "../../lib/api"
+import { PlayersApi } from "../../lib/api"
 import { RankedBadge } from "../../components/ui/RankedBadge"
 import PlayerActivity from "../../components/widgets/PlayerActivity.astro"
+import PlayerMatchupStats from "../../components/widgets/PlayerMatchupStats.astro"
 import PlayerOpponents from "../../components/widgets/PlayerOpponents.astro"
-const themes = {
-  infernals: {
-    badge: "bg-red-800/20 border-red-500/50",
-    badgeLabel: "text-red-500",
-  },
-  vanguard: {
-    badge: "bg-blue-800/20 border-blue-500/50",
-    badgeLabel: "text-blue-500",
-  },
-  default: {
-    badge: "bg-gray-800/20 border-gray-500/50",
-    badgeLabel: "text-gray-600",
-  },
-} as const
-type Theme = keyof typeof themes
+import { styles } from "../../lib/theme"
+
+type Theme = keyof typeof styles.badges
 
 // to be moved to own file
 async function getDataOrErrorResponse<T extends readonly unknown[] | []>(
@@ -39,12 +28,14 @@ async function getDataOrErrorResponse<T extends readonly unknown[] | []>(
 }
 
 const playerId = Astro.params.id!
-const [[player, playerMatches, playerActivity, playerOpponents], error] = await getDataOrErrorResponse(
-  PlayersApi.getPlayer({ playerId }),
-  PlayersApi.getPlayerMatches({ playerId }),
-  PlayersApi.getPlayerStatisticsActivity({ playerId }),
-  PlayersApi.getPlayerStatisticsOpponents({ playerId, count: 5 })
-)
+const [[player, playerMatches, playerActivity, playerMatchupStats, playerOpponents], error] =
+  await getDataOrErrorResponse(
+    PlayersApi.getPlayer({ playerId }),
+    PlayersApi.getPlayerMatches({ playerId }),
+    PlayersApi.getPlayerStatisticsActivity({ playerId }),
+    PlayersApi.getPlayerStatisticsMatchups({ playerId }),
+    PlayersApi.getPlayerStatisticsOpponents({ playerId, count: 5 })
+  )
 if (error) return error
 
 const highestLeague = player?.leaderboard_entries?.reduce(
@@ -76,7 +67,7 @@ const highestLeague = player?.leaderboard_entries?.reduce(
               <div
                 class:list={[
                   "rounded-lg pl-3 pr-1 py-2 -mx-2 flex items-center gap-3 text-sm sm:text-base",
-                  themes[entry.race as Theme].badge,
+                  styles.badges[entry.race as Theme].badge,
                 ]}
               >
                 <Image
@@ -85,19 +76,19 @@ const highestLeague = player?.leaderboard_entries?.reduce(
                   class="size-6 sm:size-10"
                 />
                 <div>
-                  <span class:list={["text-xs", themes[entry.race as Theme].badgeLabel]}>Rank</span>
+                  <span class:list={["text-xs", styles.badges[entry.race as Theme].badgeLabel]}>Rank</span>
                   <p>#{entry.rank}</p>
                 </div>
                 <div>
-                  <span class:list={["text-xs", themes[entry.race as Theme].badgeLabel]}>Points</span>
+                  <span class:list={["text-xs", styles.badges[entry.race as Theme].badgeLabel]}>Points</span>
                   <p>
                     {Math.round(entry.points)}
 
                     <RankedBadge entry={entry} class="inline-block w-4" client:load />
                   </p>
                 </div>
                 <div>
-                  <span class:list={["text-xs", themes[entry.race as Theme].badgeLabel]}>MMR</span>
+                  <span class:list={["text-xs", styles.badges[entry.race as Theme].badgeLabel]}>MMR</span>
                   <p>{Math.round(entry.mmr)}</p>
                 </div>
               </div>
@@ -108,13 +99,19 @@ const highestLeague = player?.leaderboard_entries?.reduce(
       <div class="hidden sm:block">
         {playerActivity?.history && <PlayerActivity activity={playerActivity} {player} />}
       </div>
+      <div class="hidden lg:block">
+        {playerMatchupStats.matchups.length && <PlayerMatchupStats playerMatchupStats={playerMatchupStats} />}
+      </div>
       <div class="hidden lg:block">
         {playerOpponents.opponents.length && <PlayerOpponents opponents={playerOpponents} />}
       </div>
     </div>
     <div class="sm:hidden">
       {playerActivity?.history && <PlayerActivity activity={playerActivity} {player} />}
     </div>
+    <div class="lg:hidden">
+      {playerMatchupStats.matchups.length && <PlayerMatchupStats playerMatchupStats={playerMatchupStats} />}
+    </div>
     <div class="lg:hidden">
       {playerOpponents.opponents.length && <PlayerOpponents opponents={playerOpponents} />}
     </div>