feat: support build profile endpoints

2026-07-07 22:15:48 +07:00
parent 57f262f627
commit 2db9bb10a2
3 changed files with 540 additions and 208 deletions
@@ -6,6 +6,8 @@ export const cardErrorLocs = {
      "Unsupported character, avatar store doesn't have this character",
    uidFormat: "Invalid UID format",
    notFound: "UID not found on enka.network",
+    profileNotFound: "Profile not found on enka.network",
+    buildNotFound: "Build not found on enka.network",
    maintenance: "enka.network is under maintenance",
    ratelimit: "Too many requests to enka.network, please try again later",
    internal: "Internal server error",
@@ -16,6 +18,8 @@ export const cardErrorLocs = {
    unsupported: "ไม่รองรับตัวละครนี้",
    uidFormat: "รูปแบบ UID ไม่ถูกต้อง",
    notFound: "ไม่พบ UID บน enka.network",
+    profileNotFound: "ไม่พบโปรไฟล์บน enka.network",
+    buildNotFound: "ไม่พบบิลด์บน enka.network",
    maintenance: "enka.network กำลังปิดปรับปรุง",
    ratelimit: "เรียก API enka.network มากเกินไป กรุณาลองใหม่ภายหลัง",
    internal: "เกิดข้อผิดพลาดภายในเซิร์ฟเวอร์",
@@ -2,6 +2,7 @@ import { feature } from "bun:bundle";

 import { file, hash, inspect } from "bun";
 import { redirect, status, t } from "elysia";
+import type { ApiResponse, ResolvedPlayerInfo } from "enka.ts";
 import {
  enka,
  InternalError,
@@ -9,6 +10,7 @@ import {
  MaintenanceError,
  NotFoundError,
  RatelimitError,
+  resolveAvatarInfo,
  TTLCache,
 } from "enka.ts";
 import type { ImageResponse } from "takumi-js/response";
@@ -17,19 +19,19 @@ import ListDiffExample from "@/games/genshin/assets/listoriginal.webp" with { ty
 import DiffPageExample from "@/games/genshin/assets/ororo.png" with { type: "file" };
 import { assets, batchStore } from "@/games/genshin/data/assets";
 import { cardErrorLocs } from "@/games/genshin/data/locs";
+import { resolveShowcaseChar } from "@/games/genshin/data/matcher";
 import { mockData } from "@/games/genshin/data/mock";
 import type { NumberLike } from "@/games/genshin/types/enka";
 import { Locale } from "@/games/genshin/types/enka";
 import type { App } from "@/index";
 import { Deduplicator } from "@/lib/dedupe";
 import { createLogger } from "@/lib/logger";
-import { throwNotOk } from "@/lib/util";
+import { ResponseNotOkError, throwNotOk } from "@/lib/util";
 import { ErrorPage } from "@/v1/error";

 import DiffPage from "../../../hmr.html";
 import {
  CharacterPage,
-  NotInShowcaseError,
  PrivateShowcaseError,
  UnsupportedCharacterError,
 } from "./render/character";
@@ -40,6 +42,90 @@ const deduper = new Deduplicator();

 var purging = 0;

+const characterCardQuery = t.Partial(
+  t.Object(
+    {
+      error: t.Enum(
+        { http: "http", card: "card" },
+        {
+          default: "http",
+          description: "Type of error to return when card fails to render.",
+        },
+      ),
+      lang: Locale,
+      h: t.Number({
+        default: 1024,
+        description: "Height of card.",
+      }),
+      w: t.Number({
+        description:
+          "Target width of card, used to calculate height. Has higher priority than `h`.",
+      }),
+      debug: t.Enum(
+        { none: "none", render: "render", dump: "dump" },
+        {
+          description: "Return debug information instead of card.",
+          default: "none",
+        },
+      ),
+      substat: t.Boolean({
+        description: "Add substats breakdown bar under the card.",
+        default: false,
+      }),
+      quality: t.Boolean({
+        description: "Add roll quality under artifact substats.",
+        default: false,
+      }),
+      format: t.Enum(
+        {
+          jpeg: "jpeg",
+          webp: "webp",
+          png: "png",
+        },
+        {
+          default: "webp",
+        },
+      ),
+    },
+    { additionalProperties: true },
+  ),
+);
+
+async function profilePlayerInfo(
+  username: string,
+  avatar: {
+    avatar_id: string;
+    avatar_data: ApiResponse.AvatarInfo;
+  },
+): Promise<ResolvedPlayerInfo> {
+  const avatarInfo = await resolveAvatarInfo(avatar.avatar_data);
+  return {
+    nickname: username,
+    level: 0,
+    nameCardId: 210001,
+    finishAchievementNum: 0,
+    profilePicture: { id: Number(avatar.avatar_id) },
+    showAvatarInfoList: [
+      {
+        avatarId: avatarInfo.avatar.avatarId,
+        level: Number(avatarInfo.propMap?.[4001].val ?? 1),
+        costumeId: avatarInfo.costumeId,
+        energyType: {
+          None: 0,
+          Fire: 1,
+          Water: 2,
+          Grass: 3,
+          Electric: 4,
+          Ice: 5,
+          Wind: 7,
+          Rock: 8,
+        }[avatarInfo.avatar.element],
+        avatar: avatarInfo.avatar,
+      },
+    ],
+  } as unknown as ResolvedPlayerInfo;
+}
+
 queueMicrotask(() => {
  if (Date.now() - purging < 60000) return;
  purging = Date.now();
@@ -310,9 +396,17 @@ export function card(app: App) {
                  return typeof cached === "string" ? cached : cached.clone();
              }

-              const res = await CharacterPage({
-                data,
+              if (!data.avatarInfoList) return error(400, errorLoc.private);
+              const avatarInfo = resolveShowcaseChar(
                charId,
+                data.avatarInfoList,
+              );
+              if (!avatarInfo) return error(400, errorLoc.notInShowcase);
+
+              const res = await CharacterPage({
+                avatarInfo,
+                playerInfo: data.playerInfo,
+                uid: data.uid,
                avatarStore,
                weaponStore,
                relicStore,
@@ -342,10 +436,10 @@ export function card(app: App) {
                return error(429, errorLoc.ratelimit);
              else if (err instanceof InternalError)
                return status(502, errorLoc.internal);
+              else if (err instanceof ResponseNotOkError && err.status === 404)
+                return error(404, errorLoc.profileNotFound);
              else if (err instanceof PrivateShowcaseError)
                return error(400, errorLoc.private);
-              else if (err instanceof NotInShowcaseError)
-                return error(400, errorLoc.notInShowcase);
              else if (err instanceof UnsupportedCharacterError)
                return error(400, errorLoc.unsupported);
              log.error`${err}`;
@@ -370,55 +464,7 @@ export function card(app: App) {
                description: "Character ID",
              }),
            }),
-            query: t.Partial(
-              t.Object(
-                {
-                  error: t.Enum(
-                    { http: "http", card: "card" },
-                    {
-                      default: "http",
-                      description:
-                        "Type of error to return when card fails to render.",
-                    },
-                  ),
-                  lang: Locale,
-                  h: t.Number({
-                    default: 1024,
-                    description: "Height of card.",
-                  }),
-                  w: t.Number({
-                    description:
-                      "Target width of card, used to calculate height. Has higher priority than `h`.",
-                  }),
-                  debug: t.Enum(
-                    { none: "none", render: "render", dump: "dump" },
-                    {
-                      description: "Return debug information instead of card.",
-                      default: "none",
-                    },
-                  ),
-                  substat: t.Boolean({
-                    description: "Add substats breakdown bar under the card.",
-                    default: false,
-                  }),
-                  quality: t.Boolean({
-                    description: "Add roll quality under artifact substats.",
-                    default: false,
-                  }),
-                  format: t.Enum(
-                    {
-                      jpeg: "jpeg",
-                      webp: "webp",
-                      png: "png",
-                    },
-                    {
-                      default: "webp",
-                    },
-                  ),
-                },
-                { additionalProperties: true },
-              ),
-            ),
+            query: characterCardQuery,
            detail: {
              tags: ["Card"],
              description:
@@ -438,45 +484,45 @@ export function card(app: App) {
            afterResponse: ({ log }) => log`Rendering completed`,
          },
        )
-        .get("/enka/:username", async ({ params: { username } }) => {
-          const cacheKey = `enka-redir::${username}`;
-          if (feature("API")) {
-            const cached = cache.get<Response>(cacheKey);
-            if (cached) return cached.clone();
-          }
+        .get("/enka/:username", async ({ params: { username }, query: { lang } }) => {
+          const errorLoc = cardErrorLocs[lang === "th" ? "th" : "en"];
+          try {
+            const cacheKey = `enka-redir::${username}`;
+            if (feature("API")) {
+              const cached = cache.get<Response>(cacheKey);
+              if (cached) return cached.clone();
+            }

-          const [hoyo] = await fetch(
-            `https://enka.network/api/profile/${username}/hoyos/`,
-          )
-            .then(throwNotOk)
-            .then(
-              (r) =>
-                r.json() as Promise<
-                  Record<string, { hoyo_type: number; order: NumberLike }>
-                >,
+            const [hoyo] = await fetch(
+              `https://enka.network/api/profile/${username}/hoyos/`,
            )
-            .then((e) =>
-              Object.entries(e)
-                .map(([k, v]) => ({ hash: k, ...v }))
-                .sort((a, b) => Number(a.order) - Number(b.order))
-                .filter((e) => e.hoyo_type === 0),
-            );
-          if (!hoyo) return status(404, "this needs to be changed.");
-          const builds = await fetch(
-            `https://enka.network/api/profile/${username}/hoyos/${hoyo.hash}/builds/`,
-          )
-            .then(throwNotOk)
-            .then(
-              (r) =>
-                r.json() as Promise<
-                  Record<string, { id: number; order: NumberLike }[]>
-                >,
+              .then(throwNotOk)
+              .then(
+                (r) =>
+                  r.json() as Promise<
+                    Record<string, { hoyo_type: number; order: NumberLike }>
+                  >,
+              )
+              .then((e) =>
+                Object.entries(e)
+                  .map(([k, v]) => ({ hash: k, ...v }))
+                  .sort((a, b) => Number(a.order) - Number(b.order))
+                  .filter((e) => e.hoyo_type === 0),
+              );
+            if (!hoyo) return status(404, errorLoc.profileNotFound);
+            const buildsArr = fetch(
+              `https://enka.network/api/profile/${username}/hoyos/${hoyo.hash}/builds/`,
            )
-            .then((e) =>
+              .then(throwNotOk)
+              .then(
+                (r) =>
+                  r.json() as Promise<
+                    Record<string, { id: number; order: NumberLike }[]>
+                  >,
+              );
+            const builds = await buildsArr.then((e) =>
              ((
-                pair:
-                  | [string, { id: number; order: `${number}` }[]]
-                  | undefined,
+                pair: [string, { id: number; order: `${number}` }[]] | undefined,
              ) =>
                pair
                  ? {
@@ -487,24 +533,208 @@ export function card(app: App) {
                    }
                  : undefined)(Object.entries(e).shift()),
            );
-          if (!builds?.id) return status(404, "this needs to be changed.");
+            if (!builds?.id) return status(404, errorLoc.buildNotFound);

-          const res = redirect(
-            `/v1/card/enka/${username}/${hoyo.hash}/${builds.char}/${builds.id}`,
-          );
-          queueMicrotask(() => {
-            cache.set(
-              `enka-redir::${username}::${hoyo.hash}`,
-              builds,
-              1000 * 120,
+            const res = redirect(
+              `/v1/card/enka/${username}/${hoyo.hash}/${builds.char}/${builds.id}`,
            );
-            cache.set(cacheKey, res, 1000 * 60); // cache for 1 minute
-          });
+            queueMicrotask(async () => {
+              cache.set(cacheKey, res, 1000 * 60); // cache for 1 minute
+              cache.set(
+                `enka-redir::${username}::${hoyo.hash}`,
+                await buildsArr,
+                1000 * 120,
+              );
+            });

-          return res.clone();
+            return res.clone();
+          } catch (err) {
+            if (err instanceof ResponseNotOkError && err.status === 404)
+              return status(404, errorLoc.profileNotFound);
+            throw err;
+          }
+        }, {
+          query: t.Partial(
+            t.Object({
+              lang: Locale,
+            }),
+          ),
        })
-        .get("/enka/:username/:hash/:char/:build", () => {
-        }),
+        .get(
+          "/enka/:username/:hash/:char/:build",
+          async ({
+            params: { username, hash: buildHash, char, build },
+            query: {
+              debug,
+              h: heightRaw = 1024,
+              w,
+              error: errorType,
+              lang,
+              substat: enableSubstat,
+              quality: enableRollQuality,
+              format,
+            },
+            log,
+          }) => {
+            log`Rendering ${username}/${buildHash}/${char}/${build}`;
+            const error =
+              errorType === "card"
+                ? (_: number, message: string) => ErrorPage(message)
+                : status;
+            const errorLoc = cardErrorLocs[lang === "th" ? "th" : "en"];
+            try {
+              const [
+                [avatarStore, weaponStore, relicStore, locs, affixes],
+                builds,
+              ] = await Promise.all([
+                deduper.acquire("stores", () =>
+                  batchStore(
+                    "avatars",
+                    "weapons",
+                    "relics",
+                    "locs",
+                    "affixes",
+                  ).finally(() => log`Stores loaded`),
+                ),
+                cache.get(`enka-redir::${username}::${buildHash}`)
+                  ? Promise.resolve(
+                      cache.get(
+                        `enka-redir::${username}::${buildHash}`,
+                      ) as Record<
+                        string,
+                        {
+                          id: number;
+                          name: string;
+                          avatar_id: string;
+                          avatar_data: ApiResponse.AvatarInfo;
+                          live: boolean;
+                          public: boolean;
+                          image?: string;
+                          hoyo_type: number;
+                          hoyo: string;
+                          owner: string;
+                        }[]
+                      >,
+                    )
+                  : fetch(
+                      `https://enka.network/api/profile/${username}/hoyos/${buildHash}/builds/`,
+                    )
+                      .then(throwNotOk)
+                      .then((r) => r.json()),
+              ]);
+
+              if (!(char in builds)) return error(404, errorLoc.buildNotFound);
+              const { [char]: avatars } = builds;
+
+              const avatar = avatars.find(
+                (e: (typeof avatars)[number]) =>
+                  `${e.id}` === build && e.hoyo_type === 0,
+              );
+              if (!avatar) return error(404, errorLoc.buildNotFound);
+
+              const [avatarInfo, playerInfo] = await Promise.all([
+                resolveAvatarInfo(avatar.avatar_data),
+                profilePlayerInfo(username, avatar),
+              ]);
+
+              const height =
+                typeof w === "number" ? w / (1218 / 508) : heightRaw;
+
+              const cacheKey = hash(
+                JSON.stringify({
+                  username,
+                  hash: buildHash,
+                  char,
+                  build,
+                  lang,
+                  height,
+                  enableSubstat,
+                  enableRollQuality,
+                  debug,
+                  format,
+                }),
+              ).toString(36);
+              if (feature("API")) {
+                const cached = cache.get<ImageResponse | string>(cacheKey);
+                if (cached)
+                  return typeof cached === "string" ? cached : cached.clone();
+              }
+
+              const res = await CharacterPage({
+                avatarInfo,
+                playerInfo,
+                uid: username,
+                avatarStore,
+                weaponStore,
+                relicStore,
+                locs,
+                affixes,
+                lang,
+                height,
+                debug,
+                enableSubstat,
+                enableRollQuality,
+                format,
+                log,
+              });
+              queueMicrotask(() => {
+                cache.set(cacheKey, res, 1000 * 60 * 60 * 24);
+              });
+
+              return typeof res === "string" ? res : res.clone();
+            } catch (err) {
+              if (err instanceof InvalidFormatError)
+                return error(400, errorLoc.uidFormat);
+              else if (err instanceof NotFoundError)
+                return error(404, errorLoc.buildNotFound);
+              else if (err instanceof MaintenanceError)
+                return error(424, errorLoc.maintenance);
+              else if (err instanceof RatelimitError)
+                return error(429, errorLoc.ratelimit);
+              else if (err instanceof InternalError)
+                return status(502, errorLoc.internal);
+              else if (err instanceof PrivateShowcaseError)
+                return error(400, errorLoc.private);
+              else if (err instanceof UnsupportedCharacterError)
+                return error(400, errorLoc.unsupported);
+              log.error`${err}`;
+              try {
+                return error(
+                  500,
+                  `Internal Error:\n${(err as { message: string })?.message || inspect(err)}` as "",
+                );
+              } catch {
+                throw err;
+              }
+            }
+          },
+          {
+            params: t.Object({
+              username: t.String(),
+              hash: t.String(),
+              char: t.String(),
+              build: t.String(),
+            }),
+            query: characterCardQuery,
+            detail: {
+              tags: ["Card"],
+              description:
+                "Generate a Genshin Impact enka.network build card image from a profile build.",
+            },
+            error({ code, error, query: { error: errorType } }) {
+              if (code === "VALIDATION") {
+                const { summary } = JSON.parse(error.message);
+                try {
+                  if (errorType === "http") throw "";
+                  return ErrorPage(`Validation Error:\n${summary}`);
+                } catch {
+                  return status(500, summary);
+                }
+              }
+            },
+            afterResponse: ({ log }) => log`Rendering completed`,
+          },
+        ),
    )
    .get(
      "/health/enka",
@@ -1,6 +1,5 @@
 import { file } from "bun";
-
-import type { ResolvedRoot } from "enka.ts";
+import type { ResolvedAvatarInfo, ResolvedPlayerInfo } from "enka.ts";
 import { EquipType } from "enka.ts";
 import { ImageResponse } from "takumi-js/response";

@@ -15,7 +14,6 @@ import { star } from "@/games/genshin/assets/stars";
 import { TalentSvg } from "@/games/genshin/assets/talent";
 import { WeaponGlazeSvg } from "@/games/genshin/assets/weapon-glaze";
 import { assets, getAvatar } from "@/games/genshin/data/assets";
-import { resolveShowcaseChar } from "@/games/genshin/data/matcher";
 import { buildDisplayRows } from "@/games/genshin/data/rows";
 import type { RollSummary } from "@/games/genshin/data/substat";
 import { buildRollSummary } from "@/games/genshin/data/substat";
@@ -41,12 +39,6 @@ export class PrivateShowcaseError extends Error {
  }
 }

-export class NotInShowcaseError extends Error {
-  constructor() {
-    super("NOT_IN_SHOWCASE");
-  }
-}
-
 export class UnsupportedCharacterError extends Error {
  constructor() {
    super("UNSUPPORTED_CHARACTER");
@@ -54,8 +46,9 @@ export class UnsupportedCharacterError extends Error {
 }

 type CharacterPageOptions = {
-  data: ResolvedRoot;
-  charId: string;
+  avatarInfo: ResolvedAvatarInfo;
+  playerInfo: ResolvedPlayerInfo;
+  uid: string;
  avatarStore: AvatarStore;
  weaponStore: WeaponStore;
  relicStore: RelicStore;
@@ -71,8 +64,9 @@ type CharacterPageOptions = {
 };

 export async function CharacterPage({
-  data,
-  charId,
+  avatarInfo: char,
+  playerInfo,
+  uid,
  avatarStore,
  weaponStore,
  relicStore,
@@ -88,13 +82,10 @@ export async function CharacterPage({
 }: CharacterPageOptions) {
  const enkaLoc = locs[lang ?? "en"];

-  if (typeof data.avatarInfoList === "undefined")
+  if (typeof playerInfo.showAvatarInfoList === "undefined")
    throw new PrivateShowcaseError();

-  const char = resolveShowcaseChar(charId, data.avatarInfoList);
-  if (!char) throw new NotInShowcaseError();
-
-  const avatar = getAvatar(avatarStore, data.playerInfo, char.avatar.avatarId);
+  const avatar = getAvatar(avatarStore, playerInfo, char.avatar.avatarId);
  if (!avatar) throw new UnsupportedCharacterError();

  if (!char.equipList) throw new Error("INTERNAL: No equipList provided");
@@ -109,43 +100,40 @@ export async function CharacterPage({
  const ascension = char.propMap?.[1002].val ?? 1;
  const promoteMaxLevelMap = [20, 40, 50, 60, 70, 80, 90, 100];
  const charLvlMax =
-    ascension * 10 +
-    (ascension > 0 ? 10 : 0) +
-    20 +
-    (charLvl > 90 ? 10 : 0);
+    ascension * 10 + (ascension > 0 ? 10 : 0) + 20 + (charLvl > 90 ? 10 : 0);

  const statRows = buildDisplayRows(char, enkaLoc);

  const artifactSlots = Object.keys(EquipType) as (keyof typeof EquipType)[];
  const artifacts = artifactSlots.map((t) => {
-      const a = char.equipList!.find((e) => e.flat.equipType === t);
-      if (!a) return null;
-      const appendPropIdList = a.reliquary?.appendPropIdList ?? [];
-      const props = enableRollQuality
-        ? appendPropIdList.map((id) => ({
-            id: FightPropMapEnum[affixes[`${id}`].PropType],
-            ...affixes[`${id}`],
-          }))
-        : [];
-      return {
-        set: a.flat.setId!,
-        stars: a.flat.rankLevel,
-        level: a.reliquary!.level - 1,
-        appendPropIdList,
-        icon: `/ui/${a.flat.icon}.png`,
-        main: a.flat.reliquaryMainstat!,
-        sub: (a.flat.reliquarySubstats ?? [])
-          .map((s) => ({
-            ...s,
-            props: props.filter((p) => p.id === s.appendPropId),
-          }))
-          .sort(
-            (a, b) =>
-              (SubstatOrder[a.appendPropId] ?? 999) -
-              (SubstatOrder[b.appendPropId] ?? 999),
-          ),
-      };
-    });
+    const a = char.equipList!.find((e) => e.flat.equipType === t);
+    if (!a) return null;
+    const appendPropIdList = a.reliquary?.appendPropIdList ?? [];
+    const props = enableRollQuality
+      ? appendPropIdList.map((id) => ({
+          id: FightPropMapEnum[affixes[`${id}`].PropType],
+          ...affixes[`${id}`],
+        }))
+      : [];
+    return {
+      set: a.flat.setId! ?? a.flat.setNameTextMapHash,
+      stars: a.flat.rankLevel,
+      level: a.reliquary!.level - 1,
+      appendPropIdList,
+      icon: `/ui/${a.flat.icon}.png`,
+      main: a.flat.reliquaryMainstat!,
+      sub: (a.flat.reliquarySubstats ?? [])
+        .map((s) => ({
+          ...s,
+          props: props.filter((p) => p.id === s.appendPropId),
+        }))
+        .sort(
+          (a, b) =>
+            (SubstatOrder[a.appendPropId] ?? 999) -
+            (SubstatOrder[b.appendPropId] ?? 999),
+        ),
+    };
+  });

  const setCounts = artifacts.reduce<Record<number, number>>((acc, a) => {
    if (!a) return acc;
@@ -156,7 +144,7 @@ export async function CharacterPage({
  const artifactSets = Object.entries(setCounts)
    .filter(([, count]) => count >= 2)
    .map(([set, count]) => ({
-      set: enkaLoc[relicStore.Sets[set].Name],
+      set: enkaLoc[relicStore.Sets[set]?.Name] ?? enkaLoc[set] ?? set,
      count,
    }));

@@ -172,13 +160,17 @@ export async function CharacterPage({
  const resources = await Promise.all([
    assets
      .load(
-        weapon.data.promoteLevel >= 2 ? weapon.store.AwakenIcon : weapon.store.Icon,
+        weapon.data.promoteLevel >= 2
+          ? weapon.store.AwakenIcon
+          : weapon.store.Icon,
      )
      .then((data) => ({ src: "/weapon", data })),
-    ...[...avatar.Consts, ...Object.values(avatar.Skills)].map(async (path) => ({
-      src: path,
-      data: await assets.load(path),
-    })),
+    ...[...avatar.Consts, ...Object.values(avatar.Skills)].map(
+      async (path) => ({
+        src: path,
+        data: await assets.load(path),
+      }),
+    ),
    ...artifacts
      .filter((x): x is NonNullable<(typeof artifacts)[number]> => !!x)
      .map(async (art) => ({
@@ -212,7 +204,7 @@ export async function CharacterPage({
        }).then((r) => r.canvas.toBuffer("image/webp")),
      )
      .then((data) => ({ src: `/bg-${avatar.Element}`, data })),
-  ] satisfies Promise<{ src: string; data: ArrayBuffer | Buffer; }>[]);
+  ] satisfies Promise<{ src: string; data: ArrayBuffer | Buffer }>[]);

  log`Image resources loaded\n${resources.map((r) => `- ${r.src} ${(r.data.byteLength / 1000).toFixed(2)}Kb`).join("\n")}`;

@@ -224,7 +216,10 @@ export async function CharacterPage({
        charLvlMax,
        cache: assets.health,
        assets: Object.fromEntries(
-          resources.map((e) => [e.src, `${(e.data.byteLength / 1000).toFixed(2)}Kb`]),
+          resources.map((e) => [
+            e.src,
+            `${(e.data.byteLength / 1000).toFixed(2)}Kb`,
+          ]),
        ),
        char,
        weapon,
@@ -245,11 +240,17 @@ export async function CharacterPage({
          tw={`flex relative text-white rounded-[.5em] overflow-hidden aspect-[1218/508] h-[${height}px]`}
        >
          <div tw="flex aspect-[1218/508] h-full">
-            <img src={`/bg-${avatar.Element}`} alt="background" tw="w-full h-full object-cover" />
+            <img
+              src={`/bg-${avatar.Element}`}
+              alt="background"
+              tw="w-full h-full object-cover"
+            />
          </div>
          <div
            tw="absolute top-0 bottom-0 left-0 w-[30.4em] p-[1.6em] flex flex-col"
-            style={{ textShadow: "0 .08em .1em black,0 .1em .3em rgba(0,0,0,.4)" }}
+            style={{
+              textShadow: "0 .08em .1em black,0 .1em .3em rgba(0,0,0,.4)",
+            }}
          >
            <img
              src="/avatar"
@@ -266,11 +267,16 @@ export async function CharacterPage({
            <div tw="text-[120%] pb-[.5%] flex items-center gap-[.5em]">
              {char.avatar.name}
              <div tw="text-[0.77em] opacity-80 flex items-center gap-[.7em] pl-[.28em] pt-[.5em]">
-                <svg width="16" height="16" viewBox="0 0 100 100" tw="mt-[.2em] h-[.7em] w-[.7em]">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 100 100"
+                  tw="mt-[.2em] h-[.7em] w-[.7em]"
+                >
                  <title>doritos</title>
                  <polygon points="50,10 90,90 10,90" fill="currentColor" />
                </svg>
-                {data.playerInfo.nickname}
+                {playerInfo.nickname}
              </div>
            </div>
            <div tw="flex text-[102%] pt-[.3em]">
@@ -278,7 +284,11 @@ export async function CharacterPage({
              <span tw="opacity-60 pl-[.3em]">{charLvlMax}</span>
            </div>
            <div tw="text-[110%] flex gap-[.3em] items-end pt-[.35em]">
-              <svg xmlns="http://www.w3.org/2000/svg" tw="h-[1.2em] mb-[.2em]" viewBox="0 0 14 14">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                tw="h-[1.2em] mb-[.2em]"
+                viewBox="0 0 14 14"
+              >
                <title>fren</title>
                <path
                  fill="white"
@@ -288,11 +298,18 @@ export async function CharacterPage({
              {char.fetterInfo?.expLevel ?? 0}
            </div>
            <div tw="flex grow" />
-            <div tw="flex align-start flex-col text-[1.12em]" className={`${avatar.Element} locked`}>
+            <div
+              tw="flex align-start flex-col text-[1.12em]"
+              className={`${avatar.Element} locked`}
+            >
              {avatar.Consts.filter((c) => c !== "None").map((c, i) => (
                <div
                  key={c}
-                  style={{ position: "relative", display: "flex", margin: "-.55em 0 0em -.6em" }}
+                  style={{
+                    position: "relative",
+                    display: "flex",
+                    margin: "-.55em 0 0em -.6em",
+                  }}
                >
                  <ConstsSvg locked={i >= (char.talentIdList?.length || 0)} />
                  <img
@@ -315,26 +332,39 @@ export async function CharacterPage({
                fontSize: "1.05em",
              }}
            >
-              {avatar.SkillOrder.map((s) => Object.entries(avatar.Skills).find((k) => k[0] === `${s}`)!).map(
-                ([key, src]) => {
-                  if (src === "None") return null;
-                  const extra = char.proudSkillExtraLevelMap?.[`${avatar.ProudMap[key]}`] ?? 0;
-                  const talentLevel = (char.skillLevelMap?.[key] ?? 0) + extra;
-                  return (
-                    <div key={key} tw="mt-[.6em] relative flex">
-                      <TalentSvg tw={`Talents ${avatar.Element} w-[3.6em] opacity-60 text-black mb-[.5em] -mt-[.25em]`} />
-                      <img src={src} alt={`Talent ${key}`} tw="w-[2.5em] absolute left-[.15em] top-[.05em] m-[.4em_0_0_.4em]" />
-                      <div tw="absolute -bottom-[.1em] w-full flex justify-center">
-                        <div tw={`flex ${extra ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.85em] rounded-[1.4em]`}>
-                          <span tw="px-[.6em]">{talentLevel}</span>
-                        </div>
+              {avatar.SkillOrder.map(
+                (s) =>
+                  Object.entries(avatar.Skills).find((k) => k[0] === `${s}`)!,
+              ).map(([key, src]) => {
+                if (src === "None") return null;
+                const extra =
+                  char.proudSkillExtraLevelMap?.[`${avatar.ProudMap[key]}`] ??
+                  0;
+                const talentLevel = (char.skillLevelMap?.[key] ?? 0) + extra;
+                return (
+                  <div key={key} tw="mt-[.6em] relative flex">
+                    <TalentSvg
+                      tw={`Talents ${avatar.Element} w-[3.6em] opacity-60 text-black mb-[.5em] -mt-[.25em]`}
+                    />
+                    <img
+                      src={src}
+                      alt={`Talent ${key}`}
+                      tw="w-[2.5em] absolute left-[.15em] top-[.05em] m-[.4em_0_0_.4em]"
+                    />
+                    <div tw="absolute -bottom-[.1em] w-full flex justify-center">
+                      <div
+                        tw={`flex ${extra ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.85em] rounded-[1.4em]`}
+                      >
+                        <span tw="px-[.6em]">{talentLevel}</span>
                      </div>
                    </div>
-                  );
-                },
-              )}
+                  </div>
+                );
+              })}
+            </div>
+            <div tw="flex mb-[-1em] ml-[-.3em] mt-[.3em] text-[.96em] opacity-80">
+              {uid}
            </div>
-            <div tw="flex mb-[-1em] ml-[-.3em] mt-[.3em] text-[.96em] opacity-80">{data.uid}</div>
          </div>
          <div tw="absolute top-0 bottom-0 right-[24.2em] w-[25.5em] p-[1.5em_.7em_.7em] flex flex-col text-[1.01em]">
            <div tw="flex flex-start" className="Weapon">
@@ -353,32 +383,54 @@ export async function CharacterPage({
                  }}
                />
                <div tw="absolute w-full top-[91%] flex justify-center">
-                  {Array.from({ length: weapon.store.Rarity }, () => star(".8em"))}
+                  {Array.from({ length: weapon.store.Rarity }, () =>
+                    star(".8em"),
+                  )}
                </div>
              </div>
              <div tw="px-[5%] grow text-white self-center flex flex-col">
-                <div tw="flex text-[108%] leading-[1.3]" style={{ textShadow: "0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)" }}>
+                <div
+                  tw="flex text-[108%] leading-[1.3]"
+                  style={{
+                    textShadow:
+                      "0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)",
+                  }}
+                >
                  <span>{enkaLoc[weapon.store.NameTextMapHash]}</span>
                </div>
                <div tw="pt-[3%] pb-[2%] flex gap-[.7em]">
                  {weapon.flat.weaponStats?.map((s) => (
-                    <div key={s.appendPropId} tw="rounded-[.2em] leading-none bg-white/15 px-[.34em] py-[0.25em] flex items-center gap-[.7em] text-[1.03em]">
-                      <EnkaIcon icon={s.appendPropId as keyof typeof library} tw="h-[1.1em]" />
+                    <div
+                      key={s.appendPropId}
+                      tw="rounded-[.2em] leading-none bg-white/15 px-[.34em] py-[0.25em] flex items-center gap-[.7em] text-[1.03em]"
+                    >
+                      <EnkaIcon
+                        icon={s.appendPropId as keyof typeof library}
+                        tw="h-[1.1em]"
+                      />
                      <div tw="pt-[.1em]">
                        {s.statValue}
-                        {(PercentageFightProp as string[]).includes(s.appendPropId) ? "%" : ""}
+                        {(PercentageFightProp as string[]).includes(
+                          s.appendPropId,
+                        )
+                          ? "%"
+                          : ""}
                      </div>
                    </div>
                  ))}
                </div>
                <div tw="flex gap-[.85em]">
                  <div tw="rounded-[.2em] leading-none bg-black/50 px-[.34em] py-[0.175em] flex items-center gap-[.7em] text-[1.03em] text-[wheat]">
-                    <div tw="pt-[.1em]">R{Object.values(weapon.data.affixMap || { _: 0 })[0] + 1}</div>
+                    <div tw="pt-[.1em]">
+                      R{Object.values(weapon.data.affixMap || { _: 0 })[0] + 1}
+                    </div>
                  </div>
                  <div tw="rounded-[.2em] leading-none bg-black/50 px-[.34em] py-[0.175em] flex items-center gap-[.7em] text-[1.03em]">
                    <div tw="pt-[.1em] flex items-center">
                      <span tw="pr-[.1em]">Lv.</span> {weapon.data.level}/
-                      <div tw="opacity-60 pl-[.25em]">{promoteMaxLevelMap[weapon.data.promoteLevel ?? 0]}</div>
+                      <div tw="opacity-60 pl-[.25em]">
+                        {promoteMaxLevelMap[weapon.data.promoteLevel ?? 0]}
+                      </div>
                    </div>
                  </div>
                </div>
@@ -408,7 +460,9 @@ export async function CharacterPage({
                      <div tw="flex grow justify-end">
                        <div tw="flex">
                          {Math.round(r.base).toLocaleString()}
-                          <div tw="flex text-[#82ff9a] pl-1">+{Math.round(r.delta).toLocaleString()}</div>
+                          <div tw="flex text-[#82ff9a] pl-1">
+                            +{Math.round(r.delta).toLocaleString()}
+                          </div>
                        </div>
                      </div>
                    </div>
@@ -416,7 +470,13 @@ export async function CharacterPage({
                </div>
              ))}
              {artifactSets.length && (
-                <div tw="flex w-full gap-[.5em]" style={{ textShadow: "0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)" }}>
+                <div
+                  tw="flex w-full gap-[.5em]"
+                  style={{
+                    textShadow:
+                      "0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)",
+                  }}
+                >
                  <div tw="w-[2em] h-[2em] shrink-0 text-[1.15em] bg-[#00000030] flex justify-center items-center font-[shicon] leading-[2.3em] rounded-[.2em]">
                    
                  </div>
@@ -439,26 +499,51 @@ export async function CharacterPage({
          <div tw="absolute top-0 bottom-0 right-0 w-[25.7em] p-[.7em] flex flex-col justify-between">
            {artifacts.map((a, index) =>
              a ? (
-                <div key={artifactSlots[index]} tw="h-[18%] bg-[#0000004f] rounded-[.3em] relative text-white overflow-hidden flex justify-between gap-[.5em]">
-                  <img src={a.icon} alt="artifact" tw="absolute top-[48%] -left-[8%] w-[45%] -translate-y-1/2 -translate-x-[10%] object-contain aspect-square scale-90" />
+                <div
+                  key={artifactSlots[index]}
+                  tw="h-[18%] bg-[#0000004f] rounded-[.3em] relative text-white overflow-hidden flex justify-between gap-[.5em]"
+                >
+                  <img
+                    src={a.icon}
+                    alt="artifact"
+                    tw="absolute top-[48%] -left-[8%] w-[45%] -translate-y-1/2 -translate-x-[10%] object-contain aspect-square scale-90"
+                  />
                  <div tw="h-full w-[30%] text-[105%] text-right shrink-0 flex flex-col justify-center mr-[.25em]">
-                    <EnkaIcon icon={a.main.mainPropId} tw="h-[1em] w-[1em] ml-auto max-h-[22%] mt-[.5em]" />
-                    <div tw="text-[1.1em] pt-[2%] ml-auto" style={{ textShadow: "0 .07em .1em black" }}>
-                      {PercentageFightProp.includes(a.main.mainPropId as (typeof PercentageFightProp)[number])
+                    <EnkaIcon
+                      icon={a.main.mainPropId}
+                      tw="h-[1em] w-[1em] ml-auto max-h-[22%] mt-[.5em]"
+                    />
+                    <div
+                      tw="text-[1.1em] pt-[2%] ml-auto"
+                      style={{ textShadow: "0 .07em .1em black" }}
+                    >
+                      {PercentageFightProp.includes(
+                        a.main
+                          .mainPropId as (typeof PercentageFightProp)[number],
+                      )
                        ? `${a.main.statValue.toFixed(1)}%`
                        : a.main.statValue.toLocaleString()}
                    </div>
                    <div tw="flex grow max-h-[20%] items-center justify-end">
-                      <div>{Array.from({ length: a.stars ?? 0 }, () => star(".6em"))}</div>
+                      <div>
+                        {Array.from({ length: a.stars ?? 0 }, () =>
+                          star(".6em"),
+                        )}
+                      </div>
                      <div tw="w-[2em] flex justify-end">
-                        <div tw="text-[75%] leading-none bg-black/50 px-[.25em] py-[.2em] rounded-[.2em] -mb-[.2em]">+{a.level}</div>
+                        <div tw="text-[75%] leading-none bg-black/50 px-[.25em] py-[.2em] rounded-[.2em] -mb-[.2em]">
+                          +{a.level}
+                        </div>
                      </div>
                    </div>
                  </div>
                  <hr tw="border-none h-[84%] w-[2px] mt-[2%] bg-white/60" />
                  <div tw="flex flex-col flex-wrap mt-[.35em] mb-[.35em] mr-[.35em] w-full">
                    {a.sub.map((s, i) => (
-                      <div key={`${s.appendPropId}-${s.statValue}`} tw={`flex items-center pl-[.7em] relative gap-[.5em] w-1/2 h-1/2 ${i === 3 ? "opacity-80" : ""} ${i > 1 ? "pl-[.3em]" : ""}`}>
+                      <div
+                        key={`${s.appendPropId}-${s.statValue}`}
+                        tw={`flex items-center pl-[.7em] relative gap-[.5em] w-1/2 h-1/2 ${i === 3 ? "opacity-80" : ""} ${i > 1 ? "pl-[.3em]" : ""}`}
+                      >
                        {enableRollQuality && (
                          <div tw="absolute top-0 m-[.1em] left-[-.25em] bottom-0 right-[.25em] bg-gradient-to-t from-transparent to-black/25 rounded-[.2em] flex gap-0.5">
                            {s.props.map((p) => (
@@ -472,15 +557,22 @@ export async function CharacterPage({
                                  maxWidth: `${(p.Efficiency / s.props.length) * 100}%`,
                                }}
                              >
-                                {Array(p.Position).fill(<div tw="flex bg-[#fff8] w-1 h-1 mr-[3px] mb-[3px] rounded-full" />)}
+                                {Array(p.Position).fill(
+                                  <div tw="flex bg-[#fff8] w-1 h-1 mr-[3px] mb-[3px] rounded-full" />,
+                                )}
                              </div>
                            ))}
                          </div>
                        )}
-                        <EnkaIcon icon={s.appendPropId} tw="h-[1.1em] w-[1.1em]" />
+                        <EnkaIcon
+                          icon={s.appendPropId}
+                          tw="h-[1.1em] w-[1.1em]"
+                        />
                        <div tw="flex text-[1.05em]">
                          +
-                          {PercentageFightProp.includes(s.appendPropId as (typeof PercentageFightProp)[number])
+                          {PercentageFightProp.includes(
+                            s.appendPropId as (typeof PercentageFightProp)[number],
+                          )
                            ? `${s.statValue.toFixed(1)}%`
                            : s.statValue.toLocaleString()}
                        </div>
@@ -489,7 +581,10 @@ export async function CharacterPage({
                  </div>
                </div>
              ) : (
-                <div key={artifactSlots[index]} tw="flex h-[18%] bg-[#0000004f] rounded-[.3em] opacity-20" />
+                <div
+                  key={artifactSlots[index]}
+                  tw="flex h-[18%] bg-[#0000004f] rounded-[.3em] opacity-20"
+                />
              ),
            )}
          </div>
@@ -547,7 +642,10 @@ function SubstatDisplay({
      >
        <div tw="text-white w-full flex items-center flex-wrap justify-end bg-black/25">
          {substat.map((s) => (
-            <div key={s.id} tw="mr-[1.2em] flex gap-[.2em] items-center whitespace-nowrap">
+            <div
+              key={s.id}
+              tw="mr-[1.2em] flex gap-[.2em] items-center whitespace-nowrap"
+            >
              <div tw="ml-[.2em] mb-[.1em] text-[.75em] flex flex-col items-center font-[Open_Sans]">
                {s.efficiency}
                <div tw="flex w-full h-[1px] bg-white"></div>