Add translations for hovercards

components/CharacterHovercard/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
 import * as HoverCard from '@radix-ui/react-hover-card'
 
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 import UncapIndicator from '~components/UncapIndicator'
 
-import { axData } from '~utils/axData'
-
 import './index.scss'
 
 interface Props {
@@ -21,6 +22,10 @@ interface KeyNames {
 }
 
 const CharacterHovercard = (props: Props) => {
+    const router = useRouter()
+    const { t } = useTranslation('common')
+    const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+
     const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
     const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana']
 
@@ -56,8 +61,8 @@ const CharacterHovercard = (props: Props) => {
             <HoverCard.Content className="Weapon Hovercard">
                 <div className="top">
                     <div className="title">
-                        <h4>{ props.gridCharacter.object.name.en }</h4>
+                        <h4>{ props.gridCharacter.object.name[locale] }</h4>
-                        <img alt={props.gridCharacter.object.name.en} src={characterImage()} />
+                        <img alt={props.gridCharacter.object.name[locale]} src={characterImage()} />
                     </div>
                     <div className="subInfo">
                         <div className="icons">
@@ -76,7 +81,7 @@ const CharacterHovercard = (props: Props) => {
                     </div>
                 </div>
 
-                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">View more on gbf.wiki</a>
+                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">{t('buttons.wiki')}</a>
                 <HoverCard.Arrow />
             </HoverCard.Content>
         </HoverCard.Root>

components/SummonHovercard/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
 import * as HoverCard from '@radix-ui/react-hover-card'
 
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 import UncapIndicator from '~components/UncapIndicator'
 
-import { axData } from '~utils/axData'
-
 import './index.scss'
 
 interface Props {
@@ -21,8 +22,11 @@ interface KeyNames {
 }
 
 const SummonHovercard = (props: Props) => {
+    const router = useRouter()
+    const { t } = useTranslation('common')
+    const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+
     const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
-    const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana']
 
     const tintElement = Element[props.gridSummon.object.element]
     const wikiUrl = `https://gbf.wiki/${props.gridSummon.object.name.en.replaceAll(' ', '_')}`
@@ -57,8 +61,8 @@ const SummonHovercard = (props: Props) => {
             <HoverCard.Content className="Weapon Hovercard">
                 <div className="top">
                     <div className="title">
-                        <h4>{ props.gridSummon.object.name.en }</h4>
+                        <h4>{ props.gridSummon.object.name[locale] }</h4>
-                        <img alt={props.gridSummon.object.name.en} src={summonImage()} />
+                        <img alt={props.gridSummon.object.name[locale]} src={summonImage()} />
                     </div>
                     <div className="subInfo">
                         <div className="icons">
@@ -72,7 +76,7 @@ const SummonHovercard = (props: Props) => {
                         />
                     </div>
                 </div>
-                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">View more on gbf.wiki</a>
+                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">{t('buttons.wiki')}</a>
                 <HoverCard.Arrow />
             </HoverCard.Content>
         </HoverCard.Root>

components/WeaponHovercard/index.tsx

@@ -1,4 +1,7 @@
 import React from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
 import * as HoverCard from '@radix-ui/react-hover-card'
 
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
@@ -16,29 +19,33 @@ interface Props {
 interface KeyNames {
     [key: string]: {
         en: string,
-        jp: string
+        ja: string
     }
 }
 
 const WeaponHovercard = (props: Props) => {
+    const router = useRouter()
+    const { t } = useTranslation('common')
+    const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+    
     const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
     const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana']
     const WeaponKeyNames: KeyNames = {
         '2': {
             en: 'Pendulum',
-            jp: ''
+            ja: 'ペンデュラム'
         },
         '3': {
             en: 'Teluma',
-            jp: ''
+            ja: 'テルマ'
         },
         '17': {
             en: 'Gauph Key',
-            jp: ''
+            ja: 'ガフスキー'
         },
         '22': {
             en: 'Emblem',
-            jp: ''
+            ja: 'エンブレム'
         }
     }
 
@@ -61,7 +68,7 @@ const WeaponHovercard = (props: Props) => {
             const simpleAxSkill = props.gridWeapon.ax[0]
             const axSkill = primaryAxSkills.find(skill => skill.id == simpleAxSkill.modifier)
             
-            return `${axSkill?.name.en} +${simpleAxSkill.strength}${ (axSkill?.suffix) ? axSkill.suffix : '' }`
+            return `${axSkill?.name[locale]} +${simpleAxSkill.strength}${ (axSkill?.suffix) ? axSkill.suffix : '' }`
         }
 
         return ''
@@ -78,7 +85,7 @@ const WeaponHovercard = (props: Props) => {
 
             if (primaryAxSkill && primaryAxSkill.secondary) {
                 const secondaryAxSkill = primaryAxSkill.secondary.find(skill => skill.id == secondarySimpleAxSkill.modifier)
-                return `${secondaryAxSkill?.name.en} +${secondarySimpleAxSkill.strength}${ (secondaryAxSkill?.suffix) ? secondaryAxSkill.suffix : '' }`
+                return `${secondaryAxSkill?.name[locale]} +${secondarySimpleAxSkill.strength}${ (secondaryAxSkill?.suffix) ? secondaryAxSkill.suffix : '' }`
             }
         }
 
@@ -104,7 +111,7 @@ const WeaponHovercard = (props: Props) => {
                 Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => {
                     return (
                         <div className="weaponKey" key={props.gridWeapon.weapon_keys![i].id}>
-                        <span>{props.gridWeapon.weapon_keys![i].name.en}</span>
+                        <span>{props.gridWeapon.weapon_keys![i].name[locale]}</span>
                         </div>
                     )
                 }) : '' }
@@ -137,8 +144,8 @@ const WeaponHovercard = (props: Props) => {
             <HoverCard.Content className="Weapon Hovercard" side={hovercardSide()}>
                 <div className="top">
                     <div className="title">
-                        <h4>{ props.gridWeapon.object.name.en }</h4>
+                        <h4>{ props.gridWeapon.object.name[locale] }</h4>
-                        <img alt={props.gridWeapon.object.name.en} src={weaponImage()} />
+                        <img alt={props.gridWeapon.object.name[locale]} src={weaponImage()} />
                     </div>
                     <div className="subInfo">
                         <div className="icons">
@@ -158,7 +165,7 @@ const WeaponHovercard = (props: Props) => {
 
                 { (props.gridWeapon.object.ax > 0 && props.gridWeapon.ax && props.gridWeapon.ax[0].modifier && props.gridWeapon.ax[0].strength ) ? axSection : '' }
                 { (props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0) ? keysSection : '' }
-                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">View more on gbf.wiki</a>
+                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">{t('buttons.wiki')}</a>
                 <HoverCard.Arrow />
             </HoverCard.Content>
         </HoverCard.Root>

public/locales/en/common.json

@@ -5,7 +5,8 @@
         "edit_info": "Edit info",
         "hide_info": "Hide info",
         "menu": "Menu",
-        "new": "New"
+        "new": "New",
+        "wiki": "View more on gbf.wiki"
     },
     "modals": {
         "about": {

public/locales/ja/common.json

@@ -5,7 +5,8 @@
         "show_info": "詳細を編集",
         "hide_info": "詳細を非表示",
         "menu": "メニュー",
-        "new": "作成"
+        "new": "作成",
+        "wiki": "gbf.wikiで詳しく見る"
     },
     "modals": {
         "about": {