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 null
} }
return ( return (
<div <div
key={`${btn.id} + ${index}`} key={`${btn.id} + ${index}`}
id={btn.id} id={btn.id}
className={` className={`
absolute rounded-full border border-black absolute rounded-full border border-black
bg-no-repeat bg-contain bg-no-repeat bg-contain
cursor-pointer transition-all duration-200 ease-in-out cursor-pointer transition-all duration-200 ease-in-out
shadow-[0_0_5px_white] flex justify-center items-center 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 === "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 === "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 === "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" : ""} ${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={() => { onClick={() => {
setSkillSelected(btn.id === skillSelected ? null : btn.id) 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}
style={{ style={{
filter: btn.size !== "big" left: btn.left,
? 'brightness(0%)' top: btn.top,
: 'brightness(200%)' transform: "translate(-50%, -50%)",
}} }}
onError={(e) => { >
e.currentTarget.onerror = null; // tránh loop <Image
e.currentTarget.src = getImageSkill(avatarInfo?.SkillTrees?.[btn.id]?.["1"]?.Icon, avatarSkillTree?.[btn.id]?.["1"]?.StatusAddList[0], "homdgcat") || ""; src={getImageSkill(avatarInfo?.SkillTrees?.[btn.id]?.["1"]?.Icon, avatarSkillTree?.[btn.id]?.["1"]?.StatusAddList[0]) || ""}
}} alt={btn.id.replaceAll("Point", "")}
/> priority={true}
{btn.size === "big" && ( width={124}
<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> height={124}
)} style={{
</div> 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>
)} )}
</div> </div>
@@ -258,6 +306,18 @@ export default function SkillsInfo() {
checked={avatarData?.data.skills?.[skillInfo?.PointID] === 1} checked={avatarData?.data.skills?.[skillInfo?.PointID] === 1}
className="toggle toggle-success" className="toggle toggle-success"
onChange={(e) => { 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) 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 }[]> = { export const traceButtonsInfo: Record<string, { id: string, size: string, left: string, top: string }[]> = {
Knight: [ Knight: [
{ id: 'Point03', size: 'big', left: '51%', top: '52%' }, { id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '51%', top: '35%' }, { id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '67%', top: '55%' }, { 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: 'Point01', size: 'big', left: '33%', top: '55%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '21.5%' }, { id: 'Point08', size: 'medium', left: '50%', top: '21.5%' },
{ id: 'Point07', size: 'medium', left: '71%', top: '86%' }, { 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%' } { id: 'Point11', size: 'small', left: '11%', top: '70%' }
], ],
Mage: [ Mage: [
{ id: 'Point03', size: 'big', left: '50.5%', top: '53.5%' }, { id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '51%', top: '32%' }, { id: 'Point04', size: 'big', left: '50%', top: '30%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '53.5%' }, { id: 'Point02', size: 'big', left: '67%', top: '52%' },
{ id: 'Point05', size: 'big', left: '51%', top: '84%' }, { id: 'Point05', size: 'big', left: '50%', top: '82.5%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '53.5%' }, { id: 'Point01', size: 'big', left: '33.5%', top: '52%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '14.5%' }, { id: 'Point08', size: 'medium', left: '50%', top: '14.5%' },
{ id: 'Point07', size: 'medium', left: '80.5%', top: '53%' }, { id: 'Point07', size: 'medium', left: '80.5%', top: '53%' },
{ id: 'Point06', size: 'medium', left: '19.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%' } { id: 'Point12', size: 'small', left: '12%', top: '41.5%' }
], ],
Priest: [ Priest: [
{ id: 'Point03', size: 'big', left: '51%', top: '49%' }, { id: 'Point03', size: 'big', left: '50%', top: '47%' },
{ id: 'Point04', size: 'big', left: '51%', top: '31%' }, { id: 'Point04', size: 'big', left: '50%', top: '30%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '46%' }, { id: 'Point02', size: 'big', left: '67%', top: '46%' },
{ id: 'Point05', size: 'big', left: '51%', top: '66%' }, { id: 'Point05', size: 'big', left: '50%', top: '65%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '46%' }, { id: 'Point01', size: 'big', left: '33.5%', top: '46%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '13%' }, { id: 'Point08', size: 'medium', left: '50%', top: '13%' },
{ id: 'Point07', size: 'medium', left: '68%', top: '79%' }, { 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%' } { id: 'Point15', size: 'small', left: '20%', top: '39%' }
], ],
Rogue: [ Rogue: [
{ id: 'Point03', size: 'big', left: '51%', top: '53%' }, { id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '51%', top: '36%' }, { id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '46%' }, { id: 'Point02', size: 'big', left: '67%', top: '46%' },
{ id: 'Point05', size: 'big', left: '51%', top: '70%' }, { id: 'Point05', size: 'big', left: '50%', top: '69%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '46%' }, { id: 'Point01', size: 'big', left: '33.5%', top: '46%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '22%' }, { id: 'Point08', size: 'medium', left: '50%', top: '22%' },
{ id: 'Point07', size: 'medium', left: '68%', top: '71%' }, { 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: 'Point16', size: 'small', left: '50%', top: '9%' },
{ id: 'Point18', size: 'small', left: '66%', top: '14%' }, { id: 'Point18', size: 'small', left: '66%', top: '14%' },
{ id: 'Point17', size: 'small', left: '34%', 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%' } { id: 'Point11', size: 'small', left: '7%', top: '44%' }
], ],
Shaman: [ Shaman: [
{ id: 'Point03', size: 'big', left: '51%', top: '57%' }, { id: 'Point03', size: 'big', left: '50%', top: '56%' },
{ id: 'Point04', size: 'big', left: '51%', top: '36%' }, { id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '41%' }, { id: 'Point02', size: 'big', left: '67%', top: '41%' },
{ id: 'Point05', size: 'big', left: '51%', top: '75%' }, { id: 'Point05', size: 'big', left: '50%', top: '74%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '41%' }, { id: 'Point01', size: 'big', left: '33.5%', top: '41%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '22%' }, { id: 'Point08', size: 'medium', left: '50%', top: '22%' },
{ id: 'Point07', size: 'medium', left: '89.5%', top: '56.5%' }, { 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%' } { id: 'Point11', size: 'small', left: '20%', top: '31%' }
], ],
Warlock: [ Warlock: [
{ id: 'Point03', size: 'big', left: '51%', top: '44%' }, { id: 'Point03', size: 'big', left: '50%', top: '44%' },
{ id: 'Point04', size: 'big', left: '51%', top: '25%' }, { id: 'Point04', size: 'big', left: '50%', top: '24%' },
{ id: 'Point02', size: 'big', left: '68.5%', top: '47%' }, { id: 'Point02', size: 'big', left: '67%', top: '47%' },
{ id: 'Point05', size: 'big', left: '51%', top: '62%' }, { id: 'Point05', size: 'big', left: '50%', top: '61%' },
{ id: 'Point01', size: 'big', left: '33.5%', top: '47%' }, { id: 'Point01', size: 'big', left: '33%', top: '47%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '8%' }, { id: 'Point08', size: 'medium', left: '50%', top: '8%' },
{ id: 'Point07', size: 'medium', left: '81.5%', top: '37%' }, { id: 'Point07', size: 'medium', left: '81.5%', top: '37%' },
{ id: 'Point06', size: 'medium', left: '20.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%' } { id: 'Point12', size: 'small', left: '33%', top: '74%' }
], ],
Warrior: [ Warrior: [
{ id: 'Point03', size: 'big', left: '51%', top: '53%' }, { id: 'Point03', size: 'big', left: '50%', top: '52%' },
{ id: 'Point04', size: 'big', left: '51%', top: '36%' }, { id: 'Point04', size: 'big', left: '50%', top: '35%' },
{ id: 'Point02', size: 'big', left: '69%', top: '48%' }, { 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: 'Point01', size: 'big', left: '33%', top: '48%' },
{ id: 'Point08', size: 'medium', left: '50%', top: '22%' }, { id: 'Point08', size: 'medium', left: '50%', top: '22%' },
{ id: 'Point07', size: 'medium', left: '67%', top: '83%' }, { 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%' } { id: 'Point11', size: 'small', left: '7%', top: '56.5%' }
], ],
Memory: [ 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: 'Point04', size: 'big', left: '75%', top: '53%' },
{ id: 'Point02', size: 'big', left: '67%', top: '67%' }, { id: 'Point02', size: 'big', left: '67%', top: '67%' },
{ id: 'Point05', size: 'big', left: '27%', top: '53%' }, { id: 'Point05', size: 'big', left: '27%', top: '53%' },
{ id: 'Point01', size: 'big', left: '35%', top: '67%' }, { id: 'Point01', size: 'big', left: '35%', top: '67%' },
{ id: 'Point08', size: 'medium', left: '34%', top: '34%' }, { id: 'Point08', size: 'medium', left: '34%', top: '34%' },
{ id: 'Point07', size: 'medium', left: '50%', top: '87%' }, { 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: 'Point16', size: 'small', left: '27.5%', top: '22%' },
{ id: 'Point17', size: 'small', left: '43%', top: '14%' }, { id: 'Point17', size: 'small', left: '43%', top: '14%' },
{ id: 'Point18', size: 'small', left: '59%', top: '14%' }, { id: 'Point18', size: 'small', left: '59%', top: '14%' },
{ id: 'Point19', size: 'big', left: '51%', top: '50%' }, { id: 'Point19', size: 'memory', left: '50%', top: '48%' },
{ id: 'Point20', size: 'big', left: '51%', top: '28%' }, { id: 'Point20', size: 'memory', left: '50%', top: '28%' },
{ id: 'Point12', size: 'small', left: '86%', top: '40%' }, { id: 'Point12', size: 'small', left: '86%', top: '40%' },
{ id: 'Point13', size: 'small', left: '86%', top: '63%' }, { id: 'Point13', size: 'small', left: '86%', top: '63%' },
{ id: 'Point14', size: 'small', left: '35%', top: '82%' }, { id: 'Point14', size: 'small', left: '35%', top: '82%' },
{ id: 'Point15', size: 'small', left: '65%', 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: 'Point10', size: 'small', left: '13%', top: '40%' },
{ id: 'Point11', size: 'small', left: '13%', top: '63%' }, { 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: { Memory: {
Point16: ["Point17", "Point18"], Point16: ["Point17", "Point18"],
Point08: ["Point16", "Point17", "Point18"],
Point17: ["Point18"], Point17: ["Point18"],
Point09: ["Point10", "Point11"], Point09: ["Point10", "Point11"],
Point07: ["Point14", "Point15"], Point07: ["Point14", "Point15"],