feat: implement custom theorycraft configuration and UI components for stage and lineup management
Gitea Auto Deploy / Deploy-Container (push) Successful in 39s

This commit is contained in:
2026-08-28 00:18:44 +07:00
parent 0514167aa8
commit bc8e0e2dc7
6 changed files with 920 additions and 523 deletions
+14 -11
View File
@@ -64,9 +64,9 @@ export default async function RootLayout({
const locale = await getLocale()
return (
<html lang={locale} suppressHydrationWarning className="overflow-x-hidden">
<html lang={locale} suppressHydrationWarning className="h-full overflow-hidden">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden max-w-full`}
className={`${geistSans.variable} ${geistMono.variable} antialiased h-full overflow-hidden max-w-full`}
suppressHydrationWarning
>
<NextIntlClientProvider messages={messages}>
@@ -74,21 +74,24 @@ export default async function RootLayout({
<ThemeProvider>
<ClientThemeWrapper>
<ClientDataFetcher >
<div className="min-h-screen w-full flex flex-col justify-between bg-ambient-mesh selection:bg-primary/20 selection:text-primary">
<div className="h-screen w-full flex flex-col overflow-hidden bg-ambient-mesh selection:bg-primary/20 selection:text-primary">
<Header />
<main className="grid grid-cols-12 w-full flex-1">
<aside className="hidden sm:block sm:col-span-4 md:col-span-4 lg:col-span-3 sticky top-14 self-start h-[calc(100vh-3.5rem)] overflow-hidden border-r border-base-content/10 bg-base-100/30 backdrop-blur-sm">
<main className="grid grid-cols-12 w-full flex-1 min-h-0 overflow-hidden">
<aside className="hidden sm:block sm:col-span-4 md:col-span-4 lg:col-span-3 h-full overflow-hidden border-r border-base-content/10 bg-base-100/30 backdrop-blur-sm">
<AvatarBar />
</aside>
<section className="col-span-12 sm:col-span-8 md:col-span-8 lg:col-span-9 flex flex-col min-w-0">
<ActionBar />
<div className="flex-1 p-2 sm:p-3 sm:pt-1">
{children}
<section className="col-span-12 sm:col-span-8 md:col-span-8 lg:col-span-9 h-full flex flex-col min-w-0 min-h-0 overflow-hidden">
<div className="shrink-0">
<ActionBar />
</div>
<div className="flex-1 overflow-y-auto min-h-0 p-2 sm:p-3 sm:pt-1 flex flex-col justify-between">
<div>
{children}
</div>
<Footer />
</div>
</section>
</main>
<Footer />
</div>
</ClientDataFetcher>
</ClientThemeWrapper>
File diff suppressed because it is too large Load Diff
+9 -1
View File
@@ -636,7 +636,15 @@ export default function Header() {
{/* Modals */}
{modalConfigs?.map(({ id, title, onClose, content }) => (
<dialog key={id} id={id} className="modal">
<div className={`modal-box w-11/12 max-w-[92vw] sm:max-w-[88vw] ${id === 'monster_modal' ? 'h-[85vh]' : 'max-h-[90vh]'} max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
<div className={`modal-box w-11/12 ${
id === 'monster_modal' || id === 'import_modal' || id === 'extra_modal'
? 'max-w-[95vw] sm:max-w-[90vw] lg:max-w-[85vw] 2xl:max-w-[1500px] h-[88vh]'
: id === 'connect_modal'
? 'max-w-[95vw] sm:max-w-2xl md:max-w-3xl lg:max-w-4xl max-h-[88vh]'
: id === 'changelog_modal'
? 'max-w-[95vw] sm:max-w-2xl md:max-w-3xl lg:max-w-4xl h-[85vh]'
: 'max-w-[92vw] sm:max-w-[88vw] max-h-[90vh]'
} max-h-[90vh] flex flex-col bg-base-100 text-base-content border border-base-content/10 shadow-2xl rounded-2xl p-0 overflow-hidden`}>
{/* Modal Header */}
<div className="sticky top-0 z-20 flex items-center justify-between px-6 py-4 border-b border-base-content/10 bg-base-100 shrink-0">
<h3 className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-primary via-accent to-secondary">
+69 -71
View File
@@ -167,85 +167,83 @@ export default function EnkaImport() {
};
return (
<div className="bg-base-100 p-4 sm:p-6 rounded-2xl">
<div className="max-w-7xl mx-auto space-y-6">
{/* Header */}
<div className="space-y-4">
<h1 className="text-base-content text-xl sm:text-2xl font-bold">HSR UID</h1>
<div className="w-full space-y-6">
{/* Header */}
<div className="space-y-4">
<h1 className="text-base-content text-xl sm:text-2xl font-bold">HSR UID</h1>
<div className="flex flex-wrap gap-3 items-center">
<input
type="text"
value={uidInput}
onChange={(e) => setUidInput(e.target.value)}
className="input input-bordered w-full max-w-xs rounded-xl bg-base-200 border-base-300 text-sm focus:border-primary"
placeholder="Enter UID"
/>
<button onClick={handlerFetchData} className="btn btn-sm btn-success rounded-xl font-bold">
{transI18n("getData")}
<div className="flex flex-wrap gap-3 items-center">
<input
type="text"
value={uidInput}
onChange={(e) => setUidInput(e.target.value)}
className="input input-bordered w-full max-w-xs rounded-xl bg-base-200 border-base-300 text-sm focus:border-primary"
placeholder="Enter UID"
/>
<button onClick={handlerFetchData} className="btn btn-sm btn-success rounded-xl font-bold">
{transI18n("getData")}
</button>
{selectedCharacters.length > 0 && (
<button onClick={handleImport} className="btn btn-sm btn-primary rounded-xl font-bold shadow-xs">
{transI18n("import")}
</button>
{selectedCharacters.length > 0 && (
<button onClick={handleImport} className="btn btn-sm btn-primary rounded-xl font-bold shadow-xs">
{transI18n("import")}
</button>
)}
</div>
{Error && (
<div className="text-error text-sm font-semibold mt-2">😭 {Error}</div>
)}
{/* Player Info */}
{enkaData && (
<div className="bg-base-200 p-4 rounded-xl border border-base-300 text-base-content space-y-1">
<div className="text-sm font-semibold">Name: <span className="font-bold text-primary">{enkaData.detailInfo.nickname}</span></div>
<div className="text-sm font-semibold">UID: <span className="font-mono">{enkaData.detailInfo.uid}</span></div>
<div className="text-sm font-semibold">Level: <span className="font-bold">{enkaData.detailInfo.level}</span></div>
</div>
)}
{/* Selection Info */}
<div className="flex flex-wrap items-center justify-between gap-3 bg-base-200 border border-base-300 p-3.5 rounded-2xl shadow-xs">
<div className="flex items-center gap-2">
<span className="text-xs sm:text-sm font-bold text-base-content">
{transI18n("selectedCharacters")}:
</span>
<span className="badge badge-primary font-mono font-bold text-xs">
{selectedCharacters.length}
</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={clearSelection}
className="btn btn-xs sm:btn-sm btn-ghost text-error hover:bg-error/10 border border-error/30 rounded-xl"
>
{transI18n("clearAll")}
</button>
<button
onClick={selectAll}
className="btn btn-xs sm:btn-sm btn-ghost text-primary hover:bg-primary/10 border border-primary/30 rounded-xl"
>
{transI18n("selectAll")}
</button>
</div>
</div>
</div>
{isLoading && (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
{Error && (
<div className="text-error text-sm font-semibold mt-2">😭 {Error}</div>
)}
{/* Player Info */}
{enkaData && (
<div className="bg-base-200 p-4 rounded-xl border border-base-300 text-base-content space-y-1">
<div className="text-sm font-semibold">Name: <span className="font-bold text-primary">{enkaData.detailInfo.nickname}</span></div>
<div className="text-sm font-semibold">UID: <span className="font-mono">{enkaData.detailInfo.uid}</span></div>
<div className="text-sm font-semibold">Level: <span className="font-bold">{enkaData.detailInfo.level}</span></div>
</div>
)}
{/* Character Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{validCharacters.map((character) => (
<CharacterInfoCard
key={character.avatarId}
character={toCharacterInfoCard(character)}
selectedCharacters={selectedCharacters}
onCharacterToggle={handleCharacterToggle}
/>
))}
{/* Selection Info */}
<div className="flex flex-wrap items-center justify-between gap-3 bg-base-200 border border-base-300 p-3.5 rounded-2xl shadow-xs">
<div className="flex items-center gap-2">
<span className="text-xs sm:text-sm font-bold text-base-content">
{transI18n("selectedCharacters")}:
</span>
<span className="badge badge-primary font-mono font-bold text-xs">
{selectedCharacters.length}
</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={clearSelection}
className="btn btn-xs sm:btn-sm btn-ghost text-error hover:bg-error/10 border border-error/30 rounded-xl"
>
{transI18n("clearAll")}
</button>
<button
onClick={selectAll}
className="btn btn-xs sm:btn-sm btn-ghost text-primary hover:bg-primary/10 border border-primary/30 rounded-xl"
>
{transI18n("selectAll")}
</button>
</div>
</div>
</div>
{isLoading && (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
</div>
)}
{/* Character Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 sm:gap-6">
{validCharacters.map((character) => (
<CharacterInfoCard
key={character.avatarId}
character={toCharacterInfoCard(character)}
selectedCharacters={selectedCharacters}
onCharacterToggle={handleCharacterToggle}
/>
))}
</div>
</div>
);
}
+59 -61
View File
@@ -189,74 +189,72 @@ export default function FreeSRImport() {
}
return (
<div className="bg-base-100 p-4 sm:p-6 rounded-2xl">
<div className="max-w-7xl mx-auto space-y-6">
{/* Header */}
<div className="space-y-4">
<h1 className="text-base-content text-xl sm:text-2xl font-bold">{transI18n("freeSRImport")}</h1>
<div className="w-full space-y-6">
{/* Header */}
<div className="space-y-4">
<h1 className="text-base-content text-xl sm:text-2xl font-bold">{transI18n("freeSRImport")}</h1>
<div className="flex flex-wrap gap-4 items-center">
<fieldset className="fieldset">
<legend className="fieldset-legend text-xs font-semibold">{transI18n("pickAFile")}</legend>
<input type="file" accept=".json" className="file-input file-input-sm file-input-bordered rounded-xl" onChange={handlerReadFile} />
<label className="label text-[11px] text-base-content/60">{transI18n("onlySupportFreeSRJsonFile")}</label>
</fieldset>
<div className="flex flex-wrap gap-4 items-center">
<fieldset className="fieldset">
<legend className="fieldset-legend text-xs font-semibold">{transI18n("pickAFile")}</legend>
<input type="file" accept=".json" className="file-input file-input-sm file-input-bordered rounded-xl" onChange={handlerReadFile} />
<label className="label text-[11px] text-base-content/60">{transI18n("onlySupportFreeSRJsonFile")}</label>
</fieldset>
{selectedCharacters.length > 0 && (
<button onClick={handleImport} className="btn btn-sm btn-primary rounded-xl font-bold shadow-xs">
{transI18n("import")}
</button>
)}
</div>
{Error && (
<div className="text-error text-sm font-semibold mt-2">😭 {Error}</div>
{selectedCharacters.length > 0 && (
<button onClick={handleImport} className="btn btn-sm btn-primary rounded-xl font-bold shadow-xs">
{transI18n("import")}
</button>
)}
{/* Selection Info */}
<div className="flex flex-wrap items-center justify-between gap-3 bg-base-200 border border-base-300 p-3.5 rounded-2xl shadow-xs">
<div className="flex items-center gap-2">
<span className="text-xs sm:text-sm font-bold text-base-content">
{transI18n("selectedCharacters")}:
</span>
<span className="badge badge-primary font-mono font-bold text-xs">
{selectedCharacters.length}
</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={clearSelection}
className="btn btn-xs sm:btn-sm btn-ghost text-error hover:bg-error/10 border border-error/30 rounded-xl"
>
{transI18n("clearAll")}
</button>
<button
onClick={selectAll}
className="btn btn-xs sm:btn-sm btn-ghost text-primary hover:bg-primary/10 border border-primary/30 rounded-xl"
>
{transI18n("selectAll")}
</button>
</div>
</div>
</div>
{isLoading && (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
</div>
{Error && (
<div className="text-error text-sm font-semibold mt-2">😭 {Error}</div>
)}
{/* Character Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{validFreeSRData && Object.values(validFreeSRData.avatars).filter(it => mapAvatar?.[it.avatar_id]).map((character) => {
return (
<CharacterInfoCard
key={character.avatar_id}
character={toCharacterInfoCard(validFreeSRData, character)}
selectedCharacters={selectedCharacters}
onCharacterToggle={handleCharacterToggle}
/>
)
})}
{/* Selection Info */}
<div className="flex flex-wrap items-center justify-between gap-3 bg-base-200 border border-base-300 p-3.5 rounded-2xl shadow-xs">
<div className="flex items-center gap-2">
<span className="text-xs sm:text-sm font-bold text-base-content">
{transI18n("selectedCharacters")}:
</span>
<span className="badge badge-primary font-mono font-bold text-xs">
{selectedCharacters.length}
</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={clearSelection}
className="btn btn-xs sm:btn-sm btn-ghost text-error hover:bg-error/10 border border-error/30 rounded-xl"
>
{transI18n("clearAll")}
</button>
<button
onClick={selectAll}
className="btn btn-xs sm:btn-sm btn-ghost text-primary hover:bg-primary/10 border border-primary/30 rounded-xl"
>
{transI18n("selectAll")}
</button>
</div>
</div>
</div>
{isLoading && (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
</div>
)}
{/* Character Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 sm:gap-6">
{validFreeSRData && Object.values(validFreeSRData.avatars).filter(it => mapAvatar?.[it.avatar_id]).map((character) => {
return (
<CharacterInfoCard
key={character.avatar_id}
character={toCharacterInfoCard(validFreeSRData, character)}
selectedCharacters={selectedCharacters}
onCharacterToggle={handleCharacterToggle}
/>
)
})}
</div>
</div>
)
}
+262 -33
View File
@@ -15,6 +15,7 @@ import useDetailDataStore from '@/stores/detailDataStore';
import useCurrentDataStore from '@/stores/currentDataStore';
import { getLocaleName } from '@/helper';
import { useShallow } from 'zustand/react/shallow';
import { Copy, Download, Image as ImageIcon } from 'lucide-react';
export default function ShowCaseInfo() {
@@ -36,6 +37,8 @@ export default function ShowCaseInfo() {
useShallow((state) => ({ avatars: state.avatars }))
)
const [avgColor, setAvgColor] = useState('#222');
const [isSaving, setIsSaving] = useState(false);
const [isCopyingImage, setIsCopyingImage] = useState(false);
const imgRef = useRef(null);
const cardRef = useRef(null)
const { locale } = useLocaleStore(
@@ -43,31 +46,56 @@ export default function ShowCaseInfo() {
)
const transI18n = useTranslations("DataPage")
const handleSaveImage = useCallback(() => {
const handleSaveImage = useCallback(async () => {
if (cardRef.current === null || !avatarSelected) {
toast.error("Avatar showcase not found!");
return;
}
if (isSaving) return;
import("html2canvas-pro")
.then(({ default: html2canvas }) =>
html2canvas(cardRef.current!, {
scale: 2,
backgroundColor: "#000000",
allowTaint: false,
useCORS: true
})
)
.then((canvas: HTMLCanvasElement) => {
setIsSaving(true);
try {
const { default: html2canvas } = await import("html2canvas-pro");
const canvas = await html2canvas(cardRef.current!, {
scale: 2,
backgroundColor: "#000000",
allowTaint: false,
useCORS: true,
logging: false,
width: 1600,
height: 650,
windowWidth: 1600,
windowHeight: 650,
onclone: (clonedDoc) => {
const clonedCard = clonedDoc.querySelector('[data-showcase-card="true"]') as HTMLElement | null;
if (clonedCard) {
clonedCard.style.transform = "none";
clonedCard.style.width = "1600px";
clonedCard.style.minHeight = "650px";
}
}
});
canvas.toBlob((blob) => {
if (!blob) {
toast.error("Failed to generate image!");
setIsSaving(false);
return;
}
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = `${getNameChar(locale, transI18n, avatarSelected)}_showcase.png`;
link.href = canvas.toDataURL("image/png");
link.href = url;
link.click();
})
.catch(() => {
toast.error("Error generating showcase card!");
});
}, [avatarSelected, locale, transI18n]);
URL.revokeObjectURL(url);
setIsSaving(false);
toast.success(locale === "vi" ? "Đã lưu ảnh thành công!" : "Image saved successfully!");
}, "image/png");
} catch {
toast.error("Error generating showcase card!");
setIsSaving(false);
}
}, [avatarSelected, locale, transI18n, isSaving]);
useEffect(() => {
if (!avatarSelected) return;
@@ -512,6 +540,163 @@ export default function ShowCaseInfo() {
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
}, [])
const wrapperRef = useRef<HTMLDivElement>(null);
const [scale, setScale] = useState(1);
useEffect(() => {
if (!wrapperRef.current) return;
const updateScale = () => {
if (wrapperRef.current) {
const containerWidth = wrapperRef.current.clientWidth;
const baseWidth = 1600;
const newScale = Math.min(1, containerWidth / baseWidth);
setScale(newScale);
}
};
updateScale();
const resizeObserver = new ResizeObserver(updateScale);
resizeObserver.observe(wrapperRef.current);
return () => resizeObserver.disconnect();
}, []);
const handleCopyBuildText = useCallback(() => {
if (!avatarSelected || !avatarData) {
toast.error("Avatar not found!");
return;
}
const charName = getNameChar(locale, transI18n, avatarSelected);
const charLevel = `Lv. ${avatarData.level}/80`;
const eidolonRank = `E${avatarData.data?.rank ?? 0}`;
// Light cone info
let lcText = "None";
if (avatarProfile?.lightcone && mapLightCone?.[avatarProfile.lightcone.item_id]) {
const lcData = mapLightCone[avatarProfile.lightcone.item_id];
const lcName = getLocaleName(locale, lcData.Name) || lcData.Name?.en || "Light Cone";
const lcRank = `S${avatarProfile.lightcone.rank || 1}`;
const lcLevel = `Lv. ${avatarProfile.lightcone.level || 80}/80`;
lcText = `${lcName} (${lcRank}, ${lcLevel})`;
}
// Stats summary
const statsList: string[] = [];
if (characterStats) {
const mainStatKeys = ["HP", "ATK", "DEF", "SPD", "CRITRate", "CRITDmg", "BreakEffect", "EnergyRate", "EffectHitRate", "EffectRES"];
for (const key of mainStatKeys) {
const stat = characterStats[key];
if (stat) {
const valFormatted = stat.round === 0
? Math.round(stat.value).toLocaleString()
: stat.value.toFixed(stat.round);
statsList.push(`• ${stat.name}: ${valFormatted}${stat.unit}`);
}
}
}
// Relic sets
const relicSetList: string[] = [];
if (relicEffects && relicEffects.length > 0) {
for (const effect of relicEffects) {
const relicSetData = mapRelicSet?.[effect.key];
if (relicSetData) {
const setName = getLocaleName(locale, relicSetData.Name) || relicSetData.Name?.en || "Relic Set";
relicSetList.push(`• ${setName} (${effect.count}pc)`);
}
}
}
// Individual Relics (Slots 1-6)
const relicSlotNames = ["Head", "Hands", "Body", "Feet", "Planar Sphere", "Link Rope"];
const relicDetails: string[] = [];
if (relicStats && relicStats.length > 0) {
relicStats.forEach((r, idx) => {
if (!r) return;
const slotName = relicSlotNames[idx] || `Slot ${idx + 1}`;
const mainStatStr = r.mainAffix ? `${r.mainAffix.detail?.name || ""}: +${r.mainAffix.valueAffix}${r.mainAffix.detail?.unit || ""}` : "";
const subAffixesStr = r.subAffix?.filter(Boolean).map(s => `${s?.detail?.name || ""}+${s?.valueAffix}${s?.detail?.unit || ""}`).join(", ") || "";
relicDetails.push(` - ${slotName}: ${mainStatStr} | Subs: ${subAffixesStr}`);
});
}
const lines = [
`=== ${charName} (${eidolonRank} | ${charLevel}) ===`,
`Light Cone: ${lcText}`,
``,
`[Attributes]`,
...statsList,
``,
`[Relic Sets]`,
relicSetList.length > 0 ? relicSetList.join("\n") : "None",
];
if (relicDetails.length > 0) {
lines.push(``, `[Relic Details]`, ...relicDetails);
}
const textToCopy = lines.join("\n");
navigator.clipboard.writeText(textToCopy)
.then(() => {
toast.success(locale === "vi" ? "Đã sao chép thông tin build!" : "Build info copied to clipboard!");
})
.catch(() => {
toast.error(locale === "vi" ? "Lỗi khi sao chép!" : "Failed to copy build info!");
});
}, [avatarSelected, avatarData, avatarProfile, mapLightCone, locale, transI18n, characterStats, relicEffects, mapRelicSet, relicStats]);
const handleCopyImage = useCallback(async () => {
if (cardRef.current === null || !avatarSelected) {
toast.error("Avatar showcase not found!");
return;
}
if (isCopyingImage) return;
setIsCopyingImage(true);
try {
const { default: html2canvas } = await import("html2canvas-pro");
const canvas = await html2canvas(cardRef.current!, {
scale: 2,
backgroundColor: "#000000",
allowTaint: false,
useCORS: true,
logging: false,
width: 1600,
height: 650,
windowWidth: 1600,
windowHeight: 650,
onclone: (clonedDoc) => {
const clonedCard = clonedDoc.querySelector('[data-showcase-card="true"]') as HTMLElement | null;
if (clonedCard) {
clonedCard.style.transform = "none";
clonedCard.style.width = "1600px";
clonedCard.style.minHeight = "650px";
}
}
});
canvas.toBlob((blob) => {
if (!blob) {
toast.error("Failed to create image blob");
setIsCopyingImage(false);
return;
}
navigator.clipboard.write([
new ClipboardItem({ "image/png": blob })
]).then(() => {
toast.success(locale === "vi" ? "Đã sao chép ảnh vào Clipboard!" : "Image copied to clipboard!");
}).catch(() => {
toast.error(locale === "vi" ? "Trình duyệt không cho phép sao chép ảnh trực tiếp!" : "Clipboard write failed!");
}).finally(() => {
setIsCopyingImage(false);
});
}, "image/png");
} catch {
toast.error("Error generating showcase image!");
setIsCopyingImage(false);
}
}, [avatarSelected, locale, isCopyingImage]);
return (
<div className="w-full space-y-4">
<div className="bg-base-100 rounded-2xl p-4 sm:p-6 border border-base-300 shadow-sm space-y-6">
@@ -523,27 +708,71 @@ export default function ShowCaseInfo() {
{transI18n("showcaseCard")}
</span>
</h2>
<button
className="btn btn-sm btn-primary rounded-xl font-bold shadow-xs active-press"
onClick={handleSaveImage}
>
{transI18n("save")}
</button>
<div className="flex items-center gap-2">
<button
className="btn btn-sm btn-ghost border border-base-content/20 rounded-xl font-bold shadow-xs active-press gap-1.5 hover:bg-base-200"
onClick={handleCopyBuildText}
title="Copy build summary as text"
>
<Copy className="w-4 h-4" />
<span>{locale === "vi" ? "Sao chép Text" : "Copy Text"}</span>
</button>
<button
disabled={isCopyingImage}
className="btn btn-sm btn-ghost border border-base-content/20 rounded-xl font-bold shadow-xs active-press gap-1.5 hover:bg-base-200"
onClick={handleCopyImage}
title="Copy card image to clipboard"
>
{isCopyingImage ? (
<span className="loading loading-spinner loading-xs"></span>
) : (
<ImageIcon className="w-4 h-4" />
)}
<span>{isCopyingImage ? (locale === "vi" ? "Đang xử lý..." : "Processing...") : (locale === "vi" ? "Sao chép Ảnh" : "Copy Image")}</span>
</button>
<button
disabled={isSaving}
className="btn btn-sm btn-primary rounded-xl font-bold shadow-xs active-press gap-1.5"
onClick={handleSaveImage}
>
{isSaving ? (
<span className="loading loading-spinner loading-xs"></span>
) : (
<Download className="w-4 h-4" />
)}
<span>{isSaving ? (locale === "vi" ? "Đang lưu..." : "Saving...") : transI18n("save")}</span>
</button>
</div>
</div>
<div className="overflow-auto rounded-2xl">
<div ref={wrapperRef} className="w-full flex justify-center items-start overflow-hidden">
<div
ref={cardRef}
className="relative min-h-162.5 w-400 rounded-3xl transition-all duration-500 overflow-hidden text-white"
style={{
backgroundColor: `${applyBrightness(avgColor, 0.3)}`,
backdropFilter: "blur(50px)",
WebkitBackdropFilter: "blur(50px)",
width: `${1600 * scale}px`,
height: `${650 * scale}px`,
position: "relative",
overflow: "hidden",
borderRadius: `${1.5 * scale}rem`,
flexShrink: 0,
}}
>
<div className="absolute bottom-2 left-4 z-10">
<span className="shadow-black [text-shadow:1px_1px_2px_var(--tw-shadow-color)]"></span>
</div>
<div
ref={cardRef}
data-showcase-card="true"
className="relative min-h-162.5 w-400 rounded-3xl transition-all duration-500 overflow-hidden text-white select-text"
style={{
width: "1600px",
minHeight: "650px",
transform: `scale(${scale})`,
transformOrigin: "top left",
backgroundColor: `${applyBrightness(avgColor, 0.3)}`,
backdropFilter: "blur(50px)",
WebkitBackdropFilter: "blur(50px)",
}}
>
<div className="absolute bottom-2 left-4 z-10">
<span className="shadow-black [text-shadow:1px_1px_2px_var(--tw-shadow-color)]"></span>
</div>
<div className="flex flex-row items-center">
<div
className="relative min-h-162.5 w-[24%]"
@@ -1026,10 +1255,10 @@ export default function ShowCaseInfo() {
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}