125 lines
3.2 KiB
TypeScript
125 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import { useSnapshot } from 'valtio'
|
|
import { useTranslation } from 'next-i18next'
|
|
import classNames from 'classnames'
|
|
|
|
import { appState } from '~utils/appState'
|
|
import { accountState } from '~utils/accountState'
|
|
|
|
import SegmentedControl from '~components/common/SegmentedControl'
|
|
import RepSegment from '~components/reps/RepSegment'
|
|
import CharacterRep from '~components/reps/CharacterRep'
|
|
import WeaponRep from '~components/reps/WeaponRep'
|
|
import SummonRep from '~components/reps/SummonRep'
|
|
|
|
import { ElementMap } from '~utils/elements'
|
|
import { GridType } from '~utils/enums'
|
|
|
|
import styles from './index.module.scss'
|
|
|
|
// Fix for valtio readonly array
|
|
declare module 'valtio' {
|
|
function useSnapshot<T extends object>(p: T): T
|
|
}
|
|
|
|
interface Props {
|
|
selectedTab: GridType
|
|
onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
|
|
}
|
|
|
|
const PartySegmentedControl = (props: Props) => {
|
|
// Set up translations
|
|
const { t } = useTranslation('common')
|
|
|
|
const { party } = useSnapshot(appState)
|
|
|
|
const getElement = () => {
|
|
let element: GranblueElement
|
|
if (party.element === ElementMap.null && party.grid.weapons.mainWeapon)
|
|
element = party.grid.weapons.mainWeapon?.element
|
|
else if (party.element) element = party.element
|
|
else element = ElementMap.null
|
|
|
|
switch (element) {
|
|
case ElementMap.wind:
|
|
return 'wind'
|
|
case ElementMap.fire:
|
|
return 'fire'
|
|
case ElementMap.water:
|
|
return 'water'
|
|
case ElementMap.earth:
|
|
return 'earth'
|
|
case ElementMap.dark:
|
|
return 'dark'
|
|
case ElementMap.light:
|
|
return 'light'
|
|
}
|
|
}
|
|
|
|
const characterSegment = () => {
|
|
return (
|
|
<RepSegment
|
|
controlGroup="grid"
|
|
inputName="characters"
|
|
name={t('party.segmented_control.characters')}
|
|
selected={props.selectedTab === GridType.Character}
|
|
onClick={props.onClick}
|
|
>
|
|
<CharacterRep
|
|
job={party.protagonist.job}
|
|
element={party.element}
|
|
gender={
|
|
accountState.account.user ? accountState.account.user.gender : 0
|
|
}
|
|
grid={party.grid.characters}
|
|
/>
|
|
</RepSegment>
|
|
)
|
|
}
|
|
|
|
const weaponSegment = () => {
|
|
{
|
|
return (
|
|
<RepSegment
|
|
controlGroup="grid"
|
|
inputName="weapons"
|
|
name={t('party.segmented_control.weapons')}
|
|
selected={props.selectedTab === GridType.Weapon}
|
|
onClick={props.onClick}
|
|
>
|
|
<WeaponRep grid={party.grid.weapons} />
|
|
</RepSegment>
|
|
)
|
|
}
|
|
}
|
|
|
|
const summonSegment = () => {
|
|
return (
|
|
<RepSegment
|
|
controlGroup="grid"
|
|
inputName="summons"
|
|
name={t('party.segmented_control.summons')}
|
|
selected={props.selectedTab === GridType.Summon}
|
|
onClick={props.onClick}
|
|
>
|
|
<SummonRep grid={party.grid.summons} />
|
|
</RepSegment>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<nav
|
|
className={classNames({
|
|
[styles.nav]: true,
|
|
})}
|
|
>
|
|
<SegmentedControl gap={true} grow={true} elementClass={getElement()}>
|
|
{characterSegment()}
|
|
{weaponSegment()}
|
|
{summonSegment()}
|
|
</SegmentedControl>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default PartySegmentedControl
|