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

Feat: more ui
All checks were successful
Gitea Auto Deploy / Deploy-Container (push) Successful in 2m4s
Details

Browse Source
This commit is contained in:
Azen Kain
2025-10-04 17:14:04 +07:00
parent f742815ed0
commit 7f56bde101
2 changed files with 131 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/skillsInfo/index.tsx
View File

@@ -170,53 +170,101 @@ export default function SkillsInfo() {
return null
}
return (
<div
key={`${btn.id} + ${index}`}
id={btn.id}
className={`
<div
key={`${btn.id} + ${index}`}
id={btn.id}
className={`
absolute rounded-full border border-black
bg-no-repeat bg-contain
cursor-pointer transition-all duration-200 ease-in-out
shadow-[0_0_5px_white] flex justify-center items-center
hover:scale-110
hover:scale-110z-10
${btn.size === "small" ? "w-[6vw] h-[6vw] md:w-[2vw] md:h-[2vw] bg-white" : ""}
${btn.size === "medium" ? "w-[8vw] h-[8vw] md:w-[3vw] md:h-[3vw] bg-white" : ""}
${btn.size === "big" ? "w-[9vw] h-[9vw] md:w-[3.5vw] md:h-[3.5vw] bg-black" : ""}
${btn.size === "special" ? "w-[9vw] h-[9vw] md:w-[3.5vw] md:h-[3.5vw] bg-white" : ""}
${btn.size === "memory" ? "w-[9vw] h-[9vw] md:w-[3.5vw] md:h-[3.5vw] bg-white" : ""}
${skillSelected === btn.id ? "border-4 border-primary" : ""}
${avatarData?.data.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID] === 0 ? "opacity-50 cursor-not-allowed" : ""}
${!avatarData?.data.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID]
? "opacity-50 cursor-not-allowed"
: ""}
`}
onClick={() => {
setSkillSelected(btn.id === skillSelected ? null : btn.id)
}}
style={{
left: btn.left,
top: btn.top,
transform: "translate(-50%, -50%)",
}}
>
<Image
src={getImageSkill(avatarInfo?.SkillTrees?.[btn.id]?.["1"]?.Icon, avatarSkillTree?.[btn.id]?.["1"]?.StatusAddList[0]) || ""}
alt={btn.id.replaceAll("Point", "")}
priority={true}
width={124}
height={124}
onClick={() => {
setSkillSelected(btn.id === skillSelected ? null : btn.id)
}}
style={{
filter: btn.size !== "big"
? 'brightness(0%)'
: 'brightness(200%)'
left: btn.left,
top: btn.top,
transform: "translate(-50%, -50%)",
}}
onError={(e) => {
e.currentTarget.onerror = null; // tránh loop
e.currentTarget.src = getImageSkill(avatarInfo?.SkillTrees?.[btn.id]?.["1"]?.Icon, avatarSkillTree?.[btn.id]?.["1"]?.StatusAddList[0], "homdgcat") || "";
}}
/>
{btn.size === "big" && (
<p className="text-xs md:text-base font-bold text-center rounded-full absolute bottom-[-1.4vw] left-1/2 transform -translate-x-1/2">{`${avatarData?.data.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID] || 0}/${avatarSkillTree?.[btn.id]?.["1"]?.MaxLevel}`}</p>
)}
</div>
>
<Image
src={getImageSkill(avatarInfo?.SkillTrees?.[btn.id]?.["1"]?.Icon, avatarSkillTree?.[btn.id]?.["1"]?.StatusAddList[0]) || ""}
alt={btn.id.replaceAll("Point", "")}
priority={true}
width={124}
height={124}
style={{
filter: btn.size !== "big" ? "brightness(0%)" : ""
}}
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = getImageSkill(avatarInfo?.SkillTrees?.[btn.id]?.["1"]?.Icon, avatarSkillTree?.[btn.id]?.["1"]?.StatusAddList[0], "homdgcat") || "";
}}
/>
{btn.size === "big" && (
<p className="
z-12 text-sm sm:text-xs lg:text-sm xl:text-base 2xl:text-2xl
font-bold text-center rounded-full absolute
translate-y-full mt-1
bg-base-300 px-1
left-1/2 transform -translate-x-1/2
">
{`${avatarData?.data.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID] || 0}/${avatarSkillTree?.[btn.id]?.["1"]?.MaxLevel}`}
</p>
)}
{btn.size === "special" && (
<div
style={{
position: "absolute",
inset: 0,
backgroundColor: "#4a6eff",
mixBlendMode: "screen",
opacity: 0.8,
borderRadius: "50%"
}}
/>
)}
{btn.size === "memory" && (
<div
style={{
position: "absolute",
inset: 0,
backgroundColor: "#9a89ff",
mixBlendMode: "screen",
opacity: 0.8,
borderRadius: "50%"
}}
/>
)}
{btn.size === "big" && (
<div
style={{
position: "absolute",
inset: 0,
backgroundColor: "#f5e4b0",
mixBlendMode: "screen",
opacity: 0.3,
borderRadius: "50%"
}}
/>
)}
</div>
)})}
)
})}
</div>
)}
</div>
@@ -258,6 +306,18 @@ export default function SkillsInfo() {
checked={avatarData?.data.skills?.[skillInfo?.PointID] === 1}
className="toggle toggle-success"
onChange={(e) => {
if (traceButtons?.find((btn) => btn.id === skillSelected)?.size === "special") {
if (e.target.checked) {
const newData = cloneDeep(avatarData)
newData.data.skills[skillInfo?.PointID] = 1
setAvatar(newData)
return
}
const newData = cloneDeep(avatarData)
delete newData.data.skills[skillInfo?.PointID]
setAvatar(newData)
return
}
handlerChangeStatusTrace(e.target.checked)
}}
/>

71
src/constant/traceConstant.ts
View File

@@ -2,10 +2,10 @@
export const traceButtonsInfo: Record<string, { id: string, size: string, left: string, top: string }[]> = {
Knight: [
{ id: 'Point03', size: 'big', left: '51%', top: '52%' },
{ id: 'Point04', size: 'big', left: '51%', top: '35%' },
{ id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '67%', top: '55%' },
{ id: 'Point05', size: 'big', left: '51%', top: '69.5%' },
{ id: 'Point05', size: 'big', left: '50%', top: '69.5%' },
{ id: 'Point01', size: 'big', left: '33%', top: '55%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '21.5%' },
{ id: 'Point07', size: 'medium', left: '71%', top: '86%' },
@@ -22,11 +22,11 @@ export const traceButtonsInfo: Record<string, { id: string, size: string, left:
{ id: 'Point11', size: 'small', left: '11%', top: '70%' }
],
Mage: [
{ id: 'Point03', size: 'big', left: '50.5%', top: '53.5%' },
{ id: 'Point04', size: 'big', left: '51%', top: '32%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '53.5%' },
{ id: 'Point05', size: 'big', left: '51%', top: '84%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '53.5%' },
{ id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '50%', top: '30%' },
{ id: 'Point02', size: 'big', left: '67%', top: '52%' },
{ id: 'Point05', size: 'big', left: '50%', top: '82.5%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '52%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '14.5%' },
{ id: 'Point07', size: 'medium', left: '80.5%', top: '53%' },
{ id: 'Point06', size: 'medium', left: '19.5%', top: '53%' },
@@ -42,10 +42,10 @@ export const traceButtonsInfo: Record<string, { id: string, size: string, left:
{ id: 'Point12', size: 'small', left: '12%', top: '41.5%' }
],
Priest: [
{ id: 'Point03', size: 'big', left: '51%', top: '49%' },
{ id: 'Point04', size: 'big', left: '51%', top: '31%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '46%' },
{ id: 'Point05', size: 'big', left: '51%', top: '66%' },
{ id: 'Point03', size: 'big', left: '50%', top: '47%' },
{ id: 'Point04', size: 'big', left: '50%', top: '30%' },
{ id: 'Point02', size: 'big', left: '67%', top: '46%' },
{ id: 'Point05', size: 'big', left: '50%', top: '65%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '46%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '13%' },
{ id: 'Point07', size: 'medium', left: '68%', top: '79%' },
@@ -62,14 +62,14 @@ export const traceButtonsInfo: Record<string, { id: string, size: string, left:
{ id: 'Point15', size: 'small', left: '20%', top: '39%' }
],
Rogue: [
{ id: 'Point03', size: 'big', left: '51%', top: '53%' },
{ id: 'Point04', size: 'big', left: '51%', top: '36%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '46%' },
{ id: 'Point05', size: 'big', left: '51%', top: '70%' },
{ id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '67%', top: '46%' },
{ id: 'Point05', size: 'big', left: '50%', top: '69%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '46%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '22%' },
{ id: 'Point07', size: 'medium', left: '68%', top: '71%' },
{ id: 'Point06', size: 'medium', left: '32%', top: '71%' },
{ id: 'Point06', size: 'medium', left: '30%', top: '71%' },
{ id: 'Point16', size: 'small', left: '50%', top: '9%' },
{ id: 'Point18', size: 'small', left: '66%', top: '14%' },
{ id: 'Point17', size: 'small', left: '34%', top: '14%' },
@@ -82,10 +82,10 @@ export const traceButtonsInfo: Record<string, { id: string, size: string, left:
{ id: 'Point11', size: 'small', left: '7%', top: '44%' }
],
Shaman: [
{ id: 'Point03', size: 'big', left: '51%', top: '57%' },
{ id: 'Point04', size: 'big', left: '51%', top: '36%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '41%' },
{ id: 'Point05', size: 'big', left: '51%', top: '75%' },
{ id: 'Point03', size: 'big', left: '50%', top: '56%' },
{ id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '67%', top: '41%' },
{ id: 'Point05', size: 'big', left: '50%', top: '74%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '41%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '22%' },
{ id: 'Point07', size: 'medium', left: '89.5%', top: '56.5%' },
@@ -102,11 +102,11 @@ export const traceButtonsInfo: Record<string, { id: string, size: string, left:
{ id: 'Point11', size: 'small', left: '20%', top: '31%' }
],
Warlock: [
{ id: 'Point03', size: 'big', left: '51%', top: '44%' },
{ id: 'Point04', size: 'big', left: '51%', top: '25%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '47%' },
{ id: 'Point05', size: 'big', left: '51%', top: '62%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '47%' },
{ id: 'Point03', size: 'big', left: '50%', top: '44%' },
{ id: 'Point04', size: 'big', left: '50%', top: '24%' },
{ id: 'Point02', size: 'big', left: '67%', top: '47%' },
{ id: 'Point05', size: 'big', left: '50%', top: '61%' },
{ id: 'Point01', size: 'big', left: '33%', top: '47%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '8%' },
{ id: 'Point07', size: 'medium', left: '81.5%', top: '37%' },
{ id: 'Point06', size: 'medium', left: '20.5%', top: '37%' },
@@ -122,10 +122,10 @@ export const traceButtonsInfo: Record<string, { id: string, size: string, left:
{ id: 'Point12', size: 'small', left: '33%', top: '74%' }
],
Warrior: [
{ id: 'Point03', size: 'big', left: '51%', top: '53%' },
{ id: 'Point04', size: 'big', left: '51%', top: '36%' },
{ id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '69%', top: '48%' },
{ id: 'Point05', size: 'big', left: '51%', top: '70.5%' },
{ id: 'Point05', size: 'big', left: '50%', top: '69%' },
{ id: 'Point01', size: 'big', left: '33%', top: '48%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '22%' },
{ id: 'Point07', size: 'medium', left: '67%', top: '83%' },
@@ -142,27 +142,27 @@ export const traceButtonsInfo: Record<string, { id: string, size: string, left:
{ id: 'Point11', size: 'small', left: '7%', top: '56.5%' }
],
Memory: [
{ id: 'Point03', size: 'big', left: '51%', top: '72%' },
{ id: 'Point03', size: 'big', left: '50%', top: '72%' },
{ id: 'Point04', size: 'big', left: '75%', top: '53%' },
{ id: 'Point02', size: 'big', left: '67%', top: '67%' },
{ id: 'Point05', size: 'big', left: '27%', top: '53%' },
{ id: 'Point01', size: 'big', left: '35%', top: '67%' },
{ id: 'Point08', size: 'medium', left: '34%', top: '34%' },
{ id: 'Point07', size: 'medium', left: '50%', top: '87%' },
{ id: 'Point06', size: 'medium', left: '91%', top: '51%' },
{ id: 'Point06', size: 'medium', left: '90%', top: '50%' },
{ id: 'Point16', size: 'small', left: '27.5%', top: '22%' },
{ id: 'Point17', size: 'small', left: '43%', top: '14%' },
{ id: 'Point18', size: 'small', left: '59%', top: '14%' },
{ id: 'Point19', size: 'big', left: '51%', top: '50%' },
{ id: 'Point20', size: 'big', left: '51%', top: '28%' },
{ id: 'Point19', size: 'memory', left: '50%', top: '48%' },
{ id: 'Point20', size: 'memory', left: '50%', top: '28%' },
{ id: 'Point12', size: 'small', left: '86%', top: '40%' },
{ id: 'Point13', size: 'small', left: '86%', top: '63%' },
{ id: 'Point14', size: 'small', left: '35%', top: '82%' },
{ id: 'Point15', size: 'small', left: '65%', top: '82%' },
{ id: 'Point09', size: 'small', left: '9%', top: '51%' },
{ id: 'Point09', size: 'small', left: '9%', top: '50%' },
{ id: 'Point10', size: 'small', left: '13%', top: '40%' },
{ id: 'Point11', size: 'small', left: '13%', top: '63%' },
{ id: 'Point21', size: 'big', left: '70%', top: '34%'}
{ id: 'Point21', size: 'special', left: '70%', top: '34%'}
]
}
@@ -231,6 +231,7 @@ export const traceLink : Record<string, Record<string, string[]>> = {
},
Memory: {
Point16: ["Point17", "Point18"],
Point08: ["Point16", "Point17", "Point18"],
Point17: ["Point18"],
Point09: ["Point10", "Point11"],
Point07: ["Point14", "Point15"],