346 lines
10 KiB
TypeScript
346 lines
10 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import classNames from 'classnames'
|
|
|
|
import { axData } from '~utils/axData'
|
|
|
|
import './index.scss'
|
|
|
|
interface ErrorMap {
|
|
[index: string]: string
|
|
axValue1: string
|
|
axValue2: string
|
|
}
|
|
|
|
interface Props {
|
|
axType: number
|
|
currentSkills?: SimpleAxSkill[]
|
|
sendValidity: (isValid: boolean) => void
|
|
sendValues: (
|
|
primaryAxModifier: number,
|
|
primaryAxValue: number,
|
|
secondaryAxModifier: number,
|
|
secondaryAxValue: number
|
|
) => void
|
|
}
|
|
|
|
const AXSelect = (props: Props) => {
|
|
const router = useRouter()
|
|
const locale =
|
|
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
|
const { t } = useTranslation('common')
|
|
|
|
// Set up form states and error handling
|
|
const [errors, setErrors] = useState<ErrorMap>({
|
|
axValue1: '',
|
|
axValue2: '',
|
|
})
|
|
|
|
const primaryErrorClasses = classNames({
|
|
errors: true,
|
|
visible: errors.axValue1.length > 0,
|
|
})
|
|
|
|
const secondaryErrorClasses = classNames({
|
|
errors: true,
|
|
visible: errors.axValue2.length > 0,
|
|
})
|
|
|
|
// Refs
|
|
const primaryAxModifierSelect = React.createRef<HTMLSelectElement>()
|
|
const primaryAxValueInput = React.createRef<HTMLInputElement>()
|
|
const secondaryAxModifierSelect = React.createRef<HTMLSelectElement>()
|
|
const secondaryAxValueInput = React.createRef<HTMLInputElement>()
|
|
|
|
// States
|
|
const [primaryAxModifier, setPrimaryAxModifier] = useState(-1)
|
|
const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1)
|
|
const [primaryAxValue, setPrimaryAxValue] = useState(0.0)
|
|
const [secondaryAxValue, setSecondaryAxValue] = useState(0.0)
|
|
|
|
useEffect(() => {
|
|
if (props.currentSkills && props.currentSkills[0]) {
|
|
if (props.currentSkills[0].modifier != null)
|
|
setPrimaryAxModifier(props.currentSkills[0].modifier)
|
|
|
|
setPrimaryAxValue(props.currentSkills[0].strength)
|
|
}
|
|
|
|
if (props.currentSkills && props.currentSkills[1]) {
|
|
if (props.currentSkills[1].modifier != null)
|
|
setSecondaryAxModifier(props.currentSkills[1].modifier)
|
|
|
|
setSecondaryAxValue(props.currentSkills[1].strength)
|
|
}
|
|
}, [props.currentSkills])
|
|
|
|
useEffect(() => {
|
|
props.sendValues(
|
|
primaryAxModifier,
|
|
primaryAxValue,
|
|
secondaryAxModifier,
|
|
secondaryAxValue
|
|
)
|
|
}, [
|
|
props,
|
|
primaryAxModifier,
|
|
primaryAxValue,
|
|
secondaryAxModifier,
|
|
secondaryAxValue,
|
|
])
|
|
|
|
useEffect(() => {
|
|
props.sendValidity(
|
|
primaryAxValue > 0 && errors.axValue1 === '' && errors.axValue2 === ''
|
|
)
|
|
}, [props, primaryAxValue, errors])
|
|
|
|
// Classes
|
|
const secondarySetClasses = classNames({
|
|
AXSet: true,
|
|
hidden: primaryAxModifier < 0,
|
|
})
|
|
|
|
function generateOptions(modifierSet: number) {
|
|
const axOptions = axData[props.axType - 1]
|
|
|
|
let axOptionElements: React.ReactNode[] = []
|
|
if (modifierSet == 0) {
|
|
axOptionElements = axOptions.map((ax, i) => {
|
|
return (
|
|
<option key={i} value={ax.id}>
|
|
{ax.name[locale]}
|
|
</option>
|
|
)
|
|
})
|
|
} else {
|
|
// If we are loading data from the server, state doesn't set before render,
|
|
// so our defaultValue is undefined.
|
|
let modifier = -1
|
|
if (primaryAxModifier >= 0) modifier = primaryAxModifier
|
|
else if (props.currentSkills) modifier = props.currentSkills[0].modifier
|
|
|
|
if (modifier >= 0 && axOptions[modifier]) {
|
|
const primarySkill = axOptions[modifier]
|
|
|
|
if (primarySkill.secondary) {
|
|
const secondaryAxOptions = primarySkill.secondary
|
|
axOptionElements = secondaryAxOptions.map((ax, i) => {
|
|
return (
|
|
<option key={i} value={ax.id}>
|
|
{ax.name[locale]}
|
|
</option>
|
|
)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
axOptionElements?.unshift(
|
|
<option key={-1} value={-1}>
|
|
{t('ax.no_skill')}
|
|
</option>
|
|
)
|
|
return axOptionElements
|
|
}
|
|
|
|
function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
|
|
const value = parseInt(event.target.value)
|
|
|
|
if (primaryAxModifierSelect.current == event.target) {
|
|
setPrimaryAxModifier(value)
|
|
|
|
if (
|
|
primaryAxValueInput.current &&
|
|
secondaryAxModifierSelect.current &&
|
|
secondaryAxValueInput.current
|
|
) {
|
|
setupInput(axData[props.axType - 1][value], primaryAxValueInput.current)
|
|
|
|
secondaryAxModifierSelect.current.value = '-1'
|
|
secondaryAxValueInput.current.value = ''
|
|
}
|
|
} else {
|
|
setSecondaryAxModifier(value)
|
|
|
|
const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]
|
|
const currentAxSkill = primaryAxSkill.secondary
|
|
? primaryAxSkill.secondary.find((skill) => skill.id == value)
|
|
: undefined
|
|
|
|
if (secondaryAxValueInput.current)
|
|
setupInput(currentAxSkill, secondaryAxValueInput.current)
|
|
}
|
|
}
|
|
|
|
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
const value = parseFloat(event.target.value)
|
|
let newErrors = { ...errors }
|
|
|
|
if (primaryAxValueInput.current == event.target) {
|
|
if (handlePrimaryErrors(value)) setPrimaryAxValue(value)
|
|
} else {
|
|
if (handleSecondaryErrors(value)) setSecondaryAxValue(value)
|
|
}
|
|
}
|
|
|
|
function handlePrimaryErrors(value: number) {
|
|
const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]
|
|
let newErrors = { ...errors }
|
|
|
|
if (value < primaryAxSkill.minValue) {
|
|
newErrors.axValue1 = t('ax.errors.value_too_low', {
|
|
name: primaryAxSkill.name[locale],
|
|
minValue: primaryAxSkill.minValue,
|
|
suffix: primaryAxSkill.suffix ? primaryAxSkill.suffix : '',
|
|
})
|
|
} else if (value > primaryAxSkill.maxValue) {
|
|
newErrors.axValue1 = t('ax.errors.value_too_high', {
|
|
name: primaryAxSkill.name[locale],
|
|
maxValue: primaryAxSkill.minValue,
|
|
suffix: primaryAxSkill.suffix ? primaryAxSkill.suffix : '',
|
|
})
|
|
} else if (!value || value <= 0) {
|
|
newErrors.axValue1 = t('ax.errors.value_empty', {
|
|
name: primaryAxSkill.name[locale],
|
|
})
|
|
} else {
|
|
newErrors.axValue1 = ''
|
|
}
|
|
|
|
setErrors(newErrors)
|
|
|
|
return newErrors.axValue1.length === 0
|
|
}
|
|
|
|
function handleSecondaryErrors(value: number) {
|
|
const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]
|
|
let newErrors = { ...errors }
|
|
|
|
if (primaryAxSkill.secondary) {
|
|
const secondaryAxSkill = primaryAxSkill.secondary.find(
|
|
(skill) => skill.id == secondaryAxModifier
|
|
)
|
|
|
|
if (secondaryAxSkill) {
|
|
if (value < secondaryAxSkill.minValue) {
|
|
newErrors.axValue2 = t('ax.errors.value_too_low', {
|
|
name: secondaryAxSkill.name[locale],
|
|
minValue: secondaryAxSkill.minValue,
|
|
suffix: secondaryAxSkill.suffix ? secondaryAxSkill.suffix : '',
|
|
})
|
|
} else if (value > secondaryAxSkill.maxValue) {
|
|
newErrors.axValue2 = t('ax.errors.value_too_high', {
|
|
name: secondaryAxSkill.name[locale],
|
|
maxValue: secondaryAxSkill.minValue,
|
|
suffix: secondaryAxSkill.suffix ? secondaryAxSkill.suffix : '',
|
|
})
|
|
} else if (!secondaryAxSkill.suffix && value % 1 !== 0) {
|
|
newErrors.axValue2 = t('ax.errors.value_not_whole', {
|
|
name: secondaryAxSkill.name[locale],
|
|
})
|
|
} else if (primaryAxValue <= 0) {
|
|
newErrors.axValue1 = t('ax.errors.value_empty', {
|
|
name: primaryAxSkill.name[locale],
|
|
})
|
|
} else {
|
|
newErrors.axValue2 = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
setErrors(newErrors)
|
|
|
|
return newErrors.axValue2.length === 0
|
|
}
|
|
|
|
function setupInput(ax: AxSkill | undefined, element: HTMLInputElement) {
|
|
if (ax) {
|
|
const rangeString = `${ax.minValue}~${ax.maxValue}${ax.suffix || ''}`
|
|
|
|
element.disabled = false
|
|
element.placeholder = rangeString
|
|
element.min = `${ax.minValue}`
|
|
element.max = `${ax.maxValue}`
|
|
element.step = ax.suffix ? '0.5' : '1'
|
|
} else {
|
|
if (primaryAxValueInput.current && secondaryAxValueInput.current) {
|
|
if (primaryAxValueInput.current == element) {
|
|
primaryAxValueInput.current.disabled = true
|
|
primaryAxValueInput.current.placeholder = ''
|
|
}
|
|
|
|
secondaryAxValueInput.current.disabled = true
|
|
secondaryAxValueInput.current.placeholder = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="AXSelect">
|
|
<div className="AXSet">
|
|
<div className="fields">
|
|
<select
|
|
key="ax1"
|
|
defaultValue={
|
|
props.currentSkills && props.currentSkills[0]
|
|
? props.currentSkills[0].modifier
|
|
: -1
|
|
}
|
|
onChange={handleSelectChange}
|
|
ref={primaryAxModifierSelect}
|
|
>
|
|
{generateOptions(0)}
|
|
</select>
|
|
<input
|
|
defaultValue={
|
|
props.currentSkills && props.currentSkills[0]
|
|
? props.currentSkills[0].strength
|
|
: 0
|
|
}
|
|
className="Input"
|
|
type="number"
|
|
onChange={handleInputChange}
|
|
ref={primaryAxValueInput}
|
|
disabled={primaryAxValue != 0}
|
|
/>
|
|
</div>
|
|
<p className={primaryErrorClasses}>{errors.axValue1}</p>
|
|
</div>
|
|
|
|
<div className={secondarySetClasses}>
|
|
<div className="fields">
|
|
<select
|
|
key="ax2"
|
|
defaultValue={
|
|
props.currentSkills && props.currentSkills[1]
|
|
? props.currentSkills[1].modifier
|
|
: -1
|
|
}
|
|
onChange={handleSelectChange}
|
|
ref={secondaryAxModifierSelect}
|
|
>
|
|
{generateOptions(1)}
|
|
</select>
|
|
<input
|
|
defaultValue={
|
|
props.currentSkills && props.currentSkills[1]
|
|
? props.currentSkills[1].strength
|
|
: 0
|
|
}
|
|
className="Input"
|
|
type="number"
|
|
onChange={handleInputChange}
|
|
ref={secondaryAxValueInput}
|
|
disabled={secondaryAxValue != 0}
|
|
/>
|
|
</div>
|
|
<p className={secondaryErrorClasses}>{errors.axValue2}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AXSelect
|