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 52s
Details

Browse Source
This commit is contained in:
Azen Kain
2026-03-19 14:30:05 +07:00
parent b90086baca
commit b69a5261ec
3 changed files with 137 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/eidolonsInfo/index.tsx
View File

@@ -7,6 +7,7 @@ import useUserDataStore from "@/stores/userDataStore";
import { useMemo } from "react";
import { useTranslations } from "next-intl";
import useCurrentDataStore from "@/stores/currentDataStore";
import ExtraEffectList from '../extraInfo';
export default function EidolonsInfo() {
@@ -35,58 +36,43 @@ export default function EidolonsInfo() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{Object.entries(charRank || {}).map(([key, rank]) => (
<div key={key}
className="flex flex-col items-center cursor-pointer hover:scale-105"
onClick={() => {
let newRank = Number(key)
if (avatars[avatarSelected?.ID || ""]?.data?.rank == Number(key)) {
newRank = Number(key) - 1
}
setAvatars({ ...avatars, [avatarSelected?.ID || ""]: { ...avatars[avatarSelected?.ID || ""], data: { ...avatars[avatarSelected?.ID || ""].data, rank: newRank } } })
}}
>
<Image
className={`w-60 object-contain mb-2 ${Number(key) <= avatars[avatarSelected?.ID.toString() || ""]?.data?.rank ? "" : "grayscale"}`}
src={`${process.env.CDN_URL}/ui/ui3d/rank/_dependencies/textures/${avatarSelected?.ID}/${avatarSelected?.ID}_Rank_${key}.png`}
alt={`Rank ${key}`}
priority
unoptimized
crossOrigin="anonymous"
width={240}
height={240}
/>
className="flex flex-col items-center"
<div className="text-lg pb-1 flex items-center justify-items-center gap-2">
<span className="inline-block text-indigo-500">{key}.</span>
<ParseText
locale={locale}
text={getLocaleName(locale, rank.Name)}
className="text-center text-base font-normal leading-tight"
>
<div
className="cursor-pointer"
onClick={() => {
let newRank = Number(key)
if (avatars[avatarSelected?.ID || ""]?.data?.rank == Number(key)) {
newRank = Number(key) - 1
}
setAvatars({ ...avatars, [avatarSelected?.ID || ""]: { ...avatars[avatarSelected?.ID || ""], data: { ...avatars[avatarSelected?.ID || ""].data, rank: newRank } } })
}}
>
<Image
className={`w-60 object-contain mb-2 ${Number(key) <= avatars[avatarSelected?.ID.toString() || ""]?.data?.rank ? "" : "grayscale"}`}
src={`${process.env.CDN_URL}/ui/ui3d/rank/_dependencies/textures/${avatarSelected?.ID}/${avatarSelected?.ID}_Rank_${key}.png`}
alt={`Rank ${key}`}
priority
unoptimized
crossOrigin="anonymous"
width={240}
height={240}
/>
<div className="text-lg pb-1 flex items-center justify-items-center gap-2">
<span className="inline-block text-indigo-500">{key}.</span>
<ParseText
locale={locale}
text={getLocaleName(locale, rank.Name)}
className="text-center text-base font-normal leading-tight"
/>
</div>
</div>
<div className="text-sm font-normal">
<div dangerouslySetInnerHTML={{ __html: replaceByParam(getLocaleName(locale, rank.Desc), rank.Param) }} />
{Object.values(rank?.Extra || {}).map((extra) => (
<div
key={extra.ID}
className="mt-3 pl-3 border-l-2 border-primary/30 bg-primary/5 py-2 rounded-r-sm"
>
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
Extra Effect
</span>
<span className="text-sm font-semibold text-primary/80">
{getLocaleName(locale, extra.Name)}
</span>
</div>
<div
className="text-sm leading-relaxed opacity-90"
dangerouslySetInnerHTML={{
__html: replaceByParam(getLocaleName(locale, extra.Desc), extra.Param)
}}
/>
</div>
))}
<ExtraEffectList extras={rank?.Extra} locale={locale} />
</div>
</div>
))}

98
src/components/extraInfo/index.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client"
import { useState } from "react"
import { replaceByParam, getLocaleName } from "@/helper"
import { ExtraEffect } from "@/types"
type Props = {
extras: Record<string, ExtraEffect> | undefined
locale: string
}
export default function ExtraEffectList({ extras, locale }: Props) {
const [openList, setOpenList] = useState(false)
const [openId, setOpenId] = useState<number | null>(null)
if (!extras || Object.keys(extras).length === 0) return null
return (
<div className="mt-3">
<div
className="flex items-center justify-between cursor-pointer bg-primary/10 px-3 py-2 rounded-md"
onClick={() => setOpenList(!openList)}
>
<span className="text-sm font-semibold text-primary">
List Extra Effect ({Object.keys(extras).length})
</span>
<span
className={`transition-transform ${
openList ? "rotate-90" : ""
}`}
>
▶
</span>
</div>
<div
className={`overflow-hidden transition-all duration-300 ${
openList ? "max-h-[500px] mt-2" : "max-h-0"
}`}
>
<div className="flex flex-col gap-2">
{Object.values(extras).map((extra) => {
const isOpen = openId === extra.ID
return (
<div
key={extra.ID}
className="bg-primary/5 rounded-md"
>
<div
className="flex items-center justify-between px-3 py-2 cursor-pointer"
onClick={() =>
setOpenId(isOpen ? null : extra.ID)
}
>
<div className="flex items-center gap-2">
<span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
Extra
</span>
<span className="text-sm font-medium text-primary/80">
{getLocaleName(locale, extra.Name)}
</span>
</div>
<span
className={`transition-transform ${
isOpen ? "rotate-90" : ""
}`}
>
▶
</span>
</div>
<div
className={`overflow-hidden transition-all duration-300 ${
isOpen ? "max-h-40 px-3 pb-2" : "max-h-0"
}`}
>
<div
className="text-sm opacity-90"
dangerouslySetInnerHTML={{
__html: replaceByParam(
getLocaleName(locale, extra.Desc),
extra.Param
)
}}
/>
</div>
</div>
)
})}
</div>
</div>
</div>
)
}

30
src/components/skillsInfo/skillDescription.tsx
View File

@@ -1,5 +1,6 @@
import { getLocaleName, replaceByParam } from "@/helper";
import { AvatarStore, SkillDetail, SkillTreePoint } from "@/types";
import ExtraEffectList from "../extraInfo";
export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
skill: SkillDetail,
@@ -12,8 +13,8 @@ export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
const descHtml = getLocaleName(locale, skill.Desc) || getLocaleName(locale, skill.SimpleDesc);
const extraList = Object.values(skill.Extra).length > 0
? Object.values(skill.Extra)
: Object.values(skill?.SimpleExtra || {});
? skill.Extra
: skill?.SimpleExtra || {};
return (
<div className="flex flex-col gap-2">
@@ -32,28 +33,9 @@ export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
/>
</div>
{extraList.map((extra) => (
<div
key={extra.ID}
className="mt-3 pl-3 border-l-2 border-primary/30 bg-primary/5 py-2 rounded-r-sm"
>
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
Extra Effect
</span>
<span className="text-sm font-semibold text-primary/80">
{getLocaleName(locale, extra.Name)}
</span>
</div>
<div
className="text-sm leading-relaxed opacity-90"
dangerouslySetInnerHTML={{
__html: replaceByParam(getLocaleName(locale, extra.Desc), extra.Param)
}}
/>
</div>
))}
{Object.keys(extraList).length > 0 && (
<ExtraEffectList extras={extraList} locale={locale} />
)}
</div>
);
};