- 1 ? `-${group.name || `Condition-${groupIndex + 1}`}` : ""}.png`}
width={1500}
height={1500}
- captureClassName="p-0"
- >
-
+ template={{ kind: "constellation", data: { guide, group } }}
+ />
{groups.length > 1 ? {group.name || `เงื่อนไข ${groupIndex + 1}`}
: null} {group.note ?{group.note}
: null} diff --git a/components/public/takumi-image-export.tsx b/components/public/takumi-image-export.tsx new file mode 100644 index 0000000..1dd02dc --- /dev/null +++ b/components/public/takumi-image-export.tsx @@ -0,0 +1,139 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { DownloadIcon, EyeIcon } from "lucide-react"; +import { toast } from "sonner"; +import { Button } from "@/components/ui/button"; +import { Spinner } from "@/components/ui/spinner"; +import type { ExportRequest, ExportTemplate } from "@/lib/image-export/types"; +import { downloadImage, renderImage } from "@/lib/image-export/client"; + +export function TakumiImageExport({ + template, + fileName, + width = 1200, + height, + format = "png", + disabled = false, + allowWithoutNotes = true, + preview = false, + buttonLabel = "ส่งออกภาพ", +}: { + template: ExportTemplate; + fileName: string; + width?: number; + height?: number; + format?: "png" | "webp"; + disabled?: boolean; + allowWithoutNotes?: boolean; + preview?: boolean; + buttonLabel?: string; +}) { + const [mode, setMode] = useState< + "with-notes" | "without-notes" | "preview" | null + >(null); + const [image, setImage] = useState<{ url: string; key: string } | null>(null); + const mounted = useRef(false); + const previewUrl = useRef
+
+ );
+}
diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index 49bc660..f32b7f9 100644
--- a/components/public/team-search.tsx
+++ b/components/public/team-search.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
import { ArrowUpRightIcon, SearchIcon, XIcon } from "lucide-react";
import { useMemo, useState, type ReactNode } from "react";
-import { GuideImageExport } from "@/components/public/guide-image-export";
+import { TakumiImageExport } from "@/components/public/takumi-image-export";
import { ScrollableNav } from "@/components/public/scrollable-nav";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
@@ -161,55 +161,6 @@ export function TeamArtifactIcon({
);
}
-function TeamExportImage({ team }: { team: Team }) {
- const total = team.members.reduce((sum, member) => sum + Number(member.damage), 0);
- const seconds = Number(team.rotationSeconds);
- return (
-
+ {(["with-notes", "without-notes"] as const)
+ .filter((value) => allowWithoutNotes || value === "with-notes")
+ .map((value) => (
+
+ ))}
+ {preview ? (
+
+ ) : null}
+
+ {image ? (
+
+ {image.key !== key ? (
+ 
+
+ ) : null}
+ + ตัวอย่างยังไม่รวมการเปลี่ยนแปลงล่าสุด กดดูตัวอย่างภาพอีกครั้ง +
+ ) : null} + {/* Encoded local preview must bypass Next.js image optimization. */} + {/* eslint-disable-next-line @next/next/no-img-element */} +
-
-
-
-
- );
-}
-
function TeamCard({
team,
action,
@@ -463,9 +414,7 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
key={team.id}
team={team}
action={
- {team.title}
-{`Rotation duration: ${seconds.toLocaleString("en-US", { maximumFractionDigits: 2 })} seconds`}
-
- {team.members.map((member) => {
- const damage = Number(member.damage);
- const percent = total > 0 ? damage / total * 100 : 0;
- return (
-
-
-
- );
- })}
-
-
-
- {member.weapon ?
-
-
-
-
-
- {member.character.name}
- C{member.constellation}R{member.refinement}
-
- {damage.toLocaleString("en-US")}
-
- {percent.toFixed(1)}%
{team.combo}
DPS: {seconds > 0 ? (total / seconds).toLocaleString("en-US", { maximumFractionDigits: 0 }) : "0"}
- By YT Genshin Isn't Mobile Game
-
-
-
-
-
- );
-}
-
export function WeaponImageExport({
guide,
group,
@@ -134,20 +50,13 @@ export function WeaponImageExport({
- {`${guide.character.name}’s Weapon Comparison`} -
-- {metric === "overallPercent" ? "Overall Damage" : "Personal Damage"} -
-{conditionLabel}
-
- {group.rows.map((row) => {
- const numeric = Number(row[metric]) || 0;
- const width = row[metric] === null
- ? 28
- : numeric <= 100
- ? Math.max(28, Math.max(0, numeric) * 0.5)
- : Math.min(90, 50 + ((numeric - 100) / Math.max(1, maximum - 100)) * 40);
- return (
-
-
- {group.note ? (
-
-
- );
- })}
-
-
-
-
-
-
- {row.weapon.name} R{row.refinement}
-
-
-
- {formattedPercent(row[metric])}
- {row.note ? {row.note} : null}
-
- - {group.note} -
- ) : null} -
{metricOptions.map(([metric, label]) => (
-
-
+ template={{ kind: "weapon", data: { guide, group, metric, conditionLabel } }}
+ />
))}
diff --git a/lib/guides/image-export.test.tsx b/lib/guides/image-export.test.tsx
index 1ec2e17..41d42f3 100644
--- a/lib/guides/image-export.test.tsx
+++ b/lib/guides/image-export.test.tsx
@@ -2,28 +2,29 @@ import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
-import { GuideImageExport } from "@/components/public/guide-image-export";
+import { TakumiImageExport } from "@/components/public/takumi-image-export";
+import { exportFixtures } from "@/lib/image-export/fixtures";
import { MaterialPoster } from "@/components/public/material-poster";
-import { ConstellationImage } from "@/components/public/constellation-image";
+import { ConstellationImage } from "@/lib/image-export/templates/constellation";
import type { PublicGuide } from "@/lib/guides/queries";
describe("image export controls", () => {
it("always offers both export modes even without notes", () => {
- const html = renderToStaticMarkup(
+ {exporting && recommendedConditions.length > 1 ? (
+
+
+
+ {exporting ? "Best Main Stats" : "ออฟหลักที่ดีที่สุด"}
+
+
+
+
+
+ ) : null}
+ {condition.substats.length ? (
+
+
+
+ {exporting ? "Best Substats" : "ออฟรองที่ดีที่สุด"}
+
+
+
+ ) : null}
+
+ ),
+ );
+
+ return (
+ + {condition.name || `Condition ${conditionIndex + 1}`} +
+ ) : null} + {condition.note ? ( ++ {condition.note} +
+ ) : null} + {profile ? ( +
+ {condition.substats.map((stat, index) => (
+
+
+
+ + {exporting + ? "Recommended Artifacts & Stats" + : "อาร์ติแฟกต์และสแตทที่แนะนำ"} +
+
+
+ {action}
+ + {exporting ? "Artifacts & Stats" : "อาร์ติแฟกต์และค่าสถานะ"} +
+
+ {" "}
+
+
+ {exporting ? (
+ recommendedCards
+ ) : (
+ condition.name || `เงื่อนไข ${index + 1}`,
+ )}
+ >
+ {recommendedCards}
+
+ )}
+
+ {profile ? (
+
+ {guide.artifactGroups.map((group) => (
+
+
+
+ {group.name === "Late Game"
+ ? exporting
+ ? "Late Game"
+ : "เลทเกม"
+ : group.name === "Early Game"
+ ? exporting
+ ? "Early Game"
+ : "ต้นเกม"
+ : group.name}
+
+
+
+ {group.rows.map((row, index) => (
+
+
+ ))}
+
+
+
+ ))}
+
+
+ + {artifactTierCount(row.second?.name ?? null)}{" "} + {row.first.name} + {row.second ? ` + 2 ${row.second.name}` : ""} +
+ {row.note ? ( ++ {row.note} +
+ ) : null} ++ {Number(row.percent) === 0 + ? "-%" + : metric( + row.percent, + exporting ? "en-US" : undefined, + )} +
+
+
+
+ {profile.targetConditions.some((group) => group.rows.length) ? (
+ exporting ? (
+ profile.targetConditions
+ .filter((group) => group.rows.length)
+ .map((group, groupIndex) => (
+ group.rows.length)
+ .map(
+ (group, index) =>
+ group.name || `เงื่อนไข ${index + 1}`,
+ )}
+ >
+ {profile.targetConditions
+ .filter((group) => group.rows.length)
+ .map((group, groupIndex) => (
+
+ )
+ ) : null}
+ {profile.talents.length ? (
+
+
+
+ ) : null}
+
+
+ ))
+ ) : (
+ + {exporting + ? "Recommended Minimum Stats" + : "ค่าสถานะต่ำๆที่ควรจะปั้นไว้"} +
+ {group.note ? ( ++ {group.note} +
+ ) : null} +
+ {group.rows.map((target, index) => (
+
+
+
+ {targetStatIconName(target.stat) ? (
+
+ ))}
+
+
+ ))}
+ + {exporting + ? "Recommended Minimum Stats" + : "ค่าสถานะต่ำๆที่ควรจะปั้นไว้"} +
+ {group.note ? ( ++ {group.note} +
+ ) : null} +
+ {group.rows.map((target, index) => (
+
+
+
+ {targetStatIconName(target.stat) ? (
+
+ ))}
+
+
+ ) : null}
+ {profile.note ? (
+ + {exporting ? "Talent Priority" : "ลำดับการอัพพรสวรรค์"} +
+
+ {normalizeTalentPriorities(profile.talents).map(
+ (talent, index, talents) => {
+ const catalogTalent = guide.character.talents.find(
+ (item) => item.type === talent.type,
+ );
+ const talentName = catalogTalent?.name ?? talent.type;
+ return (
+
+
+
+ );
+ },
+ )}
+
+
+ {talent.level
+ ? exporting
+ ? `Level ${talent.level}+`
+ : `เลเวล ${talent.level}+`
+ : "-"}
+
+
+ {index < talents.length - 1 ? (
+
+ {talentRelationSymbol(talent.relationToNext)}
+
+ ) : null}
+
+ {catalogTalent?.iconUrl ? (
+
+ + {talentName} +
++ {talent.type === "E" + ? exporting + ? "Elemental Skill" + : "สกิลธาตุ" + : talent.type === "Q" + ? exporting + ? "Elemental Burst" + : "ท่าไม้ตาย" + : exporting + ? "Normal Attack" + : "ตีปกติ"} +
+
+
+ ) : null}
+ + {exporting ? "Notes" : "โน็ต"} +
++ {profile.note} +
+
+
+ );
+}
+
+function ArtifactStatValue({
+ value,
+ index,
+ exporting = true,
+ elementIconUrls,
+}: {
+ value: string;
+ index: number;
+ exporting?: boolean;
+ elementIconUrls: Record{label}
+
+ {values.length ? (
+ values.map((value, index) => (
+
+ 16 - ? "text-[60px]" - : "text-[76px]", + guide.character.name.length > 16 ? "text-[60px]" : "text-[76px]", )} > {`${guide.character.name}’s Constellations`}
-- Team Damage -
++ Team Damage +
+
{footer}
) : null} diff --git a/lib/image-export/templates/index.tsx b/lib/image-export/templates/index.tsx new file mode 100644 index 0000000..6004c2f --- /dev/null +++ b/lib/image-export/templates/index.tsx @@ -0,0 +1,110 @@ +import { + createElement, + isValidElement, + type ReactNode, + type ReactElement, +} from "react"; +import type { ExportRequest } from "../types"; +import { ConstellationImage } from "./constellation"; +import { WeaponComparisonImage } from "./weapon"; +import { TeamExportImage } from "./team"; +import { MaterialPoster } from "./materials"; +import { OverviewPoster } from "./overview"; +import { ArtifactSectionContent } from "./artifact"; + +type Props = { + children?: ReactNode; + className?: string; + [key: string]: unknown; +}; +// Resolve only our pure functions. Filter sections and notes before layout, without DOM mutation. +export function resolveTemplate( + node: ReactNode, + request: ExportRequest, +): ReactNode { + if (Array.isArray(node)) + return node.map((child) => resolveTemplate(child, request)); + if (!isValidElement
+ {resolveTemplate(content, request)}
+
+ );
+}
diff --git a/lib/image-export/templates/materials.tsx b/lib/image-export/templates/materials.tsx
new file mode 100644
index 0000000..5dc15f2
--- /dev/null
+++ b/lib/image-export/templates/materials.tsx
@@ -0,0 +1,307 @@
+import { Image, Link } from "./primitives";
+
+import type {
+ CatalogAscensionGroup,
+ CatalogBaseStat,
+} from "@/lib/catalog/lunaris";
+import {
+ mergePosterMaterials,
+ type PosterMaterial,
+} from "@/lib/material-poster";
+import { accentGradient } from "@/lib/overview-image";
+import { cn } from "@/lib/utils";
+
+export type PosterBlendMode =
+ | "normal"
+ | "multiply"
+ | "screen"
+ | "overlay"
+ | "darken"
+ | "lighten"
+ | "color-dodge"
+ | "color-burn"
+ | "hard-light"
+ | "soft-light"
+ | "difference"
+ | "exclusion"
+ | "hue"
+ | "saturation"
+ | "color"
+ | "luminosity";
+
+type PosterCharacter = {
+ name: string;
+ nameCardImageUrl: string | null;
+ baseStats: CatalogBaseStat[];
+ ascension: Array<
+ Omit
+ {character.nameCardImageUrl ? (
+
+ );
+}
diff --git a/lib/image-export/templates/overview.tsx b/lib/image-export/templates/overview.tsx
new file mode 100644
index 0000000..1586b36
--- /dev/null
+++ b/lib/image-export/templates/overview.tsx
@@ -0,0 +1,393 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Image, ImageIcon, getImageProps } from "./primitives";
+import { cn } from "@/lib/utils";
+import { elementIconFilter } from "@/lib/catalog/element";
+import {
+ accentGradient,
+ elementOrder,
+ elementGlowColor,
+ normalizeHex,
+ weaponTypeIconPath,
+ type OverviewBlendMode,
+} from "@/lib/overview-image";
+type Character = {
+ key: string;
+ name: string;
+ aliases: string[];
+ element: string | null;
+ rarity: number | null;
+ weaponType: string | null;
+ imageUrl: string;
+ nameCardImageUrl: string | null;
+};
+
+type Composition = {
+ backgroundUrl: string | null;
+ fadeColor: string;
+ fadeTint: number;
+ auraUpOffset: number;
+ characterOffset: Position;
+ fadeOffset: Position;
+};
+
+type BlendLayer = {
+ id: number;
+ mode: OverviewBlendMode;
+ amount: number;
+};
+
+type CropArea = { x: number; y: number; width: number; height: number };
+type Position = { x: number; y: number };
+type PosterLayer = "character" | "fade";
+
+const DISCLAIMER =
+ "ไม่สามารถเอาไปเปรียบเทียบกับการคำนวณของ TC ท่านอื่นๆได้\nเพราะแต่ละคนใช้สแตทในการคำนวณที่ไม่เหมือนกัน\nและตารางที่เห็นอาจมีการเปลี่ยนแปลงได้ในอนาคต";
+function OverviewLayer({
+ offset,
+ className,
+ style,
+ children,
+}: {
+ id: PosterLayer;
+ offset: Position;
+ interactive: boolean;
+ className?: string;
+ style?: CSSProperties;
+ children: ReactNode;
+}) {
+ return (
+
+
+ ) : null}
+
+
+
+ + BASE STATS +
+
+ {Array.from({ length: 4 }, (_, index) => {
+ const stat = stats[index];
+ const iconName = stat ? statIconName(stat.key) : null;
+ return (
+
+
+
+ {iconName ? (
+
+ );
+ })}
+
+
+ + MATERIALS +
+LV.90
+
+ {materials.map((material, index) => {
+ const materialCard = (
+ <>
+
+
+ {material.imageUrl ? (
+
+
+
+ ×{material.amount.toLocaleString("en-US")}
+
+
+
+ );
+ const className =
+ "aspect-[0.72] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10";
+
+ return linkMaterials ? (
+
+ {materialCard}
+
+ ) : (
+
+ {materialCard}
+
+ );
+ })}
+
+ {children}
+
+ );
+}
+export function OverviewPoster({
+ artworkUrl,
+ character,
+ role,
+ topColors,
+ bottomColors,
+ elementColors,
+ elementGradientAngle,
+ blendLayers,
+ nameCardCrop,
+ nameCardSize,
+ elementIconUrls,
+ composition,
+ disclaimerFontSize = null,
+ interactive = false,
+ activeLayer = undefined,
+}: {
+ artworkUrl: string | null;
+ character: Character | null;
+ role: string;
+ topColors: [string, string];
+ bottomColors: [string, string];
+ elementColors: [string, string];
+ elementGradientAngle: number;
+ blendLayers: BlendLayer[];
+ nameCardCrop: CropArea | null;
+ nameCardSize: { width: number; height: number } | null;
+ elementIconUrls: Record
+ {composition.backgroundUrl ? (
+
+
+ ) : (
+
+
+
+
+ );
+}
diff --git a/lib/image-export/templates/primitives.tsx b/lib/image-export/templates/primitives.tsx
new file mode 100644
index 0000000..c144459
--- /dev/null
+++ b/lib/image-export/templates/primitives.tsx
@@ -0,0 +1,161 @@
+/* eslint-disable @next/next/no-img-element -- Pure image-renderer templates never mount in the webpage. */
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type ImageProps = Omit
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {character ? (
+
+ {weaponIcon ? (
+
+
+
+ ) : null}
+ + {character.name.toLocaleUpperCase("en")} +
+
+ {elementOrder.map((element) => {
+ const url = elementIconUrls[element];
+ const active = element === character.element;
+ if (!url) return null;
+ if (active) {
+ const { props: maskImageProps } = getImageProps({
+ src: url,
+ alt: "",
+ width: 72,
+ height: 72,
+ });
+ return (
+
+
+ + {DISCLAIMER} +
+{children}
;
+}
+export function Kbd({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ className?: string;
+}) {
+ return {children};
+}
+export function ArrowUpRightIcon() {
+ return ↗;
+}
+export function ImageIcon({
+ className,
+}: {
+ className?: string;
+ [key: string]: unknown;
+}) {
+ return ◇;
+}
+export function ConditionSwitcher({
+ children,
+}: {
+ children: ReactNode;
+ label: string;
+ labels: string[];
+}) {
+ return <>{children};
+}
+export function Separator() {
+ return ;
+}
+export function Badge({ children }: { children: ReactNode; variant?: string }) {
+ return (
+
+ {children}
+
+ );
+}
+type BoxProps = ComponentProps<"div">;
+export function Card({ className, children, ...props }: BoxProps) {
+ return (
+
+ {children}
+
+ );
+}
+export function CardHeader({ className, ...props }: BoxProps) {
+ return (
+
+ );
+}
+export function CardTitle({ className, ...props }: BoxProps) {
+ return (
+
+ );
+}
+export function CardContent({ className, ...props }: BoxProps) {
+ return ;
+}
+export function GuideExportBranding({
+ backgroundUrl,
+ variant = "standard",
+}: {
+ backgroundUrl: string;
+ variant?: "standard" | "constellation";
+}) {
+ const constellation = variant === "constellation";
+ return (
+ <>
+ {content}
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+export function TeamExportImage({ team }: { team: Team }) {
+ const total = team.members.reduce(
+ (sum, member) => sum + Number(member.damage),
+ 0,
+ );
+ const seconds = Number(team.rotationSeconds);
+ return (
+
+
+
+
+ );
+}
diff --git a/lib/image-export/templates/weapon.tsx b/lib/image-export/templates/weapon.tsx
new file mode 100644
index 0000000..8f657d9
--- /dev/null
+++ b/lib/image-export/templates/weapon.tsx
@@ -0,0 +1,107 @@
+import { Image, GuideExportBranding } from "./primitives";
+import type { PublicGuide } from "@/lib/guides/queries";
+type WeaponGroup = PublicGuide["weaponGroups"][number];
+type DamageMetric = "overallPercent" | "personalPercent";
+
+function formattedPercent(value: string | null): string {
+ if (value === null) return "-%";
+ const numeric = Number(value);
+ if (numeric === 0) return "-%";
+ return `${numeric.toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+}
+
+export function WeaponComparisonImage({
+ guide,
+ group,
+ metric,
+ conditionLabel,
+}: {
+ guide: PublicGuide;
+ group: WeaponGroup;
+ metric: DamageMetric;
+ conditionLabel: string;
+}) {
+ const values = group.rows.map((row) => Number(row[metric]) || 0);
+ const maximum = Math.max(100, ...values);
+
+ return (
+ {team.title}
+{`Rotation duration: ${seconds.toLocaleString("en-US", { maximumFractionDigits: 2 })} seconds`}
+
+ {team.members.map((member) => {
+ const damage = Number(member.damage);
+ const percent = total > 0 ? (damage / total) * 100 : 0;
+ return (
+
+
+
+ );
+ })}
+
+
+
+ {member.weapon ? (
+
+
+
+ ) : null}
+
+
+
+
+ {member.character.name}
+
+ C{member.constellation}R{member.refinement}
+
+
+
+ {damage.toLocaleString("en-US")}
+
+
+
+
+
+
+
+
+ {percent.toFixed(1)}%
+
+
+
+ {team.combo}
+
+ DPS:{" "}
+ {seconds > 0
+ ? (total / seconds).toLocaleString("en-US", {
+ maximumFractionDigits: 0,
+ })
+ : "0"}
+
+
+ By YT Genshin Isn't Mobile Game
+
+
+
+
+
+
+ );
+}
diff --git a/lib/image-export/types.ts b/lib/image-export/types.ts
new file mode 100644
index 0000000..280a78c
--- /dev/null
+++ b/lib/image-export/types.ts
@@ -0,0 +1,52 @@
+import type { ComponentProps } from "react";
+import type { ConstellationImage } from "./templates/constellation";
+import type { WeaponComparisonImage } from "./templates/weapon";
+import type { TeamExportImage } from "./templates/team";
+import type { MaterialPoster } from "./templates/materials";
+import type { OverviewPoster } from "./templates/overview";
+import type { PublicGuide } from "@/lib/guides/queries";
+
+export type ArtifactExportSection =
+ "tierlist" | "best-stats" | "target-stats" | "talents";
+export type ExportTemplate =
+ | { kind: "constellation"; data: ComponentProps+ {`${guide.character.name}’s Weapon Comparison`} +
++ {metric === "overallPercent" ? "Overall Damage" : "Personal Damage"} +
+{conditionLabel}
+
+ {group.rows.map((row) => {
+ const numeric = Number(row[metric]) || 0;
+ const width =
+ row[metric] === null
+ ? 28
+ : numeric <= 100
+ ? Math.max(28, Math.max(0, numeric) * 0.5)
+ : Math.min(
+ 90,
+ 50 + ((numeric - 100) / Math.max(1, maximum - 100)) * 40,
+ );
+ return (
+
+
+ {group.note ? (
+
+
+ );
+ })}
+
+
+
+
+
+
+ {row.weapon.name} R{row.refinement}
+
+
+
+
+ {formattedPercent(row[metric])}
+
+ {row.note ? (
+
+ {row.note}
+
+ ) : null}
+
+ + {group.note} +
+ ) : null} +