feat : buzz feedback

2026-08-30 23:48:03 +07:00
parent b92348f589
commit fd841057c1
32 changed files with 3932 additions and 265 deletions
@@ -5,10 +5,11 @@ import { ImageResponse } from "next/og";
 import sharp from "sharp";

 import { rarityGradient } from "@/lib/catalog/rarity";
+import { artifactTierCount } from "@/lib/guides/artifacts";
+import { getCachedPublicArtifactExport } from "@/lib/cache/public";
 import { imageContentDisposition } from "@/lib/guides/export-image";
-import { getPublicArtifactExport } from "@/lib/guides/queries";
 import { normalizeTargetStat, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
-import { normalizeTalentPriorities } from "@/lib/guides/talents";
+import { normalizeTalentPriorities, talentTypeLabel } from "@/lib/guides/talents";

 const anuphanFonts = Promise.all(
  [
@@ -58,7 +59,7 @@ async function pngDataUrl(url: string): Promise<string | null> {

 async function localPngDataUrl(fileName: string, size: number | null = 96, white = false): Promise<string> {
  let image = sharp(join(process.cwd(), "public", "icon", fileName));
-  if (white) image = image.negate();
+  if (white) image = image.negate({ alpha: false });
  const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
    .png()
    .toBuffer();
@@ -70,11 +71,11 @@ export async function GET(
  context: RouteContext<"/api/guides/[guideId]/artifacts/image">,
 ) {
  const { guideId } = await context.params;
-  const guide = await getPublicArtifactExport(guideId);
+  const guide = await getCachedPublicArtifactExport(guideId);
  if (!guide) return new Response("Guide not found", { status: 404 });
  const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);

-  const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets, watermark] = await Promise.all([
+  const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([
    anuphanFonts,
    Promise.all(
      guide.groups.map((group) =>
@@ -96,7 +97,6 @@ export async function GET(
      return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null;
    })),
    Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true))),
-    localPngDataUrl("Watermark.png", null),
  ]);

  const profile = guide.profile;
@@ -125,7 +125,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", gap: 20 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
        <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>
@@ -155,7 +154,7 @@ export async function GET(
              </div>
              <div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
                {group.rows.map((row, rowIndex) => (
-                    <div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14 }}>
+                  <div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14, borderRadius: 6, background: rowIndex % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px" }}>
                    <div style={{ display: "flex", width: row.second ? 94 : 58 }}>
                      {groupAssets[groupIndex][rowIndex].first ? (
                        <div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.first.rarity) }}>
@@ -170,11 +169,12 @@ export async function GET(
                    </div>
                    <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 5 }}>
                      <div style={{ display: "flex", fontSize: 18, fontWeight: 700 }}>
-                        {rowIndex + 1}. {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
+                        {artifactTierCount(row.second?.name ?? null)}{" "}
+                        {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
                      </div>
                      {row.note ? <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
                    </div>
-                    <div style={{ display: "flex", fontSize: 26, fontWeight: 700 }}>
+                    <div style={{ display: "flex", color: "#f0b72f", fontSize: 26, fontWeight: 700 }}>
                      {metric(row.percent)}
                    </div>
                  </div>
@@ -240,7 +240,10 @@ export async function GET(
                      {talents.map((talent, index) => (
                        <div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                          {talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null}
-                          <span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
+                          <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                            <span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
+                            <span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
+                          </span>
                          {index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
                        </div>
                      ))}
@@ -1,12 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
-import { join } from "node:path";
-
 import { ImageResponse } from "next/og";
 import sharp from "sharp";

 import { rarityGradient, rarityTextColor } from "@/lib/catalog/rarity";
+import { getCachedPublicWeaponExport } from "@/lib/cache/public";
 import { imageContentDisposition } from "@/lib/guides/export-image";
-import { getPublicWeaponExport } from "@/lib/guides/queries";

 const anuphanFonts = Promise.all(
  [
@@ -46,26 +44,17 @@ 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: { params: Promise<{ guideId: string }> },
 ) {
  const { guideId } = await context.params;
-  const guide = await getPublicWeaponExport(guideId);
+  const guide = await getCachedPublicWeaponExport(guideId);
  if (!guide) return new Response("Guide not found", { status: 404 });

-  const [fonts, weaponImages, watermark] = await Promise.all([
+  const [fonts, weaponImages] = await Promise.all([
    anuphanFonts,
    Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
-    localPngDataUrl("Watermark.png", null),
  ]);
  const weaponHeights = guide.weapons.map((row) => Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)));
  const height = Math.max(360, 190 + weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) + Math.max(0, guide.weapons.length - 1) * 14);
@@ -85,7 +74,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", gap: 14 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, marginBottom: 6 }}>
        <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>อาวุธที่แนะนำ</div>
@@ -104,26 +92,28 @@ export async function GET(
        >
          <div
            style={{
+              position: "relative",
              display: "flex",
              flex: 3,
-              alignItems: "center",
-              gap: 18,
+              overflow: "hidden",
              borderBottomRightRadius: 80,
              background: rarityGradient(row.weapon.rarity),
              color: "white",
-              padding: "10px 40px 10px 24px",
+              padding: 0,
            }}
          >
-            {weaponImages[index] ? (
-              <img src={weaponImages[index]!} alt="" width={92} height={92} style={{ objectFit: "contain" }} />
-            ) : (
-              <div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div>
-            )}
-            <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
-              <div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
-                {index + 1}. {row.weapon.name} R{row.refinement}
+            <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, alignItems: "center", gap: 18, padding: "10px 40px 10px 24px" }}>
+              {weaponImages[index] ? (
+                <img src={weaponImages[index]!} alt="" width={92} height={92} style={{ objectFit: "contain" }} />
+              ) : (
+                <div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div>
+              )}
+              <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+                <div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
+                  {index + 1}. {row.weapon.name} R{row.refinement}
+                </div>
+                {row.note ? <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
              </div>
-              {row.note ? <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
            </div>
          </div>
          <div style={{ display: "flex", flex: 1, alignItems: "center", justifyContent: "space-around", gap: 12, color: "#17171c", padding: "12px 16px" }}>
@@ -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>