Localize WeaponModal and AxSelect

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<ErrorMap>({
         axValue1: '',
@@ -84,7 +91,7 @@ const AXSelect = (props: Props) => {
         if (modifierSet == 0) {
             axOptionElements = axOptions.map((ax, i) => {
                 return (
-                    <option key={i} value={ax.id}>{ax.name.en}</option>
+                    <option key={i} value={ax.id}>{ax.name[locale]}</option>
                 )
             })
         } else {
@@ -103,14 +110,14 @@ const AXSelect = (props: Props) => {
                     const secondaryAxOptions = primarySkill.secondary
                     axOptionElements = secondaryAxOptions.map((ax, i) => {
                         return (
-                            <option key={i} value={ax.id}>{ax.name.en}</option>
+                            <option key={i} value={ax.id}>{ax.name[locale]}</option>
                         )
                     })
                 }
             }
         }
 
-        axOptionElements?.unshift(<option key={-1} value={-1}>No AX Skill</option>)
+        axOptionElements?.unshift(<option key={-1} value={-1}>{t('ax.no_skill')}</option>)
         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) => {
             <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 />
+                    <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>
@@ -232,7 +255,7 @@ const AXSelect = (props: Props) => {
             <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 />
+                    <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>

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 (
             <section>
-                <h3>Element</h3>
+                <h3>{t('modals.weapon.subtitles.element')}</h3>
                 <ElementToggle 
                     currentElement={props.gridWeapon.element} 
                     sendValue={receiveElementValue}
@@ -134,7 +141,7 @@ const WeaponModal = (props: Props) => {
     const keySelect = () => {        
         return (
             <section>
-                <h3>Weapon Keys</h3>
+                <h3>{t('modals.weapon.subtitles.weapon_keys')}</h3>
                 { ([2, 3, 17, 22].includes(props.gridWeapon.object.series)) ? 
                     <WeaponKeyDropdown
                         currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[0] : undefined }
@@ -165,6 +172,7 @@ const WeaponModal = (props: Props) => {
     const axSelect = () => {
         return (
             <section>
+                <h3>{t('modals.weapon.subtitles.ax_skills')}</h3>
                 <AXSelect 
                     axType={props.gridWeapon.object.ax}
                     currentSkills={props.gridWeapon.ax}
@@ -189,8 +197,8 @@ const WeaponModal = (props: Props) => {
                 <Dialog.Content className="Weapon Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
                     <div className="DialogHeader">
                         <div className="DialogTop">
-                            <Dialog.Title className="SubTitle">Modify Weapon</Dialog.Title>
-                            <Dialog.Title className="DialogTitle">{props.gridWeapon.object.name.en}</Dialog.Title>
+                            <Dialog.Title className="SubTitle">{t('modals.weapon.title')}</Dialog.Title>
+                            <Dialog.Title className="DialogTitle">{props.gridWeapon.object.name[locale]}</Dialog.Title>
                         </div>
                         <Dialog.Close className="DialogClose" asChild>
                             <span>
@@ -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() : '' }
-                        <Button onClick={updateWeapon} disabled={props.gridWeapon.object.ax > 0 && !formValid}>Save Weapon</Button>
+                        <Button onClick={updateWeapon} disabled={props.gridWeapon.object.ax > 0 && !formValid}>{t('modals.weapon.buttons.confirm')}</Button>
                     </div>
                 </Dialog.Content>
                 <Dialog.Overlay className="Overlay" />

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": {

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": {