style: a lot of tweaks

src/games/genshin/assets/background.tsx

@@ -205,10 +205,10 @@ export async function generateBackground({
 
   ctx.drawImage(
     texture,
+    (texture.width - canvas.width) / 2,
     0,
-    0,
-    texture.width,
-    texture.height,
+    canvas.width,
+    canvas.height,
     0,
     0,
     canvas.width,

src/games/genshin/index.ts

@@ -618,6 +618,8 @@ export function card(app: App) {
                       public: boolean;
                       settings?: {
                         caption?: string;
+                        artSource?: string;
+                        adaptiveColor?: boolean;
                       };
                       image?: string;
                       hoyo_type: number;
@@ -673,7 +675,10 @@ export function card(app: App) {
                 avatarStore,
                 weaponStore,
                 relicStore,
-                caption: avatar.settings?.caption,
+                // caption: avatar.settings?.caption,
+                // artSource: avatar.settings?.artSource,
+                // adaptiveColor: avatar.settings?.adaptiveColor,
+                ...avatar.settings,
                 locs,
                 affixes,
                 customImage: avatar.image,

src/games/genshin/render/character.tsx

@@ -55,7 +55,9 @@ type CharacterPageOptions = {
   locs: EnkaLocs;
   affixes: EnkaAffixes;
   customImage?: string;
+  artSource?: string;
   caption?: string;
+  adaptiveColor?: boolean;
   lang?: keyof EnkaLocs;
   height: number;
   debug?: "none" | "render" | "dump";
@@ -78,6 +80,8 @@ export async function CharacterPage({
   height,
   caption,
   customImage,
+  adaptiveColor,
+  artSource,
   debug = "none",
   enableSubstat = false,
   enableRollQuality = false,
@@ -180,24 +184,21 @@ export async function CharacterPage({
     : assets.fnCache(`${avatarArtPath}-avatar`, async () =>
         featherAvatar(await artBytesRes),
       );
-  const backgroundRes = customImage
+  const backgroundRes = adaptiveColor
     ? artBytesRes.then((artSource) =>
         generateBackground({
           artSource,
           element: avatar.Element,
           width: 1218,
           height: 508,
-        }).then((r) => r.canvas.toBuffer("image/webp")),
+        }),
       )
-    : assets.fnCache(
-        `bg-${avatar.Element}-${avatarArtPath}-1218x508`,
-        async () =>
-          generateBackground({
-            artSource: await artBytesRes,
-            element: avatar.Element,
-            width: 1218,
-            height: 508,
-          }).then((r) => r.canvas.toBuffer("image/webp")),
+    : assets.fnCache(`bg-${avatar.Element}`, async () =>
+        generateBackground({
+          element: avatar.Element,
+          width: 1218,
+          height: 508,
+        }).then((r) => r.canvas.toBuffer("image/webp")),
       );
 
   const resources = await Promise.all([
@@ -228,7 +229,15 @@ export async function CharacterPage({
         ),
       })),
     avatarRes.then((data) => ({ src: "/avatar", data })),
-    backgroundRes.then((data) => ({ src: `/bg-${avatar.Element}`, data })),
+    backgroundRes.then((data) => ({
+      src: `/bg-${avatar.Element}`,
+      data:
+        data instanceof Buffer || data instanceof ArrayBuffer
+          ? data
+          : (
+              data as Awaited<ReturnType<typeof generateBackground>>
+            ).canvas.toBuffer("image/webp"),
+    })),
   ] 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")}`;
@@ -260,7 +269,11 @@ export async function CharacterPage({
 
   return new ImageResponse(
     <div tw={`flex text-[${30.466 * (height / 1024)}px] font-[ShinShin]`}>
-      <SubstatDisplay substat={rollSummary} element={avatar.Element}>
+      <SubstatDisplay
+        substat={rollSummary}
+        element={avatar.Element}
+        accent={((await backgroundRes) as { accent: string }).accent}
+      >
         <div
           tw={`flex relative text-white rounded-[.5em] overflow-hidden aspect-[1218/508] h-[${height}px]`}
         >
@@ -386,11 +399,15 @@ export async function CharacterPage({
                   </div>
                 );
               })}
+              <div tw="text-[0.9em] -mb-[1.3em] mt-[1.3em] right-[.8em] opacity-70">
+                {" "}
+                {artSource}
+              </div>
             </div>
             {/* caption */}
             {caption && (
-              <div tw="absolute bottom-[6%] left-[7%] right-[9.5%] z-10 flex justify-center">
-                <div tw="max-w-lg text-[0.95em] text-center bg-black/40 p-[0.5em_0.7em] border-[0.4em]">
+              <div tw="absolute bottom-[10%] left-[7%] right-[9.5%] z-10 flex justify-center">
+                <div tw="max-w-[19.5em] text-[0.95em] text-center bg-black/40 p-[0.5em_0.7em] border-[0.4em] leading-[1.55] rounded-[.5em]">
                   {caption}
                 </div>
               </div>
@@ -660,11 +677,13 @@ export async function CharacterPage({
 function SubstatDisplay({
   substat,
   element,
+  accent,
   children,
 }: {
   substat: RollSummary[] | undefined;
   element: string;
   children?: React.ReactNode;
+  accent?: string;
 }) {
   if (!substat) return children;
 
@@ -673,6 +692,7 @@ function SubstatDisplay({
       <div
         tw="flex h-[2.3em] bg-current relative -top-[.5em] pt-[.5em] -mb-[.5em] rounded-b-[.5em]"
         className={`Talents ${element}`}
+        style={{ background: accent }}
       >
         <div tw="text-white w-full flex items-center flex-wrap justify-end bg-black/25">
           {substat.map((s) => (