buzz-sheet/app/api/guides/[guideId]/weapons/image/route.tsx

/* eslint-disable @next/next/no-img-element */
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";

const anuphanFonts = Promise.all(
  [
    { subset: "latin", weight: 400 as const },
    { subset: "thai", weight: 400 as const },
    { subset: "latin", weight: 500 as const },
    { subset: "thai", weight: 500 as const },
    { subset: "latin", weight: 600 as const },
    { subset: "thai", weight: 600 as const },
    { subset: "latin", weight: 700 as const },
    { subset: "thai", weight: 700 as const },
  ].map(async ({ subset, weight }) => {
    const response = await fetch(
      `https://unpkg.com/@fontsource/[email protected]/files/anuphan-${subset}-${weight}-normal.woff`,
    );
    if (!response.ok)
      throw new Error(`Unable to load Anuphan ${subset} ${weight}`);
    return {
      name: "Anuphan",
      data: await response.arrayBuffer(),
      weight,
      style: "normal" as const,
    };
  }),
).catch(() => []);

function metric(value: string): string {
  return Number(value) === 0
    ? "-%"
    : `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
}

function wrappedLineCount(value: string, lineLength: number): number {
  return value
    .split(/\r?\n/u)
    .reduce(
      (lines, line) => lines + Math.max(1, Math.ceil(line.length / lineLength)),
      0,
    );
}

async function pngDataUrl(url: string): Promise<string | null> {
  try {
    const response = await fetch(url);
    if (!response.ok) return null;
    const png = await sharp(Buffer.from(await response.arrayBuffer()))
      .resize(80, 80, { fit: "contain" })
      .png()
      .toBuffer();
    return `data:image/png;base64,${png.toString("base64")}`;
  } catch {
    return null;
  }
}

export async function GET(
  _request: Request,
  context: { params: Promise<{ guideId: string }> },
) {
  const { guideId } = await context.params;
  const guide = await getCachedPublicWeaponExport(guideId);
  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });

  const [fonts, weaponImages] = await Promise.all([
    anuphanFonts,
    Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
  ]);
  const weaponHeights = guide.weapons.map((row) => {
    const noteLines = row.note ? wrappedLineCount(row.note, 58) : 0;
    return Math.max(112, noteLines ? 64 + noteLines * 22 : 112);
  });
  const noteLines = guide.note ? wrappedLineCount(guide.note, 70) : 0;
  const headerHeight = 72 + (noteLines ? 12 + noteLines * 24 : 0);
  const height = Math.max(
    360,
    64 +
      headerHeight +
      24 +
      weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) +
      Math.max(0, guide.weapons.length - 1) * 12,
  );

  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        color: "#f2eee6",
        background: "#06070c",
        padding: "32px 36px",
        fontFamily: "Anuphan",
      }}
    >
      <div
        style={{
          display: "flex",
          flex: 1,
          flexDirection: "column",
          gap: 12,
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 12,
            marginBottom: 12,
          }}
        >
          <div
            style={{
              display: "flex",
              color: "#ebae42",
              fontSize: 14,
              fontWeight: 500,
              lineHeight: 1.43,
            }}
          >
            อาวุธที่แนะนำ
          </div>
          <div
            style={{
              display: "flex",
              fontSize: 36,
              fontWeight: 600,
              lineHeight: 1.11,
            }}
          >
            Weapons
          </div>
          {guide.note ? (
            <div
              style={{
                display: "flex",
                maxWidth: 760,
                color: "#9b9eaa",
                fontSize: 16,
                lineHeight: 1.5,
                textAlign: "center",
                whiteSpace: "pre-wrap",
              }}
            >
              {guide.note}
            </div>
          ) : null}
        </div>
        {guide.weapons.map((row, index) => (
          <div
            key={row.id}
            style={{
              display: "flex",
              minHeight: weaponHeights[index],
              overflow: "hidden",
              border: "1px solid rgba(242, 238, 230, 0.1)",
              borderRadius: 14,
              background: "#ffffff",
            }}
          >
            <div
              style={{
                display: "flex",
                flex: 3,
                overflow: "hidden",
                borderBottomRightRadius: 128,
                background: rarityGradient(row.weapon.rarity),
                color: "white",
                padding: 0,
              }}
            >
              <div
                style={{
                  display: "flex",
                  flex: 1,
                  alignItems: "center",
                  gap: 16,
                  padding: "16px 64px 16px 16px",
                }}
              >
                {weaponImages[index] ? (
                  <img
                    src={weaponImages[index]!}
                    alt=""
                    width={80}
                    height={80}
                    style={{ objectFit: "contain" }}
                  />
                ) : (
                  <div
                    style={{
                      display: "flex",
                      width: 80,
                      height: 80,
                      alignItems: "center",
                      justifyContent: "center",
                      fontSize: 32,
                    }}
                  >
                    {index + 1}
                  </div>
                )}
                <div
                  style={{
                    display: "flex",
                    flex: 1,
                    minWidth: 0,
                    flexDirection: "column",
                    gap: 4,
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      overflow: "hidden",
                      fontSize: 18,
                      fontWeight: 600,
                      lineHeight: 1.55,
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                    }}
                  >
                    {index + 1}. {row.weapon.name} R{row.refinement}
                  </div>
                  {row.note ? (
                    <div
                      style={{
                        display: "flex",
                        fontSize: 14,
                        lineHeight: 1.43,
                        whiteSpace: "pre-wrap",
                      }}
                    >
                      {row.note}
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
            <div
              style={{
                display: "flex",
                flex: 1,
                alignItems: "center",
                justifyContent: "space-around",
                gap: 16,
                color: "#000000",
                padding: "20px 16px",
              }}
            >
              {row.overallPercent ? (
                <div
                  style={{
                    display: "flex",
                    flex: 1,
                    flexDirection: "column",
                    alignItems: "center",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      color: rarityTextColor(row.weapon.rarity),
                      fontSize: 48,
                      fontWeight: 700,
                      lineHeight: 1,
                      whiteSpace: "nowrap",
                    }}
                  >
                    {metric(row.overallPercent)}
                  </div>
                  <div
                    style={{ display: "flex", marginTop: 4, fontSize: 16 }}
                  >
                    ดาเมททั้งทีม
                  </div>
                </div>
              ) : null}
              {row.personalPercent ? (
                <div
                  style={{
                    display: "flex",
                    flex: 1,
                    flexDirection: "column",
                    alignItems: "center",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      color: rarityTextColor(row.weapon.rarity),
                      fontSize: 48,
                      fontWeight: 700,
                      lineHeight: 1,
                      whiteSpace: "nowrap",
                    }}
                  >
                    {metric(row.personalPercent)}
                  </div>
                  <div
                    style={{ display: "flex", marginTop: 4, fontSize: 16 }}
                  >
                    ดาเมจส่วนตัว
                  </div>
                </div>
              ) : null}
            </div>
          </div>
        ))}
      </div>
    </div>,
    {
      width: 1000,
      height,
      fonts: fonts.length ? fonts : undefined,
      headers: {
        "Cache-Control": "no-store",
        "Content-Disposition": imageContentDisposition(
          `${guide.guideName}-Weapon`,
          "weapons",
        ),
        "Content-Type": "image/png",
      },
    },
  );
}