feat(compare): add /compare

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

@@ -6,17 +6,44 @@
  * https://github.com/Statsify/statsify/blob/main/LICENSE
  */
 
-import { BedWarsModes, FormattedGame, type GameMode } from "@statsify/schemas";
+import { BedWarsMode, BedWarsModes, FormattedGame, type GameMode } from "@statsify/schemas";
 import {
   Container,
   Footer,
   Header,
   Historical,
   SidebarItem,
+  StatColumn,
   Table,
   formatProgression,
 } from "#components";
 import type { BaseProfileProps } from "#commands/base.hypixel-command";
+import type { LocalizeFunction } from "@statsify/discord";
+
+export function getBedWarsTable(stats: BedWarsMode, t: LocalizeFunction): StatColumn[][] {
+  return [
+    [
+      { title: t("stats.wins"), color: "§a", value: stats.wins },
+      { title: t("stats.losses"), color: "§c", value: stats.losses, lowerIsBetter: true },
+      { title: t("stats.wlr"), color: "§6", value: stats.wlr },
+    ],
+    [
+      { title: t("stats.finalKills"), color: "§a", value: stats.finalKills },
+      { title: t("stats.finalDeaths"), color: "§c", value: stats.finalDeaths, lowerIsBetter: true },
+      { title: t("stats.fkdr"), color: "§6", value: stats.fkdr },
+    ],
+    [
+      { title: t("stats.kills"), color: "§a", value: stats.kills },
+      { title: t("stats.deaths"), color: "§c", value: stats.deaths, lowerIsBetter: true },
+      { title: t("stats.kdr"), color: "§6", value: stats.kdr },
+    ],
+    [
+      { title: t("stats.bedsBroken"), color: "§a", value: stats.bedsBroken },
+      { title: t("stats.bedsLost"), color: "§c", value: stats.bedsLost, lowerIsBetter: true },
+      { title: t("stats.bblr"), color: "§6", value: stats.bblr },
+    ],
+  ];
+}
 
 export interface BedWarsProfileProps extends BaseProfileProps {
   mode: GameMode<BedWarsModes>;
@@ -71,47 +98,24 @@ export const BedWarsProfile = ({
         time={time}
       />
       <Table.table>
-        <Table.tr>
-          <Table.td title={t("stats.wins")} value={t(stats.wins)} color="§a" />
-          <Table.td title={t("stats.losses")} value={t(stats.losses)} color="§c" />
-          <Table.td title={t("stats.wlr")} value={t(stats.wlr)} color="§6" />
-        </Table.tr>
-        <Table.tr>
-          <Table.td
-            title={t("stats.finalKills")}
-            value={t(stats.finalKills)}
-            color="§a"
-          />
-          <Table.td
-            title={t("stats.finalDeaths")}
-            value={t(stats.finalDeaths)}
-            color="§c"
-          />
-          <Table.td title={t("stats.fkdr")} value={t(stats.fkdr)} color="§6" />
-        </Table.tr>
-        <Table.tr>
-          <Table.td title={t("stats.kills")} value={t(stats.kills)} color="§a" />
-          <Table.td title={t("stats.deaths")} value={t(stats.deaths)} color="§c" />
-          <Table.td title={t("stats.kdr")} value={t(stats.kdr)} color="§6" />
-        </Table.tr>
-        <Table.tr>
-          <Table.td
-            title={t("stats.bedsBroken")}
-            value={t(stats.bedsBroken)}
-            color="§a"
-          />
-          <Table.td title={t("stats.bedsLost")} value={t(stats.bedsLost)} color="§c" />
-          <Table.td title={t("stats.bblr")} value={t(stats.bblr)} color="§6" />
-        </Table.tr>
-        <Historical.progression
-          time={time}
-          progression={bedwars.progression}
-          current={bedwars.levelFormatted}
-          next={bedwars.nextLevelFormatted}
-          t={t}
-          level={bedwars.level}
-          exp={bedwars.exp}
-        />
+        {[
+          ...getBedWarsTable(stats, t).map((row) => (
+            <Table.tr>
+              {row.map((col) => (
+                <Table.td title={col.title} value={t(col.value)} color={col.color} />
+              ))}
+            </Table.tr>
+          )),
+          <Historical.progression
+            time={time}
+            progression={bedwars.progression}
+            current={bedwars.levelFormatted}
+            next={bedwars.nextLevelFormatted}
+            t={t}
+            level={bedwars.level}
+            exp={bedwars.exp}
+          />,
+        ]}
       </Table.table>
       <Footer logo={logo} user={user} />
     </Container>

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

@@ -0,0 +1,109 @@
+/**
+ * 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 {
+  ApiModeFromGameModes,
+  BEDWARS_MODES,
+  BedWarsModes,
+  FormattedGame,
+  type GameModeWithSubModes,
+  type GameModes,
+  type Player,
+} from "@statsify/schemas";
+import {
+  ApiService,
+  Command,
+  CommandContext,
+  type LocalizeFunction,
+  Page,
+  PaginateService,
+  PlayerArgument,
+  SubCommand,
+} from "@statsify/discord";
+import { CompareProfile, HEAD_SIZE } from "./compare.profile.js";
+import { GamesWithBackgrounds, mapBackground } from "#constants";
+import { StatColumn } from "#components";
+import { getBackground, getLogo } from "@statsify/assets";
+import { getBedWarsTable } from "../bedwars/bedwars.profile.js";
+import { getTheme } from "#themes";
+import { render } from "@statsify/rendering";
+
+const args = [new PlayerArgument("player", true), new PlayerArgument("player2", false)];
+
+@Command({ description: (t) => t("commands.compare") })
+export class CompareCommand {
+  public constructor(
+    private readonly apiService: ApiService,
+    private readonly paginateService: PaginateService
+  ) {}
+
+  @SubCommand({ description: (t) => t("commands.compare-bedwars"), args })
+  public bedwars(context: CommandContext) {
+    return this.run(
+      context,
+      BEDWARS_MODES,
+      (player, modeApi, t) =>
+        getBedWarsTable(
+          player.stats.bedwars[modeApi as ApiModeFromGameModes<BedWarsModes>],
+          t
+        ),
+      (t, mode) => `§l${FormattedGame.BEDWARS} §fCompare §r(${mode.formatted})`
+    );
+  }
+
+  private async run<T extends GamesWithBackgrounds>(
+    context: CommandContext,
+    modes: GameModes<T>,
+    getTable: (player: Player, modeApi: string, t: LocalizeFunction) => StatColumn[][],
+    getTitle: (t: LocalizeFunction, mode: GameModeWithSubModes<T>) => string
+  ) {
+    const user = context.getUser();
+
+    const [player, player2] = await Promise.all([
+      this.apiService.getPlayer(context.option("player", ""), user),
+      this.apiService.getPlayer(context.option("player2", ""), user),
+    ]);
+
+    const [logo, head1, head2] = await Promise.all([
+      getLogo(user),
+      this.apiService.getPlayerHead(player.uuid, HEAD_SIZE).catch(() => null),
+      this.apiService.getPlayerHead(player2.uuid, HEAD_SIZE).catch(() => null),
+    ]);
+
+    const allModes = modes.getModes();
+
+    const pages: Page[] = allModes.map((mode) => ({
+      label: mode.formatted,
+      generator: async (t) => {
+        const bg = await getBackground(...mapBackground(modes, mode.api));
+        const table1 = getTable(player, mode.api, t);
+        const table2 = getTable(player2, mode.api, t);
+
+        const profile = (
+          <CompareProfile
+            player={player}
+            player2={player2}
+            head1={head1}
+            head2={head2}
+            background={bg}
+            logo={logo}
+            user={user}
+            t={t}
+            table1={table1}
+            table2={table2}
+            title={getTitle(t, mode)}
+          />
+        );
+
+        return render(profile, getTheme(user));
+      },
+    }));
+
+    return this.paginateService.paginate(context, pages);
+  }
+}

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

@@ -0,0 +1,96 @@
+/**
+ * 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 {
+  Container,
+  Footer,
+  SplitPill,
+  StatColumn,
+  Table,
+} from "#components";
+import type { Image } from "skia-canvas";
+import type { LocalizeFunction } from "@statsify/discord";
+import type { Player, User } from "@statsify/schemas";
+import { roundTo } from "@statsify/math";
+
+export const HEAD_SIZE = 32;
+
+export interface CompareProfileProps {
+  player: Player;
+  player2: Player;
+  head1: Image | null;
+  head2: Image | null;
+  background: Image;
+  logo: Image;
+  user: User | null;
+  t: LocalizeFunction;
+  table1: StatColumn[][];
+  table2: StatColumn[][];
+  title: string;
+}
+
+export const CompareProfile = ({
+  player,
+  player2,
+  head1,
+  head2,
+  background,
+  logo,
+  user,
+  t,
+  table1,
+  table2,
+  title,
+}: CompareProfileProps) => {
+  const nameRow: JSX.Element[] = [];
+  if (head1) nameRow.push(<img image={head1} width={HEAD_SIZE} height={HEAD_SIZE} margin={{ right: 6 }} />);
+  nameRow.push(<text>{`§a${player.prefixName} §7vs §c${player2.prefixName}`}</text>);
+  if (head2) nameRow.push(<img image={head2} width={HEAD_SIZE} height={HEAD_SIZE} margin={{ left: 6 }} />);
+
+  return (
+    <Container background={background}>
+      <div width="100%" location="center">
+        <text margin={{ top: 8, bottom: 8, left: 12, right: 12 }}>{title}</text>
+      </div>
+      <div width="100%" location="center" direction="row" margin={{ bottom: 4 }}>
+        {nameRow}
+      </div>
+      <Table.table>
+        {table1.map((row, ri) => (
+          <Table.tr>
+            {row.map((col1, ci) => {
+              const col2 = table2[ri][ci];
+              const delta = roundTo(Math.abs(col1.value - col2.value));
+              if (col1.comparable === false) {
+                return (
+                  <Table.td
+                    title={col1.title}
+                    value={`${t(col1.value)} §7/ ${t(col2.value)}`}
+                    color={col1.color}
+                  />
+                );
+              }
+              return (
+                <SplitPill
+                  title={col1.title}
+                  leftValue={col1.value}
+                  rightValue={col2.value}
+                  leftFormatted={t(col1.value)}
+                  rightFormatted={t(col2.value)}
+                  deltaFormatted={t(delta)}
+                  lowerIsBetter={col1.lowerIsBetter}
+                />
+              );
+            })}
+          </Table.tr>
+        ))}
+      </Table.table>
+      <Footer logo={logo} user={user} />
+    </Container>
+  );
+};

apps/discord-bot/src/components/SplitPill.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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
+ */
+
+export interface StatColumn {
+  title: string;
+  color: string;
+  value: number;
+  lowerIsBetter?: boolean;
+  comparable?: boolean;
+}
+
+export interface SplitPillProps {
+  title: string;
+  leftValue: number;
+  rightValue: number;
+  leftFormatted: string;
+  rightFormatted: string;
+  deltaFormatted: string;
+  lowerIsBetter?: boolean;
+}
+
+export const SplitPill = ({
+  title,
+  leftValue,
+  rightValue,
+  leftFormatted,
+  rightFormatted,
+  deltaFormatted,
+  lowerIsBetter = false,
+}: SplitPillProps) => {
+  const isEqual = leftValue === rightValue;
+  const leftWins = lowerIsBetter ? leftValue < rightValue : leftValue > rightValue;
+  const leftColor = isEqual ? "§f" : (leftWins ? "§a" : "§c");
+  const rightColor = isEqual ? "§f" : (leftWins ? "§c" : "§a");
+
+  let leftDelta: string;
+  let rightDelta: string;
+
+  if (isEqual) {
+    leftDelta = `§7${deltaFormatted}`;
+    rightDelta = `§7${deltaFormatted}`;
+  } else if (leftWins) {
+    leftDelta = `§a▲ ${deltaFormatted}`;
+    rightDelta = `§c▼ ${deltaFormatted}`;
+  } else {
+    leftDelta = `§c▼ ${deltaFormatted}`;
+    rightDelta = `§a▲ ${deltaFormatted}`;
+  }
+
+  return (
+    <box direction="column" location="center" width="100%">
+      <text margin={{ top: 8, bottom: 4, left: 6, right: 6 }}>{`§7${title}`}</text>
+      <div width="100%" direction="row">
+        <div width="1/2" location="center">
+          <text margin={{ top: 0, bottom: 4, left: 10, right: 10 }}>{`§^4^${leftColor}${leftFormatted}`}</text>
+        </div>
+        <div width="1/2" location="center">
+          <text margin={{ top: 0, bottom: 4, left: 10, right: 10 }}>{`§^4^${rightColor}${rightFormatted}`}</text>
+        </div>
+      </div>
+      <div width="100%" direction="row">
+        <div width="1/2" location="center">
+          <text margin={{ bottom: 8 }}>{leftDelta}</text>
+        </div>
+        <div width="1/2" location="center">
+          <text margin={{ bottom: 8 }}>{rightDelta}</text>
+        </div>
+      </div>
+    </box>
+  );
+};