Add character mod data to hovercard
This commit is contained in:
parent
d9ed728276
commit
0495c7c8f7
4 changed files with 245 additions and 4 deletions
|
|
@ -0,0 +1,53 @@
|
|||
.Character.HovercardContent {
|
||||
.Mastery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-half;
|
||||
|
||||
.ExtendedMastery {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: $unit-half;
|
||||
|
||||
img {
|
||||
width: $unit-3x;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Awakening {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit;
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: $unit-half;
|
||||
|
||||
img {
|
||||
width: $unit-3x;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .Footer {
|
||||
// position: sticky;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// }
|
||||
}
|
||||
|
|
@ -10,7 +10,15 @@ import {
|
|||
import WeaponLabelIcon from '~components/WeaponLabelIcon'
|
||||
import UncapIndicator from '~components/UncapIndicator'
|
||||
|
||||
import {
|
||||
overMastery,
|
||||
aetherialMastery,
|
||||
permanentMastery,
|
||||
} from '~data/overMastery'
|
||||
import { ExtendedMastery } from '~types'
|
||||
|
||||
import './index.scss'
|
||||
import { characterAwakening } from '~data/awakening'
|
||||
|
||||
interface Props {
|
||||
gridCharacter: GridCharacter
|
||||
|
|
@ -70,6 +78,128 @@ const CharacterHovercard = (props: Props) => {
|
|||
return imgSrc
|
||||
}
|
||||
|
||||
function masteryElement(dictionary: ItemSkill[], mastery: ExtendedMastery) {
|
||||
const canonicalMastery = dictionary.find(
|
||||
(item) => item.id === mastery.modifier
|
||||
)
|
||||
|
||||
if (canonicalMastery) {
|
||||
return (
|
||||
<li className="ExtendedMastery">
|
||||
<img
|
||||
alt={canonicalMastery.name[locale]}
|
||||
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/mastery/${canonicalMastery.slug}.png`}
|
||||
/>
|
||||
<span>
|
||||
<strong>{canonicalMastery.name[locale]}</strong>
|
||||
{`+${mastery.strength}${canonicalMastery.suffix}`}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const overMasterySection = () => {
|
||||
if (props.gridCharacter && props.gridCharacter.over_mastery) {
|
||||
return (
|
||||
<section className="Mastery">
|
||||
<h5 className={tintElement}>
|
||||
{t('modals.characters.subtitles.ring')}
|
||||
</h5>
|
||||
<ul>
|
||||
{[...Array(4)].map((e, i) => {
|
||||
const ringIndex = i + 1
|
||||
const ringStat: ExtendedMastery =
|
||||
props.gridCharacter.over_mastery[i]
|
||||
if (ringStat && ringStat.modifier && ringStat.modifier > 0) {
|
||||
if (ringIndex === 1 || ringIndex === 2) {
|
||||
return masteryElement(overMastery.a, ringStat)
|
||||
} else if (ringIndex === 3) {
|
||||
return masteryElement(overMastery.b, ringStat)
|
||||
} else {
|
||||
return masteryElement(overMastery.c, ringStat)
|
||||
}
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const aetherialMasterySection = () => {
|
||||
if (
|
||||
props.gridCharacter &&
|
||||
props.gridCharacter.aetherial_mastery &&
|
||||
props.gridCharacter.aetherial_mastery.modifier > 0
|
||||
) {
|
||||
return (
|
||||
<section className="Mastery">
|
||||
<h5 className={tintElement}>
|
||||
{t('modals.characters.subtitles.earring')}
|
||||
</h5>
|
||||
<ul>
|
||||
{masteryElement(
|
||||
aetherialMastery,
|
||||
props.gridCharacter.aetherial_mastery
|
||||
)}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const permanentMasterySection = () => {
|
||||
if (props.gridCharacter && props.gridCharacter.perpetuity) {
|
||||
return (
|
||||
<section className="Mastery">
|
||||
<h5 className={tintElement}>
|
||||
{t('modals.characters.subtitles.permanent')}
|
||||
</h5>
|
||||
<ul>
|
||||
{[...Array(4)].map((e, i) => {
|
||||
return masteryElement(permanentMastery, {
|
||||
modifier: i + 1,
|
||||
strength: permanentMastery[i].maxValue,
|
||||
})
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const awakeningSection = () => {
|
||||
const gridAwakening = props.gridCharacter.awakening
|
||||
const awakening = characterAwakening.find(
|
||||
(awakening) => awakening.id === gridAwakening?.type
|
||||
)
|
||||
|
||||
if (gridAwakening && awakening) {
|
||||
return (
|
||||
<section className="Awakening">
|
||||
<h5 className={tintElement}>
|
||||
{t('modals.characters.subtitles.awakening')}
|
||||
</h5>
|
||||
<div>
|
||||
{gridAwakening.type > 1 ? (
|
||||
<img
|
||||
alt={awakening.name[locale]}
|
||||
src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/character_${gridAwakening.type}.jpg`}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<span>
|
||||
<strong>{`${awakening.name[locale]}`}</strong>
|
||||
{`Lv${gridAwakening.level}`}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Hovercard openDelay={350}>
|
||||
<HovercardTrigger asChild onClick={props.onTriggerClick}>
|
||||
|
|
@ -116,10 +246,15 @@ const CharacterHovercard = (props: Props) => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
|
||||
{t('buttons.wiki')}
|
||||
</a>
|
||||
{awakeningSection()}
|
||||
{overMasterySection()}
|
||||
{aetherialMasterySection()}
|
||||
{permanentMasterySection()}
|
||||
<section className="Footer">
|
||||
<a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
|
||||
{t('buttons.wiki')}
|
||||
</a>
|
||||
</section>
|
||||
</HovercardContent>
|
||||
</Hovercard>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
max-height: 30vh;
|
||||
overflow-y: scroll;
|
||||
padding: $unit-2x;
|
||||
width: 300px;
|
||||
|
||||
|
|
|
|||
|
|
@ -330,3 +330,54 @@ export const aetherialMastery: ItemSkill[] = [
|
|||
fractional: false,
|
||||
},
|
||||
]
|
||||
|
||||
export const permanentMastery: ItemSkill[] = [
|
||||
{
|
||||
name: {
|
||||
en: 'Extended Mastery Star Cap',
|
||||
ja: 'LB強化回数上限',
|
||||
},
|
||||
id: 1,
|
||||
slug: 'star-cap',
|
||||
minValue: 10,
|
||||
maxValue: 10,
|
||||
suffix: '',
|
||||
fractional: false,
|
||||
},
|
||||
{
|
||||
name: {
|
||||
en: 'ATK',
|
||||
ja: '攻撃',
|
||||
},
|
||||
id: 2,
|
||||
slug: 'atk',
|
||||
minValue: 10,
|
||||
maxValue: 10,
|
||||
suffix: '%',
|
||||
fractional: false,
|
||||
},
|
||||
{
|
||||
name: {
|
||||
en: 'HP',
|
||||
ja: 'HP',
|
||||
},
|
||||
id: 3,
|
||||
slug: 'hp',
|
||||
minValue: 10,
|
||||
maxValue: 10,
|
||||
suffix: '',
|
||||
fractional: false,
|
||||
},
|
||||
{
|
||||
name: {
|
||||
en: 'DMG Cap',
|
||||
ja: 'ダメージ上限',
|
||||
},
|
||||
id: 4,
|
||||
slug: 'dmg-cap',
|
||||
minValue: 5,
|
||||
maxValue: 5,
|
||||
suffix: '%',
|
||||
fractional: false,
|
||||
},
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in a new issue