ADD - Translation of skill identifier labels

Signed-off-by: RaenonX <[email protected]>
RaenonX-DL · Dec 23, 2020 · 97b61fa · 97b61fa
1 parent ee80d8f
commit 97b61fa
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 29 deletions.
diff --git a/public/locales/cht/translation.json b/public/locales/cht/translation.json
@@ -98,6 +98,7 @@
         "buff_count": "Buff 數增傷",
         "buff_zone": "Buff 區域數增傷",
         "crisis_up": "低血增傷",
+        "crisis_up_desc": "最多增傷 {{maxRate}} 倍",
         "crisis_down": "滿血增傷"
       },
       "search": "搜尋"

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -98,6 +98,7 @@
         "buff_count": "Buff 數增傷",
         "buff_zone": "Buff 區域數增傷",
         "crisis_up": "低血增傷",
+        "crisis_up_desc": "最多增傷 {{maxRate}} 倍",
         "crisis_down": "滿血增傷"
       },
       "search": "搜尋"

diff --git a/public/locales/jp/translation.json b/public/locales/jp/translation.json
@@ -98,6 +98,7 @@
         "buff_count": "Buff 數增傷",
         "buff_zone": "Buff 區域數增傷",
         "crisis_up": "低血增傷",
+        "crisis_up_desc": "最多增傷 {{maxRate}} 倍",
         "crisis_down": "滿血增傷"
       },
       "search": "搜尋"

diff --git a/src/components/elements/gameData/skillAtk/outputEntry.tsx b/src/components/elements/gameData/skillAtk/outputEntry.tsx
@@ -2,7 +2,7 @@ import React, {ReactNode} from 'react';
 import {Badge, Col, Row} from 'react-bootstrap';
 import {useTranslation} from 'react-i18next';
 import {DepotPaths} from '../../../../utils/services/resources';
-import {AfflictionUnit, AllConditionEnums} from '../../../../utils/services/resources/types';
+import {AfflictionUnit, AllConditionEnums, SkillIdentifierInfo} from '../../../../utils/services/resources/types';
 import {DistributionBar} from '../../charts';
 import {OverlayTooltip} from '../../express';
 
@@ -14,10 +14,13 @@ type SkillEntryProps = {
   inputData?: InputData,
   calculatedData: CalculatedData,
   allConditionEnums: AllConditionEnums,
+  skillIdentifierInfo: SkillIdentifierInfo,
 }
 
 
-export const AttackingSkillEntry = ({inputData, calculatedData, allConditionEnums}: SkillEntryProps) => {
+export const AttackingSkillEntry = (props: SkillEntryProps) => {
+  const {inputData, calculatedData, allConditionEnums, skillIdentifierInfo} = props;
+
   const {t, i18n} = useTranslation();
 
   const atkSkillEntry = calculatedData.skillEntry;
@@ -41,7 +44,13 @@ export const AttackingSkillEntry = ({inputData, calculatedData, allConditionEnum
 
   const SkillName = () => (
     <>
-      <span className="h5">{atkSkillEntry.skill.identifiers.join(' / ')}</span>
+      <span className="h5">
+        {
+          atkSkillEntry.skill.identifiers
+            .map((identifier) => skillIdentifierInfo[identifier].trans[i18n.language])
+            .join(' / ')
+        }
+      </span>
       <br/>
       <small>{atkSkillEntry.skill.name[i18n.language]}</small>
     </>
@@ -150,8 +159,15 @@ export const AttackingSkillEntry = ({inputData, calculatedData, allConditionEnum
 
     // Crisis mods available
     if (atkSkillEntry.skill.crisisMax.some((data) => data !== 0 && data > 1)) {
+      const tooltipText = t(
+        'game.skill_atk.entry.crisis_up_desc',
+        {maxRate: Math.max(...atkSkillEntry.skill.crisisMax).toFixed(2)},
+      );
+
       badges = badges.concat([
-        <Badge key="crisisUp" variant="danger">{t('game.skill_atk.entry.crisis_up')}</Badge>,
+        <OverlayTooltip key="crisisUp" text={tooltipText}>
+          <Badge variant="danger">{t('game.skill_atk.entry.crisis_up')}</Badge>
+        </OverlayTooltip>,
       ]);
     }
     if (atkSkillEntry.skill.crisisMax.some((data) => data !== 0 && data < 1)) {
@@ -187,10 +203,10 @@ export const AttackingSkillEntry = ({inputData, calculatedData, allConditionEnum
         <Col xs="auto" sm="auto" className="mr-2">
           <ImageIcon/>
         </Col>
-        <Col xs="auto" sm="auto" className="my-auto">
+        <Col className="my-auto">
           <SkillName/>
         </Col>
-        <Col className="text-right my-auto">
+        <Col xs="auto" sm="auto" className="text-right my-auto">
           <SkillInfo/>
         </Col>
         <Col className="text-center my-auto" lg={5}>

diff --git a/src/components/elements/gameData/skillAtk/outputMain.tsx b/src/components/elements/gameData/skillAtk/outputMain.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 import {calculateDamage, CalculateDamageReturn} from '../../../../utils/game';
-import {AllConditionEnums, AttackingSkillData, ElementBonusData} from '../../../../utils/services/resources/types';
+import {
+  AllConditionEnums,
+  AttackingSkillData,
+  ElementBonusData,
+  SkillIdentifierInfo,
+} from '../../../../utils/services/resources/types';
 
 import {InputData} from './inputSection';
 import {AttackingSkillEntry} from './outputEntry';
@@ -38,11 +43,12 @@ type OutputProps = {
   elementBonusData: ElementBonusData,
   atkSkillEntries: Array<AttackingSkillData>,
   allConditionEnums: AllConditionEnums,
+  skillIdentifierInfo: SkillIdentifierInfo,
 }
 
 
 export const AttackingSkillOutput = (props: OutputProps) => {
-  const {inputData, elementBonusData, atkSkillEntries, allConditionEnums} = props;
+  const {inputData, elementBonusData, atkSkillEntries, allConditionEnums, skillIdentifierInfo} = props;
 
   // Early termination on no input
   if (!inputData) {
@@ -75,7 +81,8 @@ export const AttackingSkillOutput = (props: OutputProps) => {
           .sort((a, b) => b.skillDamage.expected - a.skillDamage.expected)
           .map((calculatedData: CalculatedData, index: number) => (
             <AttackingSkillEntry
-              inputData={inputData} calculatedData={calculatedData} allConditionEnums={allConditionEnums} key={index}/>
+              key={index} inputData={inputData} calculatedData={calculatedData}
+              allConditionEnums={allConditionEnums} skillIdentifierInfo={skillIdentifierInfo}/>
           ))
       }
     </>

diff --git a/src/components/pages/gameData/skillAtk.tsx b/src/components/pages/gameData/skillAtk.tsx
@@ -2,7 +2,12 @@ import React, {Suspense} from 'react';
 import {Col, Row} from 'react-bootstrap';
 import {useTranslation} from 'react-i18next';
 import {ResourceLoader} from '../../../utils/services/resources';
-import {AllConditionEnums, AttackingSkillData, ElementBonusData} from '../../../utils/services/resources/types';
+import {
+  AllConditionEnums,
+  AttackingSkillData,
+  ElementBonusData,
+  SkillIdentifierInfo,
+} from '../../../utils/services/resources/types';
 import {PageLoading} from '../../elements';
 import {AttackingSkillInput, AttackingSkillOutput, InputData} from '../../elements/gameData';
 import {titleNavBarId} from '../../elements/posts/pageAnchor';
@@ -28,6 +33,12 @@ type AllConditionEnumState = {
 }
 
 
+type SkillIdentifierInfoState = {
+  fetched: boolean,
+  skillIdentifierInfo: SkillIdentifierInfo,
+}
+
+
 export const AttackingSkillList = ({fnSetTitle}: PageProps) => {
   const {t} = useTranslation();
 
@@ -73,44 +84,65 @@ export const AttackingSkillList = ({fnSetTitle}: PageProps) => {
   }
   // endregion
 
+  // region Condition enums & fetch
+  const [allConditionEnumState, setAllConditionEnumState] = React.useState<AllConditionEnumState>({
+    fetched: false,
+    allConditionEnums: {},
+  });
+
+  // Fetch data
+  if (!allConditionEnumState.fetched) {
+    ResourceLoader.getEnumAllConditions((data) => {
+      setAllConditionEnumState({
+        ...allConditionEnumState,
+        fetched: true,
+        allConditionEnums: data,
+      });
+    })
+      .catch((e) => {
+        console.warn('Failed to fetch the resources of all condition enums.', e);
+      });
+  }
+  // endregion
+
   // region Attacking skill entries & fetch
-  const [attackingSkillEntryState, setAttackingSkillEntryState] = React.useState<AttackingSkillEntryState>({
+  const [skillIdentifierInfoState, setSkillIdentifierInfoState] = React.useState<SkillIdentifierInfoState>({
     fetched: false,
-    atkSkillEntries: [],
+    skillIdentifierInfo: {},
   });
 
   // Fetch data
-  if (!attackingSkillEntryState.fetched) {
-    ResourceLoader.getAttackingSkillEntries((data) => {
-      setAttackingSkillEntryState({
-        ...attackingSkillEntryState,
+  if (!skillIdentifierInfoState.fetched) {
+    ResourceLoader.getSkillIdentifierInfo((data) => {
+      setSkillIdentifierInfoState({
+        ...skillIdentifierInfoState,
         fetched: true,
-        atkSkillEntries: data,
+        skillIdentifierInfo: data,
       });
     })
       .catch((e) => {
-        console.warn('Failed to fetch the attacking skill data.', e);
+        console.warn('Failed to fetch the skill identifier info.', e);
       });
   }
   // endregion
 
   // region Attacking skill entries & fetch
-  const [allConditionEnumState, setAllConditionEnumState] = React.useState<AllConditionEnumState>({
+  const [attackingSkillEntryState, setAttackingSkillEntryState] = React.useState<AttackingSkillEntryState>({
     fetched: false,
-    allConditionEnums: {},
+    atkSkillEntries: [],
   });
 
   // Fetch data
-  if (!allConditionEnumState.fetched) {
-    ResourceLoader.getEnumAllConditions((data) => {
-      setAllConditionEnumState({
-        ...allConditionEnumState,
+  if (!attackingSkillEntryState.fetched) {
+    ResourceLoader.getAttackingSkillEntries((data) => {
+      setAttackingSkillEntryState({
+        ...attackingSkillEntryState,
         fetched: true,
-        allConditionEnums: data,
+        atkSkillEntries: data,
       });
     })
       .catch((e) => {
-        console.warn('Failed to fetch the resources of all condition enums.', e);
+        console.warn('Failed to fetch the attacking skill data.', e);
       });
   }
   // endregion
@@ -126,6 +158,7 @@ export const AttackingSkillList = ({fnSetTitle}: PageProps) => {
             inputData={inputDataForward}
             allConditionEnums={allConditionEnumState.allConditionEnums}
             elementBonusData={elementBonusState.elementBonusData}
+            skillIdentifierInfo={skillIdentifierInfoState.skillIdentifierInfo}
             atkSkillEntries={attackingSkillEntryState.atkSkillEntries}/>
         </Suspense>
       </Col>

diff --git a/src/utils/services/resources/loader.ts b/src/utils/services/resources/loader.ts
@@ -1,7 +1,12 @@
 import {ResourcePaths} from './paths';
-import {AllConditionEnums, CategorizedConditionEnums, ElementEnums} from './types/enums';
-import {ElementBonus} from './types/misc';
-import {AttackingSkillData} from './types/skillAtk';
+import {
+  AllConditionEnums,
+  AttackingSkillData,
+  CategorizedConditionEnums,
+  ElementBonus,
+  ElementEnums,
+  SkillIdentifierInfo,
+} from './types';
 
 /**
  * Class to load the resources.
@@ -59,6 +64,19 @@ export class ResourceLoader {
     return ResourceLoader.fetchResources<Array<AttackingSkillData>>(ResourcePaths.SKILLS_ATK, callback);
   }
 
+  /**
+   * Get the skill identifier info.
+   *
+   * @function
+   * @param {function?} callback function to be called after fetching the resource
+   * @return {Promise<Array<AttackingSkillData>>} promise after the callback
+   */
+  static getSkillIdentifierInfo(
+    callback?: (skillIdentifierInfo: SkillIdentifierInfo) => void,
+  ): Promise<SkillIdentifierInfo> {
+    return ResourceLoader.fetchResources<SkillIdentifierInfo>(ResourcePaths.SKILLS_IDENTIFIERS, callback);
+  }
+
   // endregion
 
   // region Misc

diff --git a/src/utils/services/resources/paths.ts b/src/utils/services/resources/paths.ts
@@ -11,6 +11,7 @@ export class ResourcePaths {
 
   static SKILLS_DIR = ResourcePaths.ROOT + '/skills';
   static SKILLS_ATK = ResourcePaths.SKILLS_DIR + '/attacking.json';
+  static SKILLS_IDENTIFIERS = ResourcePaths.SKILLS_DIR + '/identifiers.json';
 
   static MISC_DIR = ResourcePaths.ROOT + '/misc';
   static MISC_ELEM_BONUS = ResourcePaths.MISC_DIR + '/elementBonus.json';

diff --git a/src/utils/services/resources/types.ts b/src/utils/services/resources/types.ts
@@ -1,5 +1,6 @@
 import {AllConditionEnums, CategorizedConditionEnums, ElementEnums, EnumEntry} from './types/enums';
 import {ElementBonus, ElementBonusData} from './types/misc';
+import {SkillIdentifierEntry, SkillIdentifierInfo} from './types/skill';
 import {AfflictionUnit, AttackingSkillData} from './types/skillAtk';
 
 export {ElementBonusData};
@@ -8,4 +9,5 @@ export type {
   EnumEntry, AllConditionEnums, CategorizedConditionEnums, ElementEnums,
   ElementBonus,
   AttackingSkillData, AfflictionUnit,
+  SkillIdentifierEntry, SkillIdentifierInfo,
 };
diff --git a/src/utils/services/resources/types/skill.ts b/src/utils/services/resources/types/skill.ts
@@ -0,0 +1,10 @@
+import {MultiLangText} from './text';
+
+
+export type SkillIdentifierEntry = {
+  name: string,
+  trans: MultiLangText,
+}
+
+
+export type SkillIdentifierInfo = Record<string, SkillIdentifierEntry>