diff --git a/components/public/artifact-image-export.tsx b/components/public/artifact-image-export.tsx index 51b0e67..1f4c3db 100644 --- a/components/public/artifact-image-export.tsx +++ b/components/public/artifact-image-export.tsx @@ -29,30 +29,40 @@ type ArtifactExportSection = (typeof sectionOptions)[number][0]; export function ArtifactImageExport({ children, fileName, + hasNote, targetConditionLabels, }: { children: ReactNode; fileName: string; + hasNote: boolean; targetConditionLabels: readonly string[]; }) { const [sections, setSections] = useState>( () => new Set(sectionOptions.map(([value]) => value)), ); + const [includeNote, setIncludeNote] = useState(true); const [targetCondition, setTargetCondition] = useState("0"); + const showNote = hasNote && includeNote; const entireSection = sections.size === sectionOptions.length; const hiddenSections = sectionOptions .filter(([value]) => !sections.has(value)) .map(([value]) => `[data-artifact-export-section="${value}"]{display:none!important}`) .join(""); const targetRule = `[data-target-condition]:not([data-target-condition="${targetCondition}"]){display:none!important}`; + const noteRule = showNote + ? "" + : '[data-artifact-export-section="note"]{display:none!important}'; const onlySection = sections.size === 1 ? [...sections][0] : null; - const exportWidth = onlySection === "target-stats" || onlySection === "talents" + const exportWidth = onlySection === "best-stats" || onlySection === "target-stats" || onlySection === "talents" ? 800 : 1200; + const hideEmptyRightColumn = !showNote && !sections.has("target-stats") && !sections.has("talents") + ? ".artifact-export-right{display:none!important}" + : ""; const layoutRules = onlySection === "tierlist" ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-tierlist{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}" : onlySection === "best-stats" - ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-left{display:grid!important;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;gap:1.25rem}.artifact-export-main-stats,.artifact-export-substats{order:initial!important}" + ? ".artifact-export-grid{grid-template-columns:1fr!important}.artifact-export-left{display:flex!important;flex-direction:column!important}.artifact-export-main-stats{order:1!important}.artifact-export-substats{order:2!important}.artifact-export-right{width:100%!important}" : onlySection === "target-stats" || onlySection === "talents" ? ".artifact-export-grid{display:block!important}.artifact-export-right{width:560px!important;max-width:100%;margin-left:auto!important;margin-right:auto!important;justify-self:center!important}" : ""; @@ -98,6 +108,16 @@ export function ArtifactImageExport({ {label} ))} + {hasNote ? ( + + setIncludeNote(checked === true)} + /> + Add Note + + ) : null} {sections.has("target-stats") && targetConditionLabels.length > 1 ? (
@@ -127,7 +147,7 @@ export function ArtifactImageExport({ disabled={sections.size === 0} captureClassName="p-0" > - + {children} diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx index b2aeeae..261816f 100644 --- a/components/public/structured-guide.tsx +++ b/components/public/structured-guide.tsx @@ -614,6 +614,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) { action={ group.name || `Condition ${index + 1}`)} > @@ -944,7 +945,7 @@ function ArtifactSectionContent({
) : null} {profile.note ? ( -
+

โน็ต

{profile.note}