Sakura Knoll
5c8ed4f603
* Replace sw, sns battlesuit images * Add gen guide page * Make supports configurable * Extract DifficultySelect & Improve Ex Signet Ordering style * Extract BattlesuitSelect * Use BattlesuitSelect for support valk * Swap support if duplicated * Add sigil selector * Set initial ex signets * Change layout * Add sigil icon to single value * Add equipment select * Fix difficulty box label * Implement SignetBox * Add Signet form control * Improve rendering perf of stigma and weapon select * Implement image converter * Fix signet select * Remove FontHead * Remove wrong new line * Fix warnings * Add custom style configurator * Make labels of DiffucltyBox and ValkBox configurable * Add background and improve layout * Improve ex signet fontsize * Style boundaries of left bottom boxes * Apply fonts directly * Style signet box * Add Signet group label * Style ValkBox * Add support valk label * Style layout of SignetBox * Add shadow to difficulty box * Add sigil label * Adjust signet group label * Add equipment label * Configure colors of left bottom boxes * Add tag, rank, signature * Add icon to current value of battlesuit select * Adjust form styles * Add signet group select * Implement import/export data * Fix dashed border of difficulty box * Add gen link to elysian realm home * Prefix types
105 lines
2.7 KiB
TypeScript
105 lines
2.7 KiB
TypeScript
import { useMemo } from 'react'
|
|
import ReactSelect, { components } from 'react-select'
|
|
import { Flex, Image } from 'theme-ui'
|
|
import { assetsBucketBaseUrl } from '../../../lib/consts'
|
|
import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits'
|
|
|
|
interface BattlesuitSelectProps {
|
|
instanceId: string
|
|
value: string
|
|
optionIds: string[]
|
|
battlesuits: BattlesuitData[]
|
|
onChange: (newValue: string) => void
|
|
}
|
|
|
|
const BattlesuitSelect = ({
|
|
instanceId,
|
|
optionIds,
|
|
value,
|
|
battlesuits,
|
|
onChange,
|
|
}: BattlesuitSelectProps) => {
|
|
const battlesuitOptions = useMemo(() => {
|
|
return optionIds.map((battlesuitId) => {
|
|
const battlesuit = battlesuits.find((aBattlesuit) => {
|
|
return aBattlesuit.id === battlesuitId
|
|
})
|
|
if (battlesuit == null) {
|
|
return {
|
|
value: 'unknown',
|
|
label: 'unknown',
|
|
}
|
|
}
|
|
return {
|
|
value: battlesuit.id,
|
|
label: battlesuit.name,
|
|
}
|
|
})
|
|
}, [battlesuits, optionIds])
|
|
|
|
const battlesuit = battlesuits.find((battlesuit) => {
|
|
return battlesuit.id === value
|
|
})
|
|
|
|
return (
|
|
<ReactSelect
|
|
instanceId={instanceId}
|
|
value={
|
|
battlesuit != null
|
|
? {
|
|
label: battlesuit.name,
|
|
value: battlesuit.id,
|
|
}
|
|
: null
|
|
}
|
|
onChange={(option) => {
|
|
if (option == null) {
|
|
return
|
|
}
|
|
onChange(option.value)
|
|
}}
|
|
options={battlesuitOptions}
|
|
components={{
|
|
SingleValue: (props) => {
|
|
return (
|
|
<>
|
|
<components.SingleValue {...props}>
|
|
<Flex sx={{ alignItems: 'center', color: 'black' }}>
|
|
<Image
|
|
width={20}
|
|
height={20}
|
|
alt={props.data.label}
|
|
src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${props.data.value}.png`}
|
|
sx={{ flexShrink: 0, mr: 2 }}
|
|
/>
|
|
{props.children}
|
|
</Flex>
|
|
</components.SingleValue>
|
|
</>
|
|
)
|
|
},
|
|
Option: (props) => {
|
|
return (
|
|
<>
|
|
<components.Option {...props}>
|
|
<Flex sx={{ alignItems: 'center', color: 'black' }}>
|
|
<Image
|
|
width={20}
|
|
height={20}
|
|
alt={props.data.label}
|
|
src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${props.data.value}.png`}
|
|
sx={{ mr: 2, flexShrink: 0 }}
|
|
/>
|
|
{props.children}
|
|
</Flex>
|
|
</components.Option>
|
|
</>
|
|
)
|
|
},
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default BattlesuitSelect
|