diff --git a/components/AxSelect/index.tsx b/components/AxSelect/index.tsx index 636261ba..510920c9 100644 --- a/components/AxSelect/index.tsx +++ b/components/AxSelect/index.tsx @@ -1,4 +1,7 @@ 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' @@ -19,6 +22,10 @@ interface Props { } 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({ axValue1: '', @@ -84,7 +91,7 @@ const AXSelect = (props: Props) => { if (modifierSet == 0) { axOptionElements = axOptions.map((ax, i) => { return ( - + ) }) } else { @@ -103,14 +110,14 @@ const AXSelect = (props: Props) => { const secondaryAxOptions = primarySkill.secondary axOptionElements = secondaryAxOptions.map((ax, i) => { return ( - + ) }) } } } - axOptionElements?.unshift() + axOptionElements?.unshift() return axOptionElements } @@ -156,11 +163,19 @@ const AXSelect = (props: Props) => { let newErrors = {...errors} if (value < primaryAxSkill.minValue) { - newErrors.axValue1 = `${primaryAxSkill.name.en} must be at least ${primaryAxSkill.minValue}${ (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''}` + 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 = `${primaryAxSkill.name.en} cannot be greater than ${primaryAxSkill.maxValue}${ (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''}` + 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 = `${primaryAxSkill.name.en} must have a value` + newErrors.axValue1 = t('ax.errors.value_empty', { name: primaryAxSkill.name[locale] }) } else { newErrors.axValue1 = '' } @@ -179,13 +194,21 @@ const AXSelect = (props: Props) => { if (secondaryAxSkill) { if (value < secondaryAxSkill.minValue) { - newErrors.axValue2 = `${secondaryAxSkill.name.en} must be at least ${secondaryAxSkill.minValue}${ (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''}` + 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 = `${secondaryAxSkill.name.en} cannot be greater than ${secondaryAxSkill.maxValue}${ (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''}` + 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 = `${secondaryAxSkill.name.en} must be a whole number` + newErrors.axValue2 = t('ax.errors.value_not_whole', { name: secondaryAxSkill.name[locale] }) } else if (primaryAxValue <= 0) { - newErrors.axValue1 = `${primaryAxSkill.name.en} must have a value` + newErrors.axValue1 = t('ax.errors.value_empty', { name: primaryAxSkill.name[locale] }) } else { newErrors.axValue2 = '' } @@ -224,7 +247,7 @@ const AXSelect = (props: Props) => {
- +

{errors.axValue1}

@@ -232,7 +255,7 @@ const AXSelect = (props: Props) => {
- +

{errors.axValue2}

diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 69e741c8..1f8a684c 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -1,6 +1,9 @@ import React, { useState } from 'react' import { useCookies } from 'react-cookie' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' import { AxiosResponse } from 'axios' + import * as Dialog from '@radix-ui/react-dialog' import AXSelect from '~components/AxSelect' @@ -33,6 +36,10 @@ interface Props { } const WeaponModal = (props: Props) => { + const router = useRouter() + const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en' + const { t } = useTranslation('common') + // Cookies const [cookies] = useCookies(['account']) const headers = (cookies.account != null) ? { @@ -122,7 +129,7 @@ const WeaponModal = (props: Props) => { const elementSelect = () => { return (
-

Element

+

{t('modals.weapon.subtitles.element')}

{ const keySelect = () => { return (
-

Weapon Keys

+

{t('modals.weapon.subtitles.weapon_keys')}

{ ([2, 3, 17, 22].includes(props.gridWeapon.object.series)) ? { const axSelect = () => { return (
+

{t('modals.weapon.subtitles.ax_skills')}

{ event.preventDefault() }>
- Modify Weapon - {props.gridWeapon.object.name.en} + {t('modals.weapon.title')} + {props.gridWeapon.object.name[locale]}
@@ -203,7 +211,7 @@ const WeaponModal = (props: Props) => { { (props.gridWeapon.object.element == 0) ? elementSelect() : '' } { ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) ? keySelect() : '' } { (props.gridWeapon.object.ax > 0) ? axSelect() : '' } - +
diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 191ab614..1b4c632b 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,4 +1,13 @@ { + "ax": { + "no_skill": "No AX Skill", + "errors": { + "value_too_low": "{{name}} must be at least {{minValue}}{{suffix}}", + "value_too_high": "{{name}} cannot be greater than {{maxValue}}{{suffix}}", + "value_not_whole": "{{name}} must be a whole number", + "value_empty": "{{name}} must have a value" + } + }, "buttons": { "copy": "Copy link", "delete": "Delete team", @@ -111,6 +120,17 @@ "password": "Password", "password_confirm": "Password (again)" } + }, + "weapon": { + "title": "Modify Weapon", + "buttons": { + "confirm": "Save weapon" + }, + "subtitles": { + "element": "Element", + "ax_skills": "AX Skills", + "weapon_keys": "Weapon Keys" + } } }, "menu": { diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index f4018399..eee473e1 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -1,4 +1,13 @@ { + "ax": { + "no_skill": "EXスキルなし", + "errors": { + "value_too_low": "{{name}}は最低{{minValue}}{{suffix}}を入力してください", + "value_too_high": "{{name}}は最大{{maxValue}}を入力してください", + "value_not_whole": "{{name}}は整数でなければなりません", + "value_empty": "{{name}}を入力してください" + } + }, "buttons": { "copy": "リンクをコピー", "delete": "編成を削除", @@ -112,6 +121,17 @@ "password": "パスワード", "password_confirm": "パスワード確認" } + }, + "weapon": { + "title": "武器変更", + "buttons": { + "confirm": "武器を変更する" + }, + "subtitles": { + "element": "属性", + "ax_skills": "EXスキル", + "weapon_keys": "武器スキル" + } } }, "menu": {