diff --git a/src/components/relicBar/index.tsx b/src/components/relicBar/index.tsx
index 29fb8cd..714d3df 100644
--- a/src/components/relicBar/index.tsx
+++ b/src/components/relicBar/index.tsx
@@ -4,7 +4,7 @@ import useUserDataStore from '@/stores/userDataStore';
import { AffixDetail, RelicDetail } from '@/types';
import React, { useEffect, useMemo } from 'react';
import SelectCustomImage from '../select/customSelectImage';
-import { calcAffixBonus, randomPartition, randomStep, replaceByParam } from '@/helper';
+import { calcAffixBonus, calcMainAffixBonus, randomPartition, randomStep, replaceByParam } from '@/helper';
import useAffixStore from '@/stores/affixStore';
import { mappingStats } from '@/constant/constant';
import useAvatarStore from '@/stores/avatarStore';
@@ -118,16 +118,7 @@ export default function RelicMaker() {
const data = affixSet[selectedMainStat];
if (!data) return 0;
- const stat = mappingStats?.[data.property];
- if (!stat) return 0;
-
- const value = data.base + data.step * selectedRelicLevel;
-
- if (stat.unit === "%") {
- return (value * 100).toFixed(1) + "%";
- }
-
- return value.toFixed(0) + stat.unit;
+ return calcMainAffixBonus(data, selectedRelicLevel);
}, [mapMainAffix, selectedRelicSlot, selectedMainStat, selectedRelicLevel]);
const handleSubStatChange = (key: string, index: number, rollCount: number, stepCount: number) => {
diff --git a/src/components/relicsInfo/index.tsx b/src/components/relicsInfo/index.tsx
index ca8d383..9aa10f4 100644
--- a/src/components/relicsInfo/index.tsx
+++ b/src/components/relicsInfo/index.tsx
@@ -117,7 +117,7 @@ export default function RelicsInfo() {
handleShow("action_detail_modal")
}
- const getEffects = useMemo(() => {
+ const relicEffects = useMemo(() => {
const avatar = avatars[avatarSelected?.id || ""];
const relicCount: { [key: string]: number } = {};
if (avatar) {
@@ -215,7 +215,7 @@ export default function RelicsInfo() {
- {getEffects.map((setEffect, index) => {
+ {relicEffects.map((setEffect, index) => {
const relicInfo = mapRelicInfo[setEffect.key];
if (!relicInfo) return null;
return (
diff --git a/src/components/showcaseCard/index.tsx b/src/components/showcaseCard/index.tsx
new file mode 100644
index 0000000..83b91c2
--- /dev/null
+++ b/src/components/showcaseCard/index.tsx
@@ -0,0 +1,927 @@
+"use client";
+
+import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import useListAvatarStore from "@/stores/avatarStore";
+import { FastAverageColor, FastAverageColorResult } from 'fast-average-color';
+import NextImage from 'next/image';
+import ParseText from '../parseText';
+import useLocaleStore from '@/stores/localeStore';
+import { calcAffixBonus, calcBaseStat, calcBaseStatRaw, calcBonusStatRaw, calcMainAffixBonus, calcMainAffixBonusRaw, calcPromotion, calcSubAffixBonusRaw, convertToRoman, getNameChar, replaceByParam } from '@/helper';
+import useUserDataStore from '@/stores/userDataStore';
+import { traceShowCaseMap } from '@/constant/traceConstant';
+import { StatusAddType } from '@/types';
+import { mappingStats } from '@/constant/constant';
+import useLightconeStore from '@/stores/lightconeStore';
+import { useTranslations } from 'next-intl';
+import useAffixStore from '@/stores/affixStore';
+import useRelicStore from '@/stores/relicStore';
+import { toast } from 'react-toastify';
+import html2canvas from 'html2canvas-pro';
+
+export default function ShowCaseInfo() {
+ const { avatarSelected, mapAvatarInfo } = useListAvatarStore()
+ const { mapLightconeInfo } = useLightconeStore()
+ const { mapMainAffix, mapSubAffix } = useAffixStore()
+ const { avatars } = useUserDataStore()
+ const [avgColor, setAvgColor] = useState('#222');
+ const imgRef = useRef(null);
+ const cardRef = useRef(null)
+ const { locale } = useLocaleStore()
+ const transI18n = useTranslations("DataPage")
+ const { mapRelicInfo } = useRelicStore()
+
+ const handleSaveImage = useCallback(() => {
+ if (cardRef.current === null) {
+ toast.error("Avatar showcase not found!");
+ return;
+ }
+
+ html2canvas(cardRef.current, {scale: 2, backgroundColor: '#000000'})
+ .then(function (canvas: HTMLCanvasElement) {
+ const link = document.createElement('a');
+ link.download = 'showcase.png';
+ link.href = canvas.toDataURL('image/png');
+ link.click();
+ })
+ .catch(() => {
+ toast.error("Error generating showcase card!");
+ });
+ }, [cardRef])
+
+ useEffect(() => {
+ if (!avatarSelected?.id) return;
+ const fac = new FastAverageColor();
+ const img = new Image();
+ img.crossOrigin = 'anonymous';
+ img.src = `https://api.hakush.in/hsr/UI/avatardrawcard/${avatarSelected.id}.webp`;
+
+ img.onload = () => {
+ fac.getColorAsync(img).then((color: FastAverageColorResult) => {
+ setAvgColor(color.hex); // #RRGGBB
+ });
+ };
+ }, [avatarSelected]);
+
+ const avatarInfo = useMemo(() => {
+ if (!avatarSelected) return
+ return mapAvatarInfo[avatarSelected.id]
+ }, [avatarSelected, mapAvatarInfo])
+
+ const avatarSkillTree = useMemo(() => {
+ if (!avatarSelected || !avatars[avatarSelected.id]) return {}
+ if (avatars[avatarSelected.id].enhanced) {
+ return avatarInfo?.Enhanced[avatars[avatarSelected.id].enhanced.toString()].SkillTrees || {}
+ }
+ return avatarInfo?.SkillTrees || {}
+ }, [avatarSelected, avatarInfo, avatars])
+
+ const avatarData = useMemo(() => {
+ if (!avatarSelected) return
+ return avatars[avatarSelected.id]
+ }, [avatarSelected, avatars])
+
+ const avatarProfile = useMemo(() => {
+ if (!avatarSelected || !avatarData) return
+ return avatarData?.profileList?.[avatarData?.profileSelect]
+ }, [avatarSelected, avatarData])
+
+ const lightconeStats = useMemo(() => {
+ if (!avatarSelected || !avatarProfile?.lightcone || !mapLightconeInfo[avatarProfile?.lightcone?.item_id]) return
+ const promotion = calcPromotion(avatarProfile?.lightcone?.level)
+ const atkStat = calcBaseStat(
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseAttack,
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseAttackAdd,
+ 0,
+ avatarProfile?.lightcone?.level
+ )
+ const hpStat = calcBaseStat(
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseHP,
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseHPAdd,
+ 0,
+ avatarProfile?.lightcone?.level
+ )
+ const defStat = calcBaseStat(
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseDefence,
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseDefenceAdd,
+ 0,
+ avatarProfile?.lightcone?.level
+ )
+ return {
+ attack: atkStat,
+ hp: hpStat,
+ def: defStat,
+ }
+ }, [avatarSelected, mapLightconeInfo, avatarProfile])
+
+ const relicEffects = useMemo(() => {
+ const avatar = avatars[avatarSelected?.id || ""];
+ const relicCount: { [key: string]: number } = {};
+ if (avatar) {
+ for (const relic of Object.values(avatar.profileList[avatar.profileSelect].relics)) {
+ if (relicCount[relic.relic_set_id]) {
+ relicCount[relic.relic_set_id]++;
+ } else {
+ relicCount[relic.relic_set_id] = 1;
+ }
+ }
+ }
+ const listEffects: { key: string, count: number }[] = [];
+ Object.entries(relicCount).forEach(([key, value]) => {
+ if (value >= 2) {
+ listEffects.push({ key: key, count: value });
+ }
+ });
+ return listEffects;
+ }, [avatars, avatarSelected]);
+
+ const relicStats = useMemo(() => {
+ if (!avatarSelected || !avatarProfile?.relics || !mapMainAffix || !mapSubAffix) return
+
+ return Object.entries(avatarProfile?.relics).map(([key, value]) => {
+ const mainAffixMap = mapMainAffix["5" + key]
+ const subAffixMap = mapSubAffix["5"]
+ if (!mainAffixMap || !subAffixMap) return
+ return {
+ img: `https://api.hakush.in/hsr/UI/relicfigures/IconRelic_${value.relic_set_id}_${key}.webp`,
+ mainAffix: {
+ property: mainAffixMap?.[value.main_affix_id]?.property,
+ level: value.level,
+ valueAffix: calcMainAffixBonus(mainAffixMap?.[value.main_affix_id], value.level),
+ detail: mappingStats[mainAffixMap?.[value.main_affix_id].property]
+ },
+ subAffix: value?.sub_affixes.map((subValue) => {
+ return {
+ property: subAffixMap?.[subValue.sub_affix_id]?.property,
+ valueAffix: calcAffixBonus(subAffixMap?.[subValue.sub_affix_id], subValue.step, subValue.count),
+ detail: mappingStats[subAffixMap?.[subValue.sub_affix_id].property]
+ }
+ })
+ }
+ })
+ }, [avatarSelected, avatarProfile, mapMainAffix, mapSubAffix])
+
+ const characterStats = useMemo(() => {
+ if (!avatarSelected || !avatarData) return
+ const charPromotion = calcPromotion(avatarData.level)
+
+ const statsData: Record
= {
+ HP: {
+ value: calcBaseStatRaw(
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPBase,
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPAdd,
+ avatarData.level
+ ),
+ base: calcBaseStatRaw(
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPBase,
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPAdd,
+ avatarData.level
+ ),
+ name: "HP",
+ icon: "/icon/hp.webp",
+ unit: "",
+ round: 0
+ },
+ ATK: {
+ value: calcBaseStatRaw(
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackBase,
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackAdd,
+ avatarData.level
+ ),
+ base: calcBaseStatRaw(
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackBase,
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackAdd,
+ avatarData.level
+ ),
+ name: "ATK",
+ icon: "/icon/attack.webp",
+ unit: "",
+ round: 0
+ },
+ DEF: {
+ value: calcBaseStatRaw(
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceBase,
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceAdd,
+ avatarData.level
+ ),
+ base: calcBaseStatRaw(
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceBase,
+ mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceAdd,
+ avatarData.level
+ ),
+ name: "DEF",
+ icon: "/icon/defence.webp",
+ unit: "",
+ round: 0
+ },
+ SPD: {
+ value: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.SpeedBase || 0,
+ base: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.SpeedBase || 0,
+ name: "SPD",
+ icon: "/icon/speed.webp",
+ unit: "",
+ round: 1
+ },
+ CRITRate: {
+ value: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalChance || 0,
+ base: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalChance || 0,
+ name: "CRIT Rate",
+ icon: "/icon/crit-rate.webp",
+ unit: "%",
+ round: 1
+ },
+ CRITDmg: {
+ value: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalDamage || 0,
+ base: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalDamage || 0,
+ name: "CRIT DMG",
+ icon: "/icon/crit-damage.webp",
+ unit: "%",
+ round: 1
+ },
+ BreakEffect: {
+ value: 0,
+ base: 0,
+ name: "Break Effect",
+ icon: "/icon/break-effect.webp",
+ unit: "%",
+ round: 1
+ },
+ EffectRES: {
+ value: 0,
+ base: 0,
+ name: "Effect RES",
+ icon: "/icon/effect-res.webp",
+ unit: "%",
+ round: 1
+ },
+ EnergyRate: {
+ value: 0,
+ base: 0,
+ name: "Energy Rate",
+ icon: "/icon/energy-rate.webp",
+ unit: "%",
+ round: 1
+ },
+ EffectHitRate: {
+ value: 0,
+ base: 0,
+ name: "Effect Hit Rate",
+ icon: "/icon/effect-hit-rate.webp",
+ unit: "%",
+ round: 1
+ },
+ HealBoost: {
+ value: 0,
+ base: 0,
+ name: "Healing Boost",
+ icon: "/icon/healing-boost.webp",
+ unit: "%",
+ round: 1
+ },
+ PhysicalAdd: {
+ value: 0,
+ base: 0,
+ name: "Physical Boost",
+ icon: "/icon/physical-add.webp",
+ unit: "%",
+ round: 1
+ },
+ FireAdd: {
+ value: 0,
+ base: 0,
+ name: "Fire Boost",
+ icon: "/icon/fire-add.webp",
+ unit: "%",
+ round: 1
+ },
+ IceAdd: {
+ value: 0,
+ base: 0,
+ name: "Ice Boost",
+ icon: "/icon/ice-add.webp",
+ unit: "%",
+ round: 1
+ },
+ ThunderAdd: {
+ value: 0,
+ base: 0,
+ name: "Thunder Boost",
+ icon: "/icon/thunder-add.webp",
+ unit: "%",
+ round: 1
+ },
+ WindAdd: {
+ value: 0,
+ base: 0,
+ name: "Wind Boost",
+ icon: "/icon/wind-add.webp",
+ unit: "%",
+ round: 1
+ },
+ QuantumAdd: {
+ value: 0,
+ base: 0,
+ name: "Quantum Boost",
+ icon: "/icon/quantum-add.webp",
+ unit: "%",
+ round: 1
+ },
+ ImaginaryAdd: {
+ value: 0,
+ base: 0,
+ name: "Imaginary Boost",
+ icon: "/icon/imaginary-add.webp",
+ unit: "%",
+ round: 1
+ },
+ }
+
+ if (avatarProfile?.lightcone && mapLightconeInfo[avatarProfile?.lightcone?.item_id]) {
+ const lightconePromotion = calcPromotion(avatarProfile?.lightcone?.level)
+ statsData.HP.value += calcBaseStatRaw(
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHP,
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHPAdd,
+ avatarProfile?.lightcone?.level
+ )
+ statsData.HP.base += calcBaseStatRaw(
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHP,
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHPAdd,
+ avatarProfile?.lightcone?.level
+ )
+ statsData.ATK.value += calcBaseStatRaw(
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttack,
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttackAdd,
+ avatarProfile?.lightcone?.level
+ )
+ statsData.ATK.base += calcBaseStatRaw(
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttack,
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttackAdd,
+ avatarProfile?.lightcone?.level
+ )
+ statsData.DEF.value += calcBaseStatRaw(
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefence,
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefenceAdd,
+ avatarProfile?.lightcone?.level
+ )
+ statsData.DEF.base += calcBaseStatRaw(
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefence,
+ mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefenceAdd,
+ avatarProfile?.lightcone?.level
+ )
+
+ const bonusData = mapLightconeInfo[avatarProfile?.lightcone?.item_id].Bonus?.[avatarProfile?.lightcone.rank - 1]
+ if (bonusData && bonusData.length > 0) {
+ const bonusSpd = bonusData.filter((bonus) => bonus.type === "BaseSpeed")
+ const bonusOther = bonusData.filter((bonus) => bonus.type !== "BaseSpeed")
+ bonusSpd.forEach((bonus) => {
+ statsData.SPD.value += bonus.value
+ statsData.SPD.base += bonus.value
+ })
+ bonusOther.forEach((bonus) => {
+ const statsBase = mappingStats?.[bonus.type]?.baseStat
+ if (statsBase && statsData[statsBase]) {
+ statsData[statsBase].value += calcBonusStatRaw(bonus.type, statsData[statsBase].base, bonus.value)
+ }
+ })
+ }
+ }
+ if (avatarSkillTree) {
+ Object.values(avatarSkillTree).forEach((value) => {
+ if (value?.["1"]
+ && value?.["1"]?.PointID
+ && typeof avatarData?.data?.skills?.[value?.["1"]?.PointID] === "number"
+ && avatarData?.data?.skills?.[value?.["1"]?.PointID] !== 0
+ && value?.["1"]?.StatusAddList
+ && value?.["1"].StatusAddList.length > 0) {
+ value?.["1"]?.StatusAddList.forEach((status) => {
+ const statsBase = mappingStats?.[status?.PropertyType]?.baseStat
+ if (statsBase && statsData[statsBase]) {
+ statsData[statsBase].value += calcBonusStatRaw(status?.PropertyType, statsData[statsBase].base, status.Value)
+ }
+ })
+ }
+ })
+ }
+
+
+
+ if (avatarProfile?.relics && mapMainAffix && mapSubAffix) {
+ Object.entries(avatarProfile?.relics).forEach(([key, value]) => {
+ const mainAffixMap = mapMainAffix["5" + key]
+ const subAffixMap = mapSubAffix["5"]
+ if (!mainAffixMap || !subAffixMap) return
+ const mainStats = mappingStats?.[mainAffixMap?.[value.main_affix_id]?.property]?.baseStat
+ if (mainStats && statsData[mainStats]) {
+ statsData[mainStats].value += calcMainAffixBonusRaw(mainAffixMap?.[value.main_affix_id], value.level, statsData[mainStats].base)
+ }
+ value?.sub_affixes.forEach((subValue) => {
+ const subStats = mappingStats?.[subAffixMap?.[subValue.sub_affix_id]?.property]?.baseStat
+ if (subStats && statsData[subStats]) {
+ statsData[subStats].value += calcSubAffixBonusRaw(subAffixMap?.[subValue.sub_affix_id], subValue.step, subValue.count, statsData[subStats].base)
+ }
+ })
+ })
+ }
+
+ if (relicEffects && relicEffects.length > 0) {
+ relicEffects.forEach((relic) => {
+ const dataBonus = mapRelicInfo?.[relic.key]?.Bonus
+ if (!dataBonus || Object.keys(dataBonus).length === 0) return
+ Object.entries(dataBonus || {}).forEach(([key, value]) => {
+ if (relic.count < Number(key)) return
+ value.forEach((bonus) => {
+ const statsBase = mappingStats?.[bonus.type]?.baseStat
+ if (statsBase && statsData[statsBase]) {
+ statsData[statsBase].value += calcBonusStatRaw(bonus.type, statsData[statsBase].base, bonus.value)
+ }
+ })
+ })
+ })
+ }
+
+
+ return statsData
+ }, [
+ avatarSelected,
+ avatarData,
+ mapAvatarInfo,
+ avatarProfile?.lightcone,
+ avatarProfile?.relics,
+ mapLightconeInfo,
+ mapMainAffix,
+ mapSubAffix,
+ relicEffects,
+ mapRelicInfo,
+ avatarSkillTree
+ ])
+
+ const getImageSkill = useCallback((icon: string | undefined, status: StatusAddType | undefined) => {
+ if (!icon) return
+ if (icon.startsWith("SkillIcon")) {
+ if (Number(avatarSelected?.id) > 8000 && Number(avatarSelected?.id) % 2 === 0) {
+ return `https://homdgcat.wiki/images/skillicons/avatar/${Number(avatarSelected?.id) - 1}/${icon.replaceAll(avatarSelected?.id || "", (Number(avatarSelected?.id) - 1).toString())}`
+ }
+ return `https://homdgcat.wiki/images/skillicons/avatar/${avatarSelected?.id}/${icon}`
+ } else if (status && mappingStats[status.PropertyType]) {
+ return mappingStats[status.PropertyType].icon
+ }
+ else if (icon.startsWith("Icon")) {
+ return `https://api.hakush.in/hsr/UI/trace/${icon.replace(".png", ".webp")}`
+ }
+ return ""
+ }, [avatarSelected])
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {avatarSelected && (
+
+ )}
+
+
+
+
+
+
+ {avatarSelected && avatarInfo && avatarData?.data && typeof avatarData?.data?.rank === "number" && (
+
+ {avatarInfo?.RankIcon.map((src, index) => {
+ const isActive = avatarData?.data?.rank > index;
+
+ return (
+
+ {isActive && (
+
+ )}
+
+
+ );
+ })}
+
+ )}
+
+
+
+
+
+
+
+
+
Lv. {avatarData?.level}/80
+ {avatarSelected && (
+
+
+
+
+ )}
+
+
+
+
+
+ {avatarSelected && (
+
+
+
+ )}
+
+
+ {avatarData && avatarInfo && avatarSkillTree && traceShowCaseMap[avatarSelected?.baseType || ""]
+ && Object.values(traceShowCaseMap[avatarSelected?.baseType || ""] || []).map((item, index) => {
+ return (
+
+ {item.map((btn, idx) => {
+ const size = btn.size || "small";
+ const isBig = size === "big";
+ const isMedium = size === "medium";
+ const isBigMemory = size === "big-memory";
+
+ const sizeClass = isBigMemory ? "w-12 h-12 mx-1" : isBig ? "w-12 h-12 mx-1" : isMedium ? "w-10 h-10" : "w-8 h-8";
+
+ const imageSize = isBigMemory ? "w-10" : isBig ? "w-10" : isMedium ? "w-8" : "w-6";
+
+ const bgColor = isBigMemory
+ ? "bg-[#2a1a39]/80"
+ : isBig
+ ? "bg-[#2b1d00]/80"
+ : isMedium
+ ? "bg-[#2b1d00]/50"
+ : "bg-[#000000]/50";
+
+ const filterClass = isBigMemory
+ ? "filter sepia brightness-80 hue-rotate-[280deg] saturate-400 contrast-130"
+ : isBig
+ ? "filter sepia brightness-150 hue-rotate-15 saturate-200"
+ : "";
+
+ return (
+
+
+
+ {(isBig || isBigMemory) && (
+
+ {10}
+
+ )}
+
+
+ {btn.isLink && idx < item.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+
+ )
+ })}
+
+
+
+ {avatarProfile && avatarProfile?.lightcone && lightconeStats ? (
+
+
+
+ {/* Background SVG Border (offset top-left) */}
+
+
+ {/* Card Image */}
+
+
+ {/* Top SVG Border (offset bottom-right) */}
+
+
+ {/* Stars */}
+
+ {[...Array(
+ Number(
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id]?.Rarity?.[
+ mapLightconeInfo[avatarProfile?.lightcone?.item_id]?.Rarity.length - 1
+ ] || 0
+ )
+ )].map((_, i) => (
+ ✦
+ ))}
+
+
+
+
+
+
+
+
+
+ {convertToRoman(avatarProfile?.lightcone?.rank)}
+
+
+ Lv. {avatarProfile.lightcone.level}/80
+
+
+
+
+ {/* Chỉ số */}
+
+
+
+
+ {
+ lightconeStats?.hp
+ }
+
+
+
+ {lightconeStats?.attack}
+
+
+
+
+
+ {lightconeStats?.def}
+
+
+
+
+
+ ) : (
+ {transI18n("noLightconeEquipped")}
+
)}
+
+
+
+
+
+
+ {Object.entries(characterStats || {})?.map(([key, stat], index) => {
+ if (!stat || (key.includes("Add") && stat.value === 0)) return null
+ return (
+
+
+
+ {stat.name}
+
+
+
{
+ stat.value ? stat.unit === "%" ? (stat.value * 100).toFixed(stat.round) : stat.value.toFixed(stat.round) : 0
+ }{stat.unit}
+
+ )
+ })}
+
+
+
+
+
+ {relicEffects.map((setEffect, index) => {
+ const relicInfo = mapRelicInfo[setEffect.key];
+ if (!relicInfo) return null;
+ return (
+
+
+
+ {setEffect.count}
+
+
+ )
+ })}
+
+
+
+
+
+
+ {relicStats?.map((relic, index) => {
+ if (!relic) return null
+ return (
+
+
+
+ {/*
*/}
+
+ ✦✦✦✦✦
+
+
+
+
+ {relic?.mainAffix?.valueAffix + relic?.mainAffix?.detail?.unit}
+ +{relic?.mainAffix?.level}
+
+
+
+ {relic?.subAffix?.map((subAffix, index) => {
+ if (!subAffix) return null
+ return (
+
+
+
+ +{subAffix?.valueAffix + subAffix?.detail?.unit}
+
+
+ )
+ })}
+
+
+ )
+ })}
+ {(!relicStats || !relicStats?.length) &&
+ {transI18n("noRelicEquipped")}
+
}
+
+
+
+
+
+
+
+
+
+