98 lines
3 KiB
TypeScript
98 lines
3 KiB
TypeScript
import React from 'react'
|
|
import { useSnapshot } from 'valtio'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import { appState } from '~utils/appState'
|
|
|
|
import SegmentedControl from '~components/SegmentedControl'
|
|
import Segment from '~components/Segment'
|
|
import ToggleSwitch from '~components/ToggleSwitch'
|
|
|
|
import { GridType } from '~utils/enums'
|
|
|
|
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
selectedTab: GridType
|
|
onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
|
|
onCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void
|
|
}
|
|
|
|
const PartySegmentedControl = (props: Props) => {
|
|
const { t } = useTranslation('common')
|
|
|
|
const { party, grid } = useSnapshot(appState)
|
|
|
|
function getElement() {
|
|
let element: number = 0
|
|
if (party.element == 0 && grid.weapons.mainWeapon)
|
|
element = grid.weapons.mainWeapon.element
|
|
else
|
|
element = party.element
|
|
|
|
switch(element) {
|
|
case 1: return "wind"; break
|
|
case 2: return "fire"; break
|
|
case 3: return "water"; break
|
|
case 4: return "earth"; break
|
|
case 5: return "dark"; break
|
|
case 6: return "light"; break
|
|
}
|
|
}
|
|
|
|
const extraToggle =
|
|
<div className="ExtraSwitch">
|
|
Extra
|
|
<ToggleSwitch
|
|
name="ExtraSwitch"
|
|
editable={party.editable}
|
|
checked={party.extra}
|
|
onChange={props.onCheckboxChange}
|
|
/>
|
|
</div>
|
|
|
|
return (
|
|
<div className="PartyNavigation">
|
|
<SegmentedControl elementClass={getElement()}>
|
|
{/* <Segment
|
|
groupName="grid"
|
|
name="class"
|
|
selected={props.selectedTab === GridType.Class}
|
|
onClick={props.onClick}
|
|
>Class</Segment> */}
|
|
|
|
<Segment
|
|
groupName="grid"
|
|
name="characters"
|
|
selected={props.selectedTab == GridType.Character}
|
|
onClick={props.onClick}
|
|
>{t('party.segmented_control.characters')}</Segment>
|
|
|
|
<Segment
|
|
groupName="grid"
|
|
name="weapons"
|
|
selected={props.selectedTab == GridType.Weapon}
|
|
onClick={props.onClick}
|
|
>{t('party.segmented_control.weapons')}</Segment>
|
|
|
|
<Segment
|
|
groupName="grid"
|
|
name="summons"
|
|
selected={props.selectedTab == GridType.Summon}
|
|
onClick={props.onClick}
|
|
>{t('party.segmented_control.summons')}</Segment>
|
|
</SegmentedControl>
|
|
|
|
{
|
|
(() => {
|
|
if (party.editable && props.selectedTab == GridType.Weapon) {
|
|
return extraToggle
|
|
}
|
|
})()
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PartySegmentedControl
|