Merge branch 'main' into fix-game-length-labels

Author: qlemaire22

src/components/Card.astro

@@ -82,7 +82,7 @@ const isStormgatenexus = data.source == "news" && data.author_url?.includes("sto
       )
     }
     <div class="flex-auto"></div>
-    <div class="mt-4 flex flex-wrap gap-4 text-sm">
+    <div class="mt-4 flex flex-wrap items-center gap-4 text-sm">
       {
         data.source === "reddit" ? (
           <RedditMeta data={data} />

src/components/sources/NewsMeta.astro

@@ -1,12 +1,13 @@
 ---
+import Svg from "@jasikpark/astro-svg-loader"
 import type { Content } from "../../lib/content"
 
 export interface Props {
   data: Content
 }
 
 const { data } = Astro.props
-const isStormgatenexus = data.source == "news" && data.author_url.includes("stormgatenexus.com")
+const isStormgatenexus = data.source == "news" && data.author_url?.includes("stormgatenexus.com")
 function prefixUrl(url: string) {
   if (url.startsWith("http")) {
     return url
@@ -24,7 +25,7 @@ function prefixUrl(url: string) {
   ) : (
     <>
       <span class="inline-flex items-center text-orange-400">
-        <i class="ti ti-rss w-4" />
+        <Svg src={import("lucide-static/icons/rss.svg?raw")} class="inline-block w-4" />
       </span>
 
       {data.author_url ? (

src/components/widgets/FactionDropdown.tsx

@@ -0,0 +1,31 @@
+import { createEffect, createSignal, onMount } from "solid-js"
+import { SelectButton, type SelectButtonOption } from "../ui/SelectButton"
+import infernals from "../../assets/game/factions/infernals-small-glow.png"
+import vanguard from "../../assets/game/factions/vanguard-small-glow.png"
+import { Race } from "../../lib/api"
+
+const factionOptions: SelectButtonOption[] = [
+  {
+    label: "Infernals",
+    value: Race.INFERNALS,
+    icon: infernals.src,
+  },
+  { label: "Vanguard", value: Race.VANGUARD, icon: vanguard.src },
+]
+
+export function FactionDropdown(props: { queryParam: string; selected: (typeof factionOptions)[number]["value"] }) {
+  const selected = props.selected ?? "all"
+  const [faction, setFaction] = createSignal(
+    factionOptions.find((option) => option.value === selected) || factionOptions[0]
+  )
+
+  createEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    if (faction()?.value === selected) return
+    if (faction()?.value && faction()?.value != "all") urlParams.set(props.queryParam, faction()?.value!)
+    else urlParams.delete(props.queryParam)
+    window.location.href = `${window.location.pathname}${urlParams.size ? "?" + urlParams.toString() : ""}`
+  })
+
+  return <SelectButton options={factionOptions} value={faction} setValue={setFaction} />
+}

src/components/widgets/GameLengthChart.tsx

@@ -19,7 +19,8 @@ const prettyLabels = {
   "841-960": "14-16m",
   "961-1080": "16-18m",
   "1081-1200": "18-20m",
-  "1200+": "20m+",
+  "1201-1320": "20-22m",
+  "1320+": "22m+",
 } as const
 
 export function GameLengthChart(props: GameLengthProps) {
@@ -55,6 +56,7 @@ export function GameLengthChart(props: GameLengthProps) {
       intersect: false,
       mode: "index",
     },
+    maxBarThickness: 50,
     plugins: {
       title: {
         display: false,

src/components/widgets/Leaderboard.tsx

@@ -43,7 +43,7 @@ export function Leaderboard(props: Props) {
   const [query, setQuery] = createSignal(props.query || undefined)
   const [page, setPage] = createSignal(props.page || 1)
   const [mode, setMode] = createSignal(props.mode ?? "ranked_1v1")
-  const [order, setOrder] = createSignal(props.order ?? undefined)
+  const [order, setOrder] = createSignal(props.order ?? LeaderboardOrder.POINTS)
   const [faction, setFaction] = createSignal(props.faction ?? undefined)
   const [isPending, start] = useTransition()
   const [isBrowserNavigation, setIsBrowserNavigation] = createSignal(true)
@@ -164,11 +164,11 @@ export function Leaderboard(props: Props) {
               class={classes(styles.button.sm, "flex-auto bg-transparent text-white outline-none")}
               placeholder="Search"
               ref={searchInput}
-              onKeyDown={(e) => e.key === "Enter" && setQuery(searchInput?.value)}
+              onKeyDown={(e) => e.key === "Enter" && setQuery(searchInput?.value.trim() || undefined)}
             />
             <button
               class={classes(styles.button.sm, styles.button.control, styles.button.trigger)}
-              onClick={() => setQuery(searchInput?.value)}
+              onClick={() => setQuery(searchInput?.value.trim() || undefined)}
             >
               <span innerHTML={searchIcon} class="text-gray-200 *:w-4" />
             </button>

src/components/widgets/MmrHistoryChart.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+
+import { onMount } from "solid-js"
+import { Chart, Title, Tooltip, Colors, TimeScale, type ChartOptions, type ChartData } from "chart.js"
+import { Line } from "solid-chartjs"
+import "chartjs-adapter-date-fns"
+
+type MmrHistoryChartProps = {
+  labels: string[]
+  data: number[]
+}
+
+const longNumberFormatter = new Intl.NumberFormat("en-us")
+
+export function MmrHistoryChart(props: MmrHistoryChartProps) {
+  let canvas: HTMLCanvasElement
+  onMount(() => {
+    Chart.register(Title, Tooltip, Colors, TimeScale)
+  })
+
+  const chartData: ChartData = {
+    labels: props.labels,
+    datasets: [
+      {
+        label: "MMR",
+        data: props.data,
+        tension: 0.3,
+        borderColor: "#9E9E9E",
+        pointRadius: 5,
+        pointHoverRadius: 2,
+        pointBorderColor: "transparent",
+      },
+    ],
+  }
+
+  const chartOptions: ChartOptions = {
+    responsive: true,
+    maintainAspectRatio: true,
+    interaction: {
+      intersect: false,
+      mode: "index",
+    },
+    scales: {
+      y: {
+        ticks: {
+          precision: 0,
+        },
+        offset: true,
+      },
+      x: {
+        type: "time",
+        time: { unit: "day", tooltipFormat: "d MMM, y" },
+      },
+    },
+    plugins: {
+      tooltip: {
+        displayColors: false,
+        callbacks: {
+          label: (c) => `MMR: ${Math.round(c.parsed.y)}`,
+        },
+      },
+    },
+  }
+
+  return (
+    <div class="relative w-full overflow-hidden">
+      <Line data={chartData} options={chartOptions} height={100} width={300} ref={(c) => (canvas = c)} />
+    </div>
+  )
+}

src/layouts/PlayerLayout.astro

@@ -44,6 +44,7 @@ const playerInfo = (await getCollection("players")).find((p) => p.data.playerId
       current={[
         { href: `/players/${slug}`, label: "Overview" },
         { href: `/players/${slug}/matches`, label: "Match History" },
+        { href: `/players/${slug}/statistics`, label: "Statistics" },
       ]}
     />
     <HeaderContent>

src/lib/api/index.ts

@@ -11,11 +11,12 @@ export type { ActivityStatistics } from "./models/ActivityStatistics"
 export type { ActivityStatisticsActivity } from "./models/ActivityStatisticsActivity"
 export type { ActivityStatisticsEntry } from "./models/ActivityStatisticsEntry"
 export type { ActivityStatisticsServerEntry } from "./models/ActivityStatisticsServerEntry"
+export { Aggregation } from "./models/Aggregation"
 export type { ErrorResponse } from "./models/ErrorResponse"
 export { Leaderboard } from "./models/Leaderboard"
 export type { LeaderboardDumpResponse } from "./models/LeaderboardDumpResponse"
 export type { LeaderboardEntryHistory } from "./models/LeaderboardEntryHistory"
-export type { LeaderboardEntryHistoryEntry } from "./models/LeaderboardEntryHistoryEntry"
+export type { LeaderboardEntryHistoryRow } from "./models/LeaderboardEntryHistoryRow"
 export type { LeaderboardEntryResponse } from "./models/LeaderboardEntryResponse"
 export { LeaderboardOrder } from "./models/LeaderboardOrder"
 export type { LeaderboardResponse } from "./models/LeaderboardResponse"
@@ -35,13 +36,13 @@ export type { PlayerMatchupsStatsEntry } from "./models/PlayerMatchupsStatsEntry
 export type { PlayerMatchupsStatsMatchup } from "./models/PlayerMatchupsStatsMatchup"
 export type { PlayerOpponentsStats } from "./models/PlayerOpponentsStats"
 export type { PlayerOpponentsStatsOpponent } from "./models/PlayerOpponentsStatsOpponent"
-export type { PlayerPreferences } from "./models/PlayerPreferences"
 export type { PlayerResponse } from "./models/PlayerResponse"
 export type { PlayerStatsEntry } from "./models/PlayerStatsEntry"
 export type { PlayerStatsEntryAggregated } from "./models/PlayerStatsEntryAggregated"
 export type { PlayerStatsEntryNumBreakdown } from "./models/PlayerStatsEntryNumBreakdown"
 export { ProfilePrivacy } from "./models/ProfilePrivacy"
 export { Race } from "./models/Race"
+export { Resolution } from "./models/Resolution"
 export type { StatsByTime } from "./models/StatsByTime"
 export type { StatsByTimeEntry } from "./models/StatsByTimeEntry"
 export type { StatsByTimeHistoryPoint } from "./models/StatsByTimeHistoryPoint"

src/lib/api/models/PlayerPreferences.ts renamed to src/lib/api/models/Aggregation.ts

@@ -2,7 +2,8 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { ProfilePrivacy } from "./ProfilePrivacy"
-export type PlayerPreferences = {
-  privacy_profile?: ProfilePrivacy | null
+export enum Aggregation {
+  LAST = "last",
+  MAX_MMR = "max_mmr",
+  MAX_POINTS = "max_points",
 }

src/lib/api/models/LeaderboardEntryHistory.ts

@@ -2,7 +2,12 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { LeaderboardEntryHistoryEntry } from "./LeaderboardEntryHistoryEntry"
+import type { Aggregation } from "./Aggregation"
+import type { LeaderboardEntryHistoryRow } from "./LeaderboardEntryHistoryRow"
+import type { Resolution } from "./Resolution"
 export type LeaderboardEntryHistory = {
-  history: Array<LeaderboardEntryHistoryEntry>
+  cached_at: string
+  resolution: Resolution
+  aggregation: Aggregation
+  history: Array<LeaderboardEntryHistoryRow>
 }