feat(discord-bot): add page to view all duels titles

apps/discord-bot/src/commands/blitzsg/blitzsg.command.tsx

@@ -6,13 +6,13 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { BLITZSG_MODES, BlitzSGModes, GameModeWithSubModes, Player } from "@statsify/schemas";
+import { BLITZSG_MODES, BlitzSGKit, BlitzSGModes, GameModeWithSubModes, Player } from "@statsify/schemas";
 import {
   BaseHypixelCommand,
   BaseProfileProps,
   ProfileData,
 } from "#commands/base.hypixel-command";
-import { BlitzSGProfile, filterBlitzKits } from "./blitzsg.profile.js";
+import { BlitzSGProfile } from "./blitzsg.profile.js";
 import { Command } from "@statsify/discord";
 
 @Command({ description: (t) => t("commands.blitzsg") })
@@ -35,3 +35,17 @@ export class BlitzSGCommand extends BaseHypixelCommand<BlitzSGModes> {
     return <BlitzSGProfile {...base} mode={mode} />;
   }
 }
+
+export function filterBlitzKits(
+  player: Player,
+  modes: GameModeWithSubModes<BlitzSGModes>[]
+): GameModeWithSubModes<BlitzSGModes>[] {
+  const { blitzsg } = player.stats;
+  const [overall, ...kits] = modes;
+
+  const filteredKits = [...kits]
+    .sort((a, b) => (blitzsg[b.api] as BlitzSGKit).exp - (blitzsg[a.api] as BlitzSGKit).exp)
+    .slice(0, 24);
+
+  return [overall, ...filteredKits];
+}

apps/discord-bot/src/commands/blitzsg/blitzsg.profile.tsx

@@ -12,8 +12,6 @@ import {
   BlitzSGModes,
   FormattedGame,
   type GameMode,
-  type GameModeWithSubModes,
-  Player,
 } from "@statsify/schemas";
 import {
   Container,
@@ -192,16 +190,3 @@ export const BlitzSGProfile = ({
   );
 };
 
-export function filterBlitzKits(
-  player: Player,
-  modes: GameModeWithSubModes<BlitzSGModes>[]
-): GameModeWithSubModes<BlitzSGModes>[] {
-  const { blitzsg } = player.stats;
-  const [overall, ...kits] = modes;
-
-  const filteredKits = [...kits]
-    .sort((a, b) => (blitzsg[b.api] as BlitzSGKit).exp - (blitzsg[a.api] as BlitzSGKit).exp)
-    .slice(0, 24);
-
-  return [overall, ...filteredKits];
-}

apps/discord-bot/src/commands/duels/duels.command.tsx

@@ -6,25 +6,53 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
+import { ApiModeFromGameModes, DUELS_MODES, DuelsModes, GameModeWithSubModes } from "@statsify/schemas";
 import {
   BaseHypixelCommand,
   BaseProfileProps,
+  ModeEmoji,
   ProfileData,
 } from "#commands/base.hypixel-command";
 import { Command } from "@statsify/discord";
-import { DUELS_MODES, DuelsModes } from "@statsify/schemas";
 import { DuelsProfile } from "./duels.profile.js";
+import { getAssetPath } from "@statsify/assets";
+import { loadImage } from "@statsify/rendering";
+import { readdir } from "node:fs/promises";
+import type { Image } from "skia-canvas";
+
+export type DuelsModeIcons = Record<ApiModeFromGameModes<DuelsModes>, Image>;
+
+interface PreProfileData {
+  modeIcons: DuelsModeIcons;
+}
 
 @Command({ description: (t) => t("commands.duels") })
-export class DuelsCommand extends BaseHypixelCommand<DuelsModes> {
+export class DuelsCommand extends BaseHypixelCommand<DuelsModes, PreProfileData> {
   public constructor() {
     super(DUELS_MODES);
   }
 
+  public async getPreProfileData(): Promise<PreProfileData> {
+    const modeIconPaths = await readdir(getAssetPath("duels"));
+    const modeIcons = await Promise.all(
+      modeIconPaths.map(async (mode) => [mode.replace(".png", ""), await loadImage(getAssetPath(`duels/${mode}`))])
+    );
+
+    return { modeIcons: Object.fromEntries(modeIcons) };
+  }
+
+  public getModeEmojis(modes: GameModeWithSubModes<DuelsModes>[]): ModeEmoji[] {
+    return getDuelsModeEmojis(modes);
+  }
+
   public getProfile(
     base: BaseProfileProps,
-    { mode }: ProfileData<DuelsModes>
+    { mode, data }: ProfileData<DuelsModes, PreProfileData>
   ): JSX.Element {
-    return <DuelsProfile {...base} mode={mode} />;
+    return <DuelsProfile {...base} mode={mode} modeIcons={data.modeIcons} />;
   }
 }
+
+export function getDuelsModeEmojis(modes: GameModeWithSubModes<DuelsModes>[]): ModeEmoji[] {
+  return modes.map((m) => (t) => t(`emojis:duels.${m.api}`));
+}

apps/discord-bot/src/commands/duels/duels.profile.tsx

@@ -10,18 +10,22 @@ import {
   BridgeDuelsTable,
   MultiDuelsGameModeTable,
   SingleDuelsGameModeTable,
+  TitlesTable,
   UHCDuelsTable,
 } from "./tables/index.js";
 import { Container, Footer, Header, SidebarItem, formatProgression } from "#components";
 import { DuelsModes, FormattedGame, type GameMode } from "@statsify/schemas";
 import { prettify } from "@statsify/util";
-import type { BaseProfileProps } from "#commands/base.hypixel-command";
+import type { BaseProfileProps, ProfileTime } from "#commands/base.hypixel-command";
+import type { DuelsModeIcons } from "./duels.command.js";
 
-export interface DuelsProfileProps extends BaseProfileProps {
+export type DuelsProfileProps<T extends ProfileTime> = Omit<BaseProfileProps, "time"> & {
   mode: GameMode<DuelsModes>;
-}
+  time: T;
+  modeIcons: T extends "LIVE" ? DuelsModeIcons : undefined;
+};
 
-export const DuelsProfile = ({
+export const DuelsProfile = <T extends ProfileTime>({
   skin,
   player,
   background,
@@ -31,7 +35,8 @@ export const DuelsProfile = ({
   mode,
   t,
   time,
-}: DuelsProfileProps) => {
+  modeIcons,
+}: DuelsProfileProps<T>) => {
   const { duels } = player.stats;
 
   const sidebar: SidebarItem[] = [
@@ -51,46 +56,64 @@ export const DuelsProfile = ({
   if ("kit" in stats)
     sidebar.push([t("stats.kit"), prettify(stats.kit), "§e"]);
 
+  const isTitles = time === "LIVE" && mode.api === "overall" && mode.submode.api === "titles";
+
   let table: JSX.Element;
-  const { api } = mode;
 
-  switch (api) {
+  switch (mode.api) {
     case "bridge":
-      table = <BridgeDuelsTable stats={duels[api][mode.submode.api]} t={t} time={time} />;
+      table = <BridgeDuelsTable stats={duels[mode.api][mode.submode.api]} t={t} time={time} />;
       break;
 
     case "uhc":
-      table = <UHCDuelsTable stats={duels[api]} t={t} time={time} />;
+      table = <UHCDuelsTable stats={duels[mode.api]} t={t} time={time} />;
       break;
 
     case "skywars":
     case "op":
     case "megawalls":
-      table = <MultiDuelsGameModeTable stats={duels[api]} t={t} time={time} />;
+      table = <MultiDuelsGameModeTable stats={duels[mode.api]} t={t} time={time} />;
+      break;
+
+    case "overall":
+      // ensures the profile is not a historical one so modeIcons is defined
+      table = isTitles ?
+        <TitlesTable duels={duels} t={t} modeIcons={modeIcons!} /> :
+        <SingleDuelsGameModeTable stats={duels[mode.api]} t={t} time={time} />;
       break;
 
     default:
-      table = <SingleDuelsGameModeTable stats={duels[api]} t={t} time={time} />;
+      table = <SingleDuelsGameModeTable stats={duels[mode.api]} t={t} time={time} />;
       break;
   }
 
+  let formattedMode;
+
+  if (mode.api === "overall") {
+    formattedMode = mode.submode.api === "stats" ? "Overall" : mode.submode.formatted;
+  } else {
+    formattedMode = `${mode.formatted}${mode.submode ? ` ${mode.submode.formatted}` : ""}`;
+  }
+
   return (
     <Container background={background}>
       <Header
         skin={skin}
         name={player.prefixName}
         badge={badge}
-        sidebar={sidebar}
-        title={`§l${FormattedGame.DUELS} §fStats §r(${mode.formatted}${mode.submode ? ` ${mode.submode.formatted}` : ""})`}
-        description={`§7${t("stats.title")}: ${
-          duels[api].titleFormatted
-        }\n${formatProgression({
-          t,
-          label: t("stats.progression.win"),
-          progression: duels[api].progression,
-          currentLevel: duels[api].titleLevelFormatted,
-          nextLevel: duels[api].nextTitleLevelFormatted,
-        })}`}
+        sidebar={isTitles ? [] : sidebar}
+        title={`§l${FormattedGame.DUELS} §fStats §r(${formattedMode})`}
+        description={isTitles ?
+          undefined :
+          `§7${t("stats.title")}: ${
+            duels[mode.api].titleFormatted
+          }\n${formatProgression({
+            t,
+            label: t("stats.progression.win"),
+            progression: duels[mode.api].progression,
+            currentLevel: duels[mode.api].titleLevelFormatted,
+            nextLevel: duels[mode.api].nextTitleLevelFormatted,
+          })}`}
         time={time}
       />
       {table}

apps/discord-bot/src/commands/duels/tables/index.ts

@@ -10,3 +10,4 @@ export * from "./bridge-duels.table.js";
 export * from "./multi-duels-game-mode.table.js";
 export * from "./single-duels-game-mode.table.js";
 export * from "./uhc-duels.table.js";
+export * from "./titles.table.js";

apps/discord-bot/src/commands/duels/tables/titles.table.tsx

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Statsify
+ *
+ * This source code is licensed under the GNU GPL v3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * https://github.com/Statsify/statsify/blob/main/LICENSE
+ */
+
+import { arrayGroup } from "@statsify/util";
+import type { Duels } from "@statsify/schemas";
+import type { DuelsModeIcons } from "../duels.command.js";
+import type { Image } from "skia-canvas";
+import type { LocalizeFunction } from "@statsify/discord";
+
+interface TitlesTableProps {
+  duels: Duels;
+  t: LocalizeFunction;
+  modeIcons: DuelsModeIcons;
+}
+
+function ModeTitle({ icon, title, wins, t }: { icon: Image; title: string;wins: number;t: LocalizeFunction }) {
+  return (
+    <box width="100%" padding={{ left: 8, right: 8, top: 4, bottom: 4 }}>
+      <img image={icon} width={32} height={32} />
+      <text margin={{ left: 8 }}>
+        {title}
+      </text>
+      <div width="remaining" margin={{ left: 4, right: 4 }} />
+      <text>{t(wins)}</text>
+    </box>
+  );
+}
+
+export const TitlesTable = ({ duels, t, modeIcons }: TitlesTableProps) => {
+  const games = [
+    { icon: modeIcons.blitzsg, title: duels.blitzsg.titleFormatted, wins: duels.blitzsg.wins },
+    { icon: modeIcons.bow, title: duels.bow.titleFormatted, wins: duels.bow.wins },
+    { icon: modeIcons.bowSpleef, title: duels.bowSpleef.titleFormatted, wins: duels.bowSpleef.wins },
+    { icon: modeIcons.boxing, title: duels.boxing.titleFormatted, wins: duels.boxing.wins },
+    { icon: modeIcons.bridge, title: duels.bridge.titleFormatted, wins: duels.bridge.overall.wins },
+    { icon: modeIcons.classic, title: duels.classic.titleFormatted, wins: duels.classic.wins },
+    { icon: modeIcons.combo, title: duels.combo.titleFormatted, wins: duels.combo.wins },
+    { icon: modeIcons.megawalls, title: duels.megawalls.titleFormatted, wins: duels.megawalls.overall.wins },
+    { icon: modeIcons.nodebuff, title: duels.nodebuff.titleFormatted, wins: duels.nodebuff.wins },
+    { icon: modeIcons.op, title: duels.op.titleFormatted, wins: duels.op.overall.wins },
+    { icon: modeIcons.parkour, title: duels.parkour.titleFormatted, wins: duels.parkour.wins },
+    { icon: modeIcons.skywars, title: duels.skywars.titleFormatted, wins: duels.skywars.overall.wins },
+    { icon: modeIcons.sumo, title: duels.sumo.titleFormatted, wins: duels.sumo.wins },
+    { icon: modeIcons.uhc, title: duels.uhc.titleFormatted, wins: duels.uhc.overall.wins },
+  ];
+
+  games.sort((a, b) => b.wins - a.wins);
+  const groups = arrayGroup(games, games.length / 2);
+
+  return (
+    <div width="100%" direction="column">
+      <ModeTitle
+        icon={modeIcons.overall}
+        title={duels.overall.titleFormatted}
+        wins={duels.overall.wins}
+        t={t}
+      />
+      <div width="100%">
+        {groups.map((group) => (
+          <div width={`1/${groups.length}`} direction="column">
+            {group.map(({ icon, title, wins }) => (
+              <ModeTitle
+                icon={icon}
+                title={title}
+                wins={wins}
+                t={t}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};