Merge pull request #55 from jrambold/gamelength_widget

Gamelength widget

Author: reneklacan

src/components/sources/ToolMeta.astro

@@ -14,7 +14,7 @@ const domain = new URL(data.url).hostname
   {
     data.metadata?.external ? (
       <>
-        {domain} <span class="*:w-3 *:h-3 *:inline-block ml-1 text-gray-400" set:html={externalIcon} />
+        {domain} <span class="ml-1 text-gray-400 *:inline-block *:h-3 *:w-3" set:html={externalIcon} />
       </>
     ) : (
       "Made by Stormgate World"

src/components/widgets/GameLengthChart.tsx

@@ -0,0 +1,102 @@
+// @ts-nocheck
+
+import { onMount } from "solid-js"
+import {
+  Chart,
+  Title,
+  Tooltip,
+  Legend,
+  Colors,
+  type ChartOptions,
+  type ChartData,
+  type ScriptableContext,
+  type ChartArea,
+} from "chart.js"
+import { DefaultChart } from "solid-chartjs"
+
+type GameLengthProps = {
+  data: Array[]
+}
+
+const prettyLabels = {
+  "0-120": "<2m",
+  "121-240": "2-4m",
+  "241-360": "4-8m",
+  "361-480": "8-10m",
+  "481-600": "10-12m",
+  "601-720": "12-14m",
+  "721-840": "14-16m",
+  "841-960": "16-18m",
+  "961-1080": "18-20m",
+  "1081-1200": "20-22m",
+  "1320+": "22m+",
+}
+
+export function GameLengthChart(props: GameLengthChartProps) {
+  var labels = []
+  var wins = []
+  var losses = []
+  var games = []
+  props.data.map((period) => labels.push(prettyLabels[period.match_length_range]))
+  props.data.map((period) => wins.push(period.wins_count))
+  props.data.map((period) => losses.push(period.losses_count))
+  props.data.map((period) => games.push(period.matches_count))
+  let canvas: HTMLCanvasElement
+  onMount(() => {
+    Chart.register(Title, Tooltip, Colors)
+  })
+
+  const min = 0
+  const max = Math.max(...games)
+
+  const chartData: ChartData = {
+    labels: labels,
+    datasets: [
+      {
+        label: "Wins",
+        data: wins,
+        backgroundColor: "green",
+      },
+      {
+        label: "Losses",
+        data: losses,
+        backgroundColor: "red",
+      },
+    ],
+  }
+
+  const chartOptions: ChartOptions = {
+    responsive: true,
+    maintainAspectRatio: true,
+    interaction: {
+      intersect: false,
+      mode: "index",
+    },
+    plugins: {
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        stacked: true,
+      },
+      y: {
+        stacked: true,
+      },
+    },
+  }
+
+  return (
+    <div class="relative w-full overflow-hidden">
+      <DefaultChart
+        type="bar"
+        data={chartData}
+        options={chartOptions}
+        height={100}
+        width={300}
+        ref={(c) => (canvas = c)}
+      />
+    </div>
+  )
+}

src/components/widgets/PlayerGameLengthStats.astro

@@ -0,0 +1,46 @@
+---
+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"
+import { GameLengthChart } from "./GameLengthChart"
+
+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="Game Length">
+  <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>
+            </tr>
+            <tr>
+              <td class="pr-2 text-right text-sm text-gray-100">
+                <GameLengthChart data={matchup.match_length} client:idle />
+              </td>
+            </tr>
+          </>
+        ))
+      }
+    </tbody>
+  </table>
+</Widget>

src/components/widgets/PlayerMatchupStats.astro

@@ -15,7 +15,7 @@ const { playerMatchupStats } = Astro.props
 const matchupsSortedByRace = playerMatchupStats.matchups.sort((a, b) => a.race.localeCompare(b.race))
 ---
 
-<Widget title="Winrates by matchup">
+<Widget title="Winrates By Matchup">
   <table class="mx-auto w-full table-auto whitespace-nowrap text-left text-sm transition-opacity">
     <tbody>
       {

src/components/widgets/PlayerOpponents.astro

@@ -11,7 +11,7 @@ interface Props {
 const { opponents } = Astro.props
 ---
 
-<Widget title="Top opponents">
+<Widget title="Top Opponents">
   <table class={classes("mx-auto w-full table-auto whitespace-nowrap text-left transition-opacity")}>
     <tbody>
       {

src/lib/content.ts

@@ -104,7 +104,7 @@ export type RedditData = {
 }
 
 export type ToolData = {
-  tags: string[],
+  tags: string[]
   external: boolean
 }
 

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

@@ -10,6 +10,7 @@ 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 PlayerGameLengthStats from "../../components/widgets/PlayerGameLengthStats.astro"
 import PlayerOpponents from "../../components/widgets/PlayerOpponents.astro"
 import { styles } from "../../lib/theme"
 
@@ -102,6 +103,9 @@ const highestLeague = player?.leaderboard_entries?.reduce(
       <div class="hidden lg:block">
         {playerMatchupStats.matchups.length > 0 && <PlayerMatchupStats playerMatchupStats={playerMatchupStats} />}
       </div>
+      <div class="hidden lg:block">
+        {playerMatchupStats.matchups.length > 0 && <PlayerGameLengthStats playerMatchupStats={playerMatchupStats} />}
+      </div>
       <div class="hidden lg:block">
         {playerOpponents.opponents.length > 0 && <PlayerOpponents opponents={playerOpponents} />}
       </div>
@@ -112,6 +116,9 @@ const highestLeague = player?.leaderboard_entries?.reduce(
     <div class="lg:hidden">
       {playerMatchupStats.matchups.length > 0 && <PlayerMatchupStats playerMatchupStats={playerMatchupStats} />}
     </div>
+    <div class="lg:hidden">
+      {playerMatchupStats.matchups.length > 0 && <PlayerGameLengthStats playerMatchupStats={playerMatchupStats} />}
+    </div>
     <div class="lg:hidden">
       {playerOpponents.opponents.length > 0 && <PlayerOpponents opponents={playerOpponents} />}
     </div>