From 7f56bde10126d32de6e6ce37d2dbd830a20a2736 Mon Sep 17 00:00:00 2001
From: AzenKain <doduykhanh344@gmail.com>
Date: Sat, 4 Oct 2025 17:14:04 +0700
Subject: [PATCH] Feat: more ui

---
 src/components/skillsInfo/index.tsx | 130 ++++++++++++++++++++--------
 src/constant/traceConstant.ts       |  71 +++++++--------
 2 files changed, 131 insertions(+), 70 deletions(-)

diff --git a/src/components/skillsInfo/index.tsx b/src/components/skillsInfo/index.tsx
index eb6530b..081094e 100644
--- a/src/components/skillsInfo/index.tsx
+++ b/src/components/skillsInfo/index.tsx
@@ -88,7 +88,7 @@ export default function SkillsInfo() {
         }
         if (result && result.length > 0) {
             return {
-                isServant: false, 
+                isServant: false,
                 data: result,
                 servantData: null,
             }
@@ -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)
                                         }}
                                     />
diff --git a/src/constant/traceConstant.ts b/src/constant/traceConstant.ts
index 2b873fd..ed8efd5 100644
--- a/src/constant/traceConstant.ts
+++ b/src/constant/traceConstant.ts
@@ -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"],