feat : buzz feedback

app/api/teams/[teamId]/image/route.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "next/og";
+import { join } from "node:path";
 import sharp from "sharp";
 
 import { rarityGradient } from "@/lib/catalog/rarity";
@@ -44,6 +45,14 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
+async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
+  const image = sharp(join(process.cwd(), "public", "icon", fileName));
+  const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
+    .png()
+    .toBuffer();
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+
 export async function GET(
   _request: Request,
   context: RouteContext<"/api/teams/[teamId]/image">,
@@ -58,8 +67,10 @@ export async function GET(
   );
   const seconds = Number(team.rotationSeconds);
   const dps = seconds > 0 ? total / seconds : 0;
-  const fonts = await anuphanFonts;
-  const memberAssets = await Promise.all(
+  const [fonts, watermark, memberAssets] = await Promise.all([
+    anuphanFonts,
+    localPngDataUrl("Watermark.png", null),
+    Promise.all(
     team.members.map(async (member) => {
       const [character, weapon, artifact] = await Promise.all([
         pngDataUrl(member.character.imageUrl),
@@ -68,7 +79,8 @@ export async function GET(
       ]);
       return { character, weapon, artifact };
     }),
-  );
+    ),
+  ]);
 
   return new ImageResponse(
     <div
@@ -83,8 +95,11 @@ export async function GET(
         border: "2px solid #3aaaa2",
         padding: "34px 36px",
         fontFamily: "Anuphan",
+        position: "relative",
       }}
     >
+      <img src={watermark} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
+      <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column" }}>
       <div style={{ display: "flex", flexDirection: "column", textAlign: "center" }}>
         <div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
           {team.guideName}
@@ -117,7 +132,7 @@ export async function GET(
                 {member.weapon && memberAssets[index].weapon ? (
                   <div style={{ position: "relative", display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.weapon.rarity) }}>
                     <img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
-                    <div style={{ position: "absolute", top: 2, right: 2, display: "flex", borderRadius: 4, background: "#f4fbfa", color: "#06171b", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
+                    <div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "#f4fbfa", color: "#06171b", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
                       R{member.refinement}
                     </div>
                   </div>
@@ -167,6 +182,7 @@ export async function GET(
       <div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#5c9995", fontSize: 14 }}>
         By YT เกนชินไม่ใช่เกมมือถือ
       </div>
+      </div>
     </div>,
     {
       width: 550,