feat(constellations) : add infographic image export

2026-09-03 15:07:22 +07:00
parent c0ab204d06
commit fbc4d9d4b2
6 changed files with 219 additions and 6 deletions
@@ -0,0 +1,124 @@
+import Image from "next/image";
+
+import type { PublicGuide } from "@/lib/guides/queries";
+import { constellationChartRows } from "@/lib/guides/export-image";
+import { cn } from "@/lib/utils";
+
+function percentage(value: number): string {
+  return `${value.toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
+}
+
+export function ConstellationImage({
+  guide,
+  group,
+  sectionNote,
+}: {
+  guide: PublicGuide;
+  group: PublicGuide["constellationGroups"][number];
+  sectionNote: string | null | undefined;
+}) {
+  const rows = constellationChartRows(group.rows);
+  const background = guide.character.nameCardImageUrl ?? guide.coverUrl;
+  const character = guide.character.splashImageUrl ?? guide.character.imageUrl;
+  const footer = group.note ?? sectionNote;
+
+  return (
+    <div className="relative isolate size-[1500px] overflow-hidden bg-[#070b20] font-heading text-white">
+      <Image
+        src={background}
+        alt=""
+        fill
+        loading="eager"
+        sizes="1500px"
+        className="object-cover"
+      />
+      <div className="absolute inset-0 bg-[#050817]/65" />
+
+      <div className="absolute inset-x-20 top-7 z-10 flex items-start justify-center gap-5">
+        <Image
+          src="/icon/nav/Constellations.webp"
+          alt=""
+          width={112}
+          height={112}
+          loading="eager"
+          className="size-28 shrink-0 object-contain drop-shadow-[0_5px_4px_rgba(0,0,0,0.8)]"
+        />
+        <div className="flex flex-col items-center text-center drop-shadow-[0_5px_4px_rgba(0,0,0,0.8)]">
+          <h2
+            className={cn(
+              "whitespace-nowrap leading-none font-bold",
+              guide.character.name.length > 16
+                ? "text-[60px]"
+                : "text-[76px]",
+            )}
+          >
+            {guide.character.name} Constellations
+          </h2>
+          <p className="mt-3 text-[46px] leading-none font-bold text-[#f1badd]">
+            Team Damage
+          </p>
+        </div>
+      </div>
+
+      <div className="absolute top-[190px] right-0 bottom-0 z-10 w-[830px]">
+        <Image
+          src={character}
+          alt=""
+          fill
+          loading="eager"
+          sizes="830px"
+          className="object-contain object-right-bottom drop-shadow-[0_10px_8px_rgba(0,0,0,0.55)]"
+        />
+      </div>
+
+      <div className="absolute top-[160px] bottom-[115px] left-[154px] z-20 w-1 bg-black/90" />
+      <div className="absolute inset-x-14 top-[205px] bottom-[145px] z-20 flex flex-col justify-between">
+        {rows.map((row) => (
+          <div
+            key={row.level}
+            className="grid grid-cols-[82px_1fr] items-center gap-4"
+          >
+            <div className="text-right text-[58px] leading-none font-bold drop-shadow-[0_5px_4px_rgba(0,0,0,0.9)]">
+              C{row.level}
+            </div>
+            <div className="flex h-[100px] items-center">
+              <div
+                className={cn(
+                  "h-full shrink-0 rounded-r-xl",
+                  row.level === 0
+                    ? "bg-[#bd91b1]"
+                    : row.isGreat
+                      ? "bg-[#f0c76a]"
+                      : "bg-[#ead0e1]",
+                )}
+                style={{ width: `${row.widthPercent * 8.5}px` }}
+              />
+              <span
+                className={cn(
+                  "ml-3 text-[42px] leading-none font-bold drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]",
+                  row.isGreat ? "text-[#f0c76a]" : "text-[#f1badd]",
+                )}
+              >
+                {percentage(row.percent)}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {footer ? (
+        <p className="absolute bottom-10 left-[154px] z-30 max-w-[1000px] truncate text-[28px] font-semibold drop-shadow-[0_4px_3px_rgba(0,0,0,0.9)]">
+          {footer}
+        </p>
+      ) : null}
+      <Image
+        src="/icon/Watermark.png"
+        alt=""
+        width={280}
+        height={158}
+        loading="eager"
+        className="absolute right-4 bottom-0 z-30 h-auto w-[280px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+      />
+    </div>
+  );
+}