feat : buzz feedback

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

@@ -1,11 +1,11 @@
 /* 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";
+import { isCustomTravelerKey } from "@/lib/catalog/travelers";
+import { getCachedPublicTeamExport } from "@/lib/cache/public";
 import { imageContentDisposition } from "@/lib/guides/export-image";
-import { getPublicTeamExport } from "@/lib/guides/queries";
 
 const anuphanFonts = Promise.all(
   [
@@ -45,20 +45,12 @@ 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">,
 ) {
   const { teamId } = await context.params;
-  const team = await getPublicTeamExport(teamId);
+  const team = await getCachedPublicTeamExport(teamId);
   if (!team) return new Response("Team not found", { status: 404 });
 
   const total = team.members.reduce(
@@ -67,9 +59,8 @@ export async function GET(
   );
   const seconds = Number(team.rotationSeconds);
   const dps = seconds > 0 ? total / seconds : 0;
-  const [fonts, watermark, memberAssets] = await Promise.all([
+  const [fonts, memberAssets] = await Promise.all([
     anuphanFonts,
-    localPngDataUrl("Watermark.png", null),
     Promise.all(
     team.members.map(async (member) => {
       const [character, weapon, artifact] = await Promise.all([
@@ -98,7 +89,6 @@ export async function GET(
         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 }}>
@@ -121,10 +111,10 @@ export async function GET(
                   alt=""
                   width={78}
                   height={78}
-                  style={{ borderRadius: 16, border: "2px solid #78cbc4", objectFit: "cover" }}
+                  style={{ borderRadius: 16, border: "2px solid #78cbc4", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), objectFit: "cover" }}
                 />
               ) : (
-                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #78cbc4", color: "#82d6ce", fontSize: 30 }}>
+                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #78cbc4", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#82d6ce", fontSize: 30 }}>
                   {member.character.name.slice(0, 1)}
                 </div>
               )}
@@ -132,7 +122,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, left: 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: "transparent", color: "#000000", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
                       R{member.refinement}
                     </div>
                   </div>
@@ -170,15 +160,15 @@ export async function GET(
         })}
       </div>
 
-      <div style={{ display: "flex", flex: 1 }} />
+      <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, padding: "16px 0", textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
+        <div style={{ display: "flex", color: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Team Rotation</div>
+        <div style={{ display: "flex" }}>{team.combo}</div>
+      </div>
       <div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #28555a", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
         <span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
         <span style={{ color: "#688c90" }}>|</span>
         <span>DPR: {amount(total)}</span>
       </div>
-      <div style={{ display: "flex", justifyContent: "center", marginTop: 14, textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
-        {team.combo}
-      </div>
       <div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#5c9995", fontSize: 14 }}>
         By YT เกนชินไม่ใช่เกมมือถือ
       </div>