fix: use ProudMap to map extra skill level

src/v1/card.tsx

@@ -308,18 +308,16 @@ export function card(app: App) {
                       }}
                     >
                       {Object.entries(avatar.Skills).map(([key, src]) => {
-                        const extraKey = Object.keys(
-                          char.proudSkillExtraLevelMap || {},
-                        ).find((e) => e.endsWith(key.slice(-1)));
+                        const extra =
+                          char.proudSkillExtraLevelMap?.[
+                            `${avatar.ProudMap[key]}`
+                          ] ?? 0;
                         const talentLevel =
-                          (char.skillLevelMap?.[key] ?? 0) +
-                          (extraKey
-                            ? char.proudSkillExtraLevelMap![extraKey]
-                            : 0);
+                          (char.skillLevelMap?.[key] ?? 0) + extra;
                         return (
                           <div tw="mt-[.6em] relative">
                             <TalentSvg
-                              tw={`Talents ${char.avatar.element} w-[3.6em] opacity-80 text-black`}
+                              tw={`Talents ${char.avatar.element} w-[3.6em] opacity-60 text-black`}
                             />
                             <img
                               key={key}
@@ -329,7 +327,7 @@ export function card(app: App) {
                             />
                             <div tw="absolute -bottom-[.1em] w-full flex justify-center">
                               <div
-                                tw={`${extraKey ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.8em] rounded-[1.4em]`}
+                                tw={`${extra ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.8em] rounded-[1.4em]`}
                               >
                                 <span tw="px-[.6em]">{talentLevel}</span>
                               </div>