Firefly-Shelter/Firefly_Srtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: NEw ui
All checks were successful
Gitea Auto Deploy / Deploy-Container (push) Successful in 55s
Details

Browse Source
This commit is contained in:
Azen Kain
2026-02-01 19:16:37 +07:00
parent c278b8bce0
commit 12634fab0a
2 changed files with 68 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/data/rank_icon.json
View File

@@ -408,20 +408,20 @@
"https://starrail.honeyhunterworld.com/img/eidolon/vincit-omnia-veritas-eidolon_icon_small.webp"
],
"1306": [
"https://starrail.honeyhunterworld.com/img/eidolon/suspension-of-disbelief-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/purely-fictitious-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/pipedream-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/life-is-a-gamble-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/parallax-truth-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/narrative-polysemy-eidolon-2_icon_small.webp"
"https://starrail.honeyhunterworld.com/img/eidolon/suspension-of-disbelief-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/purely-fictitious-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/pipedream-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/life-is-a-gamble-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/parallax-truth-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/narrative-polysemy-eidolon_icon_small.webp"
],
"1307": [
"https://starrail.honeyhunterworld.com/img/eidolon/seven-pillars-of-wisdom-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/weep-not-for-me-my-lamb-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/as-above-so-below-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/in-tears-we-gift-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/linnutee-flyway-eidolon-2_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/pantheon-merciful-masses-pitiful-eidolon-2_icon_small.webp"
"https://starrail.honeyhunterworld.com/img/eidolon/seven-pillars-of-wisdom-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/weep-not-for-me-my-lamb-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/as-above-so-below-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/in-tears-we-gift-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/linnutee-flyway-eidolon_icon_small.webp",
"https://starrail.honeyhunterworld.com/img/eidolon/pantheon-merciful-masses-pitiful-eidolon_icon_small.webp"
],
"1308": [
"https://starrail.honeyhunterworld.com/img/eidolon/silenced-sky-spake-sooth-eidolon_icon_small.webp",

65
src/components/showcaseCard/index.tsx
View File

@@ -59,7 +59,6 @@ export default function ShowCaseInfo() {
});
}, [avatarSelected, locale, transI18n]);
useEffect(() => {
if (!avatarSelected?.id) return;
const fac = new FastAverageColor();
@@ -570,31 +569,69 @@ export default function ShowCaseInfo() {
}}
>
<div className="absolute top-4 left-4">
<div className="absolute top-4 left-3">
{avatarSelected && avatarInfo && avatarData?.data && typeof avatarData?.data?.rank === "number" && (
<div className="flex flex-col">
<div className="flex flex-col items-center gap-2 py-2">
{avatarInfo?.RankIcon?.map((src, index) => {
const isActive = avatarData?.data?.rank > index;
return (
<div key={index} className="relative my-1 flex rounded-full">
<div
key={index}
className="relative flex items-center justify-center"
style={{
transition: "transform 0.3s ease, filter 0.3s ease",
}}
>
{isActive && (
<div
className="absolute inset-0 rounded-full pointer-events-none"
style={{
background: "radial-gradient(circle, rgba(250,204,21,0.35) 0%, transparent 70%)",
filter: "blur(6px)",
zIndex: 0,
}}
/>
)}
<div
className="relative rounded-full p-[2.5px]"
style={{
background: isActive
? "linear-gradient(135deg, #facc15, #f59e0b, #facc15)"
: "rgba(255,255,255,0.15)",
boxShadow: isActive
? "0 0 10px rgba(250,204,21,0.5), 0 0 24px rgba(250,204,21,0.2)"
: "0 2px 6px rgba(0,0,0,0.4)",
transition: "background 0.3s ease, box-shadow 0.3s ease",
zIndex: 1,
}}
>
<div
className="rounded-full overflow-hidden"
style={{
padding: "2px",
background: "#1e2230",
}}
>
<NextImage
src={src ?? null}
alt="Rank Icon"
width={50}
height={50}
className="h-auto w-12 transition-all duration-300 ease-in-out p-px rounded-full"
width={48}
height={48}
className="block rounded-full object-cover"
style={{
opacity: isActive ? 1 : 0.6,
width: "44px",
height: "44px",
filter: isActive
? 'grayscale(0) drop-shadow(0 0 8px rgba(255,215,0,0.5))'
: 'grayscale(1)',
border: '2px solid',
borderColor: isActive ? '#facc15' : '#ffffff', // tailwind yellow-400 = #facc15
boxShadow: isActive ? '0 0 10px rgba(250,204,21,0.5)' : undefined, // mimic shadow-yellow-400/50
? "grayscale(0) brightness(1.05) saturate(1.1)"
: "grayscale(0.7) brightness(0.55)",
transition: "filter 0.3s ease",
}}
/>
</div>
</div>
</div>
);
})}
</div>