feat(skywars): add perks page

apps/discord-bot/package.json

@@ -41,7 +41,10 @@
       "default": "./dist/components/index.js"
     },
     "#commands/*": {
-      "types": "./src/commands/*.ts",
+      "types": [
+        "./src/commands/*.ts",
+        "./src/commands/*.tsx"
+      ],
       "default": "./dist/commands/*.js"
     },
     "#services": {

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

@@ -12,6 +12,7 @@ import {
   BaseProfileProps,
   ProfileData,
 } from "#commands/base.hypixel-command";
+import { BedWarsChallengesProfile } from "./bedwars-challenges.profile.js";
 import { BedWarsProfile } from "./bedwars.profile.js";
 import { Command } from "@statsify/discord";
 
@@ -25,6 +26,7 @@ export class BedWarsCommand extends BaseHypixelCommand<BedWarsModes> {
     base: BaseProfileProps,
     { mode }: ProfileData<BedWarsModes, never>
   ): JSX.Element {
+    if (mode.api === "overall" && mode.submode.api === "challenges") return <BedWarsChallengesProfile {...base} />;
     return <BedWarsProfile {...base} mode={mode} />;
   }
 }

apps/discord-bot/src/commands/deprecated/bedwars-challenges.command.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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 { Command, type IMessage } from "@statsify/discord";
+
+@Command({ description: (t) => t("deprecated.command-description", { newCommandName: "/bedwars" }) })
+export class BedWarsChallengesCommand {
+  public run(): IMessage {
+    return {
+      content: (t) => t("deprecated.merged-dropdown", {
+        oldCommandName: "`/bedwarschallenges`",
+        newCommand: "</duels:1140654940658868317>",
+        newCommandName: `${t("emojis:games.BEDWARS")} **BedWars**`,
+        mode: "**Challenges**",
+      }),
+    };
+  }
+}

apps/discord-bot/src/commands/deprecated/skywars-challenges.command.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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 { Command, type IMessage } from "@statsify/discord";
+
+@Command({ description: (t) => t("deprecated.command-description", { newCommandName: "/skywars" }) })
+export class SkyWarsChallengesCommand {
+  public run(): IMessage {
+    return {
+      content: (t) => t("deprecated.merged-dropdown", {
+        oldCommandName: "`/skywarschallenges`",
+        newCommand: "</duels:1140654940658868317>",
+        newCommandName: `${t("emojis:games.SKYWARS")} **SkyWars**`,
+        mode: "**Challenges**",
+      }),
+    };
+  }
+}

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

@@ -6,32 +6,31 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
+import { Container, Footer, Header } from "#components";
+import { FormattedGame } from "@statsify/schemas";
+
+import { Image } from "skia-canvas";
+import { LocalizeFunction } from "@statsify/discord";
 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";
+import type { BaseProfileProps } from "#commands/base.hypixel-command";
+import type { DuelsModeIcons } from "./duels.command.js";
 
-interface TitlesTableProps {
-  duels: Duels;
-  t: LocalizeFunction;
+export interface DuelsTitlesProfileProps extends Omit<BaseProfileProps, "time"> {
   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 DuelsTitlesProfile = ({
+  skin,
+  player,
+  background,
+  logo,
+  user,
+  badge,
+  t,
+  modeIcons,
+}: DuelsTitlesProfileProps) => {
+  const { duels } = player.stats;
 
-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 },
@@ -53,27 +52,51 @@ export const TitlesTable = ({ duels, t, modeIcons }: TitlesTableProps) => {
   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}
+    <Container background={background}>
+      <Header
+        skin={skin}
+        name={player.prefixName}
+        badge={badge}
+        sidebar={[]}
+        title={`§l${FormattedGame.DUELS} §fTitles`}
+        time="LIVE"
       />
-      <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 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>
-    </div>
+      <Footer logo={logo} user={user} />
+    </Container>
   );
 };
+
+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>
+  );
+}

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

@@ -15,6 +15,7 @@ import {
 } from "#commands/base.hypixel-command";
 import { Command } from "@statsify/discord";
 import { DuelsProfile } from "./duels.profile.js";
+import { DuelsTitlesProfile } from "./duels-titles.profile.js";
 import { getAssetPath } from "@statsify/assets";
 import { loadImage } from "@statsify/rendering";
 import { readdir } from "node:fs/promises";
@@ -49,7 +50,8 @@ export class DuelsCommand extends BaseHypixelCommand<DuelsModes, PreProfileData>
     base: BaseProfileProps,
     { mode, data }: ProfileData<DuelsModes, PreProfileData>
   ): JSX.Element {
-    return <DuelsProfile {...base} mode={mode} modeIcons={data.modeIcons} />;
+    if (mode.api === "overall" && mode.submode.api === "titles") return <DuelsTitlesProfile {...base} modeIcons={data.modeIcons} />;
+    return <DuelsProfile {...base} mode={mode} />;
   }
 }
 

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

@@ -10,22 +10,18 @@ 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, ProfileTime } from "#commands/base.hypixel-command";
-import type { DuelsModeIcons } from "./duels.command.js";
+import type { BaseProfileProps } from "#commands/base.hypixel-command";
 
-export type DuelsProfileProps<T extends ProfileTime> = Omit<BaseProfileProps, "time"> & {
+export interface DuelsProfileProps extends BaseProfileProps {
   mode: GameMode<DuelsModes>;
-  time: T;
-  modeIcons: T extends "LIVE" ? DuelsModeIcons : undefined;
-};
+}
 
-export const DuelsProfile = <T extends ProfileTime>({
+export const DuelsProfile = ({
   skin,
   player,
   background,
@@ -35,8 +31,7 @@ export const DuelsProfile = <T extends ProfileTime>({
   mode,
   t,
   time,
-  modeIcons,
-}: DuelsProfileProps<T>) => {
+}: DuelsProfileProps) => {
   const { duels } = player.stats;
 
   const sidebar: SidebarItem[] = [
@@ -56,8 +51,6 @@ export const DuelsProfile = <T extends ProfileTime>({
   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;
 
   switch (mode.api) {
@@ -75,13 +68,6 @@ export const DuelsProfile = <T extends ProfileTime>({
       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[mode.api]} t={t} time={time} />;
       break;
@@ -101,19 +87,17 @@ export const DuelsProfile = <T extends ProfileTime>({
         skin={skin}
         name={player.prefixName}
         badge={badge}
-        sidebar={isTitles ? [] : sidebar}
+        sidebar={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,
-          })}`}
+        description={`§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,4 +10,3 @@ 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";