feat: shorten character ID

src/v1/card.tsx

@@ -1,7 +1,7 @@
 import { feature } from "bun:bundle";
 import { ImageResponse } from "@takumi-rs/image-response";
 import { file, hash, inspect } from "bun";
-import { NotFoundError, redirect, status, t } from "elysia";
+import { NotFoundError, status, t } from "elysia";
 import {
   EquipType,
   fetchEnka,
@@ -238,7 +238,10 @@ export function card(app: App) {
               if (typeof data.avatarInfoList === "undefined")
                 return error(400, errorLoc.private);
               const char = data.avatarInfoList.find(
-                (c) => c.avatar.avatarId === Number(charId),
+                (c) =>
+                  c.avatar.avatarId === Number(charId) ||
+                  `${c.avatar.avatarId}`.match(/^10*(\d+)/)?.[1] ===
+                    `${charId}`,
               );
               if (!char) return error(400, errorLoc.notInShowcase);
 
@@ -262,7 +265,12 @@ export function card(app: App) {
                 typeof w === "number" ? w / (1218 / 508) : heightRaw;
 
               const cacheKey = hash(
-                JSON.stringify({ data, charId, lang, height }),
+                JSON.stringify({
+                  data,
+                  charId: char.avatar.avatarId,
+                  lang,
+                  height,
+                }),
               ).toString(36);
               if (feature("API")) {
                 if (!debug) {

src/v1/list.tsx

@@ -142,14 +142,17 @@ export async function ListPage(
                   </div>
                 </div>
               </div>
-              <div tw="absolute bottom-[.2em] right-[.2em] leading-none p-[.2em] rounded-md bg-black/50">
-                {uid
-                  .slice(-7)
-                  .split("")
-                  .map((c, i) => (
-                    <div style={{ opacity: i / 5 }}>{c}</div>
-                  ))}
-                /{a.avatar.avatarId}
+              <div tw="absolute bottom-0 right-0 leading-none p-[.2em] pb-[.3em] pr-[.45em] rounded-tl-md bg-black/50">
+                <div tw="opacity-0 whitespace-pre">00000000/00 </div>
+                <div tw="absolute">
+                  {uid
+                    .slice(-7)
+                    .split("")
+                    .map((c, i) => (
+                      <div style={{ opacity: i / 5 }}>{c}</div>
+                    ))}
+                  /{`${a.avatar.avatarId}`.match(/^10*(\d+)/)?.[1]}
+                </div>
               </div>
             </div>
           ))}