From 005e25b5ba13ed23a29471ad04d9bb52d2a6c2fc Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 02:36:22 -0500
Subject: [PATCH 01/61] FIX - Disable GA in CI test build

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 pages/_document.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/_document.tsx b/pages/_document.tsx
index cb7b0a2d..eaedfcc8 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -59,6 +59,7 @@ class Document extends NextDocument<Props> {
           {/* Global site tag (gtag.js) - Google Analytics */}
           {
             process.env.NODE_ENV === 'production' &&
+            !process.env.CI &&
             <>
               <script async src="https://www.googletagmanager.com/gtag/js?id=G-796E69CFJG"/>
               <script dangerouslySetInnerHTML={{

From d8145f4b44e5b8c5137f38b396b2f4e21f3a9e9c Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 02:57:21 -0500
Subject: [PATCH 02/61] IMP - Refactor file structure

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/in/params.tsx  | 18 ++++++++--------
 .../in/{sectionAtk.tsx => sections/atk.tsx}   |  9 ++++----
 .../in/{sectionBuff.tsx => sections/buff.tsx} |  9 ++++----
 .../in/{sectionCrt.tsx => sections/crt.tsx}   | 11 +++++-----
 .../in/{sectionEx.tsx => sections/ex.tsx}     |  9 ++++----
 .../filter.tsx}                               | 13 ++++++------
 .../{sectionOther.tsx => sections/other.tsx}  |  9 ++++----
 .../punisher.tsx}                             |  9 ++++----
 .../{sectionSkill.tsx => sections/skill.tsx}  | 11 +++++-----
 .../target.tsx}                               | 21 ++++++++++---------
 .../elements/gameData/skillAtk/in/summary.tsx |  2 +-
 11 files changed, 65 insertions(+), 56 deletions(-)
 rename src/components/elements/gameData/skillAtk/in/{sectionAtk.tsx => sections/atk.tsx} (83%)
 rename src/components/elements/gameData/skillAtk/in/{sectionBuff.tsx => sections/buff.tsx} (83%)
 rename src/components/elements/gameData/skillAtk/in/{sectionCrt.tsx => sections/crt.tsx} (79%)
 rename src/components/elements/gameData/skillAtk/in/{sectionEx.tsx => sections/ex.tsx} (77%)
 rename src/components/elements/gameData/skillAtk/in/{sectionFilter.tsx => sections/filter.tsx} (83%)
 rename src/components/elements/gameData/skillAtk/in/{sectionOther.tsx => sections/other.tsx} (79%)
 rename src/components/elements/gameData/skillAtk/in/{sectionPunisher.tsx => sections/punisher.tsx} (79%)
 rename src/components/elements/gameData/skillAtk/in/{sectionSkill.tsx => sections/skill.tsx} (79%)
 rename src/components/elements/gameData/skillAtk/in/{sectionTarget.tsx => sections/target.tsx} (81%)

diff --git a/src/components/elements/gameData/skillAtk/in/params.tsx b/src/components/elements/gameData/skillAtk/in/params.tsx
index 177660c8..49a55fea 100644
--- a/src/components/elements/gameData/skillAtk/in/params.tsx
+++ b/src/components/elements/gameData/skillAtk/in/params.tsx
@@ -6,15 +6,15 @@ import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/re
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
 import {InputSectionBaseProps} from '../../props';
-import {SectionAtk} from './sectionAtk';
-import {SectionBuff} from './sectionBuff';
-import {SectionCrt} from './sectionCrt';
-import {SectionEx} from './sectionEx';
-import {SectionFilter} from './sectionFilter';
-import {SectionOther} from './sectionOther';
-import {SectionPunisher} from './sectionPunisher';
-import {SectionSkill} from './sectionSkill';
-import {SectionTarget} from './sectionTarget';
+import {SectionAtk} from './sections/atk';
+import {SectionBuff} from './sections/buff';
+import {SectionCrt} from './sections/crt';
+import {SectionEx} from './sections/ex';
+import {SectionFilter} from './sections/filter';
+import {SectionOther} from './sections/other';
+import {SectionPunisher} from './sections/punisher';
+import {SectionSkill} from './sections/skill';
+import {SectionTarget} from './sections/target';
 import {InputData} from './types';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sectionAtk.tsx b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
similarity index 83%
rename from src/components/elements/gameData/skillAtk/in/sectionAtk.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/atk.tsx
index 0a2cbc90..b5ace9ac 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionAtk.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {NumericInput} from '../../../common/input/numeric';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps} from './props';
+import {useI18n} from '../../../../../../i18n/hook';
+import {NumericInput} from '../../../../common/input/numeric';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps} from '../props';
+
 
 export const SectionAtk = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/in/sectionBuff.tsx b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
similarity index 83%
rename from src/components/elements/gameData/skillAtk/in/sectionBuff.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/buff.tsx
index e594e800..3b39ba01 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionBuff.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {NumericInput} from '../../../common/input/numeric';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps} from './props';
+import {useI18n} from '../../../../../../i18n/hook';
+import {NumericInput} from '../../../../common/input/numeric';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps} from '../props';
+
 
 export const SectionBuff = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/in/sectionCrt.tsx b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
similarity index 79%
rename from src/components/elements/gameData/skillAtk/in/sectionCrt.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/crt.tsx
index 5b421435..c98fe4cc 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionCrt.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {InlineCheck} from '../../../common/check/inlineCheck';
-import {NumericInput} from '../../../common/input/numeric';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps} from './props';
+import {useI18n} from '../../../../../../i18n/hook';
+import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {NumericInput} from '../../../../common/input/numeric';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps} from '../props';
+
 
 export const SectionCrt = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/in/sectionEx.tsx b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
similarity index 77%
rename from src/components/elements/gameData/skillAtk/in/sectionEx.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/ex.tsx
index b1362621..98feed90 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionEx.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {InlineCheck} from '../../../common/check/inlineCheck';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps} from './props';
+import {useI18n} from '../../../../../../i18n/hook';
+import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps} from '../props';
+
 
 export const SectionEx = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/in/sectionFilter.tsx b/src/components/elements/gameData/skillAtk/in/sections/filter.tsx
similarity index 83%
rename from src/components/elements/gameData/skillAtk/in/sectionFilter.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/filter.tsx
index aba971a6..2f98b270 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionFilter.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/filter.tsx
@@ -2,16 +2,17 @@ import React from 'react';
 
 import Form from 'react-bootstrap/Form';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {EnumChecksBox} from '../../../common/check/enumChecksBox';
-import {InlineCheck} from '../../../common/check/inlineCheck';
-import {SectionSubTitle} from '../../elements/subTitle';
-import {SectionTitle} from '../../elements/title';
+import {useI18n} from '../../../../../../i18n/hook';
+import {EnumChecksBox} from '../../../../common/check/enumChecksBox';
+import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {SectionSubTitle} from '../../../elements/subTitle';
+import {SectionTitle} from '../../../elements/title';
 import {
   SectionProps,
   SectionPropsCondEnums,
   SectionPropsElemEnums,
-} from './props';
+} from '../props';
+
 
 type SectionFilterProps =
   SectionProps &
diff --git a/src/components/elements/gameData/skillAtk/in/sectionOther.tsx b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
similarity index 79%
rename from src/components/elements/gameData/skillAtk/in/sectionOther.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/other.tsx
index bcf5c5a4..ce01a615 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionOther.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {NumericInput} from '../../../common/input/numeric';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps} from './props';
+import {useI18n} from '../../../../../../i18n/hook';
+import {NumericInput} from '../../../../common/input/numeric';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps} from '../props';
+
 
 export const SectionOther = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/in/sectionPunisher.tsx b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
similarity index 79%
rename from src/components/elements/gameData/skillAtk/in/sectionPunisher.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
index e34ef9e2..875b455f 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionPunisher.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {NumericInput} from '../../../common/input/numeric';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps} from './props';
+import {useI18n} from '../../../../../../i18n/hook';
+import {NumericInput} from '../../../../common/input/numeric';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps} from '../props';
+
 
 export const SectionPunisher = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/in/sectionSkill.tsx b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
similarity index 79%
rename from src/components/elements/gameData/skillAtk/in/sectionSkill.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/skill.tsx
index f23bf3d7..670fec5e 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionSkill.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
-import {useI18n} from '../../../../../i18n/hook';
-import {InlineCheck} from '../../../common/check/inlineCheck';
-import {NumericInput} from '../../../common/input/numeric';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps} from './props';
+import {useI18n} from '../../../../../../i18n/hook';
+import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {NumericInput} from '../../../../common/input/numeric';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps} from '../props';
+
 
 export const SectionSkill = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/in/sectionTarget.tsx b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
similarity index 81%
rename from src/components/elements/gameData/skillAtk/in/sectionTarget.tsx
rename to src/components/elements/gameData/skillAtk/in/sections/target.tsx
index c2f6639b..e8dba643 100644
--- a/src/components/elements/gameData/skillAtk/in/sectionTarget.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 
-import {ConditionCodes} from '../../../../../const/gameData';
-import {useI18n} from '../../../../../i18n/hook';
-import {CustomRadios} from '../../../common/check/customRadio';
-import {EnumChecksBox} from '../../../common/check/enumChecksBox';
-import {EnumChecksRadio} from '../../../common/check/enumChecksRadio';
-import {CheckEntry} from '../../../common/check/types';
-import {NumericInput} from '../../../common/input/numeric';
-import {SectionSubTitle} from '../../elements/subTitle';
-import {SectionTitle} from '../../elements/title';
-import {SectionProps, SectionPropsCondEnums} from './props';
+import {ConditionCodes} from '../../../../../../const/gameData';
+import {useI18n} from '../../../../../../i18n/hook';
+import {CustomRadios} from '../../../../common/check/customRadio';
+import {EnumChecksBox} from '../../../../common/check/enumChecksBox';
+import {EnumChecksRadio} from '../../../../common/check/enumChecksRadio';
+import {CheckEntry} from '../../../../common/check/types';
+import {NumericInput} from '../../../../common/input/numeric';
+import {SectionSubTitle} from '../../../elements/subTitle';
+import {SectionTitle} from '../../../elements/title';
+import {SectionProps, SectionPropsCondEnums} from '../props';
+
 
 type SectionTargetProps = SectionProps & SectionPropsCondEnums;
 
diff --git a/src/components/elements/gameData/skillAtk/in/summary.tsx b/src/components/elements/gameData/skillAtk/in/summary.tsx
index 6e3b5f6c..90b059d6 100644
--- a/src/components/elements/gameData/skillAtk/in/summary.tsx
+++ b/src/components/elements/gameData/skillAtk/in/summary.tsx
@@ -5,11 +5,11 @@ import {TranslationStruct} from '../../../../../i18n/translations/definition';
 import {GetTranslationFunction} from '../../../../../i18n/types';
 import {InputData} from './types';
 
+
 type InputSummaryProps = {
   inputData: InputData
 }
 
-
 export const InputSummary = ({inputData}: InputSummaryProps) => {
   const {t} = useI18n();
 

From 43a6be4934f25d3cf2c1f7abad6eaee7c4bca64d Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 03:41:43 -0500
Subject: [PATCH 03/61] DEL - Unused GA login event

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/utils/services/ga.ts | 26 +-------------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/src/utils/services/ga.ts b/src/utils/services/ga.ts
index 072a8c16..c14bf6a5 100644
--- a/src/utils/services/ga.ts
+++ b/src/utils/services/ga.ts
@@ -7,7 +7,6 @@ import {InputData as AnalysisInput} from '../../components/elements/posts/analys
 
 enum GAEvent {
   LANG_CHANGE = 'lang_change',
-  LOGIN = 'login',
   DAMAGE_CALCULATOR = 'damage_calc',
   ABILITY_SEARCH = 'ability_search',
   ANALYSIS_LOOKUP = 'analysis_lookup',
@@ -53,29 +52,6 @@ export class GoogleAnalytics {
     );
   }
 
-  /**
-   * Record the event of an user logged in.
-   *
-   * @param {string} method method used for login
-   * @param {boolean} success if the login succeed
-   * @param {string} errorName name of the error
-   */
-  static login(method: string = 'Google', success: boolean, errorName?: string) {
-    const params: Record<string, string | boolean> = {
-      'method': method,
-      'success': success,
-    };
-
-    if (errorName) {
-      params['error_name'] = errorName;
-    }
-
-    GoogleAnalytics.sendEvent(
-      GAEvent.LOGIN,
-      params,
-    );
-  }
-
   /**
    * Record the event of an user performed a search using damage calculator.
    *
@@ -168,7 +144,7 @@ export class GoogleAnalytics {
     }
 
     if ((window as any).gtag) {
-      // Defined in `index.html`
+      // Defined in entry point
       // @ts-ignore
       window.gtag('event', eventName, parameters);
     }

From f8f69447cf655ec8ba0fbaca6341208c34f0f967 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 04:59:48 -0500
Subject: [PATCH 04/61] IMP - Unify `<img>` usages

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/common/check/inlineCheckBase.tsx          |  4 ++--
 src/components/elements/common/image.tsx               |  6 +++++-
 src/components/elements/gameData/ex/out/entry.tsx      |  4 ++--
 .../elements/gameData/ex/out/exEffectUnit.tsx          |  4 ++--
 .../gameData/skillAtk/out/sectionAffliction.tsx        |  4 ++--
 .../elements/gameData/skillAtk/out/sectionIcon.tsx     | 10 ++++++----
 src/components/elements/gameData/unitIcon.tsx          |  4 ++--
 .../elements/markdown/transformers/image/main.tsx      |  6 +++---
 .../elements/markdown/transformers/image/types.ts      |  1 -
 .../elements/markdown/transformers/image/unit.tsx      |  8 --------
 10 files changed, 24 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/elements/markdown/transformers/image/unit.tsx

diff --git a/src/components/elements/common/check/inlineCheckBase.tsx b/src/components/elements/common/check/inlineCheckBase.tsx
index 73cf8db1..9c830508 100644
--- a/src/components/elements/common/check/inlineCheckBase.tsx
+++ b/src/components/elements/common/check/inlineCheckBase.tsx
@@ -5,7 +5,7 @@ import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import ToggleButton from 'react-bootstrap/ToggleButton';
 import {ButtonVariant} from 'react-bootstrap/types';
 
-import {Image} from '../image';
+import {ImageWithOverlay} from '../image';
 import {TitledProps} from '../types';
 import {CheckType} from './types';
 
@@ -34,7 +34,7 @@ export const InlineCheckBase = ({
   imageHeight,
 }: InlineCheckBaseProps) => {
   const label = imageUrl ?
-    <Image src={imageUrl} text={title} style={{height: imageHeight || '1.5rem'}}/> :
+    <ImageWithOverlay src={imageUrl} text={title} style={{height: imageHeight || '1.5rem'}}/> :
     <span className="text-light">{title}</span>;
 
   // Value of `1` is the identifier of that button in a button group.
diff --git a/src/components/elements/common/image.tsx b/src/components/elements/common/image.tsx
index 24d8a33c..dbb66bfd 100644
--- a/src/components/elements/common/image.tsx
+++ b/src/components/elements/common/image.tsx
@@ -11,7 +11,11 @@ type ImageIconProps = {
 }
 
 export const Image = ({text, src, className, style}: ImageIconProps) => (
+  <img src={src} alt={text} style={style} className={className}/>
+);
+
+export const ImageWithOverlay = ({text, src, className, style}: ImageIconProps) => (
   <OverlayTooltip text={text}>
-    <img src={src} alt={text} style={style} className={className}/>
+    <Image src={src} text={text} style={style} className={className}/>
   </OverlayTooltip>
 );
diff --git a/src/components/elements/gameData/ex/out/entry.tsx b/src/components/elements/gameData/ex/out/entry.tsx
index a4ae4391..a849167c 100644
--- a/src/components/elements/gameData/ex/out/entry.tsx
+++ b/src/components/elements/gameData/ex/out/entry.tsx
@@ -9,7 +9,7 @@ import {
   CharaExAbilityDataEntry,
 } from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
-import {Image} from '../../../common/image';
+import {ImageWithOverlay} from '../../../common/image';
 import {ExAbility} from './exUnit';
 
 
@@ -29,7 +29,7 @@ export const ExAbilityEntry = ({entry, conditionEnums}: ExAbilityEntryProps) =>
     <div className="rounded bg-black-32 p-2 mb-2">
       <Row noGutters>
         <Col xs="auto" className="align-middle">
-          <Image src={charaIconURL} text={charaName} style={{height: '4rem'}}/>
+          <ImageWithOverlay src={charaIconURL} text={charaName} style={{height: '4rem'}}/>
         </Col>
         <Col>
           <Row noGutters>
diff --git a/src/components/elements/gameData/ex/out/exEffectUnit.tsx b/src/components/elements/gameData/ex/out/exEffectUnit.tsx
index 372427a4..ea79355a 100644
--- a/src/components/elements/gameData/ex/out/exEffectUnit.tsx
+++ b/src/components/elements/gameData/ex/out/exEffectUnit.tsx
@@ -5,7 +5,7 @@ import Row from 'react-bootstrap/Row';
 
 import {DepotPaths, AbilityVariantEffectUnitData} from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
-import {Image} from '../../../common/image';
+import {ImageWithOverlay} from '../../../common/image';
 import {OverlayTooltip} from '../../../common/overlay/tooltip';
 
 
@@ -24,7 +24,7 @@ export const ExEffectUnit = ({
     <>
       <Row>
         <Col style={{fontSize: '1.1rem'}}>
-          <Image
+          <ImageWithOverlay
             src={DepotPaths.getImageURL(effectUnit.parameter.imagePath)}
             text={effectUnit.parameter.name[lang]}
             style={{height: '2rem'}}
diff --git a/src/components/elements/gameData/skillAtk/out/sectionAffliction.tsx b/src/components/elements/gameData/skillAtk/out/sectionAffliction.tsx
index 3413c29a..5d881b40 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionAffliction.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sectionAffliction.tsx
@@ -5,7 +5,7 @@ import Col from 'react-bootstrap/Col';
 
 import {DepotPaths, AfflictionUnit} from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
-import {Image} from '../../../common/image';
+import {ImageWithOverlay} from '../../../common/image';
 import {SectionProps} from './props';
 
 
@@ -25,7 +25,7 @@ export const SectionAffliction = ({atkSkillEntry}: SectionProps) => {
           ))
           .map((affliction: AfflictionUnit, index: number) => (
             <React.Fragment key={index}>
-              <Image
+              <ImageWithOverlay
                 text={affliction.statusIcon}
                 src={DepotPaths.getAfflictionIconURL(affliction.statusIcon)}
                 style={{width: '1.5rem'}}
diff --git a/src/components/elements/gameData/skillAtk/out/sectionIcon.tsx b/src/components/elements/gameData/skillAtk/out/sectionIcon.tsx
index 360fe275..5e70cac2 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionIcon.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sectionIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {DepotPaths} from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
-import {OverlayTooltip} from '../../../common/overlay/tooltip';
+import {ImageWithOverlay} from '../../../common/image';
 import {SectionProps} from './props';
 
 export const SectionImageIcon = ({atkSkillEntry}: SectionProps) => {
@@ -12,8 +12,10 @@ export const SectionImageIcon = ({atkSkillEntry}: SectionProps) => {
   const charaIconURL = DepotPaths.getCharaIconURL(atkSkillEntry.chara.iconName);
 
   return (
-    <OverlayTooltip text={charaName}>
-      <img src={charaIconURL} alt={charaName} style={{height: '4rem'}}/>
-    </OverlayTooltip>
+    <ImageWithOverlay
+      src={charaIconURL}
+      text={charaName}
+      style={{height: '4rem'}}
+    />
   );
 };
diff --git a/src/components/elements/gameData/unitIcon.tsx b/src/components/elements/gameData/unitIcon.tsx
index 2ef6a6a9..ec04ede8 100644
--- a/src/components/elements/gameData/unitIcon.tsx
+++ b/src/components/elements/gameData/unitIcon.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {UnitInfoData} from '../../../api-def/resources/types';
 import {useI18n} from '../../../i18n/hook';
 import {getImageURL} from '../../../utils/services/resources/unitInfo/utils';
-import {Image} from '../common/image';
+import {ImageWithOverlay} from '../common/image';
 
 
 type UnitIconProps = {
@@ -16,7 +16,7 @@ export const UnitIcon = ({unitInfo, className, style}: UnitIconProps) => {
   const {lang} = useI18n();
 
   return (
-    <Image
+    <ImageWithOverlay
       src={getImageURL(unitInfo)}
       text={unitInfo.name[lang]}
       className={className}
diff --git a/src/components/elements/markdown/transformers/image/main.tsx b/src/components/elements/markdown/transformers/image/main.tsx
index 50f8dec4..29282a7b 100644
--- a/src/components/elements/markdown/transformers/image/main.tsx
+++ b/src/components/elements/markdown/transformers/image/main.tsx
@@ -4,10 +4,10 @@ import Button from 'react-bootstrap/Button';
 
 import {useI18n} from '../../../../../i18n/hook';
 import {GoogleAnalytics} from '../../../../../utils/services/ga';
+import {Image} from '../../../common/image';
 import {CommonModal, ModalState} from '../../../common/modal';
 import {IMAGE_CLASS_SPLITTER} from './const';
 import {ImageProps} from './types';
-import {ImageUnit} from './unit';
 
 
 export const ImageInHTML = ({src, alt}: ImageProps) => {
@@ -26,7 +26,7 @@ export const ImageInHTML = ({src, alt}: ImageProps) => {
     setModalState({
       ...modalState,
       show: true,
-      message: <ImageUnit src={actualSrc} alt={alt} className={className}/>,
+      message: <Image src={actualSrc} text={alt} className={className}/>,
     });
   };
 
@@ -42,5 +42,5 @@ export const ImageInHTML = ({src, alt}: ImageProps) => {
     );
   }
 
-  return <ImageUnit src={actualSrc} alt={alt} className={className}/>;
+  return <Image src={actualSrc} text={alt} className={className}/>;
 };
diff --git a/src/components/elements/markdown/transformers/image/types.ts b/src/components/elements/markdown/transformers/image/types.ts
index 6685b598..18074528 100644
--- a/src/components/elements/markdown/transformers/image/types.ts
+++ b/src/components/elements/markdown/transformers/image/types.ts
@@ -1,5 +1,4 @@
 export type ImageProps = {
   src: string,
   alt: string,
-  className?: string,
 }
diff --git a/src/components/elements/markdown/transformers/image/unit.tsx b/src/components/elements/markdown/transformers/image/unit.tsx
deleted file mode 100644
index 5ffc86e6..00000000
--- a/src/components/elements/markdown/transformers/image/unit.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-import {ImageProps} from './types';
-
-
-export const ImageUnit = ({src, alt, className}: ImageProps) => (
-  <img src={src} alt={alt} className={className}/>
-);

From 64b5129bb3ee6655dd631e40ccd3e71597ff9380 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 05:25:18 -0500
Subject: [PATCH 05/61] ADD - Enum entry icon

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/enumIcon.test.tsx       | 49 +++++++++++++++++++
 src/components/elements/gameData/enumIcon.tsx | 27 ++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/components/elements/gameData/enumIcon.test.tsx
 create mode 100644 src/components/elements/gameData/enumIcon.tsx

diff --git a/src/components/elements/gameData/enumIcon.test.tsx b/src/components/elements/gameData/enumIcon.test.tsx
new file mode 100644
index 00000000..64767cda
--- /dev/null
+++ b/src/components/elements/gameData/enumIcon.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import {screen} from '@testing-library/react';
+
+import {renderReact} from '../../../../test/render/main';
+import {SupportedLanguages} from '../../../api-def/api/other/lang';
+import {DepotPaths} from '../../../api-def/resources/paths';
+import {EnumEntry} from '../../../api-def/resources/types/enum';
+import {EnumEntryImageIcon} from './enumIcon';
+
+
+describe('Enum entry icon', () => {
+  it('shows image if the image path is available', async () => {
+    const entry: EnumEntry = {
+      code: 7,
+      name: 'enum',
+      imagePath: '/image.jpg',
+      trans: {
+        [SupportedLanguages.CHT]: 'enum CHT',
+        [SupportedLanguages.EN]: 'enum EN',
+        [SupportedLanguages.JP]: 'enum JP',
+      },
+    };
+    renderReact(() => <EnumEntryImageIcon entry={entry}/>);
+    expect(screen.getByAltText('enum EN')).toHaveAttribute('src', DepotPaths.getImageURL('/image.jpg'));
+  });
+
+  it('shows translation if the image is unavailable', async () => {
+    const entry: EnumEntry = {
+      code: 7,
+      name: 'enum',
+      imagePath: null,
+      trans: {
+        [SupportedLanguages.CHT]: 'enum CHT',
+        [SupportedLanguages.EN]: 'enum EN',
+        [SupportedLanguages.JP]: 'enum JP',
+      },
+    };
+    renderReact(() => <EnumEntryImageIcon entry={entry}/>);
+
+    expect(screen.getByText('enum EN')).toBeInTheDocument();
+  });
+
+  it('shows nothing if the entry is undefined', async () => {
+    const {container} = renderReact(() => <EnumEntryImageIcon entry={undefined}/>);
+
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/src/components/elements/gameData/enumIcon.tsx b/src/components/elements/gameData/enumIcon.tsx
new file mode 100644
index 00000000..9e0343be
--- /dev/null
+++ b/src/components/elements/gameData/enumIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {DepotPaths, EnumEntry} from '../../../api-def/resources';
+import {useI18n} from '../../../i18n/hook';
+import {Image} from '../common/image';
+
+
+type Props = {
+  entry: EnumEntry | undefined,
+}
+
+export const EnumEntryImageIcon = ({entry}: Props) => {
+  const {lang} = useI18n();
+
+  if (!entry) {
+    return <></>;
+  }
+
+  const imagePath = entry.imagePath;
+  const text = entry.trans[lang];
+
+  if (!imagePath) {
+    return <>{text}</>;
+  }
+
+  return <Image src={DepotPaths.getImageURL(imagePath)} text={text} style={{height: '1.3rem'}}/>;
+};

From 71d012e4a0cfb668f2d38cb7b141a4ae1e43c5b1 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 05:26:44 -0500
Subject: [PATCH 06/61] ADD - Utils to get the name of condition enum

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/const/gameData.ts           |  8 ++++++++
 src/utils/game/conditionName.ts | 13 +++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/utils/game/conditionName.ts

diff --git a/src/const/gameData.ts b/src/const/gameData.ts
index 19abc3f7..c3bdf1d5 100644
--- a/src/const/gameData.ts
+++ b/src/const/gameData.ts
@@ -1,3 +1,5 @@
+import {GetTranslationFunction} from '../i18n/types';
+
 /**
  * Class of the condition codes.
  *
@@ -12,3 +14,9 @@ export enum ConditionCodes {
   TARGET_STATE_BK = 180,
   TARGET_STATE_OD = 181,
 }
+
+export const conditionNameTransFunc: { [code in ConditionCodes]?: GetTranslationFunction } = {
+  [ConditionCodes.NONE]: (t) => t.game.skillAtk.name.targetState.none,
+  [ConditionCodes.TARGET_STATE_OD]: (t) => t.game.skillAtk.name.targetState.od,
+  [ConditionCodes.TARGET_STATE_BK]: (t) => t.game.skillAtk.name.targetState.bk,
+};
diff --git a/src/utils/game/conditionName.ts b/src/utils/game/conditionName.ts
new file mode 100644
index 00000000..27ab4862
--- /dev/null
+++ b/src/utils/game/conditionName.ts
@@ -0,0 +1,13 @@
+import {ConditionCodes, conditionNameTransFunc} from '../../const/gameData';
+import {TFunction} from '../../i18n/types';
+
+
+export const getConditionName = (condition: ConditionCodes, t: TFunction): string => {
+  const transFunc = conditionNameTransFunc[condition];
+
+  if (!transFunc) {
+    return ConditionCodes[condition];
+  }
+
+  return t(transFunc);
+};

From 3bf32c44d3928863e3815e3d2a4b5d0dfa1261e9 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 05:27:44 -0500
Subject: [PATCH 07/61] IMP - Style improvements

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/common/check/customBase.tsx      | 23 +++++++++----------
 .../elements/common/check/customRadio.tsx     |  1 +
 .../elements/gameData/skillAtk/in/main.tsx    |  1 -
 src/const/config.ts                           |  3 ---
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/elements/common/check/customBase.tsx b/src/components/elements/common/check/customBase.tsx
index 1a9df1bb..f1d19793 100644
--- a/src/components/elements/common/check/customBase.tsx
+++ b/src/components/elements/common/check/customBase.tsx
@@ -4,6 +4,7 @@ import {ChecksBase} from './checksBase';
 import {InlineCheckBase} from './inlineCheckBase';
 import {CheckEntry, CheckType} from './types';
 
+
 type CustomRadiosProps = {
   options: Array<CheckEntry>,
   type: CheckType,
@@ -22,18 +23,16 @@ export const CustomChecksBase = ({
   return (
     <ChecksBase
       options={options}
-      renderCheckItem={({text, code}: CheckEntry) => {
-        return (
-          <InlineCheckBase
-            title={text}
-            groupName={groupName}
-            type={type}
-            key={text}
-            onChange={(checked) => onChange(checked, code)}
-            checked={isChecked(code)}
-          />
-        );
-      }}
+      renderCheckItem={({text, code}: CheckEntry) => (
+        <InlineCheckBase
+          title={text}
+          groupName={groupName}
+          type={type}
+          key={text}
+          onChange={(checked) => onChange(checked, code)}
+          checked={isChecked(code)}
+        />
+      )}
     />
   );
 };
diff --git a/src/components/elements/common/check/customRadio.tsx b/src/components/elements/common/check/customRadio.tsx
index af327b23..999f5354 100644
--- a/src/components/elements/common/check/customRadio.tsx
+++ b/src/components/elements/common/check/customRadio.tsx
@@ -4,6 +4,7 @@ import {ChecksProps} from './checksBase';
 import {CustomChecksBase} from './customBase';
 import {CheckEntry} from './types';
 
+
 type CustomRadiosProps<K extends string, V, T extends { [key in K]: V }> = ChecksProps<CheckEntry, K, V, T>
 
 export const CustomRadios = <K extends string, T extends { [key in K]: number }>({
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 0b739660..d32c7aa3 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -20,7 +20,6 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
   const {t} = useI18n();
 
   const [collapsed, setCollapsed] = React.useState(true);
-
   const [inputData, setInputData] = React.useState<InputData>({
     atkInGame: 7000,
     atkConditionalPct: 20,
diff --git a/src/const/config.ts b/src/const/config.ts
index 611f196a..5487ec28 100644
--- a/src/const/config.ts
+++ b/src/const/config.ts
@@ -1,4 +1 @@
-// noinspection SpellCheckingInspection
-export const GOOGLE_CLIENT_ID = '431200420774-f3d6rkrb2btha5vr2jud9al6l8h509mq.apps.googleusercontent.com';
-
 export const PAGE_ATK_SKILL_MAX_ENTRIES = 120;

From e46ea8e27f647eb21f764682dc573983b2f3c75f Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 05:50:36 -0500
Subject: [PATCH 08/61] ADD - Input collapse to include target status (#153)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../gameData/skillAtk/in/main.test.tsx        |  32 +++
 .../elements/gameData/skillAtk/in/main.tsx    |  20 +-
 .../elements/gameData/skillAtk/in/params.tsx  |  28 +--
 .../gameData/skillAtk/in/sections/target.tsx  |  19 +-
 .../elements/gameData/skillAtk/in/summary.tsx | 208 ++++++++++--------
 src/i18n/translations/cht/translation.ts      |   8 +-
 src/i18n/translations/definition.ts           |   8 +-
 src/i18n/translations/en/translation.ts       |  10 +-
 src/i18n/translations/jp/translation.ts       |   8 +-
 9 files changed, 205 insertions(+), 136 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/in/main.test.tsx

diff --git a/src/components/elements/gameData/skillAtk/in/main.test.tsx b/src/components/elements/gameData/skillAtk/in/main.test.tsx
new file mode 100644
index 00000000..3c352c0b
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/in/main.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {screen} from '@testing-library/react';
+
+import {renderReact} from '../../../../../../test/render/main';
+import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
+import {AttackingSkillInput} from './main';
+
+
+describe('ATK skill input', () => {
+  let fnOnSearch: jest.Mock;
+
+  beforeEach(() => {
+    fnOnSearch = jest.fn();
+  });
+
+  it('collapsed to summary on load', async () => {
+    renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch}/>);
+
+    const inspireButton = screen.queryByText(
+      translationEN.game.skillAtk.name.crtInspired,
+      {selector: '.collapse.show'},
+    );
+    expect(inspireButton).not.toBeInTheDocument();
+  });
+
+  it.todo('expands');
+
+  it.todo('uses correct input data to search after changes');
+
+  it.todo('shows correct summary after changes');
+});
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index d32c7aa3..90e23287 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -3,9 +3,12 @@ import React, {MouseEvent} from 'react';
 import Button from 'react-bootstrap/Button';
 import Collapse from 'react-bootstrap/Collapse';
 
+import {CategorizedConditionEnums} from '../../../../../api-def/resources';
 import {ConditionCodes} from '../../../../../const/gameData';
 import {useI18n} from '../../../../../i18n/hook';
 import {scrollRefToTop} from '../../../../../utils/scroll';
+import {ResourceLoader} from '../../../../../utils/services/resources/loader';
+import {useFetchState} from '../../../common/fetch';
 import {InputParameters} from './params';
 import {InputSummary} from './summary';
 import {InputData} from './types';
@@ -50,6 +53,20 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
     filterSharedOnly: false,
   });
 
+  const {
+    fetchStatus: conditionEnums,
+    fetchFunction: fetchConditionEnums,
+  } = useFetchState<CategorizedConditionEnums>(
+    {
+      afflictions: [],
+      elements: [],
+    },
+    ResourceLoader.getEnumCategorizedConditions,
+    'Failed to fetch the condition enums.',
+  );
+
+  fetchConditionEnums();
+
   const onCollapseClicked = () => {
     setCollapsed(!collapsed);
 
@@ -60,7 +77,7 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
     <>
       <Collapse in={collapsed}>
         <div>
-          <InputSummary inputData={inputData}/>
+          <InputSummary inputData={inputData} conditionEnums={conditionEnums.data}/>
           <hr/>
         </div>
       </Collapse>
@@ -68,6 +85,7 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
         collapsed={collapsed}
         inputData={inputData}
         setInputData={setInputData}
+        conditionEnums={conditionEnums.data}
       />
       <hr/>
       <div className="text-right">
diff --git a/src/components/elements/gameData/skillAtk/in/params.tsx b/src/components/elements/gameData/skillAtk/in/params.tsx
index 49a55fea..8d035996 100644
--- a/src/components/elements/gameData/skillAtk/in/params.tsx
+++ b/src/components/elements/gameData/skillAtk/in/params.tsx
@@ -19,22 +19,11 @@ import {InputData} from './types';
 
 
 type InputParametersProps = InputSectionBaseProps<InputData> & {
-  collapsed: boolean
+  collapsed: boolean,
+  conditionEnums: CategorizedConditionEnums,
 }
 
-export const InputParameters = ({collapsed, inputData, setInputData}: InputParametersProps) => {
-  const {
-    fetchStatus: conditionEnums,
-    fetchFunction: fetchConditionEnums,
-  } = useFetchState<CategorizedConditionEnums>(
-    {
-      afflictions: [],
-      elements: [],
-    },
-    ResourceLoader.getEnumCategorizedConditions,
-    'Failed to fetch the condition enums.',
-  );
-
+export const InputParameters = ({collapsed, inputData, setInputData, conditionEnums}: InputParametersProps) => {
   const {
     fetchStatus: elemEnums,
     fetchFunction: fetchElemEnums,
@@ -46,7 +35,6 @@ export const InputParameters = ({collapsed, inputData, setInputData}: InputParam
     'Failed to fetch the element enums.',
   );
 
-  fetchConditionEnums();
   fetchElemEnums();
 
   return (
@@ -67,18 +55,14 @@ export const InputParameters = ({collapsed, inputData, setInputData}: InputParam
           <hr/>
           <SectionOther inputData={inputData} setInputData={setInputData}/>
           <hr/>
+          <SectionTarget inputData={inputData} setInputData={setInputData} conditionEnums={conditionEnums}/>
+          <hr/>
         </div>
       </Collapse>
-      <SectionTarget
-        inputData={inputData}
-        setInputData={setInputData}
-        conditionEnums={conditionEnums.data}
-      />
-      <hr/>
       <SectionFilter
         inputData={inputData}
         setInputData={setInputData}
-        conditionEnums={conditionEnums.data}
+        conditionEnums={conditionEnums}
         elementEnums={elemEnums.data}
       />
     </>
diff --git a/src/components/elements/gameData/skillAtk/in/sections/target.tsx b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
index e8dba643..eb61a098 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/target.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ConditionCodes} from '../../../../../../const/gameData';
 import {useI18n} from '../../../../../../i18n/hook';
+import {getConditionName} from '../../../../../../utils/game/conditionName';
 import {CustomRadios} from '../../../../common/check/customRadio';
 import {EnumChecksBox} from '../../../../common/check/enumChecksBox';
 import {EnumChecksRadio} from '../../../../common/check/enumChecksRadio';
@@ -22,19 +23,11 @@ export const SectionTarget = ({
   const {t} = useI18n();
 
   const stateLabels: Array<CheckEntry> = [
-    {
-      text: t((t) => t.game.skillAtk.name.targetState.none),
-      code: ConditionCodes.NONE,
-    },
-    {
-      text: t((t) => t.game.skillAtk.name.targetState.od),
-      code: ConditionCodes.TARGET_STATE_OD,
-    },
-    {
-      text: t((t) => t.game.skillAtk.name.targetState.bk),
-      code: ConditionCodes.TARGET_STATE_BK,
-    },
-  ];
+    ConditionCodes.NONE,
+    ConditionCodes.TARGET_STATE_OD,
+    ConditionCodes.TARGET_STATE_BK,
+  ]
+    .map((code) => ({text: getConditionName(code, t), code}));
 
   return (
     <>
diff --git a/src/components/elements/gameData/skillAtk/in/summary.tsx b/src/components/elements/gameData/skillAtk/in/summary.tsx
index 90b059d6..02d115d7 100644
--- a/src/components/elements/gameData/skillAtk/in/summary.tsx
+++ b/src/components/elements/gameData/skillAtk/in/summary.tsx
@@ -1,24 +1,28 @@
 import React from 'react';
 
+import {CategorizedConditionEnums} from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
 import {TranslationStruct} from '../../../../../i18n/translations/definition';
 import {GetTranslationFunction} from '../../../../../i18n/types';
+import {getConditionName} from '../../../../../utils/game/conditionName';
+import {EnumEntryImageIcon} from '../../enumIcon';
 import {InputData} from './types';
 
 
 type InputSummaryProps = {
-  inputData: InputData
+  inputData: InputData,
+  conditionEnums: CategorizedConditionEnums,
 }
 
-export const InputSummary = ({inputData}: InputSummaryProps) => {
+export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) => {
   const {t} = useI18n();
 
-  const detailClass = 'text-info';
+  const detailClassNames = 'text-info';
 
   return (
     <>
-      <h5>{
-        t(
+      <h5>
+        {t(
           (t) => t.game.skillAtk.summary.atk,
           {
             atkVal:
@@ -28,48 +32,42 @@ export const InputSummary = ({inputData}: InputSummaryProps) => {
                 (1 + inputData.atkBuffPct / 100)
               ).toFixed(2),
           },
-        )
-      }</h5>
-      <p className={detailClass}>
-        {
-          t(
-            (t) => t.game.skillAtk.summary.atkData,
-            {
-              atkInGame: inputData.atkInGame.toFixed(0),
-              atkConditionalPct: inputData.atkConditionalPct.toFixed(0),
-              atkBuffPct: inputData.atkBuffPct.toFixed(0),
-            },
-          )
-        }
+        )}
+      </h5>
+      <p className={detailClassNames}>
+        {t(
+          (t) => t.game.skillAtk.summary.atkData,
+          {
+            atkInGame: inputData.atkInGame.toFixed(0),
+            atkConditionalPct: inputData.atkConditionalPct.toFixed(0),
+            atkBuffPct: inputData.atkBuffPct.toFixed(0),
+          },
+        )}
       </p>
       <h5>{t((t) => t.game.skillAtk.summary.buff)}</h5>
-      <p className={detailClass}>
-        {
-          t(
-            (t) => t.game.skillAtk.summary.buffData,
-            {
-              buffCount: inputData.buffCount.toFixed(0),
-              buffZoneSelf: inputData.buffZoneSelf.toFixed(0),
-              buffZoneAlly: inputData.buffZoneAlly.toFixed(0),
-            },
-          )
-        }
+      <p className={detailClassNames}>
+        {t(
+          (t) => t.game.skillAtk.summary.buffData,
+          {
+            buffCount: inputData.buffCount.toFixed(0),
+            buffZoneSelf: inputData.buffZoneSelf.toFixed(0),
+            buffZoneAlly: inputData.buffZoneAlly.toFixed(0),
+          },
+        )}
       </p>
       <h5>{t((t) => t.game.skillAtk.summary.ex)}</h5>
-      <p className={detailClass}>
-        {
-          [
-            [inputData.exBlade, (t: TranslationStruct) => t.game.skillAtk.summary.exBlade],
-            [inputData.exWand, (t: TranslationStruct) => t.game.skillAtk.summary.exWand],
-          ]
-            .filter((entry) => entry[0])
-            .map((entry) => t(entry[1] as GetTranslationFunction))
-            .join(' / ') ||
-          t((t) => t.game.skillAtk.summary.exNone)
-        }
+      <p className={detailClassNames}>
+        {[
+          [inputData.exBlade, (t: TranslationStruct) => t.game.skillAtk.summary.exBlade],
+          [inputData.exWand, (t: TranslationStruct) => t.game.skillAtk.summary.exWand],
+        ]
+          .filter((entry) => entry[0])
+          .map((entry) => t(entry[1] as GetTranslationFunction))
+          .join(' / ') ||
+        t((t) => t.game.skillAtk.summary.exNone)}
       </p>
-      <h5>{
-        t(
+      <h5>
+        {t(
           (t) => t.game.skillAtk.summary.crt,
           {
             crtVal: (
@@ -78,21 +76,24 @@ export const InputSummary = ({inputData}: InputSummaryProps) => {
               (inputData.criticalDamagePct / 100 + 0.7) // Critical damage
             ).toFixed(2),
           },
-        )
-      }</h5>
-      <p className={detailClass}>
-        {
-          [
-            inputData.criticalInspired ?
-              t((t) => t.game.skillAtk.summary.crtInspired) :
-              t((t) => t.game.skillAtk.summary.crtRate, {crtRate: inputData.criticalRatePct.toFixed(1)}),
-            t((t) => t.game.skillAtk.summary.crtDamage, {crtDamage: inputData.criticalDamagePct.toFixed(0)}),
-          ]
-            .join(' / ')
-        }
+        )}
+      </h5>
+      <p className={detailClassNames}>
+        {[
+          inputData.criticalInspired ?
+            t((t) => t.game.skillAtk.summary.crtInspired) :
+            t(
+              (t) => t.game.skillAtk.summary.crtRate,
+              {crtRate: inputData.criticalRatePct.toFixed(1)},
+            ),
+          t(
+            (t) => t.game.skillAtk.summary.crtDamage,
+            {crtDamage: inputData.criticalDamagePct.toFixed(0)},
+          )]
+          .join(' / ')}
       </p>
-      <h5>{
-        t(
+      <h5>
+        {t(
           (t) => t.game.skillAtk.summary.skill,
           {
             skillVal:
@@ -102,21 +103,19 @@ export const InputSummary = ({inputData}: InputSummaryProps) => {
                 (1 + inputData.skillBuffPct / 100) // Skill Damage Buffs
               ).toFixed(2),
           },
-        )
-      }</h5>
-      <p className={detailClass}>
-        {
-          [
-            t((t) => t.game.skillAtk.summary.skillPassive, {skillPassivePct: inputData.skillPassivePct.toFixed(0)}),
-            t((t) => t.game.skillAtk.summary.skillBuff, {skillBuffPct: inputData.skillBuffPct.toFixed(0)}),
-            inputData.skillEnergized ? t((t) => t.game.skillAtk.summary.skillEnergized) : '',
-          ]
-            .filter((str) => str.length > 0)
-            .join(' / ')
-        }
+        )}
+      </h5>
+      <p className={detailClassNames}>
+        {[
+          t((t) => t.game.skillAtk.summary.skillPassive, {skillPassivePct: inputData.skillPassivePct.toFixed(0)}),
+          t((t) => t.game.skillAtk.summary.skillBuff, {skillBuffPct: inputData.skillBuffPct.toFixed(0)}),
+          inputData.skillEnergized ? t((t) => t.game.skillAtk.summary.skillEnergized) : '',
+        ]
+          .filter((str) => str.length > 0)
+          .join(' / ')}
       </p>
-      <h5>{
-        t(
+      <h5>
+        {t(
           (t) => t.game.skillAtk.summary.punisher,
           {
             punisherVal:
@@ -125,34 +124,53 @@ export const InputSummary = ({inputData}: InputSummaryProps) => {
                 (1 + inputData.punishersOtherPct / 100)
               ).toFixed(2),
           },
-        )
-      }</h5>
-      <p className={detailClass}>
-        {
-          t(
-            (t) => t.game.skillAtk.summary.punisherData,
-            {
-              punishersBkPct: inputData.punishersBkPct.toFixed(0),
-              punishersOtherPct: inputData.punishersOtherPct.toFixed(0),
-            },
-          )
-        }
+        )}</h5>
+      <p className={detailClassNames}>
+        {t(
+          (t) => t.game.skillAtk.summary.punisherData,
+          {
+            punishersBkPct: inputData.punishersBkPct.toFixed(0),
+            punishersOtherPct: inputData.punishersOtherPct.toFixed(0),
+          },
+        )}
       </p>
       <h5>{t((t) => t.game.skillAtk.summary.other)}</h5>
-      <p className={detailClass}>
-        {
-          t(
-            (t) => t.game.skillAtk.summary.otherData,
-            {
-              otherElemBonusPct: inputData.otherElemBonusPct.toFixed(0),
-              otherCurrentHpPct: inputData.otherCurrentHpPct.toFixed(0),
-            },
-          )
-        }
+      <p className={detailClassNames}>
+        {t(
+          (t) => t.game.skillAtk.summary.otherData,
+          {
+            otherElemBonusPct: inputData.otherElemBonusPct.toFixed(0),
+            otherCurrentHpPct: inputData.otherCurrentHpPct.toFixed(0),
+          },
+        )}
+      </p>
+      <h5>{t((t) => t.game.skillAtk.summary.target)}</h5>
+      <p className={detailClassNames}>
+        {t((t) => t.game.skillAtk.summary.targetData.element)}
+        <EnumEntryImageIcon
+          entry={conditionEnums.elements.find((entry) => entry.code === inputData.targetElemCondCode)}
+        />
+        <br/>
+        {t((t) => t.game.skillAtk.summary.targetData.afflictions)}
         {
-          inputData.filterSharedOnly && <><br/>{t((t) => t.game.skillAtk.summary.sharedOnly)}</>
-        }
+          conditionEnums.afflictions
+            .filter((entry) => inputData.targetAfflictionCodes.includes(entry.code))
+            .map((entry, idx) => <EnumEntryImageIcon entry={entry} key={idx}/>)
+        }<br/>
+        {t(
+          (t) => t.game.skillAtk.summary.targetData.state,
+          {state: getConditionName(inputData.targetStateCode, t)},
+        )}<br/>
+        {t(
+          (t) => t.game.skillAtk.summary.targetData.def,
+          {
+            def: inputData.targetDefBase.toFixed(0),
+            defDownPct: inputData.targetDefDownPct.toFixed(0),
+            defBkRate: inputData.targetDefBkRate.toFixed(1),
+          },
+        )}
       </p>
     </>
   );
-};
+}
+;
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index c783406c..693c3263 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -166,9 +166,15 @@ export const translation: TranslationStruct = {
         skillEnergized: '超活力',
         punisher: '特攻 - {{punisherVal}}',
         punisherData: 'BK 特攻 {{punishersBkPct}}% / 其他特攻 {{punishersOtherPct}}%',
+        target: '目標狀態',
+        targetData: {
+          element: '屬性: ',
+          afflictions: '異常: ',
+          state: '狀態: {{state}}',
+          def: '基礎防禦 {{def}} / 降防 -{{defDownPct}}% / BK 降防率 {{defBkRate}}',
+        },
         other: '其它',
         otherData: '屬性增傷 +{{otherElemBonusPct}}% / HP {{otherCurrentHpPct}}%',
-        sharedOnly: '只顯示共享技',
       },
       collapse: '摺疊/展開',
     },
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index 5b091e76..be23bd93 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -163,9 +163,15 @@ export type TranslationStruct = {
         skillEnergized: string,
         punisher: string,
         punisherData: string,
+        target: string,
+        targetData: {
+          element: string,
+          afflictions: string,
+          state: string,
+          def: string,
+        },
         other: string,
         otherData: string,
-        sharedOnly: string,
       },
       collapse: string,
     },
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index aa0595c4..c5a3e5cc 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -90,7 +90,7 @@ export const translation: TranslationStruct = {
         },
         targetDefDown: 'Def Down (%)',
         targetDef: 'Base Def',
-        targetDefBk: 'BK Def Reduction',
+        targetDefBk: 'BK Def Rate',
         filter: 'Filter',
         filterElement: 'Element',
         filterAffliction: 'Affliction',
@@ -189,9 +189,15 @@ export const translation: TranslationStruct = {
         skillEnergized: 'Energized',
         punisher: 'Punisher - {{punisherVal}}',
         punisherData: 'BK {{punishersBkPct}}% / Other {{punishersOtherPct}}%',
+        target: 'Target Status',
+        targetData: {
+          element: 'Element: ',
+          afflictions: 'Afflictions: ',
+          state: 'State: {{state}}',
+          def: 'Base DEF {{def}} / DEF Down -{{defDownPct}}% / BK Rate {{defBkRate}}',
+        },
         other: 'Others',
         otherData: 'Element +{{otherElemBonusPct}}% / HP {{otherCurrentHpPct}}%',
-        sharedOnly: 'Shared Skill Only',
       },
       collapse: 'Collapse/Expand',
     },
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index cd014a8c..9dc76202 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -165,9 +165,15 @@ export const translation: TranslationStruct = {
         skillEnergized: '超やる気',
         punisher: '特効 - {{punisherVal}}',
         punisherData: 'BK 特効 {{punishersBkPct}}% / その他特効 {{punishersOtherPct}}%',
+        target: '目標状態',
+        targetData: {
+          element: 'Element: ',
+          afflictions: 'Afflictions: ',
+          state: 'State: {{state}}',
+          def: 'Base DEF {{def}} / DEF Down -{{defDownPct}}% / BK Rate {{defBkRate}}',
+        },
         other: 'その他',
         otherData: '属性ダメ +{{otherElemBonusPct}}% / HP {{otherCurrentHpPct}}%',
-        sharedOnly: 'シェアスキルのみ表示',
       },
       collapse: '展開 / 折り畳み',
     },

From 13892fe63aac123e9eded36db40c21ab27479ce8 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 06:02:46 -0500
Subject: [PATCH 09/61] ADD - Move input filter to the top (#165)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/in/main.tsx    | 42 ++++++++++---------
 .../elements/gameData/skillAtk/in/params.tsx  | 31 ++++----------
 2 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 90e23287..8ce0e67e 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -1,16 +1,14 @@
 import React, {MouseEvent} from 'react';
 
 import Button from 'react-bootstrap/Button';
-import Collapse from 'react-bootstrap/Collapse';
 
-import {CategorizedConditionEnums} from '../../../../../api-def/resources';
+import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/resources';
 import {ConditionCodes} from '../../../../../const/gameData';
 import {useI18n} from '../../../../../i18n/hook';
-import {scrollRefToTop} from '../../../../../utils/scroll';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
 import {InputParameters} from './params';
-import {InputSummary} from './summary';
+import {SectionFilter} from './sections/filter';
 import {InputData} from './types';
 
 
@@ -64,38 +62,44 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
     ResourceLoader.getEnumCategorizedConditions,
     'Failed to fetch the condition enums.',
   );
+  const {
+    fetchStatus: elemEnums,
+    fetchFunction: fetchElemEnums,
+  } = useFetchState<ElementEnums>(
+    {
+      elemental: [],
+    },
+    ResourceLoader.getEnumElements,
+    'Failed to fetch the element enums.',
+  );
 
   fetchConditionEnums();
-
-  const onCollapseClicked = () => {
-    setCollapsed(!collapsed);
-
-    scrollRefToTop();
-  };
+  fetchElemEnums();
 
   return (
     <>
-      <Collapse in={collapsed}>
-        <div>
-          <InputSummary inputData={inputData} conditionEnums={conditionEnums.data}/>
-          <hr/>
-        </div>
-      </Collapse>
-      <InputParameters
-        collapsed={collapsed}
+      <SectionFilter
         inputData={inputData}
         setInputData={setInputData}
         conditionEnums={conditionEnums.data}
+        elementEnums={elemEnums.data}
       />
       <hr/>
       <div className="text-right">
-        <Button variant="outline-primary" onClick={onCollapseClicked} className="mr-2">
+        <Button variant="outline-primary" onClick={() => setCollapsed(!collapsed)} className="mr-2">
           {t((t) => t.game.skillAtk.collapse)}
         </Button>
         <Button variant="outline-info" onClick={onSearchRequested(inputData)}>
           {t((t) => t.misc.search)}
         </Button>
       </div>
+      <hr/>
+      <InputParameters
+        collapsed={collapsed}
+        inputData={inputData}
+        setInputData={setInputData}
+        conditionEnums={conditionEnums.data}
+      />
     </>
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/params.tsx b/src/components/elements/gameData/skillAtk/in/params.tsx
index 8d035996..2b7884ca 100644
--- a/src/components/elements/gameData/skillAtk/in/params.tsx
+++ b/src/components/elements/gameData/skillAtk/in/params.tsx
@@ -2,19 +2,17 @@ import React from 'react';
 
 import Collapse from 'react-bootstrap/Collapse';
 
-import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/resources';
-import {ResourceLoader} from '../../../../../utils/services/resources/loader';
-import {useFetchState} from '../../../common/fetch';
+import {CategorizedConditionEnums} from '../../../../../api-def/resources';
 import {InputSectionBaseProps} from '../../props';
 import {SectionAtk} from './sections/atk';
 import {SectionBuff} from './sections/buff';
 import {SectionCrt} from './sections/crt';
 import {SectionEx} from './sections/ex';
-import {SectionFilter} from './sections/filter';
 import {SectionOther} from './sections/other';
 import {SectionPunisher} from './sections/punisher';
 import {SectionSkill} from './sections/skill';
 import {SectionTarget} from './sections/target';
+import {InputSummary} from './summary';
 import {InputData} from './types';
 
 
@@ -24,21 +22,13 @@ type InputParametersProps = InputSectionBaseProps<InputData> & {
 }
 
 export const InputParameters = ({collapsed, inputData, setInputData, conditionEnums}: InputParametersProps) => {
-  const {
-    fetchStatus: elemEnums,
-    fetchFunction: fetchElemEnums,
-  } = useFetchState<ElementEnums>(
-    {
-      elemental: [],
-    },
-    ResourceLoader.getEnumElements,
-    'Failed to fetch the element enums.',
-  );
-
-  fetchElemEnums();
-
   return (
     <>
+      <Collapse in={collapsed}>
+        <div>
+          <InputSummary inputData={inputData} conditionEnums={conditionEnums}/>
+        </div>
+      </Collapse>
       <Collapse in={!collapsed}>
         <div>
           <SectionAtk inputData={inputData} setInputData={setInputData}/>
@@ -56,15 +46,8 @@ export const InputParameters = ({collapsed, inputData, setInputData, conditionEn
           <SectionOther inputData={inputData} setInputData={setInputData}/>
           <hr/>
           <SectionTarget inputData={inputData} setInputData={setInputData} conditionEnums={conditionEnums}/>
-          <hr/>
         </div>
       </Collapse>
-      <SectionFilter
-        inputData={inputData}
-        setInputData={setInputData}
-        conditionEnums={conditionEnums}
-        elementEnums={elemEnums.data}
-      />
     </>
   );
 };

From f32b69569ed4e6b73227563c1bbfdf7372f3e442 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 06:06:50 -0500
Subject: [PATCH 10/61] IMP - File restructure

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../{badgesBuffCount.tsx => badges/buffCount.tsx}   |  7 ++++---
 .../out/{badgesBuffZone.tsx => badges/buffZone.tsx} |  7 ++++---
 .../{badgesCrisisMod.tsx => badges/crisisMod.tsx}   |  7 ++++---
 .../out/{badgesDispel.tsx => badges/dispel.tsx}     |  7 ++++---
 .../elements/gameData/skillAtk/out/entry.tsx        | 13 ++++++-------
 .../affliction.tsx}                                 |  8 ++++----
 .../out/{sectionBadges.tsx => sections/badges.tsx}  | 10 +++++-----
 .../out/{sectionIcon.tsx => sections/icon.tsx}      |  9 +++++----
 .../skillDamage.tsx}                                |  3 ++-
 .../skillInfo.tsx}                                  |  5 +++--
 .../skillName.tsx}                                  |  7 ++++---
 11 files changed, 45 insertions(+), 38 deletions(-)
 rename src/components/elements/gameData/skillAtk/out/{badgesBuffCount.tsx => badges/buffCount.tsx} (84%)
 rename src/components/elements/gameData/skillAtk/out/{badgesBuffZone.tsx => badges/buffZone.tsx} (79%)
 rename src/components/elements/gameData/skillAtk/out/{badgesCrisisMod.tsx => badges/crisisMod.tsx} (86%)
 rename src/components/elements/gameData/skillAtk/out/{badgesDispel.tsx => badges/dispel.tsx} (74%)
 rename src/components/elements/gameData/skillAtk/out/{sectionAffliction.tsx => sections/affliction.tsx} (86%)
 rename src/components/elements/gameData/skillAtk/out/{sectionBadges.tsx => sections/badges.tsx} (76%)
 rename src/components/elements/gameData/skillAtk/out/{sectionIcon.tsx => sections/icon.tsx} (64%)
 rename src/components/elements/gameData/skillAtk/out/{sectionSkillDamage.tsx => sections/skillDamage.tsx} (95%)
 rename src/components/elements/gameData/skillAtk/out/{sectionSkillInfo.tsx => sections/skillInfo.tsx} (82%)
 rename src/components/elements/gameData/skillAtk/out/{sectionSkillName.tsx => sections/skillName.tsx} (77%)

diff --git a/src/components/elements/gameData/skillAtk/out/badgesBuffCount.tsx b/src/components/elements/gameData/skillAtk/out/badges/buffCount.tsx
similarity index 84%
rename from src/components/elements/gameData/skillAtk/out/badgesBuffCount.tsx
rename to src/components/elements/gameData/skillAtk/out/badges/buffCount.tsx
index 8062d539..c27a213c 100644
--- a/src/components/elements/gameData/skillAtk/out/badgesBuffCount.tsx
+++ b/src/components/elements/gameData/skillAtk/out/badges/buffCount.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import Badge from 'react-bootstrap/Badge';
 
-import {AttackingSkillData} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {OverlayTooltip} from '../../../common/overlay/tooltip';
+import {AttackingSkillData} from '../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../i18n/hook';
+import {OverlayTooltip} from '../../../../common/overlay/tooltip';
+
 
 export const getBadgesBuffCount = (atkSkillEntry: AttackingSkillData) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/out/badgesBuffZone.tsx b/src/components/elements/gameData/skillAtk/out/badges/buffZone.tsx
similarity index 79%
rename from src/components/elements/gameData/skillAtk/out/badgesBuffZone.tsx
rename to src/components/elements/gameData/skillAtk/out/badges/buffZone.tsx
index 42cdc95a..1c75bf17 100644
--- a/src/components/elements/gameData/skillAtk/out/badgesBuffZone.tsx
+++ b/src/components/elements/gameData/skillAtk/out/badges/buffZone.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import Badge from 'react-bootstrap/Badge';
 
-import {AttackingSkillData} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {OverlayTooltip} from '../../../common/overlay/tooltip';
+import {AttackingSkillData} from '../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../i18n/hook';
+import {OverlayTooltip} from '../../../../common/overlay/tooltip';
+
 
 export const getBadgesBuffZone = (atkSkillEntry: AttackingSkillData) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/out/badgesCrisisMod.tsx b/src/components/elements/gameData/skillAtk/out/badges/crisisMod.tsx
similarity index 86%
rename from src/components/elements/gameData/skillAtk/out/badgesCrisisMod.tsx
rename to src/components/elements/gameData/skillAtk/out/badges/crisisMod.tsx
index 8a44869a..6e25df2e 100644
--- a/src/components/elements/gameData/skillAtk/out/badgesCrisisMod.tsx
+++ b/src/components/elements/gameData/skillAtk/out/badges/crisisMod.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import Badge from 'react-bootstrap/Badge';
 
-import {AttackingSkillData} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {OverlayTooltip} from '../../../common/overlay/tooltip';
+import {AttackingSkillData} from '../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../i18n/hook';
+import {OverlayTooltip} from '../../../../common/overlay/tooltip';
+
 
 export const getBadgesCrisisMod = (atkSkillEntry: AttackingSkillData) => {
   let badges: Array<React.ReactElement> = [];
diff --git a/src/components/elements/gameData/skillAtk/out/badgesDispel.tsx b/src/components/elements/gameData/skillAtk/out/badges/dispel.tsx
similarity index 74%
rename from src/components/elements/gameData/skillAtk/out/badgesDispel.tsx
rename to src/components/elements/gameData/skillAtk/out/badges/dispel.tsx
index 1f492696..7de6d3ad 100644
--- a/src/components/elements/gameData/skillAtk/out/badgesDispel.tsx
+++ b/src/components/elements/gameData/skillAtk/out/badges/dispel.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import Badge from 'react-bootstrap/Badge';
 
-import {AttackingSkillData} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {OverlayTooltip} from '../../../common/overlay/tooltip';
+import {AttackingSkillData} from '../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../i18n/hook';
+import {OverlayTooltip} from '../../../../common/overlay/tooltip';
+
 
 export const getBadgesDispel = (atkSkillEntry: AttackingSkillData) => {
   const {t} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/out/entry.tsx b/src/components/elements/gameData/skillAtk/out/entry.tsx
index c5a1c5fd..23fffd45 100644
--- a/src/components/elements/gameData/skillAtk/out/entry.tsx
+++ b/src/components/elements/gameData/skillAtk/out/entry.tsx
@@ -8,12 +8,12 @@ import {DistributionBar} from '../../../charts';
 import {ConditionBadges} from '../../elements/conditionBadges';
 import {InputData} from '../in/types';
 import {CalculatedData} from './main';
-import {SectionAffliction} from './sectionAffliction';
-import {SectionBadges} from './sectionBadges';
-import {SectionImageIcon} from './sectionIcon';
-import {SectionSkillDamage} from './sectionSkillDamage';
-import {SectionSkillInfo} from './sectionSkillInfo';
-import {SectionSkillName} from './sectionSkillName';
+import {SectionAffliction} from './sections/affliction';
+import {SectionBadges} from './sections/badges';
+import {SectionImageIcon} from './sections/icon';
+import {SectionSkillDamage} from './sections/skillDamage';
+import {SectionSkillInfo} from './sections/skillInfo';
+import {SectionSkillName} from './sections/skillName';
 
 
 type SkillEntryProps = {
@@ -23,7 +23,6 @@ type SkillEntryProps = {
   skillIdentifierInfo: SkillIdentifierInfo,
 }
 
-
 export const AttackingSkillEntry = ({
   inputData,
   calculatedData,
diff --git a/src/components/elements/gameData/skillAtk/out/sectionAffliction.tsx b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
similarity index 86%
rename from src/components/elements/gameData/skillAtk/out/sectionAffliction.tsx
rename to src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
index 5d881b40..2e8ee1c5 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionAffliction.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import Badge from 'react-bootstrap/Badge';
 import Col from 'react-bootstrap/Col';
 
-import {DepotPaths, AfflictionUnit} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {ImageWithOverlay} from '../../../common/image';
-import {SectionProps} from './props';
+import {DepotPaths, AfflictionUnit} from '../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../i18n/hook';
+import {ImageWithOverlay} from '../../../../common/image';
+import {SectionProps} from '../props';
 
 
 export const SectionAffliction = ({atkSkillEntry}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/out/sectionBadges.tsx b/src/components/elements/gameData/skillAtk/out/sections/badges.tsx
similarity index 76%
rename from src/components/elements/gameData/skillAtk/out/sectionBadges.tsx
rename to src/components/elements/gameData/skillAtk/out/sections/badges.tsx
index 64df8664..e4e9d1b7 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionBadges.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/badges.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import Col from 'react-bootstrap/Col';
 
-import {getBadgesBuffCount} from './badgesBuffCount';
-import {getBadgesBuffZone} from './badgesBuffZone';
-import {getBadgesCrisisMod} from './badgesCrisisMod';
-import {getBadgesDispel} from './badgesDispel';
-import {SectionProps} from './props';
+import {getBadgesBuffCount} from '../badges/buffCount';
+import {getBadgesBuffZone} from '../badges/buffZone';
+import {getBadgesCrisisMod} from '../badges/crisisMod';
+import {getBadgesDispel} from '../badges/dispel';
+import {SectionProps} from '../props';
 
 
 export const SectionBadges = ({atkSkillEntry}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/out/sectionIcon.tsx b/src/components/elements/gameData/skillAtk/out/sections/icon.tsx
similarity index 64%
rename from src/components/elements/gameData/skillAtk/out/sectionIcon.tsx
rename to src/components/elements/gameData/skillAtk/out/sections/icon.tsx
index 5e70cac2..faeb2987 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionIcon.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/icon.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {DepotPaths} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {ImageWithOverlay} from '../../../common/image';
-import {SectionProps} from './props';
+import {DepotPaths} from '../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../i18n/hook';
+import {ImageWithOverlay} from '../../../../common/image';
+import {SectionProps} from '../props';
+
 
 export const SectionImageIcon = ({atkSkillEntry}: SectionProps) => {
   const {lang} = useI18n();
diff --git a/src/components/elements/gameData/skillAtk/out/sectionSkillDamage.tsx b/src/components/elements/gameData/skillAtk/out/sections/skillDamage.tsx
similarity index 95%
rename from src/components/elements/gameData/skillAtk/out/sectionSkillDamage.tsx
rename to src/components/elements/gameData/skillAtk/out/sections/skillDamage.tsx
index e25c56fd..e78730ff 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionSkillDamage.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/skillDamage.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {CalculatedData} from './main';
+import {CalculatedData} from '../main';
+
 
 type SectionSkillDamageProps = {
   calculatedData: CalculatedData,
diff --git a/src/components/elements/gameData/skillAtk/out/sectionSkillInfo.tsx b/src/components/elements/gameData/skillAtk/out/sections/skillInfo.tsx
similarity index 82%
rename from src/components/elements/gameData/skillAtk/out/sectionSkillInfo.tsx
rename to src/components/elements/gameData/skillAtk/out/sections/skillInfo.tsx
index 053fbd36..8e389aa3 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionSkillInfo.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/skillInfo.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
-import {CalculatedData} from './main';
-import {SectionProps} from './props';
+import {CalculatedData} from '../main';
+import {SectionProps} from '../props';
+
 
 type SectionSkillInfoProps = SectionProps & {
   calculatedData: CalculatedData,
diff --git a/src/components/elements/gameData/skillAtk/out/sectionSkillName.tsx b/src/components/elements/gameData/skillAtk/out/sections/skillName.tsx
similarity index 77%
rename from src/components/elements/gameData/skillAtk/out/sectionSkillName.tsx
rename to src/components/elements/gameData/skillAtk/out/sections/skillName.tsx
index 34cebe84..3d0539e9 100644
--- a/src/components/elements/gameData/skillAtk/out/sectionSkillName.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/skillName.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import {SkillIdentifierInfo} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {SectionProps} from './props';
+import {SkillIdentifierInfo} from '../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../i18n/hook';
+import {SectionProps} from '../props';
+
 
 type SectionSkillNameProps = SectionProps & {
   skillIdentifierInfo: SkillIdentifierInfo,

From e5b68c7f3a712c51553afd07a39e5cc928cba86b Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 06:44:17 -0500
Subject: [PATCH 11/61] FIX - Image with overlay does not trigger

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/common/image.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/elements/common/image.tsx b/src/components/elements/common/image.tsx
index dbb66bfd..71e8c5ac 100644
--- a/src/components/elements/common/image.tsx
+++ b/src/components/elements/common/image.tsx
@@ -10,12 +10,13 @@ type ImageIconProps = {
   style?: React.CSSProperties,
 }
 
-export const Image = ({text, src, className, style}: ImageIconProps) => (
-  <img src={src} alt={text} style={style} className={className}/>
+// `...props` is required for triggering the overlay
+export const Image = ({text, src, className, style, ...props}: ImageIconProps) => (
+  <img src={src} alt={text} style={style} className={className} {...props}/>
 );
 
 export const ImageWithOverlay = ({text, src, className, style}: ImageIconProps) => (
-  <OverlayTooltip text={text}>
+  <OverlayTooltip text={text} key={text}>
     <Image src={src} text={text} style={style} className={className}/>
   </OverlayTooltip>
 );

From 38f3a13062455f32cb18589c025b6168110748c5 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 06:46:15 -0500
Subject: [PATCH 12/61] IMP - Enforce `OverlayTrigger` to have key to guarantee
 it's triggered

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/common/overlay/tooltip.test.tsx     | 2 +-
 src/components/elements/common/overlay/tooltip.tsx          | 1 +
 src/components/elements/gameData/ex/out/exEffectUnit.tsx    | 2 +-
 src/components/elements/gameData/ex/out/exUnit.tsx          | 3 ++-
 src/components/elements/markdown/transformers/math/unit.tsx | 2 +-
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/elements/common/overlay/tooltip.test.tsx b/src/components/elements/common/overlay/tooltip.test.tsx
index ceacf1a2..822d44f3 100644
--- a/src/components/elements/common/overlay/tooltip.test.tsx
+++ b/src/components/elements/common/overlay/tooltip.test.tsx
@@ -12,7 +12,7 @@ describe('Tooltip overlay behavior', () => {
     const overlayText = 'overlay';
 
     render(
-      <OverlayTooltip text={popUpText}>
+      <OverlayTooltip text={popUpText} key={popUpText}>
         <span>{overlayText}</span>
       </OverlayTooltip>,
     );
diff --git a/src/components/elements/common/overlay/tooltip.tsx b/src/components/elements/common/overlay/tooltip.tsx
index 0f7ad3a0..44563283 100644
--- a/src/components/elements/common/overlay/tooltip.tsx
+++ b/src/components/elements/common/overlay/tooltip.tsx
@@ -7,6 +7,7 @@ import {OverlayBase, OverlayCommonProps} from './base';
 
 type TooltipProps = OverlayCommonProps & {
   text: string,
+  key: React.Key,
 }
 
 export const OverlayTooltip = ({text, placement, children}: TooltipProps) => (
diff --git a/src/components/elements/gameData/ex/out/exEffectUnit.tsx b/src/components/elements/gameData/ex/out/exEffectUnit.tsx
index ea79355a..a96751cd 100644
--- a/src/components/elements/gameData/ex/out/exEffectUnit.tsx
+++ b/src/components/elements/gameData/ex/out/exEffectUnit.tsx
@@ -29,7 +29,7 @@ export const ExEffectUnit = ({
             text={effectUnit.parameter.name[lang]}
             style={{height: '2rem'}}
           />
-          <OverlayTooltip text={rate.toString()}>
+          <OverlayTooltip text={rate.toString()} key={rate}>
             <span className="align-middle">
               &nbsp;{rate.toFixed(0)}&nbsp;{effectUnit.paramUnit.name[lang]}
             </span>
diff --git a/src/components/elements/gameData/ex/out/exUnit.tsx b/src/components/elements/gameData/ex/out/exUnit.tsx
index 05e831a7..086e501c 100644
--- a/src/components/elements/gameData/ex/out/exUnit.tsx
+++ b/src/components/elements/gameData/ex/out/exUnit.tsx
@@ -8,6 +8,7 @@ import {OverlayTooltip} from '../../../common/overlay/tooltip';
 import {ExEffectUnit} from './exEffectUnit';
 import {getAbilityVariantEffectBadges} from './utils';
 
+
 type ExAbilityProps = {
   effectUnits: Array<AbilityVariantEffectUnitData>,
   name: string,
@@ -20,7 +21,7 @@ export const ExAbility = ({effectUnits, name, description, conditionEnums, isEx
   <div className="text-center">
     <Row>
       <Col>
-        <OverlayTooltip text={description}>
+        <OverlayTooltip key={description} text={description}>
           <span>{name}</span>
         </OverlayTooltip>
       </Col>
diff --git a/src/components/elements/markdown/transformers/math/unit.tsx b/src/components/elements/markdown/transformers/math/unit.tsx
index 9d825407..c22461e6 100644
--- a/src/components/elements/markdown/transformers/math/unit.tsx
+++ b/src/components/elements/markdown/transformers/math/unit.tsx
@@ -8,7 +8,7 @@ import {ExpressionOutputProps} from './types';
 export const ExpressionOutput = ({exprExtractResult, evalResult, expression}: ExpressionOutputProps) => {
   if (exprExtractResult.location === 'none') {
     return (
-      <OverlayTooltip text={expression} placement="top">
+      <OverlayTooltip key={expression} text={expression} placement="top">
         <span className={styles.calc}>
           <i className="bi bi-calculator"/>
           {evalResult}

From ad93ae06261849dfc10c6ef604d426ca0d32a96a Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 08:24:51 -0500
Subject: [PATCH 13/61] ADD - Loader to load affliction statuses

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/utils/services/resources/loader.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/utils/services/resources/loader.ts b/src/utils/services/resources/loader.ts
index 30b340ef..9b59e491 100644
--- a/src/utils/services/resources/loader.ts
+++ b/src/utils/services/resources/loader.ts
@@ -11,6 +11,7 @@ import {
   ExBuffParams,
   ResourcePaths,
   SkillIdentifierInfo,
+  StatusEnums,
   WeaponTypeEnums,
 } from '../../../api-def/resources';
 
@@ -84,6 +85,17 @@ export class ResourceLoader {
     return ResourceLoader.fetchResources<ElementEnums>(ResourcePaths.ENUMS_ELEMENTS, callback);
   }
 
+  /**
+   * Get affliction status enums.
+   *
+   * @function
+   * @param {function?} callback function to be called after fetching the resource
+   * @return {Promise<WeaponTypeEnums>} promise after the callback
+   */
+  static getEnumAfflictionStatus(callback?: (weaponTypeEnums: StatusEnums) => void): Promise<StatusEnums> {
+    return ResourceLoader.fetchResources<StatusEnums>(ResourcePaths.ENUMS_STATUS, callback);
+  }
+
   /**
    * Get the weapon type enums.
    *

From 7cc3fc0c9618bb523041a01bb448ed1d46c1d867 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Fri, 25 Jun 2021 21:15:06 -0500
Subject: [PATCH 14/61] ADD - Show affliction name (#148)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/out/main.tsx   |  25 ++--
 .../skillAtk/out/sections/affliction.test.tsx | 116 ++++++++++++++++++
 .../skillAtk/out/sections/affliction.tsx      |  76 ++++++++----
 src/i18n/translations/cht/translation.ts      |   2 +-
 src/i18n/translations/en/translation.ts       |   3 +-
 src/i18n/translations/jp/translation.ts       |   6 +-
 6 files changed, 187 insertions(+), 41 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx

diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index 53b27b20..8683ae81 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -68,19 +68,18 @@ export const AttackingSkillOutput = ({
   }
 
   // Add transformed entries
-  entries
-    .push(
-      ...calculatedEntries
-        .map((calculatedData: CalculatedData, index: number) => (
-          <AttackingSkillEntry
-            key={index}
-            inputData={inputData}
-            calculatedData={calculatedData}
-            conditionEnumMap={allConditionEnums}
-            skillIdentifierInfo={skillIdentifierInfo}
-          />
-        )),
-    );
+  entries.push(
+    ...calculatedEntries
+      .map((calculatedData: CalculatedData, index: number) => (
+        <AttackingSkillEntry
+          key={index}
+          inputData={inputData}
+          calculatedData={calculatedData}
+          conditionEnumMap={allConditionEnums}
+          skillIdentifierInfo={skillIdentifierInfo}
+        />
+      )),
+  );
 
   return <>{entries}</>;
 };
diff --git a/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx b/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
new file mode 100644
index 00000000..1ce886f4
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+
+import {screen, waitFor} from '@testing-library/react';
+
+import {renderReact} from '../../../../../../../test/render/main';
+import {SupportedLanguages} from '../../../../../../api-def/api';
+import {AttackingSkillData, DepotPaths, Element} from '../../../../../../api-def/resources';
+import {translation as translationEN} from '../../../../../../i18n/translations/en/translation';
+import {SectionAffliction} from './affliction';
+
+
+describe('Affliction section', () => {
+  const templateEntry: AttackingSkillData = {
+    chara: {
+      element: Element.FLAME,
+      iconName: 'icon',
+      name: {
+        [SupportedLanguages.CHT]: 'CHT name',
+        [SupportedLanguages.EN]: 'EN name',
+        [SupportedLanguages.JP]: 'JP name',
+      },
+    },
+    condition: [],
+    skill: {
+      afflictions: [{
+        actionTime: 1.5,
+        duration: 15,
+        probabilityPct: 120,
+        stackable: true,
+        statusCode: 5,
+        statusConditionCode: 0,
+        statusIcon: 'afflictionIcon',
+      }],
+      buffCountBoost: [],
+      buffZoneBoost: {
+        self: 0,
+        ally: 0,
+      },
+      crisisMax: [],
+      dispelMax: false,
+      dispelTimingMax: [],
+      hitsMax: 0,
+      identifiers: ['s1'],
+      internalId: 109501011,
+      modsMax: [7],
+      name: {
+        [SupportedLanguages.CHT]: 'CHT skill',
+        [SupportedLanguages.EN]: 'EN skill',
+        [SupportedLanguages.JP]: 'JP skill',
+      },
+      sharable: false,
+      spMax: 9999,
+      ssCost: 5,
+      ssSp: 17777,
+    },
+    uniqueHash: 'hash',
+  };
+
+  it('shows affliction with name', async () => {
+    const entry = {...templateEntry};
+
+    renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+
+    await waitFor(() => expect(screen.getByAltText('Blindness')).toBeInTheDocument());
+
+    const afflictionIcon = screen.getByAltText('Blindness');
+    expect(afflictionIcon).toHaveAttribute('src', DepotPaths.getAfflictionIconURL('afflictionIcon'));
+    expect(screen.getByText('Blindness @ 1.50 s (120% / 15 s)')).toBeInTheDocument();
+  });
+
+  it('shows unstackable affliction badge', async () => {
+    const entry = {
+      ...templateEntry,
+      skill: {
+        ...templateEntry.skill,
+        afflictions: [{
+          actionTime: 1.5,
+          duration: 15,
+          probabilityPct: 120,
+          stackable: false,
+          statusCode: 5,
+          statusConditionCode: 0,
+          statusIcon: 'afflictionIcon',
+        }],
+      },
+    };
+
+    renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+
+    expect(screen.getByText(translationEN.game.skillAtk.entry.unstackable, {selector: 'span.badge'}))
+      .toBeInTheDocument();
+  });
+
+  it('shows stackable affliction badge', async () => {
+    const entry = {...templateEntry};
+
+    renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+
+    expect(screen.getByText(translationEN.game.skillAtk.entry.stackable, {selector: 'span.badge'}))
+      .toBeInTheDocument();
+  });
+
+  it('does not show anything if the entry does not have affliction', async () => {
+    const entry = {
+      ...templateEntry,
+      skill: {
+        ...templateEntry.skill,
+        afflictions: [],
+      },
+    };
+
+    const {container} = renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
index 2e8ee1c5..9f5d0a7d 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
@@ -3,19 +3,67 @@ import React from 'react';
 import Badge from 'react-bootstrap/Badge';
 import Col from 'react-bootstrap/Col';
 
-import {DepotPaths, AfflictionUnit} from '../../../../../../api-def/resources';
+import {DepotPaths, AfflictionUnit, StatusEnums} from '../../../../../../api-def/resources';
 import {useI18n} from '../../../../../../i18n/hook';
+import {ResourceLoader} from '../../../../../../utils/services/resources/loader';
+import {useFetchState} from '../../../../common/fetch';
 import {ImageWithOverlay} from '../../../../common/image';
 import {SectionProps} from '../props';
 
 
+type AfflictionEntryProps = {
+  affliction: AfflictionUnit,
+  statusEnums: StatusEnums,
+}
+
+const AfflictionEntry = ({affliction, statusEnums}: AfflictionEntryProps) => {
+  const {t, lang} = useI18n();
+
+  const afflictionName = statusEnums.status.find((entry) => entry.code === affliction.statusCode)?.trans[lang] ||
+    affliction.statusIcon;
+
+  // <div> for line separation
+  return (
+    <div>
+      <ImageWithOverlay
+        text={afflictionName}
+        src={DepotPaths.getAfflictionIconURL(affliction.statusIcon)}
+        style={{width: '1.5rem'}}
+      />&nbsp;
+      {t(
+        (t) => t.game.skillAtk.entry.affliction,
+        {
+          affliction: afflictionName,
+          afflictionTime: affliction.actionTime.toFixed(2),
+          afflictionProbabilityPct: affliction.probabilityPct.toFixed(0),
+          afflictionDuration: affliction.duration.toFixed(0),
+        },
+      )}&nbsp;
+      {
+        affliction.stackable ?
+          <Badge variant="success">{t((t) => t.game.skillAtk.entry.stackable)}</Badge> :
+          <Badge variant="danger">{t((t) => t.game.skillAtk.entry.unstackable)}</Badge>
+      }
+    </div>
+  );
+};
+
 export const SectionAffliction = ({atkSkillEntry}: SectionProps) => {
-  if (atkSkillEntry.skill.afflictions.length === 0) {
+  const {
+    fetchStatus: statusEnums,
+    fetchFunction: fetchStatusEnums,
+  } = useFetchState<StatusEnums>(
+    {status: []},
+    ResourceLoader.getEnumAfflictionStatus,
+    'Failed to fetch affliction status enums.',
+  );
+
+  fetchStatusEnums();
+
+  if (!atkSkillEntry.skill.afflictions.length) {
     return <></>;
   }
 
-  const {t} = useI18n();
-
   return (
     <Col lg>
       {
@@ -24,25 +72,7 @@ export const SectionAffliction = ({atkSkillEntry}: SectionProps) => {
             arr.findIndex((afflictionUnit) => afflictionUnit.statusIcon === item.statusIcon) === idx
           ))
           .map((affliction: AfflictionUnit, index: number) => (
-            <React.Fragment key={index}>
-              <ImageWithOverlay
-                text={affliction.statusIcon}
-                src={DepotPaths.getAfflictionIconURL(affliction.statusIcon)}
-                style={{width: '1.5rem'}}
-              />
-              &nbsp;
-              {t((t) => t.game.skillAtk.entry.affliction,
-                {
-                  afflictionTime: affliction.actionTime.toFixed(2),
-                  afflictionProbabilityPct: affliction.probabilityPct.toFixed(0),
-                  afflictionDuration: affliction.duration.toFixed(0),
-                })}&nbsp;
-              {
-                affliction.stackable ?
-                  <Badge variant="success">{t((t) => t.game.skillAtk.entry.stackable)}</Badge> :
-                  <Badge variant="danger">{t((t) => t.game.skillAtk.entry.unstackable)}</Badge>
-              }
-            </React.Fragment>
+            <AfflictionEntry affliction={affliction} statusEnums={statusEnums.data} key={index}/>
           ))
       }
     </Col>
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 693c3263..09363212 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -134,7 +134,7 @@ export const translation: TranslationStruct = {
         cancelable: '此技能可於 {{cancelTime}} 秒後取消。',
         stackable: '可堆疊',
         unstackable: '不可疊',
-        affliction: '於 {{afflictionTime}} 秒 ({{afflictionProbabilityPct}}% / {{afflictionDuration}} 秒)',
+        affliction: '{{affliction}} @ {{afflictionTime}} 秒 ({{afflictionProbabilityPct}}% / {{afflictionDuration}} 秒)',
         buffCount: 'Buff 數增傷',
         buffCountDescCapped: '每一 Buff 最多 +{{each}}% 總倍率；上限 {{limit}}%',
         buffCountDescUncapped: '每一 Buff 最多 +{{each}}% 總倍率；無上限',
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index c5a3e5cc..9b7b339b 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -157,7 +157,8 @@ export const translation: TranslationStruct = {
         cancelable: 'This skill can be canceled after {{cancelTime}} seconds.',
         stackable: 'Stackable',
         unstackable: 'Unstackable',
-        affliction: 'At {{afflictionTime}} s ({{afflictionProbabilityPct}}% / {{afflictionDuration}} s)',
+        affliction: '{{affliction}} @ {{afflictionTime}} s ' +
+          '({{afflictionProbabilityPct}}% / {{afflictionDuration}} s)',
         buffCount: 'Buff Counts',
         buffCountDescCapped: '+{{each}}% of the total mod for each buff; Capped at {{limit}}%',
         buffCountDescUncapped: '+{{each}}% of the total mod for each buff; Uncapped',
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 9dc76202..8572ea02 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -131,9 +131,9 @@ export const translation: TranslationStruct = {
       entry: {
         notCancelable: 'モーションキャンセル不可',
         cancelable: 'モーション発動 {{cancelTime}} 秒後キャンセル可能',
-        stackable: '重複スタック可能',
-        unstackable: '重複スタック不可',
-        affliction: '＠ {{afflictionTime}} 秒 ({{afflictionProbabilityPct}}% / {{afflictionDuration}} 秒)',
+        stackable: '重複可能',
+        unstackable: '重複不可',
+        affliction: '{{affliction}} @ {{afflictionTime}} 秒 ({{afflictionProbabilityPct}}% / {{afflictionDuration}} 秒)',
         buffCount: 'バフ個数が多いほどダメUP',
         buffCountDescCapped: '+{{each}}% of the total mod for each buff; Capped at {{limit}}%',
         buffCountDescUncapped: '+{{each}}% of the total mod for each buff; Uncapped',

From 1b0d7cdb744cc681902dee6ec3c4ddb7337e3c34 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sat, 26 Jun 2021 01:15:32 -0500
Subject: [PATCH 15/61] ADD - ATK skill entry show unit name (#155)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../gameData/skillAtk/out/sections/skillName.tsx   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/out/sections/skillName.tsx b/src/components/elements/gameData/skillAtk/out/sections/skillName.tsx
index 3d0539e9..1122b916 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/skillName.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/skillName.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 
 import {SkillIdentifierInfo} from '../../../../../../api-def/resources';
+import {PostPath} from '../../../../../../const/path/definitions';
 import {useI18n} from '../../../../../../i18n/hook';
+import {makePostPath} from '../../../../../../utils/path/make';
+import {NextLink} from '../../../../common/link';
 import {SectionProps} from '../props';
 
 
@@ -14,15 +17,18 @@ export const SectionSkillName = ({atkSkillEntry, skillIdentifierInfo}: SectionSk
 
   return (
     <>
-      <span className="h5">
+      <div className="h5 mb-1">
+        <NextLink href={makePostPath(PostPath.ANALYSIS, {pid: atkSkillEntry.chara.id, lang})}>
+          {atkSkillEntry.chara.name[lang]}
+        </NextLink>
+      </div>
+      <div className="text-white-50">
         {
           atkSkillEntry.skill.identifiers
             .map((identifier) => skillIdentifierInfo[identifier].trans[lang])
             .join(' / ')
         }
-      </span>
-      <br/>
-      <small>{atkSkillEntry.skill.name[lang]}</small>
+      </div>
     </>
   );
 };

From 7df40fcda993cab4e17467b7d3d3a8336da76762 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sat, 26 Jun 2021 01:58:57 -0500
Subject: [PATCH 16/61] IMP - Restructure atk skill input data type definition

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../skillAtk/entryProcessing.test.tsx         | 114 ++++++++++----
 .../elements/gameData/skillAtk/in/main.tsx    |  78 ++++++----
 .../elements/gameData/skillAtk/in/summary.tsx |  78 +++++-----
 .../elements/gameData/skillAtk/in/types.ts    |  79 ++++++----
 .../elements/gameData/skillAtk/out/main.tsx   |   2 +-
 .../elements/gameData/skillAtk/out/utils.ts   |  10 +-
 src/utils/game/damage.test.ts                 | 142 ++++++++++++------
 src/utils/game/damage.ts                      |  43 +++---
 8 files changed, 348 insertions(+), 198 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx b/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
index 65ca0ed7..6d8e91a8 100644
--- a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
+++ b/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
@@ -5,33 +5,57 @@ import {filterSkillEntries} from './out/utils';
 
 describe('Attacking skill entries processing', () => {
   const inputDataTemplate: InputData = {
-    atkInGame: 5000,
-    atkConditionalPct: 0,
-    atkBuffPct: 0,
-    buffCount: 0,
-    buffZoneSelf: 0,
-    buffZoneAlly: 0,
-    exBlade: false,
-    exWand: false,
-    criticalRatePct: 0,
-    criticalDamagePct: 0,
-    criticalInspired: false,
-    skillBuffPct: 0,
-    skillPassivePct: 0,
-    skillEnergized: false,
-    punishersBkPct: 0,
-    punishersOtherPct: 0,
-    otherElemBonusPct: 0,
-    otherCurrentHpPct: 0,
-    targetElemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-    targetAfflictionCodes: [],
-    targetDefBase: 0,
-    targetDefDownPct: 0,
-    targetDefBkRate: 0.6,
-    targetStateCode: ConditionCodes.NONE,
-    filterElementCode: [],
-    filterAfflictionCondCode: [],
-    filterSharedOnly: false,
+    params: {
+      atk: {
+        inGame: 5000,
+        conditionalPct: 0,
+        buffPct: 0,
+      },
+      buff: {
+        count: 0,
+        zone: {
+          self: 0,
+          ally: 0,
+        },
+      },
+      ex: {
+        blade: false,
+        wand: false,
+      },
+      crt: {
+        ratePct: 0,
+        damagePct: 0,
+        inspired: false,
+      },
+      skill: {
+        buffPct: 0,
+        passivePct: 0,
+        energized: false,
+      },
+      punishers: {
+        bkPct: 0,
+        othersPct: 0,
+      },
+      others: {
+        elemBonusPct: 0,
+        currentHpPct: 0,
+      },
+    },
+    target: {
+      elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
+      afflictionCodes: [],
+      def: {
+        base: 0,
+        downPct: 0,
+        bkRate: 0.6,
+      },
+      state: ConditionCodes.NONE,
+    },
+    filter: {
+      elemCodes: [],
+      afflictionCondCode: [],
+      sharedOnly: false,
+    },
   };
 
   it('checks if the promise is returning data', async () => {
@@ -52,7 +76,16 @@ describe('Attacking skill entries processing', () => {
   it('checks if SS only filtering is working correctly', async () => {
     await ResourceLoader.getAttackingSkillEntries((data) => data)
       .then((data) => {
-        const dataFiltered = filterSkillEntries({...inputDataTemplate, filterSharedOnly: true}, data);
+        const dataFiltered = filterSkillEntries(
+          {
+            ...inputDataTemplate,
+            filter: {
+              ...inputDataTemplate.filter,
+              sharedOnly: true,
+            },
+          },
+          data,
+        );
         expect(dataFiltered.length).toBeGreaterThan(0);
         expect(dataFiltered.map((entry) => entry.skill.sharable)).not.toContain(false);
       });
@@ -67,7 +100,16 @@ describe('Attacking skill entries processing', () => {
         elemEnums.elemental.map((elemEnum) => {
           const elemEnumCode = elemEnum.code;
 
-          const dataFiltered = filterSkillEntries({...inputDataTemplate, filterElementCode: [elemEnumCode]}, data);
+          const dataFiltered = filterSkillEntries(
+            {
+              ...inputDataTemplate,
+              filter: {
+                ...inputDataTemplate.filter,
+                elemCodes: [elemEnumCode],
+              },
+            },
+            data,
+          );
           expect(dataFiltered.length).toBeGreaterThan(0);
           expect(dataFiltered.map((entry) => entry.chara.element === elemEnumCode)).not.toContain(false);
         });
@@ -83,10 +125,16 @@ describe('Attacking skill entries processing', () => {
         conditionEnums.afflictions.map((afflictionEnum) => {
           const afflictionEnumCode = afflictionEnum.code;
 
-          const dataFiltered = filterSkillEntries({
-            ...inputDataTemplate,
-            filterElementCode: [afflictionEnumCode],
-          }, data);
+          const dataFiltered = filterSkillEntries(
+            {
+              ...inputDataTemplate,
+              filter: {
+                ...inputDataTemplate.filter,
+                elemCodes: [afflictionEnumCode],
+              },
+            },
+            data,
+          );
           expect(dataFiltered.map((entry) => entry.chara.element === afflictionEnumCode)).not.toContain(false);
         });
       });
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 8ce0e67e..987426f0 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -22,33 +22,57 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
 
   const [collapsed, setCollapsed] = React.useState(true);
   const [inputData, setInputData] = React.useState<InputData>({
-    atkInGame: 7000,
-    atkConditionalPct: 20,
-    atkBuffPct: 30,
-    buffCount: 0,
-    buffZoneSelf: 0,
-    buffZoneAlly: 0,
-    exBlade: true,
-    exWand: true,
-    criticalRatePct: 4,
-    criticalDamagePct: 0,
-    criticalInspired: false,
-    skillBuffPct: 0,
-    skillPassivePct: 40,
-    skillEnergized: false,
-    punishersBkPct: 0,
-    punishersOtherPct: 20,
-    otherElemBonusPct: 0,
-    otherCurrentHpPct: 100,
-    targetElemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-    targetAfflictionCodes: [],
-    targetDefBase: 10,
-    targetDefDownPct: 0,
-    targetDefBkRate: 0.6,
-    targetStateCode: ConditionCodes.NONE,
-    filterElementCode: [],
-    filterAfflictionCondCode: [],
-    filterSharedOnly: false,
+    params: {
+      atk: {
+        inGame: 7000,
+        conditionalPct: 20,
+        buffPct: 30,
+      },
+      buff: {
+        count: 0,
+        zone: {
+          self: 0,
+          ally: 0,
+        },
+      },
+      ex: {
+        blade: true,
+        wand: true,
+      },
+      crt: {
+        ratePct: 4,
+        damagePct: 0,
+        inspired: false,
+      },
+      skill: {
+        buffPct: 0,
+        passivePct: 40,
+        energized: false,
+      },
+      punishers: {
+        bkPct: 0,
+        othersPct: 20,
+      },
+      others: {
+        elemBonusPct: 0,
+        currentHpPct: 100,
+      },
+    },
+    target: {
+      elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
+      afflictionCodes: [],
+      def: {
+        base: 10,
+        downPct: 0,
+        bkRate: 0.8,
+      },
+      state: ConditionCodes.NONE,
+    },
+    filter: {
+      elemCodes: [],
+      afflictionCondCode: [],
+      sharedOnly: false,
+    },
   });
 
   const {
diff --git a/src/components/elements/gameData/skillAtk/in/summary.tsx b/src/components/elements/gameData/skillAtk/in/summary.tsx
index 02d115d7..d09d6d97 100644
--- a/src/components/elements/gameData/skillAtk/in/summary.tsx
+++ b/src/components/elements/gameData/skillAtk/in/summary.tsx
@@ -27,9 +27,9 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
           {
             atkVal:
               (
-                inputData.atkInGame * // In-game ATK
-                (1 + inputData.atkConditionalPct / 100) * // Condition ATK boosts
-                (1 + inputData.atkBuffPct / 100)
+                inputData.params.atk.inGame * // In-game ATK
+                (1 + inputData.params.atk.conditionalPct / 100) * // Condition ATK boosts
+                (1 + inputData.params.atk.buffPct / 100)
               ).toFixed(2),
           },
         )}
@@ -38,9 +38,9 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
         {t(
           (t) => t.game.skillAtk.summary.atkData,
           {
-            atkInGame: inputData.atkInGame.toFixed(0),
-            atkConditionalPct: inputData.atkConditionalPct.toFixed(0),
-            atkBuffPct: inputData.atkBuffPct.toFixed(0),
+            atkInGame: inputData.params.atk.inGame.toFixed(0),
+            atkConditionalPct: inputData.params.atk.conditionalPct.toFixed(0),
+            atkBuffPct: inputData.params.atk.buffPct.toFixed(0),
           },
         )}
       </p>
@@ -49,17 +49,17 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
         {t(
           (t) => t.game.skillAtk.summary.buffData,
           {
-            buffCount: inputData.buffCount.toFixed(0),
-            buffZoneSelf: inputData.buffZoneSelf.toFixed(0),
-            buffZoneAlly: inputData.buffZoneAlly.toFixed(0),
+            buffCount: inputData.params.buff.count.toFixed(0),
+            buffZoneSelf: inputData.params.buff.zone.self.toFixed(0),
+            buffZoneAlly: inputData.params.buff.zone.ally.toFixed(0),
           },
         )}
       </p>
       <h5>{t((t) => t.game.skillAtk.summary.ex)}</h5>
       <p className={detailClassNames}>
         {[
-          [inputData.exBlade, (t: TranslationStruct) => t.game.skillAtk.summary.exBlade],
-          [inputData.exWand, (t: TranslationStruct) => t.game.skillAtk.summary.exWand],
+          [inputData.params.ex.blade, (t: TranslationStruct) => t.game.skillAtk.summary.exBlade],
+          [inputData.params.ex.wand, (t: TranslationStruct) => t.game.skillAtk.summary.exWand],
         ]
           .filter((entry) => entry[0])
           .map((entry) => t(entry[1] as GetTranslationFunction))
@@ -72,23 +72,23 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
           {
             crtVal: (
               1 +
-              (inputData.criticalInspired ? 1 : inputData.criticalRatePct / 100) * // Critical Rate and Inspired
-              (inputData.criticalDamagePct / 100 + 0.7) // Critical damage
+              (inputData.params.crt.inspired ? 1 : inputData.params.crt.ratePct / 100) * // Critical Rate and Inspired
+              (inputData.params.crt.damagePct / 100 + 0.7) // Critical damage
             ).toFixed(2),
           },
         )}
       </h5>
       <p className={detailClassNames}>
         {[
-          inputData.criticalInspired ?
+          inputData.params.crt.inspired ?
             t((t) => t.game.skillAtk.summary.crtInspired) :
             t(
               (t) => t.game.skillAtk.summary.crtRate,
-              {crtRate: inputData.criticalRatePct.toFixed(1)},
+              {crtRate: inputData.params.crt.ratePct.toFixed(1)},
             ),
           t(
             (t) => t.game.skillAtk.summary.crtDamage,
-            {crtDamage: inputData.criticalDamagePct.toFixed(0)},
+            {crtDamage: inputData.params.crt.damagePct.toFixed(0)},
           )]
           .join(' / ')}
       </p>
@@ -98,18 +98,25 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
           {
             skillVal:
               (
-                (1 + (inputData.skillPassivePct + (inputData.skillEnergized ? 50 : 0)) / 100) * // Passives & Energized
-                (1 + (inputData.exWand ? 0.15 : 0)) * // Wand EX
-                (1 + inputData.skillBuffPct / 100) // Skill Damage Buffs
+                // Passives & Energized
+                (1 + (inputData.params.skill.passivePct + (inputData.params.skill.energized ? 50 : 0)) / 100) *
+                (1 + (inputData.params.ex.wand ? 0.15 : 0)) * // Wand EX
+                (1 + inputData.params.skill.buffPct / 100) // Skill Damage Buffs
               ).toFixed(2),
           },
         )}
       </h5>
       <p className={detailClassNames}>
         {[
-          t((t) => t.game.skillAtk.summary.skillPassive, {skillPassivePct: inputData.skillPassivePct.toFixed(0)}),
-          t((t) => t.game.skillAtk.summary.skillBuff, {skillBuffPct: inputData.skillBuffPct.toFixed(0)}),
-          inputData.skillEnergized ? t((t) => t.game.skillAtk.summary.skillEnergized) : '',
+          t(
+            (t) => t.game.skillAtk.summary.skillPassive,
+            {skillPassivePct: inputData.params.skill.passivePct.toFixed(0)},
+          ),
+          t(
+            (t) => t.game.skillAtk.summary.skillBuff,
+            {skillBuffPct: inputData.params.skill.buffPct.toFixed(0)},
+          ),
+          inputData.params.skill.energized ? t((t) => t.game.skillAtk.summary.skillEnergized) : '',
         ]
           .filter((str) => str.length > 0)
           .join(' / ')}
@@ -120,8 +127,8 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
           {
             punisherVal:
               (
-                (1 + inputData.punishersBkPct / 100) *
-                (1 + inputData.punishersOtherPct / 100)
+                (1 + inputData.params.punishers.bkPct / 100) *
+                (1 + inputData.params.punishers.othersPct / 100)
               ).toFixed(2),
           },
         )}</h5>
@@ -129,8 +136,8 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
         {t(
           (t) => t.game.skillAtk.summary.punisherData,
           {
-            punishersBkPct: inputData.punishersBkPct.toFixed(0),
-            punishersOtherPct: inputData.punishersOtherPct.toFixed(0),
+            punishersBkPct: inputData.params.punishers.bkPct.toFixed(0),
+            punishersOtherPct: inputData.params.punishers.othersPct.toFixed(0),
           },
         )}
       </p>
@@ -139,8 +146,8 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
         {t(
           (t) => t.game.skillAtk.summary.otherData,
           {
-            otherElemBonusPct: inputData.otherElemBonusPct.toFixed(0),
-            otherCurrentHpPct: inputData.otherCurrentHpPct.toFixed(0),
+            otherElemBonusPct: inputData.params.others.elemBonusPct.toFixed(0),
+            otherCurrentHpPct: inputData.params.others.currentHpPct.toFixed(0),
           },
         )}
       </p>
@@ -148,29 +155,28 @@ export const InputSummary = ({inputData, conditionEnums}: InputSummaryProps) =>
       <p className={detailClassNames}>
         {t((t) => t.game.skillAtk.summary.targetData.element)}
         <EnumEntryImageIcon
-          entry={conditionEnums.elements.find((entry) => entry.code === inputData.targetElemCondCode)}
+          entry={conditionEnums.elements.find((entry) => entry.code === inputData.target.elemCondCode)}
         />
         <br/>
         {t((t) => t.game.skillAtk.summary.targetData.afflictions)}
         {
           conditionEnums.afflictions
-            .filter((entry) => inputData.targetAfflictionCodes.includes(entry.code))
+            .filter((entry) => inputData.target.afflictionCodes.includes(entry.code))
             .map((entry, idx) => <EnumEntryImageIcon entry={entry} key={idx}/>)
         }<br/>
         {t(
           (t) => t.game.skillAtk.summary.targetData.state,
-          {state: getConditionName(inputData.targetStateCode, t)},
+          {state: getConditionName(inputData.target.state, t)},
         )}<br/>
         {t(
           (t) => t.game.skillAtk.summary.targetData.def,
           {
-            def: inputData.targetDefBase.toFixed(0),
-            defDownPct: inputData.targetDefDownPct.toFixed(0),
-            defBkRate: inputData.targetDefBkRate.toFixed(1),
+            def: inputData.target.def.base.toFixed(0),
+            defDownPct: inputData.target.def.downPct.toFixed(0),
+            defBkRate: inputData.target.def.bkRate.toFixed(1),
           },
         )}
       </p>
     </>
   );
-}
-;
+};
diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index e976c313..122e588f 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -1,31 +1,56 @@
 import {ConditionCodes} from '../../../../../const/gameData';
 
+
 export type InputData = {
-  atkInGame: number,
-  atkConditionalPct: number,
-  atkBuffPct: number,
-  buffCount: number,
-  buffZoneSelf: number,
-  buffZoneAlly: number,
-  exBlade: boolean,
-  exWand: boolean,
-  criticalRatePct: number,
-  criticalDamagePct: number,
-  criticalInspired: boolean,
-  skillBuffPct: number,
-  skillPassivePct: number,
-  skillEnergized: boolean,
-  punishersBkPct: number,
-  punishersOtherPct: number,
-  otherElemBonusPct: number,
-  otherCurrentHpPct: number,
-  targetElemCondCode: number,
-  targetAfflictionCodes: Array<number>,
-  targetDefBase: number,
-  targetDefDownPct: number,
-  targetDefBkRate: number,
-  targetStateCode: ConditionCodes.NONE | ConditionCodes.TARGET_STATE_BK | ConditionCodes.TARGET_STATE_OD,
-  filterElementCode: Array<number>,
-  filterAfflictionCondCode: Array<number>,
-  filterSharedOnly: boolean,
+  params: {
+    atk: {
+      inGame: number,
+      conditionalPct: number,
+      buffPct: number,
+    },
+    buff: {
+      count: number,
+      zone: {
+        self: number,
+        ally: number,
+      },
+    },
+    ex: {
+      blade: boolean,
+      wand: boolean,
+    },
+    crt: {
+      ratePct: number,
+      damagePct: number,
+      inspired: boolean,
+    },
+    skill: {
+      buffPct: number,
+      passivePct: number,
+      energized: boolean,
+    },
+    punishers: {
+      bkPct: number,
+      othersPct: number,
+    },
+    others: {
+      elemBonusPct: number,
+      currentHpPct: number,
+    },
+  },
+  target: {
+    elemCondCode: number,
+    afflictionCodes: Array<number>,
+    def: {
+      base: number,
+      downPct: number,
+      bkRate: number,
+    },
+    state: ConditionCodes.NONE | ConditionCodes.TARGET_STATE_BK | ConditionCodes.TARGET_STATE_OD,
+  },
+  filter: {
+    elemCodes: Array<number>,
+    afflictionCondCode: Array<number>,
+    sharedOnly: boolean,
+  },
 }
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index 8683ae81..d7449f2f 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -47,7 +47,7 @@ export const AttackingSkillOutput = ({
       // Element bonus rate
       const charaElementRate = elementBonusData.getElementBonus(
         String(entry.chara.element),
-        String(inputData.targetElemCondCode),
+        String(inputData.target.elemCondCode),
       );
 
       // Calculate skill damage
diff --git a/src/components/elements/gameData/skillAtk/out/utils.ts b/src/components/elements/gameData/skillAtk/out/utils.ts
index e2f40991..53c027a2 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.ts
+++ b/src/components/elements/gameData/skillAtk/out/utils.ts
@@ -4,23 +4,23 @@ import {InputData} from '../in/types';
 
 export const filterSkillEntries = (inputData: InputData, atkSkillEntries: Array<AttackingSkillData>) => {
   // Filter shared skill only if set
-  if (inputData.filterSharedOnly) {
+  if (inputData.filter.sharedOnly) {
     atkSkillEntries = atkSkillEntries.filter((entry) => entry.skill.sharable);
   }
 
   // Filter element if specified
-  if (inputData.filterElementCode.length > 0) {
+  if (inputData.filter.elemCodes.length) {
     atkSkillEntries = atkSkillEntries
-      .filter((entry) => inputData.filterElementCode.includes(entry.chara.element));
+      .filter((entry) => inputData.filter.elemCodes.includes(entry.chara.element));
   }
 
   // Filter affliction condition if specified
-  if (inputData.filterAfflictionCondCode.length > 0) {
+  if (inputData.filter.afflictionCondCode.length) {
     atkSkillEntries = atkSkillEntries
       .filter((entry) => {
         const afflictionCodes = entry.skill.afflictions.map((afflictionUnit) => afflictionUnit.statusConditionCode);
 
-        return inputData.filterAfflictionCondCode.some((afflictionCode) => afflictionCodes.includes(afflictionCode));
+        return inputData.filter.afflictionCondCode.some((afflictionCode) => afflictionCodes.includes(afflictionCode));
       });
   }
 
diff --git a/src/utils/game/damage.test.ts b/src/utils/game/damage.test.ts
index a44fb243..468e5210 100644
--- a/src/utils/game/damage.test.ts
+++ b/src/utils/game/damage.test.ts
@@ -5,33 +5,57 @@ import {calculateDamage, CalculateDamageReturn} from './damage';
 
 
 const inputDataTemplate: InputData = {
-  atkInGame: 0,
-  atkConditionalPct: 0,
-  atkBuffPct: 0,
-  buffCount: 0,
-  buffZoneSelf: 0,
-  buffZoneAlly: 0,
-  exBlade: false,
-  exWand: false,
-  criticalRatePct: 0,
-  criticalDamagePct: 0,
-  criticalInspired: false,
-  skillBuffPct: 0,
-  skillPassivePct: 0,
-  skillEnergized: false,
-  punishersBkPct: 0,
-  punishersOtherPct: 0,
-  otherElemBonusPct: 0,
-  otherCurrentHpPct: 0,
-  targetElemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-  targetAfflictionCodes: [],
-  targetDefBase: 0,
-  targetDefDownPct: 0,
-  targetDefBkRate: 0.6,
-  targetStateCode: ConditionCodes.NONE,
-  filterElementCode: [],
-  filterAfflictionCondCode: [],
-  filterSharedOnly: false,
+  params: {
+    atk: {
+      inGame: 5000,
+      conditionalPct: 0,
+      buffPct: 0,
+    },
+    buff: {
+      count: 0,
+      zone: {
+        self: 0,
+        ally: 0,
+      },
+    },
+    ex: {
+      blade: false,
+      wand: false,
+    },
+    crt: {
+      ratePct: 0,
+      damagePct: 0,
+      inspired: false,
+    },
+    skill: {
+      buffPct: 0,
+      passivePct: 0,
+      energized: false,
+    },
+    punishers: {
+      bkPct: 0,
+      othersPct: 0,
+    },
+    others: {
+      elemBonusPct: 0,
+      currentHpPct: 0,
+    },
+  },
+  target: {
+    elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
+    afflictionCodes: [],
+    def: {
+      base: 0,
+      downPct: 0,
+      bkRate: 0.6,
+    },
+    state: ConditionCodes.NONE,
+  },
+  filter: {
+    elemCodes: [],
+    afflictionCondCode: [],
+    sharedOnly: false,
+  },
 };
 
 
@@ -39,6 +63,7 @@ const attackingSkillDataTemplate: AttackingSkillData = {
   uniqueHash: '',
   condition: [],
   chara: {
+    id: 0,
     iconName: '',
     name: {
       cht: '',
@@ -76,28 +101,47 @@ const attackingSkillDataTemplate: AttackingSkillData = {
 
 it('checks if the damage is calculated correctly', () => {
   const inputData: InputData = {
-    ...inputDataTemplate,
-    atkInGame: 6438,
-    atkConditionalPct: 20,
-    atkBuffPct: 197,
-    exBlade: true,
-    exWand: true,
-    criticalRatePct: 100,
-    criticalDamagePct: 170,
-    criticalInspired: false,
-    skillBuffPct: 200,
-    skillPassivePct: 40,
-    skillEnergized: true,
-    punishersBkPct: 20,
-    punishersOtherPct: 50,
-    otherElemBonusPct: 20,
-    otherCurrentHpPct: 0,
-    targetElemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-    targetAfflictionCodes: [ConditionCodes.TARGET_BOGGED.valueOf()],
-    targetDefBase: 10,
-    targetDefDownPct: 30,
-    targetDefBkRate: 0.8,
-    targetStateCode: ConditionCodes.TARGET_STATE_BK,
+    params: {
+      atk: {
+        inGame: 6438,
+        conditionalPct: 20,
+        buffPct: 197,
+      },
+      buff: inputDataTemplate.params.buff,
+      ex: {
+        blade: true,
+        wand: true,
+      },
+      crt: {
+        ratePct: 100,
+        damagePct: 170,
+        inspired: false,
+      },
+      skill: {
+        buffPct: 200,
+        passivePct: 40,
+        energized: true,
+      },
+      punishers: {
+        bkPct: 20,
+        othersPct: 50,
+      },
+      others: {
+        elemBonusPct: 20,
+        currentHpPct: 0,
+      },
+    },
+    target: {
+      elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
+      afflictionCodes: [ConditionCodes.TARGET_BOGGED.valueOf()],
+      def: {
+        base: 10,
+        downPct: 30,
+        bkRate: 0.8,
+      },
+      state: ConditionCodes.TARGET_STATE_BK,
+    },
+    filter: inputDataTemplate.filter,
   };
 
   const attackingSkillData = {
diff --git a/src/utils/game/damage.ts b/src/utils/game/damage.ts
index 9726a8de..97c2322f 100644
--- a/src/utils/game/damage.ts
+++ b/src/utils/game/damage.ts
@@ -25,21 +25,23 @@ export const calculateDamage = (
 
       // Crisis mod
       if (crisisMod !== 0) {
-        mod = calculateModOnCrisis(mod, crisisMod, inputData.otherCurrentHpPct / 100);
+        mod = calculateModOnCrisis(mod, crisisMod, inputData.params.others.currentHpPct / 100);
       }
 
       // Buff count boost
       if (buffCountBoost.each !== 0) {
         mod /= (1 + buffCountBoost.inEffect); // Get the original mod
 
-        const boost = buffCountBoost.inEffect + inputData.buffCount * buffCountBoost.each;
+        const boost = buffCountBoost.inEffect + inputData.params.buff.count * buffCountBoost.each;
 
         mod *= (1 + Math.min(boost, buffCountBoost.limit || Infinity));
       }
 
       // Buff zone boost
-      mod *= (1 + inputData.buffZoneSelf * attackingSkillData.skill.buffZoneBoost.self); // self-built buff zone
-      mod *= (1 + inputData.buffZoneAlly * attackingSkillData.skill.buffZoneBoost.ally); // ally-built buff zone
+      // - self-built buff zone
+      mod *= (1 + inputData.params.buff.zone.self * attackingSkillData.skill.buffZoneBoost.self);
+      // - ally-built buff zone
+      mod *= (1 + inputData.params.buff.zone.ally * attackingSkillData.skill.buffZoneBoost.ally);
 
       return mod;
     })
@@ -49,10 +51,10 @@ export const calculateDamage = (
 
   // Damage from ATK
   damage *= (
-    inputData.atkInGame * // In-game ATK
-    (1 + inputData.atkConditionalPct / 100) * // Condition ATK boosts
-    (1 + inputData.atkBuffPct / 100) * // ATK Buff
-    (1 + (inputData.exBlade ? 0.1 : 0)) // Blade EX
+    inputData.params.atk.inGame * // In-game ATK
+    (1 + inputData.params.atk.conditionalPct / 100) * // Condition ATK boosts
+    (1 + inputData.params.atk.buffPct / 100) * // ATK Buff
+    (1 + (inputData.params.ex.blade ? 0.1 : 0)) // Blade EX
   );
 
   // Damage from skill mods
@@ -61,37 +63,38 @@ export const calculateDamage = (
   // Damage from CRT
   damage *= (
     1 +
-    (inputData.criticalInspired ? 1 : inputData.criticalRatePct / 100) * // Critical Rate and Inspired
-    (inputData.criticalDamagePct / 100 + 0.7) // Critical damage
+    (inputData.params.crt.inspired ? 1 : inputData.params.crt.ratePct / 100) * // Critical Rate and Inspired
+    (inputData.params.crt.damagePct / 100 + 0.7) // Critical damage
   );
 
   // Damage from skill boosts
   damage *= (
-    (1 + (inputData.skillPassivePct + (inputData.skillEnergized ? 50 : 0)) / 100) * // Passives and Energized
-    (1 + (inputData.exWand ? 0.15 : 0)) * // Wand EX
-    (1 + inputData.skillBuffPct / 100) // Skill Damage Buffs
+    // Passives and Energized
+    (1 + (inputData.params.skill.passivePct + (inputData.params.skill.energized ? 50 : 0)) / 100) *
+    (1 + (inputData.params.ex.wand ? 0.15 : 0)) * // Wand EX
+    (1 + inputData.params.skill.buffPct / 100) // Skill Damage Buffs
   );
 
   // Damage from punishers
   damage *= (
-    (1 + inputData.punishersBkPct / 100) *
-    (1 + inputData.punishersOtherPct / 100)
+    (1 + inputData.params.punishers.bkPct / 100) *
+    (1 + inputData.params.punishers.othersPct / 100)
   );
 
   // Damage from elemental rate and bonuses
-  damage *= (charaElementRate + inputData.otherElemBonusPct / 100);
+  damage *= (charaElementRate + inputData.params.others.elemBonusPct / 100);
 
   // Base DEF
-  damage /= inputData.targetDefBase;
+  damage /= inputData.target.def.base;
 
   // DEF change
   damage /= (
-    (inputData.targetStateCode === ConditionCodes.TARGET_STATE_BK ? inputData.targetDefBkRate : 1) * // BK DEF change
-    (1 - inputData.targetDefDownPct / 100) // DEF down
+    (inputData.target.state === ConditionCodes.TARGET_STATE_BK ? inputData.target.def.bkRate : 1) * // BK DEF change
+    (1 - inputData.target.def.downPct / 100) // DEF down
   );
 
   // Special - Bog
-  damage *= inputData.targetAfflictionCodes.includes(ConditionCodes.TARGET_BOGGED) ? 1.5 : 1;
+  damage *= inputData.target.afflictionCodes.includes(ConditionCodes.TARGET_BOGGED) ? 1.5 : 1;
 
   return {
     lowest: damage * 0.95,

From 33f1f86f53c14a82aebc84d7a7a83c48236738bc Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sat, 26 Jun 2021 04:52:44 -0500
Subject: [PATCH 17/61] ADD - Util function to improve atk skill input data
 handling

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../skillAtk/entryProcessing.test.tsx         |  57 +----
 .../elements/gameData/skillAtk/in/main.tsx    |  57 +----
 .../elements/gameData/skillAtk/in/types.ts    |  11 +
 .../elements/gameData/skillAtk/in/utils.ts    | 132 ++++++++++
 src/utils/game/damage.test.ts                 | 233 +++++++-----------
 src/utils/types.ts                            |   3 +
 6 files changed, 240 insertions(+), 253 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/in/utils.ts
 create mode 100644 src/utils/types.ts

diff --git a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx b/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
index 6d8e91a8..dfe721e7 100644
--- a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
+++ b/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
@@ -1,62 +1,11 @@
-import {ConditionCodes} from '../../../../const/gameData';
 import {ResourceLoader} from '../../../../utils/services/resources';
 import {InputData} from './in/types';
+import {generateInputData} from './in/utils';
 import {filterSkillEntries} from './out/utils';
 
+
 describe('Attacking skill entries processing', () => {
-  const inputDataTemplate: InputData = {
-    params: {
-      atk: {
-        inGame: 5000,
-        conditionalPct: 0,
-        buffPct: 0,
-      },
-      buff: {
-        count: 0,
-        zone: {
-          self: 0,
-          ally: 0,
-        },
-      },
-      ex: {
-        blade: false,
-        wand: false,
-      },
-      crt: {
-        ratePct: 0,
-        damagePct: 0,
-        inspired: false,
-      },
-      skill: {
-        buffPct: 0,
-        passivePct: 0,
-        energized: false,
-      },
-      punishers: {
-        bkPct: 0,
-        othersPct: 0,
-      },
-      others: {
-        elemBonusPct: 0,
-        currentHpPct: 0,
-      },
-    },
-    target: {
-      elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-      afflictionCodes: [],
-      def: {
-        base: 0,
-        downPct: 0,
-        bkRate: 0.6,
-      },
-      state: ConditionCodes.NONE,
-    },
-    filter: {
-      elemCodes: [],
-      afflictionCondCode: [],
-      sharedOnly: false,
-    },
-  };
+  const inputDataTemplate: InputData = generateInputData();
 
   it('checks if the promise is returning data', async () => {
     await ResourceLoader.getAttackingSkillEntries((data) => data)
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 987426f0..c3f14eea 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -3,77 +3,24 @@ import React, {MouseEvent} from 'react';
 import Button from 'react-bootstrap/Button';
 
 import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/resources';
-import {ConditionCodes} from '../../../../../const/gameData';
 import {useI18n} from '../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
 import {InputParameters} from './params';
 import {SectionFilter} from './sections/filter';
 import {InputData} from './types';
+import {generateInputData} from './utils';
 
 
 type InputProps = {
   onSearchRequested: (inputData: InputData) => (event: MouseEvent<HTMLButtonElement>) => void,
 }
 
-
 export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
   const {t} = useI18n();
 
   const [collapsed, setCollapsed] = React.useState(true);
-  const [inputData, setInputData] = React.useState<InputData>({
-    params: {
-      atk: {
-        inGame: 7000,
-        conditionalPct: 20,
-        buffPct: 30,
-      },
-      buff: {
-        count: 0,
-        zone: {
-          self: 0,
-          ally: 0,
-        },
-      },
-      ex: {
-        blade: true,
-        wand: true,
-      },
-      crt: {
-        ratePct: 4,
-        damagePct: 0,
-        inspired: false,
-      },
-      skill: {
-        buffPct: 0,
-        passivePct: 40,
-        energized: false,
-      },
-      punishers: {
-        bkPct: 0,
-        othersPct: 20,
-      },
-      others: {
-        elemBonusPct: 0,
-        currentHpPct: 100,
-      },
-    },
-    target: {
-      elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-      afflictionCodes: [],
-      def: {
-        base: 10,
-        downPct: 0,
-        bkRate: 0.8,
-      },
-      state: ConditionCodes.NONE,
-    },
-    filter: {
-      elemCodes: [],
-      afflictionCondCode: [],
-      sharedOnly: false,
-    },
-  });
+  const [inputData, setInputData] = React.useState<InputData>(generateInputData());
 
   const {
     fetchStatus: conditionEnums,
diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index 122e588f..8307e9d4 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -53,4 +53,15 @@ export type InputData = {
     afflictionCondCode: Array<number>,
     sharedOnly: boolean,
   },
+  display: {
+    actualDamage: boolean,
+    // Damage mod / Hit count
+    damageInfo: boolean,
+    damageDist: boolean,
+    affliction: boolean,
+    // SS / SSP / SS Cost
+    spInfo: boolean,
+    // Hit timings, cancellation info, animation duration
+    animationInfo: boolean,
+  }
 }
diff --git a/src/components/elements/gameData/skillAtk/in/utils.ts b/src/components/elements/gameData/skillAtk/in/utils.ts
new file mode 100644
index 00000000..a145c4e2
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/in/utils.ts
@@ -0,0 +1,132 @@
+import {ConditionCodes} from '../../../../../const/gameData';
+import {DeepPartial} from '../../../../../utils/types';
+import {InputData} from './types';
+
+
+export const overwriteInputData = (original: InputData, overwrite: DeepPartial<InputData>): InputData => ({
+  params: {
+    atk: {
+      inGame: overwrite?.params?.atk?.inGame ?? original.params.atk.inGame,
+      conditionalPct: overwrite?.params?.atk?.conditionalPct ?? original.params.atk.conditionalPct,
+      buffPct: overwrite?.params?.atk?.buffPct ?? original.params.atk.buffPct,
+    },
+    buff: {
+      count: overwrite?.params?.buff?.count ?? original.params.buff.count,
+      zone: {
+        self: overwrite?.params?.buff?.zone?.self ?? original.params.buff.zone.self,
+        ally: overwrite?.params?.buff?.zone?.ally ?? original.params.buff.zone.ally,
+      },
+    },
+    ex: {
+      blade: overwrite?.params?.ex?.blade ?? original.params.ex.blade,
+      wand: overwrite?.params?.ex?.wand ?? original.params.ex.wand,
+    },
+    crt: {
+      ratePct: overwrite?.params?.crt?.ratePct ?? original.params.crt.ratePct,
+      damagePct: overwrite?.params?.crt?.damagePct ?? original.params.crt.damagePct,
+      inspired: overwrite?.params?.crt?.inspired ?? original.params.crt.inspired,
+    },
+    skill: {
+      buffPct: overwrite?.params?.skill?.buffPct ?? original.params.skill.buffPct,
+      passivePct: overwrite?.params?.skill?.passivePct ?? original.params.skill.passivePct,
+      energized: overwrite?.params?.skill?.energized ?? original.params.skill.energized,
+    },
+    punishers: {
+      bkPct: overwrite?.params?.punishers?.bkPct ?? original.params.punishers.bkPct,
+      othersPct: overwrite?.params?.punishers?.othersPct ?? original.params.punishers.othersPct,
+    },
+    others: {
+      elemBonusPct: overwrite?.params?.others?.elemBonusPct ?? original.params.others.elemBonusPct,
+      currentHpPct: overwrite?.params?.others?.currentHpPct ?? original.params.others.currentHpPct,
+    },
+  },
+  target: {
+    elemCondCode: overwrite?.target?.elemCondCode ?? original.target.elemCondCode,
+    afflictionCodes: overwrite?.target?.afflictionCodes ?? original.target.afflictionCodes,
+    def: {
+      base: overwrite?.target?.def?.base ?? original.target.def.base,
+      downPct: overwrite?.target?.def?.downPct ?? original.target.def.downPct,
+      bkRate: overwrite?.target?.def?.bkRate ?? original.target.def.bkRate,
+    },
+    state: overwrite?.target?.state ?? original.target.state,
+  },
+  filter: {
+    elemCodes: overwrite?.filter?.elemCodes ?? original.filter.elemCodes,
+    afflictionCondCode: overwrite?.filter?.afflictionCondCode ?? original.filter.afflictionCondCode,
+    sharedOnly: overwrite?.filter?.sharedOnly ?? original.filter.sharedOnly,
+  },
+  display: {
+    actualDamage: overwrite?.display?.actualDamage ?? original.display.actualDamage,
+    damageInfo: overwrite?.display?.damageInfo ?? original.display.damageInfo,
+    damageDist: overwrite?.display?.damageDist ?? original.display.damageDist,
+    affliction: overwrite?.display?.affliction ?? original.display.affliction,
+    spInfo: overwrite?.display?.spInfo ?? original.display.spInfo,
+    animationInfo: overwrite?.display?.animationInfo ?? original.display.animationInfo,
+  },
+});
+
+export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData => overwriteInputData(
+  {
+    // These default values will be used when initializing the parameter input for ATK skill lookup
+    params: {
+      atk: {
+        inGame: 7000,
+        conditionalPct: 20,
+        buffPct: 30,
+      },
+      buff: {
+        count: 0,
+        zone: {
+          self: 0,
+          ally: 0,
+        },
+      },
+      ex: {
+        blade: true,
+        wand: true,
+      },
+      crt: {
+        ratePct: 4,
+        damagePct: 0,
+        inspired: false,
+      },
+      skill: {
+        buffPct: 0,
+        passivePct: 40,
+        energized: false,
+      },
+      punishers: {
+        bkPct: 0,
+        othersPct: 20,
+      },
+      others: {
+        elemBonusPct: 0,
+        currentHpPct: 100,
+      },
+    },
+    target: {
+      elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
+      afflictionCodes: [],
+      def: {
+        base: 10,
+        downPct: 0,
+        bkRate: 0.8,
+      },
+      state: ConditionCodes.NONE,
+    },
+    filter: {
+      elemCodes: [],
+      afflictionCondCode: [],
+      sharedOnly: false,
+    },
+    display: {
+      actualDamage: false,
+      damageInfo: false,
+      damageDist: false,
+      affliction: false,
+      spInfo: false,
+      animationInfo: false,
+    },
+  },
+  overwrite || {},
+);
diff --git a/src/utils/game/damage.test.ts b/src/utils/game/damage.test.ts
index 468e5210..2ff1d1d6 100644
--- a/src/utils/game/damage.test.ts
+++ b/src/utils/game/damage.test.ts
@@ -1,163 +1,108 @@
 import {AttackingSkillData} from '../../api-def/resources';
 import {InputData} from '../../components/elements/gameData/skillAtk/in/types';
+import {generateInputData} from '../../components/elements/gameData/skillAtk/in/utils';
 import {ConditionCodes} from '../../const/gameData';
 import {calculateDamage, CalculateDamageReturn} from './damage';
 
 
-const inputDataTemplate: InputData = {
-  params: {
-    atk: {
-      inGame: 5000,
-      conditionalPct: 0,
-      buffPct: 0,
+describe('Damage calculation', () => {
+  const attackingSkillDataTemplate: AttackingSkillData = {
+    uniqueHash: '',
+    condition: [],
+    chara: {
+      id: 0,
+      iconName: '',
+      name: {
+        cht: '',
+        en: '',
+        jp: '',
+      },
+      element: 0,
     },
-    buff: {
-      count: 0,
-      zone: {
+    skill: {
+      identifiers: [],
+      internalId: 0,
+      name: {
+        cht: '',
+        en: '',
+        jp: '',
+      },
+      spMax: 0,
+      sharable: false,
+      ssCost: 0,
+      ssSp: 0,
+      modsMax: [],
+      crisisMax: [],
+      hitsMax: 0,
+      afflictions: [],
+      buffCountBoost: [],
+      buffZoneBoost: {
         self: 0,
         ally: 0,
       },
+      dispelMax: false,
+      dispelTimingMax: [],
     },
-    ex: {
-      blade: false,
-      wand: false,
-    },
-    crt: {
-      ratePct: 0,
-      damagePct: 0,
-      inspired: false,
-    },
-    skill: {
-      buffPct: 0,
-      passivePct: 0,
-      energized: false,
-    },
-    punishers: {
-      bkPct: 0,
-      othersPct: 0,
-    },
-    others: {
-      elemBonusPct: 0,
-      currentHpPct: 0,
-    },
-  },
-  target: {
-    elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-    afflictionCodes: [],
-    def: {
-      base: 0,
-      downPct: 0,
-      bkRate: 0.6,
-    },
-    state: ConditionCodes.NONE,
-  },
-  filter: {
-    elemCodes: [],
-    afflictionCondCode: [],
-    sharedOnly: false,
-  },
-};
-
-
-const attackingSkillDataTemplate: AttackingSkillData = {
-  uniqueHash: '',
-  condition: [],
-  chara: {
-    id: 0,
-    iconName: '',
-    name: {
-      cht: '',
-      en: '',
-      jp: '',
-    },
-    element: 0,
-  },
-  skill: {
-    identifiers: [],
-    internalId: 0,
-    name: {
-      cht: '',
-      en: '',
-      jp: '',
-    },
-    spMax: 0,
-    sharable: false,
-    ssCost: 0,
-    ssSp: 0,
-    modsMax: [],
-    crisisMax: [],
-    hitsMax: 0,
-    afflictions: [],
-    buffCountBoost: [],
-    buffZoneBoost: {
-      self: 0,
-      ally: 0,
-    },
-    dispelMax: false,
-    dispelTimingMax: [],
-  },
-};
-
+  };
 
-it('checks if the damage is calculated correctly', () => {
-  const inputData: InputData = {
-    params: {
-      atk: {
-        inGame: 6438,
-        conditionalPct: 20,
-        buffPct: 197,
+  it('checks if the damage is calculated correctly', () => {
+    const inputData: InputData = generateInputData({
+      params: {
+        atk: {
+          inGame: 6438,
+          conditionalPct: 20,
+          buffPct: 197,
+        },
+        ex: {
+          blade: true,
+          wand: true,
+        },
+        crt: {
+          ratePct: 100,
+          damagePct: 170,
+          inspired: false,
+        },
+        skill: {
+          buffPct: 200,
+          passivePct: 40,
+          energized: true,
+        },
+        punishers: {
+          bkPct: 20,
+          othersPct: 50,
+        },
+        others: {
+          elemBonusPct: 20,
+          currentHpPct: 0,
+        },
       },
-      buff: inputDataTemplate.params.buff,
-      ex: {
-        blade: true,
-        wand: true,
-      },
-      crt: {
-        ratePct: 100,
-        damagePct: 170,
-        inspired: false,
+      target: {
+        elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
+        afflictionCodes: [ConditionCodes.TARGET_BOGGED.valueOf()],
+        def: {
+          base: 10,
+          downPct: 30,
+          bkRate: 0.8,
+        },
+        state: ConditionCodes.TARGET_STATE_BK,
       },
+    });
+
+    const attackingSkillData = {
+      ...attackingSkillDataTemplate,
       skill: {
-        buffPct: 200,
-        passivePct: 40,
-        energized: true,
-      },
-      punishers: {
-        bkPct: 20,
-        othersPct: 50,
-      },
-      others: {
-        elemBonusPct: 20,
-        currentHpPct: 0,
-      },
-    },
-    target: {
-      elemCondCode: ConditionCodes.TARGET_ELEM_EFFECTIVE,
-      afflictionCodes: [ConditionCodes.TARGET_BOGGED.valueOf()],
-      def: {
-        base: 10,
-        downPct: 30,
-        bkRate: 0.8,
+        ...attackingSkillDataTemplate.skill,
+        modsMax: [40, 5.45],
+        crisisMax: [1, 1],
+        buffCountBoost: [{inEffect: 0, each: 0, limit: 0}, {inEffect: 0, each: 0, limit: 0}],
       },
-      state: ConditionCodes.TARGET_STATE_BK,
-    },
-    filter: inputDataTemplate.filter,
-  };
-
-  const attackingSkillData = {
-    ...attackingSkillDataTemplate,
-    skill: {
-      ...attackingSkillDataTemplate.skill,
-      modsMax: [40, 5.45],
-      crisisMax: [1, 1],
-      buffCountBoost: [{inEffect: 0, each: 0, limit: 0}, {inEffect: 0, each: 0, limit: 0}],
-    },
-  };
+    };
 
-  const damage: CalculateDamageReturn = calculateDamage(inputData, attackingSkillData, 1.5);
+    const damage: CalculateDamageReturn = calculateDamage(inputData, attackingSkillData, 1.5);
 
-  expect(Math.round(damage.lowest)).toStrictEqual(33179044);
-  expect(Math.round(damage.expected)).toStrictEqual(34925309);
-  expect(Math.round(damage.highest)).toStrictEqual(36671575);
-  expect(damage.totalMods).toStrictEqual(45.45);
+    expect(Math.round(damage.lowest)).toStrictEqual(33179044);
+    expect(Math.round(damage.expected)).toStrictEqual(34925309);
+    expect(Math.round(damage.highest)).toStrictEqual(36671575);
+    expect(damage.totalMods).toStrictEqual(45.45);
+  });
 });
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 00000000..3cfa8473
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,3 @@
+export type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends Array<any> ? T[K] : DeepPartial<T[K]>;
+};

From 5f81cf8d450365695cfe8b84a6ab3f723d5f9292 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sat, 26 Jun 2021 22:11:07 -0500
Subject: [PATCH 18/61] IMP - Restructure checkbox/radio implementations

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/common/check/base/group.tsx      | 23 +++++
 .../elements/common/check/base/item.tsx       | 39 +++++++++
 .../elements/common/check/checksBase.tsx      | 37 --------
 .../elements/common/check/customBase.tsx      | 38 --------
 .../elements/common/check/customBox.tsx       | 29 -------
 .../elements/common/check/customRadio.tsx     | 33 -------
 .../checkbox.test.tsx}                        | 87 ++++++++++---------
 .../elements/common/check/enum/checkbox.tsx   | 33 +++++++
 .../radio.test.tsx}                           | 75 +++++++++-------
 .../elements/common/check/enum/radio.tsx      | 35 ++++++++
 .../elements/common/check/enumChecks.tsx      | 55 ------------
 .../elements/common/check/enumChecksBox.tsx   | 35 --------
 .../elements/common/check/enumChecksRadio.tsx | 38 --------
 .../checkbox.test.tsx}                        | 52 +++++------
 .../elements/common/check/group/checkbox.tsx  | 40 +++++++++
 .../radio.test.tsx}                           | 59 +++++++------
 .../elements/common/check/group/radio.tsx     | 40 +++++++++
 .../elements/common/check/inlineCheck.tsx     | 30 -------
 .../elements/common/check/inlineCheckBase.tsx | 58 -------------
 .../elements/common/check/item/checkbox.tsx   | 25 ++++++
 src/components/elements/common/check/types.ts | 48 +++++++++-
 .../elements/common/input/numeric.tsx         | 22 ++---
 src/components/elements/common/props.ts       |  5 --
 src/components/elements/common/types.ts       | 10 +++
 .../elements/gameData/ex/in/filter.test.tsx   | 20 ++---
 .../elements/gameData/ex/in/filter.tsx        | 26 +++---
 .../elements/gameData/ex/in/main.tsx          |  7 +-
 .../elements/gameData/ex/in/types.ts          |  8 +-
 .../elements/gameData/ex/in/utils.ts          | 23 +++++
 .../elements/gameData/ex/out/utils.tsx        | 11 +--
 .../gameData/skillAtk/in/sections/atk.tsx     | 10 ++-
 .../gameData/skillAtk/in/sections/buff.tsx    | 10 ++-
 .../gameData/skillAtk/in/sections/crt.tsx     | 16 ++--
 .../gameData/skillAtk/in/sections/ex.tsx      | 17 ++--
 .../gameData/skillAtk/in/sections/filter.tsx  | 22 +++--
 .../gameData/skillAtk/in/sections/other.tsx   |  7 +-
 .../skillAtk/in/sections/punisher.tsx         |  7 +-
 .../gameData/skillAtk/in/sections/skill.tsx   | 16 ++--
 .../gameData/skillAtk/in/sections/target.tsx  | 38 +++++---
 .../posts/analysis/lookup/in/main.tsx         | 12 +--
 .../posts/analysis/lookup/in/typePicker.tsx   | 13 +--
 .../posts/analysis/lookup/in/types.ts         |  1 +
 42 files changed, 615 insertions(+), 595 deletions(-)
 create mode 100644 src/components/elements/common/check/base/group.tsx
 create mode 100644 src/components/elements/common/check/base/item.tsx
 delete mode 100644 src/components/elements/common/check/checksBase.tsx
 delete mode 100644 src/components/elements/common/check/customBase.tsx
 delete mode 100644 src/components/elements/common/check/customBox.tsx
 delete mode 100644 src/components/elements/common/check/customRadio.tsx
 rename src/components/elements/common/check/{enumChecksBox.test.tsx => enum/checkbox.test.tsx} (60%)
 create mode 100644 src/components/elements/common/check/enum/checkbox.tsx
 rename src/components/elements/common/check/{enumChecksRadio.test.tsx => enum/radio.test.tsx} (60%)
 create mode 100644 src/components/elements/common/check/enum/radio.tsx
 delete mode 100644 src/components/elements/common/check/enumChecks.tsx
 delete mode 100644 src/components/elements/common/check/enumChecksBox.tsx
 delete mode 100644 src/components/elements/common/check/enumChecksRadio.tsx
 rename src/components/elements/common/check/{customBox.test.tsx => group/checkbox.test.tsx} (63%)
 create mode 100644 src/components/elements/common/check/group/checkbox.tsx
 rename src/components/elements/common/check/{customRadio.test.tsx => group/radio.test.tsx} (59%)
 create mode 100644 src/components/elements/common/check/group/radio.tsx
 delete mode 100644 src/components/elements/common/check/inlineCheck.tsx
 delete mode 100644 src/components/elements/common/check/inlineCheckBase.tsx
 create mode 100644 src/components/elements/common/check/item/checkbox.tsx
 delete mode 100644 src/components/elements/common/props.ts
 create mode 100644 src/components/elements/gameData/ex/in/utils.ts

diff --git a/src/components/elements/common/check/base/group.tsx b/src/components/elements/common/check/base/group.tsx
new file mode 100644
index 00000000..b51b6148
--- /dev/null
+++ b/src/components/elements/common/check/base/group.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Form from 'react-bootstrap/Form';
+
+import {CheckItemProps} from '../types';
+import {CheckItem} from './item';
+
+
+type Props<E> = {
+  options: Array<E>,
+  optionToProps: (entry: E) => CheckItemProps,
+}
+
+export const CheckGroup = <E, >({
+  options,
+  optionToProps,
+}: Props<E>) => {
+  return (
+    <Form.Group className="mb-3 text-center">
+      {options.map((option, idx) => <CheckItem key={idx} {...optionToProps(option)}/>)}
+    </Form.Group>
+  );
+};
diff --git a/src/components/elements/common/check/base/item.tsx b/src/components/elements/common/check/base/item.tsx
new file mode 100644
index 00000000..4626eeb9
--- /dev/null
+++ b/src/components/elements/common/check/base/item.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import ToggleButton from 'react-bootstrap/ToggleButton';
+
+import {ImageWithOverlay} from '../../image';
+import {CheckItemProps} from '../types';
+
+
+export const CheckItem = ({
+  text,
+  variant = 'outline-secondary',
+  checked,
+  onChange,
+  image,
+  type,
+  groupName,
+}: CheckItemProps) => {
+  const label = image?.url ?
+    <ImageWithOverlay src={image.url} text={text} style={{height: image.height || '1.5rem'}}/> :
+    <span className="text-light">{text}</span>;
+
+  // Value of `1` is the identifier of that button in a button group.
+  // https://react-bootstrap.github.io/components/buttons/#toggle-button-props
+  return (
+    <ButtonGroup toggle className="m-1">
+      <ToggleButton
+        type={type}
+        variant={variant}
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        name={groupName}
+        value="1"
+      >
+        {label}
+      </ToggleButton>
+    </ButtonGroup>
+  );
+};
diff --git a/src/components/elements/common/check/checksBase.tsx b/src/components/elements/common/check/checksBase.tsx
deleted file mode 100644
index 7b1c59ea..00000000
--- a/src/components/elements/common/check/checksBase.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-import Form from 'react-bootstrap/Form';
-
-
-// Separating `ChecksPropsDisplay` and `ChecksProps` to avoid false positive of required HTML attribute
-// occurred in `EnumChecksBox` and `EnumChecksRadio`
-
-export type ChecksPropsDisplay<E, K extends string, V, T extends { [key in K]: V }> = {
-  options: Array<E>,
-  inputData: T,
-  inputKey: K,
-}
-
-export type ChecksProps<E, K extends string, V, T extends { [key in K]: V }> = ChecksPropsDisplay<E, K, V, T> & {
-  setInputData: (newInput: T) => void,
-}
-
-
-export type ChecksBaseProps<E> = {
-  options: Array<E>,
-  renderCheckItem: (entry: E) => React.ReactElement,
-}
-
-
-export const ChecksBase = <E, >({
-  options,
-  renderCheckItem,
-}: ChecksBaseProps<E>) => {
-  return (
-    <Form.Group className="mb-3 text-center">
-      {
-        options.map((entry) => renderCheckItem(entry))
-      }
-    </Form.Group>
-  );
-};
diff --git a/src/components/elements/common/check/customBase.tsx b/src/components/elements/common/check/customBase.tsx
deleted file mode 100644
index f1d19793..00000000
--- a/src/components/elements/common/check/customBase.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import {ChecksBase} from './checksBase';
-import {InlineCheckBase} from './inlineCheckBase';
-import {CheckEntry, CheckType} from './types';
-
-
-type CustomRadiosProps = {
-  options: Array<CheckEntry>,
-  type: CheckType,
-  groupName: string,
-  onChange: (checked: boolean, code: number) => void,
-  isChecked: (code: number) => boolean,
-}
-
-export const CustomChecksBase = ({
-  options,
-  type,
-  groupName,
-  onChange,
-  isChecked,
-}: CustomRadiosProps) => {
-  return (
-    <ChecksBase
-      options={options}
-      renderCheckItem={({text, code}: CheckEntry) => (
-        <InlineCheckBase
-          title={text}
-          groupName={groupName}
-          type={type}
-          key={text}
-          onChange={(checked) => onChange(checked, code)}
-          checked={isChecked(code)}
-        />
-      )}
-    />
-  );
-};
diff --git a/src/components/elements/common/check/customBox.tsx b/src/components/elements/common/check/customBox.tsx
deleted file mode 100644
index 731d8463..00000000
--- a/src/components/elements/common/check/customBox.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-import {ChecksProps} from './checksBase';
-import {CustomChecksBase} from './customBase';
-import {CheckEntry} from './types';
-
-type CustomBoxedProps<K extends string, V, T extends { [key in K]: V }> = ChecksProps<CheckEntry, K, V, T>
-
-export const CustomBoxes = <K extends string, T extends { [key in K]: Array<number> }>({
-  options,
-  inputData,
-  inputKey,
-  setInputData,
-}: CustomBoxedProps<K, Array<number>, T>) => {
-  return (
-    <CustomChecksBase
-      options={options}
-      type="checkbox"
-      groupName={inputKey}
-      onChange={(checked, code) => setInputData({
-        ...inputData,
-        [inputKey]: checked ?
-          inputData[inputKey].concat([code]) :
-          inputData[inputKey].filter((dataCode) => dataCode !== code),
-      })}
-      isChecked={(code) => inputData[inputKey].includes(code)}
-    />
-  );
-};
diff --git a/src/components/elements/common/check/customRadio.tsx b/src/components/elements/common/check/customRadio.tsx
deleted file mode 100644
index 999f5354..00000000
--- a/src/components/elements/common/check/customRadio.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import {ChecksProps} from './checksBase';
-import {CustomChecksBase} from './customBase';
-import {CheckEntry} from './types';
-
-
-type CustomRadiosProps<K extends string, V, T extends { [key in K]: V }> = ChecksProps<CheckEntry, K, V, T>
-
-export const CustomRadios = <K extends string, T extends { [key in K]: number }>({
-  options,
-  inputData,
-  inputKey,
-  setInputData,
-}: CustomRadiosProps<K, number, T>) => {
-  return (
-    <CustomChecksBase
-      options={options}
-      type="radio"
-      groupName={inputKey}
-      onChange={(checked, code) => {
-        if (!checked) {
-          return;
-        }
-        setInputData({
-          ...inputData,
-          [inputKey]: code,
-        });
-      }}
-      isChecked={(code) => inputData[inputKey] === code}
-    />
-  );
-};
diff --git a/src/components/elements/common/check/enumChecksBox.test.tsx b/src/components/elements/common/check/enum/checkbox.test.tsx
similarity index 60%
rename from src/components/elements/common/check/enumChecksBox.test.tsx
rename to src/components/elements/common/check/enum/checkbox.test.tsx
index 98632cb8..f19f3d97 100644
--- a/src/components/elements/common/check/enumChecksBox.test.tsx
+++ b/src/components/elements/common/check/enum/checkbox.test.tsx
@@ -3,10 +3,11 @@ import React from 'react';
 import {screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {renderReact} from '../../../../../test/render/main';
-import {SupportedLanguages} from '../../../../api-def/api';
-import {EnumEntry} from '../../../../api-def/resources';
-import {EnumChecksBox} from './enumChecksBox';
+import {renderReact} from '../../../../../../test/render/main';
+import {SupportedLanguages} from '../../../../../api-def/api';
+import {EnumEntry} from '../../../../../api-def/resources';
+import {EnumCheckboxGroup} from './checkbox';
+
 
 describe('Enum check boxes as checkboxes', () => {
   const enums: Array<EnumEntry> = [
@@ -52,104 +53,110 @@ describe('Enum check boxes as checkboxes', () => {
     },
   ];
 
-  const clickFirstButton = () => {
+  const clickFirstButton = (rerender: () => void) => {
     const enumButton = screen.getByAltText('EN 1');
     userEvent.click(enumButton);
+    rerender();
   };
 
-  const clickSecondButton = () => {
+  const clickSecondButton = (rerender: () => void) => {
     const enumButton = screen.getByAltText('EN 2');
     userEvent.click(enumButton);
+    rerender();
   };
 
-  let data: {enum: Array<number>};
-  let setData: jest.Mock<void, [typeof data]>;
+  let data: {selected: Array<number>};
+  let setData: jest.Mock;
 
   beforeEach(() => {
-    data = {'enum': []};
     setData = jest.fn().mockImplementation((newData) => data = newData);
   });
 
   it('can check single item', async () => {
-    data = {'enum': [] as Array<number>};
-    renderReact(() => (
-      <EnumChecksBox
+    data = {selected: []};
+    const {rerender} = renderReact(() => (
+      <EnumCheckboxGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
       />
     ));
 
-    clickFirstButton();
+    clickFirstButton(rerender);
 
     expect(setData).toHaveBeenCalledTimes(1);
-    expect(data).toStrictEqual({enum: [1]});
+    expect(data).toStrictEqual({selected: [1]});
   });
 
   it('can cancel checking single item', async () => {
+    data = {selected: []};
     const {rerender} = renderReact(() => (
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
       />
     ));
 
-    clickFirstButton();
-    rerender();
-    clickFirstButton();
+    clickFirstButton(rerender);
+    clickFirstButton(rerender);
 
     expect(setData).toHaveBeenCalledTimes(2);
-    expect(data).toStrictEqual({enum: []});
+    expect(data).toStrictEqual({selected: []});
   });
 
   it('can check multiple items', async () => {
+    data = {selected: []};
     const {rerender} = renderReact(() => (
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
       />
     ));
 
-    clickFirstButton();
-    rerender();
-    clickSecondButton();
+    clickFirstButton(rerender);
+    clickSecondButton(rerender);
 
     expect(setData).toHaveBeenCalledTimes(2);
-    expect(data).toStrictEqual({enum: [1, 2]});
+    expect(data).toStrictEqual({selected: [1, 2]});
   });
 
   it('can cancel checking multiple items', async () => {
+    data = {selected: []};
     const {rerender} = renderReact(() => (
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
       />
     ));
 
-    clickFirstButton();
-    rerender();
-    clickSecondButton();
-    rerender();
-    clickFirstButton();
+    clickFirstButton(rerender);
+    clickSecondButton(rerender);
+    clickFirstButton(rerender);
 
     expect(setData).toHaveBeenCalledTimes(3);
-    expect(data).toStrictEqual({enum: [2]});
+    expect(data).toStrictEqual({selected: [2]});
   });
 
   it('shows text if the image URL is not available', async () => {
+    data = {selected: []};
     renderReact(() => (
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
       />
     ));
 
@@ -157,12 +164,14 @@ describe('Enum check boxes as checkboxes', () => {
   });
 
   it('shows image if the image URL is available', async () => {
+    data = {selected: []};
     renderReact(() => (
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
       />
     ));
 
diff --git a/src/components/elements/common/check/enum/checkbox.tsx b/src/components/elements/common/check/enum/checkbox.tsx
new file mode 100644
index 00000000..9f551eb1
--- /dev/null
+++ b/src/components/elements/common/check/enum/checkbox.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {DepotPaths, EnumEntry} from '../../../../../api-def/resources';
+import {useI18n} from '../../../../../i18n/hook';
+import {CheckboxGroup} from '../group/checkbox';
+import {CheckboxGroupProps} from '../types';
+
+
+type EnumChecksBoxProps<E extends EnumEntry, T> = Omit<CheckboxGroupProps<E, T>, 'getCheckOptionComparer'>
+
+export const EnumCheckboxGroup = <E extends EnumEntry, T>({
+  options,
+  inputData,
+  setInputData,
+  getValue,
+  getUpdatedInputData,
+  imageHeight,
+}: EnumChecksBoxProps<E, T>) => {
+  const {lang} = useI18n();
+
+  return (
+    <CheckboxGroup
+      options={options.map((option) => ({...option, text: option.trans[lang]}))}
+      inputData={inputData}
+      setInputData={setInputData}
+      getValue={getValue}
+      getUpdatedInputData={getUpdatedInputData}
+      getCheckOptionComparer={(option) => option.code}
+      getImageUrl={(option) => option.imagePath ? DepotPaths.getImageURL(option.imagePath) : undefined}
+      imageHeight={imageHeight}
+    />
+  );
+};
diff --git a/src/components/elements/common/check/enumChecksRadio.test.tsx b/src/components/elements/common/check/enum/radio.test.tsx
similarity index 60%
rename from src/components/elements/common/check/enumChecksRadio.test.tsx
rename to src/components/elements/common/check/enum/radio.test.tsx
index 21c14533..b4248408 100644
--- a/src/components/elements/common/check/enumChecksRadio.test.tsx
+++ b/src/components/elements/common/check/enum/radio.test.tsx
@@ -3,10 +3,11 @@ import React from 'react';
 import {screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {renderReact} from '../../../../../test/render/main';
-import {SupportedLanguages} from '../../../../api-def/api';
-import {EnumEntry} from '../../../../api-def/resources/types';
-import {EnumChecksRadio} from './enumChecksRadio';
+import {renderReact} from '../../../../../../test/render/main';
+import {SupportedLanguages} from '../../../../../api-def/api';
+import {EnumEntry} from '../../../../../api-def/resources/types';
+import {EnumRadioGroup} from './radio';
+
 
 describe('Enum checks as radio', () => {
   const enums: Array<EnumEntry> = [
@@ -52,58 +53,67 @@ describe('Enum checks as radio', () => {
     },
   ];
 
-  const CheckWrapper = ({data}: {data: {enum: number}}) => {
-    return (
-      <EnumChecksRadio
-        options={enums}
-        inputData={data}
-        inputKey="enum"
-        setInputData={setData}
-      />
-    );
-  };
-
-  const clickFirstButton = () => {
+  const clickFirstButton = (rerender: () => void) => {
     const enumButton = screen.getByAltText('EN 1');
     userEvent.click(enumButton);
+    rerender();
   };
 
-  let data: {enum: number};
+  let data: {selected: number};
   let setData: jest.Mock<void, [typeof data]>;
 
   beforeEach(() => {
-    data = {'enum': 2};
     setData = jest.fn().mockImplementation((newData) => data = newData);
   });
 
   it('can check single item', async () => {
-    data = {'enum': 2};
-    renderReact(() => <CheckWrapper data={data}/>);
+    data = {selected: 2};
+    const {rerender} = renderReact(() => (
+      <EnumRadioGroup
+        options={enums}
+        inputData={data}
+        setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        groupName="radio"
+      />
+    ));
 
-    clickFirstButton();
+    clickFirstButton(rerender);
 
     expect(setData).toHaveBeenCalledTimes(1);
-    expect(data).toStrictEqual({enum: 1});
+    expect(data).toStrictEqual({selected: 1});
   });
 
   it('does not change the selection if selected the same', async () => {
-    data = {'enum': 1};
-    const {rerender} = renderReact(() => <CheckWrapper data={data}/>);
+    data = {selected: 1};
+    const {rerender} = renderReact(() => (
+      <EnumRadioGroup
+        options={enums}
+        inputData={data}
+        setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        groupName="radio"
+      />
+    ));
 
-    clickFirstButton();
-    rerender();
+    clickFirstButton(rerender);
 
     expect(setData).toHaveBeenCalledTimes(0);
-    expect(data).toStrictEqual({enum: 1});
+    expect(data).toStrictEqual({selected: 1});
   });
 
   it('shows text if the image URL is not available', async () => {
+    data = {selected: 2};
     renderReact(() => (
-      <EnumChecksRadio
+      <EnumRadioGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        groupName="radio"
       />
     ));
 
@@ -111,12 +121,15 @@ describe('Enum checks as radio', () => {
   });
 
   it('shows image if the image URL is available', async () => {
+    data = {selected: 2};
     renderReact(() => (
-      <EnumChecksRadio
+      <EnumRadioGroup
         options={enums}
         inputData={data}
-        inputKey="enum"
         setInputData={setData}
+        getValue={(data) => data.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        groupName="radio"
       />
     ));
 
diff --git a/src/components/elements/common/check/enum/radio.tsx b/src/components/elements/common/check/enum/radio.tsx
new file mode 100644
index 00000000..2a16d0be
--- /dev/null
+++ b/src/components/elements/common/check/enum/radio.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {DepotPaths, EnumEntry} from '../../../../../api-def/resources';
+import {useI18n} from '../../../../../i18n/hook';
+import {RadioGroup} from '../group/radio';
+import {RadioGroupProps} from '../types';
+
+
+type EnumRadioGroupProps<E extends EnumEntry, T> = Omit<RadioGroupProps<E, T>, 'getCheckOptionComparer'>
+
+export const EnumRadioGroup = <E extends EnumEntry, T>({
+  options,
+  inputData,
+  setInputData,
+  getValue,
+  getUpdatedInputData,
+  groupName,
+  imageHeight,
+}: EnumRadioGroupProps<E, T>) => {
+  const {lang} = useI18n();
+
+  return (
+    <RadioGroup
+      options={options.map((option) => ({...option, text: option.trans[lang]}))}
+      inputData={inputData}
+      setInputData={setInputData}
+      getValue={getValue}
+      getUpdatedInputData={getUpdatedInputData}
+      getCheckOptionComparer={(option) => option.code}
+      getImageUrl={(option) => option.imagePath ? DepotPaths.getImageURL(option.imagePath) : undefined}
+      groupName={groupName}
+      imageHeight={imageHeight}
+    />
+  );
+};
diff --git a/src/components/elements/common/check/enumChecks.tsx b/src/components/elements/common/check/enumChecks.tsx
deleted file mode 100644
index 285d3f72..00000000
--- a/src/components/elements/common/check/enumChecks.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-
-import * as CSS from 'csstype';
-
-import {DepotPaths, EnumEntry} from '../../../../api-def/resources';
-import {useI18n} from '../../../../i18n/hook';
-import {ChecksBase, ChecksPropsDisplay} from './checksBase';
-import {InlineCheckBase} from './inlineCheckBase';
-import {CheckType} from './types';
-
-
-export type EnumChecksProps<K extends string, V, T extends { [key in K]: V }> =
-  ChecksPropsDisplay<EnumEntry, K, V, T> & {
-  imageHeight?: CSS.Property.Height,
-}
-
-type EnumChecksPropsInternal<K extends string, V, T extends { [key in K]: V }> =
-  EnumChecksProps<K, V, T> & {
-  type: CheckType,
-  onChange: (code: number, checked: boolean) => void,
-  isChecked: (code: number) => boolean,
-}
-
-export const EnumChecks = <K extends string, V, T extends { [key in K]: V }>({
-  options,
-  inputKey,
-  imageHeight,
-  type,
-  onChange,
-  isChecked,
-}: EnumChecksPropsInternal<K, V, T>) => {
-  const {lang} = useI18n();
-
-  return (
-    <ChecksBase
-      options={options}
-      renderCheckItem={(enumEntry) => {
-        const {code} = enumEntry;
-
-        return (
-          <InlineCheckBase
-            id={`${inputKey}${enumEntry.name}`} key={enumEntry.name}
-            type={type}
-            groupName={inputKey}
-            title={enumEntry.trans[lang] || enumEntry.name}
-            imageUrl={enumEntry.imagePath ? DepotPaths.getImageURL(enumEntry.imagePath) : undefined}
-            imageHeight={imageHeight}
-            onChange={(checked) => onChange(code, checked)}
-            checked={isChecked(enumEntry.code)}
-          />
-        );
-      }}
-    />
-  );
-};
diff --git a/src/components/elements/common/check/enumChecksBox.tsx b/src/components/elements/common/check/enumChecksBox.tsx
deleted file mode 100644
index 059af15c..00000000
--- a/src/components/elements/common/check/enumChecksBox.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-import {EnumEntry} from '../../../../api-def/resources';
-import {ChecksProps} from './checksBase';
-import {EnumChecks, EnumChecksProps} from './enumChecks';
-
-
-type EnumChecksBoxProps<K extends string, T extends { [key in K]: Array<number> }> =
-  EnumChecksProps<K, Array<number>, T> &
-  ChecksProps<EnumEntry, K, Array<number>, T>
-
-export const EnumChecksBox = <K extends string, T extends { [key in K]: Array<number> }>({
-  options,
-  inputData,
-  inputKey,
-  setInputData,
-  imageHeight,
-}: EnumChecksBoxProps<K, T>) => {
-  return (
-    <EnumChecks
-      inputData={inputData}
-      inputKey={inputKey}
-      options={options}
-      onChange={(code, checked) => setInputData({
-        ...inputData,
-        [inputKey]: checked ?
-          inputData[inputKey].concat([code]) :
-          inputData[inputKey].filter((dataCode) => dataCode !== code),
-      })}
-      isChecked={(code) => inputData[inputKey].includes(code)}
-      imageHeight={imageHeight}
-      type="checkbox"
-    />
-  );
-};
diff --git a/src/components/elements/common/check/enumChecksRadio.tsx b/src/components/elements/common/check/enumChecksRadio.tsx
deleted file mode 100644
index 06ac0cdd..00000000
--- a/src/components/elements/common/check/enumChecksRadio.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import {EnumEntry} from '../../../../api-def/resources';
-import {ChecksProps} from './checksBase';
-import {EnumChecks, EnumChecksProps} from './enumChecks';
-
-
-type EnumChecksRadioProps<K extends string, T extends { [key in K]: number }> =
-  EnumChecksProps<K, number, T> &
-  ChecksProps<EnumEntry, K, number, T>
-
-export const EnumChecksRadio = <K extends string, T extends { [key in K]: number }>({
-  options,
-  inputData,
-  inputKey,
-  setInputData,
-  imageHeight,
-}: EnumChecksRadioProps<K, T>) => {
-  return (
-    <EnumChecks
-      inputData={inputData}
-      inputKey={inputKey}
-      options={options}
-      onChange={(code, checked) => {
-        if (!checked) {
-          return;
-        }
-        setInputData({
-          ...inputData,
-          [inputKey]: code,
-        });
-      }}
-      isChecked={(code) => inputData[inputKey] === code}
-      imageHeight={imageHeight}
-      type="radio"
-    />
-  );
-};
diff --git a/src/components/elements/common/check/customBox.test.tsx b/src/components/elements/common/check/group/checkbox.test.tsx
similarity index 63%
rename from src/components/elements/common/check/customBox.test.tsx
rename to src/components/elements/common/check/group/checkbox.test.tsx
index a144b4f9..7a2f4607 100644
--- a/src/components/elements/common/check/customBox.test.tsx
+++ b/src/components/elements/common/check/group/checkbox.test.tsx
@@ -3,29 +3,21 @@ import React from 'react';
 import {screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {renderReact} from '../../../../../test/render/main';
-import {CustomBoxes} from './customBox';
-import {CheckEntry} from './types';
+import {renderReact} from '../../../../../../test/render/main';
+import {CheckOption} from '../types';
+import {CheckboxGroup} from './checkbox';
+
 
 describe('Checkboxes', () => {
-  const options: Array<CheckEntry> = [
-    {
-      text: 'check 1',
-      code: 1,
-    },
-    {
-      text: 'check 2',
-      code: 2,
-    },
-    {
-      text: 'check 3',
-      code: 3,
-    },
+  const options: Array<CheckOption & {code: number}> = [
+    {text: 'check 1', code: 1},
+    {text: 'check 2', code: 2},
+    {text: 'check 3', code: 3},
   ];
 
   let inputData: {selected: Array<number>};
 
-  let setInputDataFunc: jest.Mock<void, [{selected: Array<number>}]>;
+  let setInputDataFunc: jest.Mock;
 
   beforeEach(() => {
     setInputDataFunc = jest.fn().mockImplementation((newData) => inputData = newData);
@@ -35,15 +27,17 @@ describe('Checkboxes', () => {
     inputData = {selected: [2, 3]};
 
     renderReact(() => (
-      <CustomBoxes
+      <CheckboxGroup
         options={options}
         inputData={inputData}
-        inputKey="selected"
         setInputData={setInputDataFunc}
+        getValue={(inputData) => inputData.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        getCheckOptionComparer={(option) => option.code}
       />
     ));
 
-    const toggleInput = screen.getByTestId('check 2').children[0];
+    const toggleInput = screen.getByText('check 2').parentNode?.children[0];
     expect(toggleInput).toHaveAttribute('checked');
     expect(setInputDataFunc).toHaveBeenCalledTimes(0);
   });
@@ -52,11 +46,13 @@ describe('Checkboxes', () => {
     inputData = {selected: [2]};
 
     renderReact(() => (
-      <CustomBoxes
+      <CheckboxGroup
         options={options}
         inputData={inputData}
-        inputKey="selected"
         setInputData={setInputDataFunc}
+        getValue={(inputData) => inputData.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        getCheckOptionComparer={(option) => option.code}
       />
     ));
 
@@ -71,11 +67,13 @@ describe('Checkboxes', () => {
     inputData = {selected: []};
 
     const {rerender} = renderReact(() => (
-      <CustomBoxes
+      <CheckboxGroup
         options={options}
         inputData={inputData}
-        inputKey="selected"
         setInputData={setInputDataFunc}
+        getValue={(inputData) => inputData.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        getCheckOptionComparer={(option) => option.code}
       />
     ));
 
@@ -93,11 +91,13 @@ describe('Checkboxes', () => {
     inputData = {selected: [2]};
 
     renderReact(() => (
-      <CustomBoxes
+      <CheckboxGroup
         options={options}
         inputData={inputData}
-        inputKey="selected"
         setInputData={setInputDataFunc}
+        getValue={(inputData) => inputData.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        getCheckOptionComparer={(option) => option.code}
       />
     ));
 
diff --git a/src/components/elements/common/check/group/checkbox.tsx b/src/components/elements/common/check/group/checkbox.tsx
new file mode 100644
index 00000000..1b1d9473
--- /dev/null
+++ b/src/components/elements/common/check/group/checkbox.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {CheckGroup} from '../base/group';
+import {CheckboxGroupProps, CheckOption} from '../types';
+
+
+export const CheckboxGroup = <E extends CheckOption, T>({
+  options,
+  inputData,
+  setInputData,
+  getValue,
+  getUpdatedInputData,
+  getCheckOptionComparer,
+  getImageUrl,
+  imageHeight,
+}: CheckboxGroupProps<E, T>) => {
+  return (
+    <CheckGroup
+      options={options}
+      optionToProps={(option) => ({
+        type: 'checkbox',
+        onChange: (checked) => {
+          const currentValue = getValue(inputData);
+          const currentOption = getCheckOptionComparer(option);
+
+          setInputData(getUpdatedInputData(checked ?
+            currentValue.concat([currentOption]) :
+            currentValue.filter((option) => option !== currentOption),
+          ));
+        },
+        checked: getValue(inputData).includes(getCheckOptionComparer(option)),
+        text: option.text,
+        image: {
+          height: imageHeight,
+          url: getImageUrl && getImageUrl(option),
+        },
+      })}
+    />
+  );
+};
diff --git a/src/components/elements/common/check/customRadio.test.tsx b/src/components/elements/common/check/group/radio.test.tsx
similarity index 59%
rename from src/components/elements/common/check/customRadio.test.tsx
rename to src/components/elements/common/check/group/radio.test.tsx
index 88a023fd..cba582f8 100644
--- a/src/components/elements/common/check/customRadio.test.tsx
+++ b/src/components/elements/common/check/group/radio.test.tsx
@@ -3,29 +3,20 @@ import React from 'react';
 import {screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {renderReact} from '../../../../../test/render/main';
-import {CustomRadios} from './customRadio';
-import {CheckEntry} from './types';
+import {renderReact} from '../../../../../../test/render/main';
+import {CheckOption} from '../types';
+import {RadioGroup} from './radio';
+
 
 describe('Radio checks', () => {
-  const options: Array<CheckEntry> = [
-    {
-      text: 'check 1',
-      code: 1,
-    },
-    {
-      text: 'check 2',
-      code: 2,
-    },
-    {
-      text: 'check 3',
-      code: 3,
-    },
+  const options: Array<CheckOption & {code: number}> = [
+    {text: 'check 1', code: 1},
+    {text: 'check 2', code: 2},
+    {text: 'check 3', code: 3},
   ];
 
   let inputData: {selected: number};
-
-  let setInputDataFunc: jest.Mock<void, [{selected: number}]>;
+  let setInputDataFunc: jest.Mock;
 
   beforeEach(() => {
     setInputDataFunc = jest.fn().mockImplementation((newData) => inputData = newData);
@@ -35,28 +26,34 @@ describe('Radio checks', () => {
     inputData = {selected: 2};
 
     renderReact(() => (
-      <CustomRadios
+      <RadioGroup
         options={options}
         inputData={inputData}
-        inputKey="selected"
         setInputData={setInputDataFunc}
+        getValue={(inputData) => inputData.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        getCheckOptionComparer={(option) => option.code}
+        groupName="radio"
       />
     ));
 
-    const toggleInput = screen.getByTestId('check 2').children[0];
+    const toggleInput = screen.getByText('check 2').parentNode?.children[0];
     expect(toggleInput).toHaveAttribute('checked');
-    expect(setInputDataFunc).toHaveBeenCalledTimes(0);
+    expect(setInputDataFunc).not.toHaveBeenCalled();
   });
 
   test('selecting another option changes the state', async () => {
     inputData = {selected: 2};
 
     renderReact(() => (
-      <CustomRadios
+      <RadioGroup
         options={options}
         inputData={inputData}
-        inputKey="selected"
         setInputData={setInputDataFunc}
+        getValue={(inputData) => inputData.selected}
+        getUpdatedInputData={(newValue) => ({selected: newValue})}
+        getCheckOptionComparer={(option) => option.code}
+        groupName="radio"
       />
     ));
 
@@ -76,17 +73,23 @@ describe('Radio checks', () => {
 
     const {rerender} = renderReact(() => (
       <>
-        <CustomRadios
+        <RadioGroup
           options={options}
           inputData={inputData}
-          inputKey="selected"
           setInputData={setInputDataFunc}
+          getValue={(inputData) => inputData.selected}
+          getUpdatedInputData={(newValue) => ({...inputData, selected: newValue})}
+          getCheckOptionComparer={(option) => option.code}
+          groupName="radio"
         />
-        <CustomRadios
+        <RadioGroup
           options={options}
           inputData={inputData}
-          inputKey="another"
           setInputData={setInputDataFunc}
+          getValue={(inputData) => inputData.another}
+          getUpdatedInputData={(newValue) => ({...inputData, another: newValue})}
+          getCheckOptionComparer={(option) => option.code}
+          groupName="radio"
         />
       </>
     ));
diff --git a/src/components/elements/common/check/group/radio.tsx b/src/components/elements/common/check/group/radio.tsx
new file mode 100644
index 00000000..4fa3bd00
--- /dev/null
+++ b/src/components/elements/common/check/group/radio.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {CheckGroup} from '../base/group';
+import {CheckOption, RadioGroupProps} from '../types';
+
+
+export const RadioGroup = <E extends CheckOption, T>({
+  options,
+  inputData,
+  setInputData,
+  getValue,
+  getUpdatedInputData,
+  getCheckOptionComparer,
+  getImageUrl,
+  groupName,
+  imageHeight,
+}: RadioGroupProps<E, T>) => {
+  return (
+    <CheckGroup
+      options={options}
+      optionToProps={(option) => ({
+        type: 'radio',
+        onChange: (checked) => {
+          if (!checked) {
+            return;
+          }
+
+          setInputData(getUpdatedInputData(getCheckOptionComparer(option)));
+        },
+        checked: getValue(inputData) === getCheckOptionComparer(option),
+        text: option.text,
+        groupName,
+        image: {
+          height: imageHeight,
+          url: getImageUrl && getImageUrl(option),
+        },
+      })}
+    />
+  );
+};
diff --git a/src/components/elements/common/check/inlineCheck.tsx b/src/components/elements/common/check/inlineCheck.tsx
deleted file mode 100644
index 8a48daa6..00000000
--- a/src/components/elements/common/check/inlineCheck.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-import {InputProps} from '../props';
-import {TitledProps} from '../types';
-import {InlineCheckBase, InlineCheckBaseProps} from './inlineCheckBase';
-
-
-type InlineCheckProps<K extends string, T extends { [key in K]: boolean }> =
-  TitledProps &
-  Partial<InlineCheckBaseProps> &
-  InputProps<K, boolean, T>
-
-
-export const InlineCheck = <K extends string, T extends { [key in K]: boolean }>({
-  title,
-  inputData,
-  inputKey,
-  setInputData,
-  ...props
-}: InlineCheckProps<K, T>) => {
-  return (
-    <InlineCheckBase
-      {...props}
-      title={title}
-      groupName={inputKey}
-      checked={inputData[inputKey]}
-      onChange={(checked) => setInputData({...inputData, [inputKey]: checked})}
-    />
-  );
-};
diff --git a/src/components/elements/common/check/inlineCheckBase.tsx b/src/components/elements/common/check/inlineCheckBase.tsx
deleted file mode 100644
index 9c830508..00000000
--- a/src/components/elements/common/check/inlineCheckBase.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-
-import * as CSS from 'csstype';
-import ButtonGroup from 'react-bootstrap/ButtonGroup';
-import ToggleButton from 'react-bootstrap/ToggleButton';
-import {ButtonVariant} from 'react-bootstrap/types';
-
-import {ImageWithOverlay} from '../image';
-import {TitledProps} from '../types';
-import {CheckType} from './types';
-
-
-export type InlineCheckBaseProps = TitledProps & {
-  onChange: (checked: boolean) => void,
-  groupName: string,
-  type?: CheckType,
-  variant?: ButtonVariant,
-  imageUrl?: string,
-  id?: string,
-  checked?: boolean,
-  imageHeight?: CSS.Property.Height,
-}
-
-
-export const InlineCheckBase = ({
-  title,
-  type = 'checkbox',
-  variant = 'outline-secondary',
-  groupName,
-  imageUrl,
-  id,
-  checked,
-  onChange,
-  imageHeight,
-}: InlineCheckBaseProps) => {
-  const label = imageUrl ?
-    <ImageWithOverlay src={imageUrl} text={title} style={{height: imageHeight || '1.5rem'}}/> :
-    <span className="text-light">{title}</span>;
-
-  // Value of `1` is the identifier of that button in a button group.
-  // https://react-bootstrap.github.io/components/buttons/#toggle-button-props
-  return (
-    <ButtonGroup toggle className="m-1">
-      <ToggleButton
-        type={type}
-        variant={variant}
-        checked={checked}
-        onChange={(e) => onChange(e.target.checked)}
-        name={groupName}
-        id={id || title}
-        value="1"
-        data-testid={id || title}
-      >
-        {label}
-      </ToggleButton>
-    </ButtonGroup>
-  );
-};
diff --git a/src/components/elements/common/check/item/checkbox.tsx b/src/components/elements/common/check/item/checkbox.tsx
new file mode 100644
index 00000000..ad6fe873
--- /dev/null
+++ b/src/components/elements/common/check/item/checkbox.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {InputProps} from '../../types';
+import {CheckItem} from '../base/item';
+import {CheckItemProps} from '../types';
+
+
+type InlineCheckProps<T> = InputProps<T, boolean> & Pick<CheckItemProps, 'text'>
+
+export const CheckboxInput = <T, >({
+  text,
+  inputData,
+  setInputData,
+  getValue,
+  getUpdatedInputData,
+}: InlineCheckProps<T>) => {
+  return (
+    <CheckItem
+      text={text}
+      type="checkbox"
+      checked={getValue(inputData)}
+      onChange={(checked) => setInputData(getUpdatedInputData(checked))}
+    />
+  );
+};
diff --git a/src/components/elements/common/check/types.ts b/src/components/elements/common/check/types.ts
index 26523663..f1736f51 100644
--- a/src/components/elements/common/check/types.ts
+++ b/src/components/elements/common/check/types.ts
@@ -1,6 +1,48 @@
-export type CheckEntry = {
+import * as CSS from 'csstype';
+import {ButtonVariant} from 'react-bootstrap/types';
+
+import {InputProps, ReadonlyInputProps} from '../types';
+
+
+export type CheckOption = {
   text: string,
-  code: number
 }
 
-export type CheckType = 'checkbox' | 'radio'
+export type ChecksPropsReadonly<E, T, V> = ReadonlyInputProps<T, V> & {
+  options: Array<E>,
+}
+
+export type CheckItemImageOptions = {
+  height?: CSS.Property.Height,
+  url?: string,
+}
+
+export type CheckItemProps = {
+  text: string,
+  variant?: ButtonVariant,
+  checked?: boolean,
+  onChange: (checked: boolean) => void,
+  image?: CheckItemImageOptions,
+} & ({
+  type: 'radio',
+  groupName: string,
+} | {
+  type: 'checkbox',
+  groupName?: never,
+})
+
+export type CheckGroupProps<E, T, V, V2 = V> =
+  ChecksPropsReadonly<E, T, V2> &
+  InputProps<T, V2> & {
+  getCheckOptionComparer: (option: E) => V,
+  getImageUrl?: (option: E) => CheckItemImageOptions['url'],
+  imageHeight?: CheckItemImageOptions['height'],
+}
+
+// `V` needs to be explicit or the type inference will fail
+export type RadioGroupProps<E, T> = CheckGroupProps<E, T, number> & {
+  groupName: string,
+}
+
+// `V` needs to be explicit or the type inference will fail
+export type CheckboxGroupProps<E, T> = CheckGroupProps<E, T, number, Array<number>>
diff --git a/src/components/elements/common/input/numeric.tsx b/src/components/elements/common/input/numeric.tsx
index 39caac75..e088d0df 100644
--- a/src/components/elements/common/input/numeric.tsx
+++ b/src/components/elements/common/input/numeric.tsx
@@ -5,28 +5,28 @@ import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';
 
 import {OverlayPopover} from '../overlay/popover';
-import {InputProps} from '../props';
-import {DetailedProps} from '../types';
+import {DetailedProps, InputProps} from '../types';
 
 
-type NumericInputProps<K extends string, T extends { [key in K]: number }> =
+type NumericInputProps<T> =
   DetailedProps &
-  InputProps<K, number, T> & {
+  InputProps<T, number> & {
   required?: boolean,
   minValue?: number,
   maxValue?: number
 }
 
-export const NumericInput = <K extends string, T extends { [key in K]: number }>({
+export const NumericInput = <T, >({
   title,
   description,
   inputData,
-  inputKey,
   setInputData,
+  getValue,
+  getUpdatedInputData,
   minValue,
   maxValue,
   required = true,
-}: NumericInputProps<K, T>) => {
+}: NumericInputProps<T>) => {
   if (minValue && maxValue && minValue > maxValue) {
     console.warn(`Min value ${minValue} should not be greater than max value (${maxValue}).`);
   }
@@ -39,8 +39,7 @@ export const NumericInput = <K extends string, T extends { [key in K]: number }>
       <Col>
         <Form.Control
           type="number"
-          value={inputData[inputKey]}
-          name={inputKey}
+          value={getValue(inputData)}
           min={minValue}
           max={maxValue}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -49,10 +48,7 @@ export const NumericInput = <K extends string, T extends { [key in K]: number }>
             let newValue = Math.min(e.target.max ? parseFloat(e.target.max) : Infinity, val);
             newValue = Math.max(e.target.min ? parseFloat(e.target.min) : -Infinity, newValue);
 
-            setInputData({
-              ...inputData,
-              [inputKey]: newValue,
-            });
+            setInputData(getUpdatedInputData(newValue));
           }}
           required={required}
         />
diff --git a/src/components/elements/common/props.ts b/src/components/elements/common/props.ts
deleted file mode 100644
index 47e99c23..00000000
--- a/src/components/elements/common/props.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type InputProps<K extends string, V, T extends { [key in K]: V }> = {
-  inputData: T,
-  inputKey: K,
-  setInputData: (newInput: T) => void,
-}
diff --git a/src/components/elements/common/types.ts b/src/components/elements/common/types.ts
index b6df0559..a9e24d30 100644
--- a/src/components/elements/common/types.ts
+++ b/src/components/elements/common/types.ts
@@ -6,6 +6,16 @@ export type DetailedProps = TitledProps & {
   description: string,
 }
 
+export type ReadonlyInputProps<T, V> = {
+  inputData: T,
+  getValue: (inputData: T) => V,
+}
+
+export type InputProps<T, V> = ReadonlyInputProps<T, V> & {
+  setInputData: (newInput: T) => void,
+  getUpdatedInputData: (newValue: V) => T,
+}
+
 export type DelayedCheckState = {
   isChecking: boolean,
   checkTimer: NodeJS.Timeout | null,
diff --git a/src/components/elements/gameData/ex/in/filter.test.tsx b/src/components/elements/gameData/ex/in/filter.test.tsx
index 3ec6d430..351c1808 100644
--- a/src/components/elements/gameData/ex/in/filter.test.tsx
+++ b/src/components/elements/gameData/ex/in/filter.test.tsx
@@ -8,6 +8,8 @@ import {SupportedLanguages} from '../../../../../api-def/api';
 import {ElementEnums, ExBuffParams} from '../../../../../api-def/resources';
 import {SectionFilter} from './filter';
 import {InputData} from './types';
+import {generateInputData} from './utils';
+
 
 describe('EX/CEX filter section', () => {
   let inputData: InputData;
@@ -86,11 +88,7 @@ describe('EX/CEX filter section', () => {
 
   beforeEach(() => {
     setInputData = jest.fn().mockImplementation((newData) => inputData = newData);
-    inputData = {
-      filterElementCode: [],
-      filterExBuffParamCode: [],
-      filterChainedExBuffParamCode: [],
-    };
+    inputData = generateInputData();
   });
 
   it('renders the filter section', async () => {
@@ -118,7 +116,7 @@ describe('EX/CEX filter section', () => {
     userEvent.click(elemCheck);
 
     expect(setInputData).toHaveBeenCalledTimes(1);
-    expect(inputData.filterElementCode).toStrictEqual([1]);
+    expect(inputData.filter.elements).toStrictEqual([1]);
   });
 
   it('can filter by EX parameter', async () => {
@@ -135,7 +133,7 @@ describe('EX/CEX filter section', () => {
     userEvent.click(exCheck);
 
     expect(setInputData).toHaveBeenCalledTimes(1);
-    expect(inputData.filterExBuffParamCode).toStrictEqual([1]);
+    expect(inputData.filter.exBuffParams).toStrictEqual([1]);
   });
 
   it('can filter by CEX parameter', async () => {
@@ -152,7 +150,7 @@ describe('EX/CEX filter section', () => {
     userEvent.click(cexCheck);
 
     expect(setInputData).toHaveBeenCalledTimes(1);
-    expect(inputData.filterChainedExBuffParamCode).toStrictEqual([1]);
+    expect(inputData.filter.cexBuffParams).toStrictEqual([1]);
   });
 
   it('can filter by multiple conditions', async () => {
@@ -176,8 +174,8 @@ describe('EX/CEX filter section', () => {
     rerender();
 
     expect(setInputData).toHaveBeenCalledTimes(3);
-    expect(inputData.filterElementCode).toStrictEqual([2]);
-    expect(inputData.filterExBuffParamCode).toStrictEqual([1]);
-    expect(inputData.filterChainedExBuffParamCode).toStrictEqual([1]);
+    expect(inputData.filter.elements).toStrictEqual([2]);
+    expect(inputData.filter.exBuffParams).toStrictEqual([1]);
+    expect(inputData.filter.cexBuffParams).toStrictEqual([1]);
   });
 });
diff --git a/src/components/elements/gameData/ex/in/filter.tsx b/src/components/elements/gameData/ex/in/filter.tsx
index e456e92c..9df7a8c1 100644
--- a/src/components/elements/gameData/ex/in/filter.tsx
+++ b/src/components/elements/gameData/ex/in/filter.tsx
@@ -2,23 +2,24 @@ import React from 'react';
 
 import {ElementEnums, ExBuffParams} from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
-import {EnumChecksBox} from '../../../common/check/enumChecksBox';
+import {EnumCheckboxGroup} from '../../../common/check/enum/checkbox';
 import {SectionTitle} from '../../elements/title';
 import {InputSectionBaseProps} from '../../props';
 import {InputData} from './types';
+import {overwriteInputData} from './utils';
 
-type SectionProps<D extends InputData> = InputSectionBaseProps<D> & {
+
+type SectionProps = InputSectionBaseProps<InputData> & {
   elementEnums: ElementEnums,
   exBuffParams: ExBuffParams
 }
 
-
-export const SectionFilter = <D extends InputData>({
+export const SectionFilter = ({
   inputData,
   setInputData,
   elementEnums,
   exBuffParams,
-}: SectionProps<D>) => {
+}: SectionProps) => {
   const {t} = useI18n();
 
   return (
@@ -27,32 +28,35 @@ export const SectionFilter = <D extends InputData>({
         title={t((t) => t.game.ex.name.filterElement)}
         description={t((t) => t.game.ex.desc.filterElement)}
       />
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={elementEnums.elemental}
         inputData={inputData}
-        inputKey="filterElementCode"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.filter.elements}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {elements: newValue}})}
       />
       <SectionTitle
         title={t((t) => t.game.ex.name.filterExBuffParam)}
         description={t((t) => t.game.ex.desc.filterExBuffParam)}
       />
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={exBuffParams.exBuffParam}
         inputData={inputData}
-        inputKey="filterExBuffParamCode"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.filter.exBuffParams}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {exBuffParams: newValue}})}
         imageHeight="2rem"
       />
       <SectionTitle
         title={t((t) => t.game.ex.name.filterChainedExBuffParam)}
         description={t((t) => t.game.ex.desc.filterChainedExBuffParam)}
       />
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={exBuffParams.chainedExBuffParam}
         inputData={inputData}
-        inputKey="filterChainedExBuffParamCode"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.filter.cexBuffParams}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {cexBuffParams: newValue}})}
         imageHeight="2rem"
       />
     </>
diff --git a/src/components/elements/gameData/ex/in/main.tsx b/src/components/elements/gameData/ex/in/main.tsx
index 17be772d..f8cfe745 100644
--- a/src/components/elements/gameData/ex/in/main.tsx
+++ b/src/components/elements/gameData/ex/in/main.tsx
@@ -10,6 +10,7 @@ import {isNotFetched} from '../../../common/fetch';
 import {SelectionData} from '../types';
 import {SectionFilter} from './filter';
 import {InputData} from './types';
+import {generateInputData} from './utils';
 
 
 type InputProps = {
@@ -21,11 +22,7 @@ export const ExAbilityInput = ({onSearchRequested}: InputProps) => {
   const {t} = useI18n();
   const dispatch = useDispatch();
 
-  const [inputData, setInputData] = React.useState<InputData>({
-    filterElementCode: [],
-    filterExBuffParamCode: [],
-    filterChainedExBuffParamCode: [],
-  });
+  const [inputData, setInputData] = React.useState<InputData>(generateInputData());
 
   const [selectionData, setSelectionData] = React.useState<SelectionData>({
     fetched: false,
diff --git a/src/components/elements/gameData/ex/in/types.ts b/src/components/elements/gameData/ex/in/types.ts
index f325cc05..436d42cf 100644
--- a/src/components/elements/gameData/ex/in/types.ts
+++ b/src/components/elements/gameData/ex/in/types.ts
@@ -1,5 +1,7 @@
 export type InputData = {
-  filterElementCode: Array<number>,
-  filterExBuffParamCode: Array<number>,
-  filterChainedExBuffParamCode: Array<number>,
+  filter: {
+    elements: Array<number>,
+    exBuffParams: Array<number>,
+    cexBuffParams: Array<number>,
+  }
 }
diff --git a/src/components/elements/gameData/ex/in/utils.ts b/src/components/elements/gameData/ex/in/utils.ts
new file mode 100644
index 00000000..6358a8d5
--- /dev/null
+++ b/src/components/elements/gameData/ex/in/utils.ts
@@ -0,0 +1,23 @@
+import {DeepPartial} from '../../../../../utils/types';
+import {InputData} from './types';
+
+
+export const overwriteInputData = (original: InputData, overwrite: DeepPartial<InputData>): InputData => ({
+  filter: {
+    elements: overwrite?.filter?.elements ?? original.filter.elements,
+    exBuffParams: overwrite?.filter?.exBuffParams ?? original.filter.exBuffParams,
+    cexBuffParams: overwrite?.filter?.cexBuffParams ?? original.filter.cexBuffParams,
+  },
+});
+
+export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData => overwriteInputData(
+  {
+    // These default values will be used when initializing the parameter input for ATK skill lookup
+    filter: {
+      elements: [],
+      exBuffParams: [],
+      cexBuffParams: [],
+    },
+  },
+  overwrite || {},
+);
diff --git a/src/components/elements/gameData/ex/out/utils.tsx b/src/components/elements/gameData/ex/out/utils.tsx
index ed0c462d..185ab3d4 100644
--- a/src/components/elements/gameData/ex/out/utils.tsx
+++ b/src/components/elements/gameData/ex/out/utils.tsx
@@ -11,6 +11,7 @@ import {useI18n} from '../../../../../i18n/hook';
 import {getConditionBadges} from '../../elements/conditionBadges';
 import {InputData} from '../in/types';
 
+
 export const getAbilityVariantEffectBadges = (
   entry: AbilityVariantEffectUnitData,
   conditionEnums: ConditionEnumMap,
@@ -99,22 +100,22 @@ export const getAbilityVariantEffectBadges = (
 
 export const filterExAbilityData = (exAbilityData: Array<CharaExAbilityDataEntry>, inputData: InputData) => {
   return exAbilityData.filter((entry) => {
-    if (inputData.filterElementCode.length > 0 && !inputData.filterElementCode.includes(entry.chara.element)) {
+    if (inputData.filter.elements.length && !inputData.filter.elements.includes(entry.chara.element)) {
       return false;
     }
 
     if (
-      inputData.filterExBuffParamCode.length > 0 &&
+      inputData.filter.exBuffParams.length > 0 &&
       !entry.ex.some((exEffect) => {
-        return inputData.filterExBuffParamCode.includes(exEffect.parameter.code);
+        return inputData.filter.exBuffParams.includes(exEffect.parameter.code);
       })
     ) {
       return false;
     }
 
-    return inputData.filterChainedExBuffParamCode.length === 0 ||
+    return inputData.filter.cexBuffParams.length === 0 ||
       entry.chainedEx.some((chainedExEffect) => {
-        return inputData.filterChainedExBuffParamCode.includes(chainedExEffect.parameter.code);
+        return inputData.filter.cexBuffParams.includes(chainedExEffect.parameter.code);
       });
   });
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
index b5ace9ac..16db1a78 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
@@ -4,6 +4,7 @@ import {useI18n} from '../../../../../../i18n/hook';
 import {NumericInput} from '../../../../common/input/numeric';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 export const SectionAtk = ({inputData, setInputData}: SectionProps) => {
@@ -18,22 +19,25 @@ export const SectionAtk = ({inputData, setInputData}: SectionProps) => {
         title={t((t) => t.game.skillAtk.name.atkInGame)}
         description={t((t) => t.game.skillAtk.desc.atkInGame)}
         inputData={inputData}
-        inputKey="atkInGame"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.atk.inGame}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {atk: {inGame: newValue}}})}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.atkConditional)}
         description={t((t) => t.game.skillAtk.desc.atkConditional)}
         inputData={inputData}
-        inputKey="atkConditionalPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.atk.conditionalPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {atk: {conditionalPct: newValue}}})}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.atkBuff)}
         description={t((t) => t.game.skillAtk.desc.atkBuff)}
         inputData={inputData}
-        inputKey="atkBuffPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.atk.conditionalPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {atk: {buffPct: newValue}}})}
         maxValue={200}
       />
     </>
diff --git a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
index 3b39ba01..40fabcd1 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
@@ -4,6 +4,7 @@ import {useI18n} from '../../../../../../i18n/hook';
 import {NumericInput} from '../../../../common/input/numeric';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 export const SectionBuff = ({inputData, setInputData}: SectionProps) => {
@@ -19,22 +20,25 @@ export const SectionBuff = ({inputData, setInputData}: SectionProps) => {
         title={t((t) => t.game.skillAtk.name.buffCount)}
         description={t((t) => t.game.skillAtk.desc.buffCount)}
         inputData={inputData}
-        inputKey="buffCount"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.buff.count}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {buff: {count: newValue}}})}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.buffZoneSelf)}
         description={t((t) => t.game.skillAtk.desc.buffZoneSelf)}
         inputData={inputData}
-        inputKey="buffZoneSelf"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.buff.zone.self}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {buff: {zone: {self: newValue}}}})}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.buffZoneAlly)}
         description={t((t) => t.game.skillAtk.desc.buffZoneAlly)}
         inputData={inputData}
-        inputKey="buffZoneAlly"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.buff.zone.ally}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {buff: {zone: {ally: newValue}}}})}
       />
     </>
   );
diff --git a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
index c98fe4cc..956a1488 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {CheckboxInput} from '../../../../common/check/item/checkbox';
 import {NumericInput} from '../../../../common/input/numeric';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 export const SectionCrt = ({inputData, setInputData}: SectionProps) => {
@@ -20,24 +21,27 @@ export const SectionCrt = ({inputData, setInputData}: SectionProps) => {
         title={t((t) => t.game.skillAtk.name.crtRate)}
         description={t((t) => t.game.skillAtk.desc.crtRate)}
         inputData={inputData}
-        inputKey="criticalRatePct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.crt.ratePct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {crt: {ratePct: newValue}}})}
         maxValue={100}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.crtDamage)}
         description={t((t) => t.game.skillAtk.desc.crtDamage)}
         inputData={inputData}
-        inputKey="criticalDamagePct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.crt.damagePct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {crt: {damagePct: newValue}}})}
         maxValue={400}
       />
       <div className="text-center">
-        <InlineCheck
-          title={t((t) => t.game.skillAtk.name.crtInspired)}
+        <CheckboxInput
+          text={t((t) => t.game.skillAtk.name.crtInspired)}
           inputData={inputData}
-          inputKey="criticalInspired"
           setInputData={setInputData}
+          getValue={(inputData) => inputData.params.crt.inspired}
+          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {crt: {inspired: newValue}}})}
         />
       </div>
     </>
diff --git a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
index 98feed90..dfa31bd5 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {CheckboxInput} from '../../../../common/check/item/checkbox';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 export const SectionEx = ({inputData, setInputData}: SectionProps) => {
@@ -16,17 +17,19 @@ export const SectionEx = ({inputData, setInputData}: SectionProps) => {
         description={t((t) => t.game.skillAtk.desc.ex)}
       />
       <div className="text-center">
-        <InlineCheck
-          title={t((t) => t.game.skillAtk.name.exBlade)}
+        <CheckboxInput
+          text={t((t) => t.game.skillAtk.name.exBlade)}
           inputData={inputData}
-          inputKey="exBlade"
           setInputData={setInputData}
+          getValue={(inputData) => inputData.params.ex.blade}
+          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {ex: {blade: newValue}}})}
         />
-        <InlineCheck
-          title={t((t) => t.game.skillAtk.name.exWand)}
+        <CheckboxInput
+          text={t((t) => t.game.skillAtk.name.exWand)}
           inputData={inputData}
-          inputKey="exWand"
           setInputData={setInputData}
+          getValue={(inputData) => inputData.params.ex.wand}
+          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {ex: {wand: newValue}}})}
         />
       </div>
     </>
diff --git a/src/components/elements/gameData/skillAtk/in/sections/filter.tsx b/src/components/elements/gameData/skillAtk/in/sections/filter.tsx
index 2f98b270..067f48d6 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/filter.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/filter.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import Form from 'react-bootstrap/Form';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {EnumChecksBox} from '../../../../common/check/enumChecksBox';
-import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {EnumCheckboxGroup} from '../../../../common/check/enum/checkbox';
+import {CheckboxInput} from '../../../../common/check/item/checkbox';
 import {SectionSubTitle} from '../../../elements/subTitle';
 import {SectionTitle} from '../../../elements/title';
 import {
@@ -12,6 +12,7 @@ import {
   SectionPropsCondEnums,
   SectionPropsElemEnums,
 } from '../props';
+import {overwriteInputData} from '../utils';
 
 
 type SectionFilterProps =
@@ -37,32 +38,35 @@ export const SectionFilter = ({
         title={t((t) => t.game.skillAtk.name.filterElement)}
         description={t((t) => t.game.skillAtk.desc.filterElement)}
       />
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={elementEnums.elemental}
         inputData={inputData}
-        inputKey="filterElementCode"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.filter.elemCodes}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {elemCodes: newValue}})}
       />
       <SectionSubTitle
         title={t((t) => t.game.skillAtk.name.filterAffliction)}
         description={t((t) => t.game.skillAtk.desc.filterAffliction)}
       />
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={conditionEnums.afflictions}
         inputData={inputData}
-        inputKey="filterAfflictionCondCode"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.filter.afflictionCondCode}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {afflictionCondCode: newValue}})}
       />
       <SectionSubTitle
         title={t((t) => t.game.skillAtk.name.filterOther)}
         description={t((t) => t.game.skillAtk.desc.filterOther)}
       />
       <Form.Group className="mb-3 text-center">
-        <InlineCheck
-          title={t((t) => t.game.skillAtk.name.filterSharedOnly)}
+        <CheckboxInput
+          text={t((t) => t.game.skillAtk.name.filterSharedOnly)}
           inputData={inputData}
-          inputKey="filterSharedOnly"
           setInputData={setInputData}
+          getValue={(inputData) => inputData.filter.sharedOnly}
+          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {sharedOnly: newValue}})}
         />
       </Form.Group>
     </>
diff --git a/src/components/elements/gameData/skillAtk/in/sections/other.tsx b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
index ce01a615..e551a3de 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/other.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
@@ -4,6 +4,7 @@ import {useI18n} from '../../../../../../i18n/hook';
 import {NumericInput} from '../../../../common/input/numeric';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 export const SectionOther = ({inputData, setInputData}: SectionProps) => {
@@ -19,15 +20,17 @@ export const SectionOther = ({inputData, setInputData}: SectionProps) => {
         title={t((t) => t.game.skillAtk.name.otherElementBonus)}
         description={t((t) => t.game.skillAtk.desc.otherElementBonus)}
         inputData={inputData}
-        inputKey="otherElemBonusPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.others.elemBonusPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {others: {elemBonusPct: newValue}}})}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.otherHp)}
         description={t((t) => t.game.skillAtk.desc.otherHp)}
         inputData={inputData}
-        inputKey="otherCurrentHpPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.others.currentHpPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {others: {currentHpPct: newValue}}})}
       />
     </>
   );
diff --git a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
index 875b455f..727f7742 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
@@ -4,6 +4,7 @@ import {useI18n} from '../../../../../../i18n/hook';
 import {NumericInput} from '../../../../common/input/numeric';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 export const SectionPunisher = ({inputData, setInputData}: SectionProps) => {
@@ -19,15 +20,17 @@ export const SectionPunisher = ({inputData, setInputData}: SectionProps) => {
         title={t((t) => t.game.skillAtk.name.punisherBk)}
         description={t((t) => t.game.skillAtk.desc.punisherBk)}
         inputData={inputData}
-        inputKey="punishersBkPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.punishers.bkPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {punishers: {bkPct: newValue}}})}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.punisherOthers)}
         description={t((t) => t.game.skillAtk.desc.punisherOthers)}
         inputData={inputData}
-        inputKey="punishersOtherPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.punishers.othersPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {punishers: {othersPct: newValue}}})}
       />
     </>
   );
diff --git a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
index 670fec5e..a30df25b 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {InlineCheck} from '../../../../common/check/inlineCheck';
+import {CheckboxInput} from '../../../../common/check/item/checkbox';
 import {NumericInput} from '../../../../common/input/numeric';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 export const SectionSkill = ({inputData, setInputData}: SectionProps) => {
@@ -20,23 +21,26 @@ export const SectionSkill = ({inputData, setInputData}: SectionProps) => {
         title={t((t) => t.game.skillAtk.name.skillPassive)}
         description={t((t) => t.game.skillAtk.desc.skillPassive)}
         inputData={inputData}
-        inputKey="skillPassivePct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.skill.passivePct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {skill: {passivePct: newValue}}})}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.skillBuff)}
         description={t((t) => t.game.skillAtk.desc.skillBuff)}
         inputData={inputData}
-        inputKey="skillBuffPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.params.skill.buffPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {skill: {buffPct: newValue}}})}
         maxValue={200}
       />
       <div className="text-center">
-        <InlineCheck
-          title={t((t) => t.game.skillAtk.name.skillEnergized)}
+        <CheckboxInput
+          text={t((t) => t.game.skillAtk.name.skillEnergized)}
           inputData={inputData}
-          inputKey="skillEnergized"
           setInputData={setInputData}
+          getValue={(inputData) => inputData.params.skill.energized}
+          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {skill: {energized: newValue}}})}
         />
       </div>
     </>
diff --git a/src/components/elements/gameData/skillAtk/in/sections/target.tsx b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
index eb61a098..c764885e 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/target.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
@@ -3,14 +3,15 @@ import React from 'react';
 import {ConditionCodes} from '../../../../../../const/gameData';
 import {useI18n} from '../../../../../../i18n/hook';
 import {getConditionName} from '../../../../../../utils/game/conditionName';
-import {CustomRadios} from '../../../../common/check/customRadio';
-import {EnumChecksBox} from '../../../../common/check/enumChecksBox';
-import {EnumChecksRadio} from '../../../../common/check/enumChecksRadio';
-import {CheckEntry} from '../../../../common/check/types';
+import {EnumCheckboxGroup} from '../../../../common/check/enum/checkbox';
+import {EnumRadioGroup} from '../../../../common/check/enum/radio';
+import {RadioGroup} from '../../../../common/check/group/radio';
+import {CheckOption} from '../../../../common/check/types';
 import {NumericInput} from '../../../../common/input/numeric';
 import {SectionSubTitle} from '../../../elements/subTitle';
 import {SectionTitle} from '../../../elements/title';
 import {SectionProps, SectionPropsCondEnums} from '../props';
+import {overwriteInputData} from '../utils';
 
 
 type SectionTargetProps = SectionProps & SectionPropsCondEnums;
@@ -22,7 +23,7 @@ export const SectionTarget = ({
 }: SectionTargetProps) => {
   const {t} = useI18n();
 
-  const stateLabels: Array<CheckEntry> = [
+  const stateLabels: Array<CheckOption & {code: number}> = [
     ConditionCodes.NONE,
     ConditionCodes.TARGET_STATE_OD,
     ConditionCodes.TARGET_STATE_BK,
@@ -39,40 +40,47 @@ export const SectionTarget = ({
         title={t((t) => t.game.skillAtk.name.targetElement)}
         description={t((t) => t.game.skillAtk.desc.targetElement)}
       />
-      <EnumChecksRadio
+      <EnumRadioGroup
         options={conditionEnums.elements}
-        inputKey="targetElemCondCode"
         inputData={inputData}
         setInputData={setInputData}
+        getValue={(inputData) => inputData.target.elemCondCode}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {elemCondCode: newValue}})}
+        groupName="targetElement"
       />
       <SectionSubTitle
         title={t((t) => t.game.skillAtk.name.targetAffliction)}
         description={t((t) => t.game.skillAtk.desc.targetAffliction)}
       />
-      <EnumChecksBox
+      <EnumCheckboxGroup
         options={conditionEnums.afflictions}
-        inputKey="targetAfflictionCodes"
         inputData={inputData}
         setInputData={setInputData}
+        getValue={(inputData) => inputData.target.afflictionCodes}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {afflictionCodes: newValue}})}
       />
       <SectionSubTitle
         title={t((t) => t.game.skillAtk.name.targetState.title)}
         description={t((t) => t.game.skillAtk.desc.targetState.title)}
       />
       <div className="text-center mb-3">
-        <CustomRadios
+        <RadioGroup
           options={stateLabels}
-          inputKey="targetStateCode"
           inputData={inputData}
           setInputData={setInputData}
+          getValue={(inputData) => inputData.target.state}
+          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {state: newValue}})}
+          getCheckOptionComparer={(option) => option.code}
+          groupName="targetState"
         />
       </div>
       <NumericInput
         title={t((t) => t.game.skillAtk.name.targetDefDown)}
         description={t((t) => t.game.skillAtk.desc.targetDefDown)}
         inputData={inputData}
-        inputKey="targetDefDownPct"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.target.def.downPct}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {def: {downPct: newValue}}})}
         minValue={0}
         maxValue={50}
       />
@@ -80,16 +88,18 @@ export const SectionTarget = ({
         title={t((t) => t.game.skillAtk.name.targetDef)}
         description={t((t) => t.game.skillAtk.desc.targetDef)}
         inputData={inputData}
-        inputKey="targetDefBase"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.target.def.base}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {def: {base: newValue}}})}
         minValue={0.0001}
       />
       <NumericInput
         title={t((t) => t.game.skillAtk.name.targetDefBk)}
         description={t((t) => t.game.skillAtk.desc.targetDefBk)}
         inputData={inputData}
-        inputKey="targetDefBkRate"
         setInputData={setInputData}
+        getValue={(inputData) => inputData.target.def.bkRate}
+        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {def: {bkRate: newValue}}})}
         minValue={0.0001}
       />
     </>
diff --git a/src/components/elements/posts/analysis/lookup/in/main.tsx b/src/components/elements/posts/analysis/lookup/in/main.tsx
index 5f4058ff..f5ad124c 100644
--- a/src/components/elements/posts/analysis/lookup/in/main.tsx
+++ b/src/components/elements/posts/analysis/lookup/in/main.tsx
@@ -9,7 +9,7 @@ import {GeneralPath} from '../../../../../../const/path/definitions';
 import {AppReactContext} from '../../../../../../context/app/main';
 import {useI18n} from '../../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../../utils/services/resources';
-import {EnumChecksBox} from '../../../../common/check/enumChecksBox';
+import {EnumCheckboxGroup} from '../../../../common/check/enum/checkbox';
 import {useFetchState} from '../../../../common/fetch';
 import {PostManageBar} from '../../../manageBar';
 import {AnalysisTypePicker} from './typePicker';
@@ -59,17 +59,19 @@ export const AnalysisLookupInput = ({onSearchRequested}: LookupInputProps) => {
     <>
       <div className="rounded bg-black-32 p-3 mb-2">
         <AnalysisTypePicker inputData={inputData} setInputData={setInputData}/>
-        <EnumChecksBox
+        <EnumCheckboxGroup
           options={elemEnums.data.elemental}
           inputData={inputData}
-          inputKey="elements"
           setInputData={setInputData}
+          getValue={(inputData) => inputData.elements}
+          getUpdatedInputData={(newValue) => ({...inputData, elements: newValue})}
         />
-        <EnumChecksBox
+        <EnumCheckboxGroup
           options={weaponTypeEnums.data.weapon}
           inputData={inputData}
-          inputKey="weaponTypes"
           setInputData={setInputData}
+          getValue={(inputData) => inputData.weaponTypes}
+          getUpdatedInputData={(newValue) => ({...inputData, weaponTypes: newValue})}
         />
         <Form onSubmit={(e) => {
           e.preventDefault();
diff --git a/src/components/elements/posts/analysis/lookup/in/typePicker.tsx b/src/components/elements/posts/analysis/lookup/in/typePicker.tsx
index e242c8ab..9fe9984b 100644
--- a/src/components/elements/posts/analysis/lookup/in/typePicker.tsx
+++ b/src/components/elements/posts/analysis/lookup/in/typePicker.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 
 import {UnitType} from '../../../../../../api-def/api';
 import {useI18n} from '../../../../../../i18n/hook';
-import {CustomBoxes} from '../../../../common/check/customBox';
-import {CheckEntry} from '../../../../common/check/types';
+import {CheckboxGroup} from '../../../../common/check/group/checkbox';
+import {CheckOption} from '../../../../common/check/types';
 import {InputData} from './types';
 
+
 type TypePickerProps = {
   inputData: InputData,
   setInputData: React.Dispatch<React.SetStateAction<InputData>>,
@@ -14,7 +15,7 @@ type TypePickerProps = {
 export const AnalysisTypePicker = ({inputData, setInputData}: TypePickerProps) => {
   const {t} = useI18n();
 
-  const analysisTypes: Array<CheckEntry> = [
+  const analysisTypes: Array<CheckOption & {code: UnitType}> = [
     {
       text: t((t) => t.posts.analysis.type.character),
       code: UnitType.CHARACTER,
@@ -27,11 +28,13 @@ export const AnalysisTypePicker = ({inputData, setInputData}: TypePickerProps) =
 
   return (
     <>
-      <CustomBoxes
+      <CheckboxGroup
         options={analysisTypes}
         inputData={inputData}
         setInputData={setInputData}
-        inputKey="types"
+        getValue={(inputData) => inputData.types}
+        getUpdatedInputData={(types) => ({...inputData, types})}
+        getCheckOptionComparer={(option) => option.code}
       />
     </>
   );
diff --git a/src/components/elements/posts/analysis/lookup/in/types.ts b/src/components/elements/posts/analysis/lookup/in/types.ts
index af0df24f..685f4409 100644
--- a/src/components/elements/posts/analysis/lookup/in/types.ts
+++ b/src/components/elements/posts/analysis/lookup/in/types.ts
@@ -1,5 +1,6 @@
 import {UnitType} from '../../../../../../api-def/api';
 
+
 export type InputData = {
   keyword: string,
   types: Array<UnitType>,

From fe0deb28d40169ea9e3c866815e12f6f247e07ae Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sat, 26 Jun 2021 22:23:12 -0500
Subject: [PATCH 19/61] FIX - ATK skill not scrolling completely on initial
 search

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 pages/[lang]/skill/atk.tsx                 | 9 ++++++---
 src/components/elements/gameData/utils.tsx | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/pages/[lang]/skill/atk.tsx b/pages/[lang]/skill/atk.tsx
index caa9822a..a6cd8617 100644
--- a/pages/[lang]/skill/atk.tsx
+++ b/pages/[lang]/skill/atk.tsx
@@ -59,6 +59,12 @@ const AttackingSkillLookup = () => {
   fetchSkillIdentifiers();
   fetchAttackingSkillEntries();
 
+  React.useEffect(() => {
+    if (inputDataForward) {
+      scrollRefToTop(entryCol);
+    }
+  }, [inputDataForward]);
+
   return (
     <Row>
       <Col lg={4} className="rounded bg-black-32 p-3 mb-3">
@@ -66,9 +72,6 @@ const AttackingSkillLookup = () => {
           onSearchRequested={(inputData: InputData) => () => {
             GoogleAnalytics.damageCalc('search', inputData);
 
-            scrollRefToTop(entryCol);
-
-            // This function is expensive, scroll first
             setInputDataForward(inputData);
           }}
         />
diff --git a/src/components/elements/gameData/utils.tsx b/src/components/elements/gameData/utils.tsx
index 9b8293a6..2932d467 100644
--- a/src/components/elements/gameData/utils.tsx
+++ b/src/components/elements/gameData/utils.tsx
@@ -42,7 +42,7 @@ export const overLengthWarningCheck = (entries: Array<any>) => {
   if (entries.length > PAGE_ATK_SKILL_MAX_ENTRIES) {
     const actualLength = entries.length;
     entries.splice(PAGE_ATK_SKILL_MAX_ENTRIES);
-    return <TruncatedWarningEntry displayed={PAGE_ATK_SKILL_MAX_ENTRIES} returned={actualLength}/>;
+    return <TruncatedWarningEntry displayed={PAGE_ATK_SKILL_MAX_ENTRIES} returned={actualLength} key="overLength"/>;
   }
 
   return null;

From 405da0eba82c709052a9e6683a3fa542ec32c80a Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sat, 26 Jun 2021 22:44:45 -0500
Subject: [PATCH 20/61] FIX - Failing co-ab lookup tests

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/ex/out/utils.test.tsx   | 63 ++++++++++---------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/components/elements/gameData/ex/out/utils.test.tsx b/src/components/elements/gameData/ex/out/utils.test.tsx
index 733d6966..9443ffb1 100644
--- a/src/components/elements/gameData/ex/out/utils.test.tsx
+++ b/src/components/elements/gameData/ex/out/utils.test.tsx
@@ -1,22 +1,20 @@
 import {ResourceLoader} from '../../../../../utils/services/resources';
 import {InputData} from '../in/types';
+import {generateInputData, overwriteInputData} from '../in/utils';
 import {filterExAbilityData} from './utils';
 
-const inputDataTemplate: InputData = {
-  filterElementCode: [],
-  filterExBuffParamCode: [],
-  filterChainedExBuffParamCode: [],
-};
 
 describe('(chained) ex ability filtering function', () => {
-  test('ex ability resource loadable', async () => {
+  const inputDataTemplate: InputData = generateInputData();
+
+  it('loads ex ability resource', async () => {
     await ResourceLoader.getAbilityEx((data) => data)
       .then((data) => {
         expect(data.length).toBeGreaterThan(0);
       });
   });
 
-  test('empty filter returns all data', async () => {
+  it('returns all data if the filter is empty', async () => {
     await ResourceLoader.getAbilityEx((data) => data)
       .then((data) => {
         data = filterExAbilityData(data, inputDataTemplate);
@@ -24,7 +22,7 @@ describe('(chained) ex ability filtering function', () => {
       });
   });
 
-  test('ex ability can be filtered by element', async () => {
+  it('filters ability using element', async () => {
     const enumElements = () => ResourceLoader.getEnumElements();
     const exAbilityData = () => ResourceLoader.getAbilityEx();
 
@@ -33,14 +31,17 @@ describe('(chained) ex ability filtering function', () => {
         elemEnums.elemental.forEach((elemEnum) => {
           const elemEnumCode = elemEnum.code;
 
-          const dataFiltered = filterExAbilityData(data, {...inputDataTemplate, filterElementCode: [elemEnumCode]});
+          const dataFiltered = filterExAbilityData(
+            data,
+            overwriteInputData(inputDataTemplate, {filter: {elements: [elemEnumCode]}}),
+          );
           expect(dataFiltered.length).toBeGreaterThan(0);
           expect(dataFiltered.map((entry) => entry.chara.element === elemEnumCode)).not.toContain(false);
         });
       });
   });
 
-  test('ex ability can be filtered by buff parameter', async () => {
+  it('filters using EX buff parameter', async () => {
     const enumBuffParams = () => ResourceLoader.getEnumExBuffParameters();
     const exAbilityData = () => ResourceLoader.getAbilityEx();
 
@@ -49,10 +50,10 @@ describe('(chained) ex ability filtering function', () => {
         exBuffParams.exBuffParam.forEach((exBuffParam) => {
           const exBuffParamCode = exBuffParam.code;
 
-          const dataFiltered = filterExAbilityData(data, {
-            ...inputDataTemplate,
-            filterExBuffParamCode: [exBuffParamCode],
-          });
+          const dataFiltered = filterExAbilityData(
+            data,
+            overwriteInputData(inputDataTemplate, {filter: {exBuffParams: [exBuffParamCode]}}),
+          );
           expect(dataFiltered.map(
             (entry) => {
               return entry.ex.some((effectUnit) => effectUnit.parameter.code === exBuffParamCode);
@@ -61,7 +62,7 @@ describe('(chained) ex ability filtering function', () => {
       });
   });
 
-  test('ex ability can be filtered by buff param & element', async () => {
+  it('filters using EX buff param & element', async () => {
     const enumElements = () => ResourceLoader.getEnumElements();
     const enumBuffParams = () => ResourceLoader.getEnumExBuffParameters();
     const exAbilityData = () => ResourceLoader.getAbilityEx();
@@ -74,11 +75,13 @@ describe('(chained) ex ability filtering function', () => {
           elemEnums.elemental.forEach((elemEnum) => {
             const elemEnumCode = elemEnum.code;
 
-            const dataFiltered = filterExAbilityData(data, {
-              ...inputDataTemplate,
-              filterExBuffParamCode: [exBuffParamCode],
-              filterElementCode: [elemEnumCode],
-            });
+            const dataFiltered = filterExAbilityData(
+              data,
+              overwriteInputData(
+                inputDataTemplate,
+                {filter: {exBuffParams: [exBuffParamCode], elements: [elemEnumCode]}},
+              ),
+            );
             expect(dataFiltered.map(
               (entry) => {
                 return entry.ex.some((effectUnit) => {
@@ -90,7 +93,7 @@ describe('(chained) ex ability filtering function', () => {
       });
   });
 
-  test('ex ability data filtered using OR logic', async () => {
+  it('filters ex ability using OR logic', async () => {
     const enumElements = () => ResourceLoader.getEnumElements();
     const exAbilityData = () => ResourceLoader.getAbilityEx();
 
@@ -98,10 +101,10 @@ describe('(chained) ex ability filtering function', () => {
       .then(([exBuffParams, data]) => {
         const firstTwoElemCode = exBuffParams.elemental.slice(0, 2).map((entry) => entry.code);
 
-        const dataFiltered = filterExAbilityData(data, {
-          ...inputDataTemplate,
-          filterElementCode: firstTwoElemCode,
-        });
+        const dataFiltered = filterExAbilityData(
+          data,
+          overwriteInputData(inputDataTemplate, {filter: {elements: firstTwoElemCode}}),
+        );
         expect(dataFiltered.map(
           (entry) => {
             return firstTwoElemCode.includes(entry.chara.element);
@@ -109,7 +112,7 @@ describe('(chained) ex ability filtering function', () => {
       });
   });
 
-  test('chained ex ability can be filtered by buff parameter', async () => {
+  it('filters ex ability by CEX buff parameter', async () => {
     const enumBuffParams = () => ResourceLoader.getEnumExBuffParameters();
     const exAbilityData = () => ResourceLoader.getAbilityEx();
 
@@ -118,10 +121,10 @@ describe('(chained) ex ability filtering function', () => {
         exBuffParams.chainedExBuffParam.forEach((cexBuffParam) => {
           const cexBuffParamCode = cexBuffParam.code;
 
-          const dataFiltered = filterExAbilityData(data, {
-            ...inputDataTemplate,
-            filterChainedExBuffParamCode: [cexBuffParamCode],
-          });
+          const dataFiltered = filterExAbilityData(
+            data,
+            overwriteInputData(inputDataTemplate, {filter: {cexBuffParams: [cexBuffParamCode]}}),
+          );
           expect(dataFiltered.map((entry) => {
             return entry.chainedEx.some((effectUnit) => effectUnit.parameter.code === cexBuffParamCode);
           })).not.toContain(false);

From 439e57fcc654387737645c45fc9461fe13d44924 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 02:05:14 -0500
Subject: [PATCH 21/61] ADD - Input collection for easier input panel setup

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/common/check/enum/checkbox.tsx   |   2 +-
 .../elements/common/check/enum/radio.tsx      |   2 +-
 .../elements/common/check/item/checkbox.tsx   |   4 +-
 .../elements/common/input/numeric.tsx         |   2 +-
 src/components/elements/common/types.ts       |   8 +-
 .../elements/gameData/skillAtk/in/params.tsx  |   1 +
 src/components/elements/input/entry.tsx       |  88 +++++
 src/components/elements/input/main.test.tsx   | 354 ++++++++++++++++++
 src/components/elements/input/main.tsx        |  28 ++
 src/components/elements/input/types.ts        |  72 ++++
 10 files changed, 552 insertions(+), 9 deletions(-)
 create mode 100644 src/components/elements/input/entry.tsx
 create mode 100644 src/components/elements/input/main.test.tsx
 create mode 100644 src/components/elements/input/main.tsx
 create mode 100644 src/components/elements/input/types.ts

diff --git a/src/components/elements/common/check/enum/checkbox.tsx b/src/components/elements/common/check/enum/checkbox.tsx
index 9f551eb1..79430a14 100644
--- a/src/components/elements/common/check/enum/checkbox.tsx
+++ b/src/components/elements/common/check/enum/checkbox.tsx
@@ -6,7 +6,7 @@ import {CheckboxGroup} from '../group/checkbox';
 import {CheckboxGroupProps} from '../types';
 
 
-type EnumChecksBoxProps<E extends EnumEntry, T> = Omit<CheckboxGroupProps<E, T>, 'getCheckOptionComparer'>
+export type EnumChecksBoxProps<E extends EnumEntry, T> = Omit<CheckboxGroupProps<E, T>, 'getCheckOptionComparer'>
 
 export const EnumCheckboxGroup = <E extends EnumEntry, T>({
   options,
diff --git a/src/components/elements/common/check/enum/radio.tsx b/src/components/elements/common/check/enum/radio.tsx
index 2a16d0be..58571a17 100644
--- a/src/components/elements/common/check/enum/radio.tsx
+++ b/src/components/elements/common/check/enum/radio.tsx
@@ -6,7 +6,7 @@ import {RadioGroup} from '../group/radio';
 import {RadioGroupProps} from '../types';
 
 
-type EnumRadioGroupProps<E extends EnumEntry, T> = Omit<RadioGroupProps<E, T>, 'getCheckOptionComparer'>
+export type EnumRadioGroupProps<E extends EnumEntry, T> = Omit<RadioGroupProps<E, T>, 'getCheckOptionComparer'>
 
 export const EnumRadioGroup = <E extends EnumEntry, T>({
   options,
diff --git a/src/components/elements/common/check/item/checkbox.tsx b/src/components/elements/common/check/item/checkbox.tsx
index ad6fe873..a1c03baf 100644
--- a/src/components/elements/common/check/item/checkbox.tsx
+++ b/src/components/elements/common/check/item/checkbox.tsx
@@ -5,7 +5,7 @@ import {CheckItem} from '../base/item';
 import {CheckItemProps} from '../types';
 
 
-type InlineCheckProps<T> = InputProps<T, boolean> & Pick<CheckItemProps, 'text'>
+export type CheckboxInputProps<T> = InputProps<T, boolean> & Pick<CheckItemProps, 'text'>
 
 export const CheckboxInput = <T, >({
   text,
@@ -13,7 +13,7 @@ export const CheckboxInput = <T, >({
   setInputData,
   getValue,
   getUpdatedInputData,
-}: InlineCheckProps<T>) => {
+}: CheckboxInputProps<T>) => {
   return (
     <CheckItem
       text={text}
diff --git a/src/components/elements/common/input/numeric.tsx b/src/components/elements/common/input/numeric.tsx
index e088d0df..40eff713 100644
--- a/src/components/elements/common/input/numeric.tsx
+++ b/src/components/elements/common/input/numeric.tsx
@@ -8,7 +8,7 @@ import {OverlayPopover} from '../overlay/popover';
 import {DetailedProps, InputProps} from '../types';
 
 
-type NumericInputProps<T> =
+export type NumericInputProps<T> =
   DetailedProps &
   InputProps<T, number> & {
   required?: boolean,
diff --git a/src/components/elements/common/types.ts b/src/components/elements/common/types.ts
index a9e24d30..17c70901 100644
--- a/src/components/elements/common/types.ts
+++ b/src/components/elements/common/types.ts
@@ -1,9 +1,9 @@
-export type TitledProps = {
-  title: string,
+export type TitledProps<T = string> = {
+  title: T,
 }
 
-export type DetailedProps = TitledProps & {
-  description: string,
+export type DetailedProps<T = string> = TitledProps<T> & {
+  description: T,
 }
 
 export type ReadonlyInputProps<T, V> = {
diff --git a/src/components/elements/gameData/skillAtk/in/params.tsx b/src/components/elements/gameData/skillAtk/in/params.tsx
index 2b7884ca..6c865d77 100644
--- a/src/components/elements/gameData/skillAtk/in/params.tsx
+++ b/src/components/elements/gameData/skillAtk/in/params.tsx
@@ -22,6 +22,7 @@ type InputParametersProps = InputSectionBaseProps<InputData> & {
 }
 
 export const InputParameters = ({collapsed, inputData, setInputData, conditionEnums}: InputParametersProps) => {
+  // <div> is required for collapse to work
   return (
     <>
       <Collapse in={collapsed}>
diff --git a/src/components/elements/input/entry.tsx b/src/components/elements/input/entry.tsx
new file mode 100644
index 00000000..e9be3ea1
--- /dev/null
+++ b/src/components/elements/input/entry.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {EnumEntry} from '../../../api-def/resources';
+import {useI18n} from '../../../i18n/hook';
+import {EnumCheckboxGroup} from '../common/check/enum/checkbox';
+import {EnumRadioGroup} from '../common/check/enum/radio';
+import {RadioGroup} from '../common/check/group/radio';
+import {CheckboxInput} from '../common/check/item/checkbox';
+import {CheckOption} from '../common/check/types';
+import {NumericInput} from '../common/input/numeric';
+import {SectionSubTitle} from '../gameData/elements/subTitle';
+import {SectionTitle} from '../gameData/elements/title';
+import {InputEntryProps} from './types';
+
+
+export const InputPanelEntry = <E extends CheckOption, E2 extends EnumEntry, T>({
+  inputEntry,
+  inputData,
+  setInputData,
+}: InputEntryProps<E, E2, T>) => {
+  const {t} = useI18n();
+
+  if (inputEntry.type === 'title') {
+    return <SectionTitle title={t(inputEntry.title)} description={t(inputEntry.description)}/>;
+  }
+  if (inputEntry.type === 'subTitle') {
+    return <SectionSubTitle title={t(inputEntry.title)} description={t(inputEntry.description)}/>;
+  }
+  if (inputEntry.type === 'separator') {
+    return <hr/>;
+  }
+  if (inputEntry.type === 'inputNumber') {
+    return (
+      <NumericInput
+        {...inputEntry}
+        title={t(inputEntry.title)}
+        description={t(inputEntry.description)}
+        inputData={inputData}
+        setInputData={setInputData}
+      />
+    );
+  }
+  if (inputEntry.type === 'inputCheckGroup') {
+    return (
+      <div className="text-center">
+        {
+          inputEntry.checkboxes.map((checkboxProps, index) => (
+            <CheckboxInput
+              key={index}
+              {...checkboxProps}
+              inputData={inputData}
+              setInputData={setInputData}
+            />
+          ))
+        }
+      </div>
+    );
+  }
+  if (inputEntry.type === 'inputRadioGroup') {
+    return (
+      <RadioGroup
+        {...inputEntry}
+        inputData={inputData}
+        setInputData={setInputData}
+      />
+    );
+  }
+  if (inputEntry.type === 'enumCheckGroup') {
+    return (
+      <EnumCheckboxGroup
+        {...inputEntry}
+        inputData={inputData}
+        setInputData={setInputData}
+      />
+    );
+  }
+  if (inputEntry.type === 'enumRadioGroup') {
+    return (
+      <EnumRadioGroup
+        {...inputEntry}
+        inputData={inputData}
+        setInputData={setInputData}
+      />
+    );
+  }
+
+  throw new Error(`Unhandled input entry: ${inputEntry}`);
+};
diff --git a/src/components/elements/input/main.test.tsx b/src/components/elements/input/main.test.tsx
new file mode 100644
index 00000000..4f26cae9
--- /dev/null
+++ b/src/components/elements/input/main.test.tsx
@@ -0,0 +1,354 @@
+import React from 'react';
+
+import {screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {renderReact} from '../../../../test/render/main';
+import {typeInput} from '../../../../test/utils/event';
+import {SupportedLanguages} from '../../../api-def/api/other/lang';
+import {InputPanel} from './main';
+
+
+describe('Input collection', () => {
+  let inputData: {
+    num?: number,
+    nums?: Array<number>,
+    check1?: boolean,
+    check2?: boolean,
+  };
+  let fnSetInputData: jest.Mock;
+
+  beforeEach(() => {
+    fnSetInputData = jest.fn().mockImplementation((newData) => inputData = newData);
+  });
+
+  it('renders section title', async () => {
+    inputData = {};
+
+    renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'title',
+            title: () => 'title',
+            description: () => 'description',
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    const titleElement = screen.getByText('title', {selector: 'h4'});
+    userEvent.click(titleElement);
+    expect(screen.getByText('description')).toBeInTheDocument();
+  });
+
+  it('renders sub title', async () => {
+    inputData = {};
+
+    renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'subTitle',
+            title: () => 'title',
+            description: () => 'description',
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    const titleElement = screen.getByText('title', {selector: 'h5'});
+    userEvent.click(titleElement);
+    expect(screen.getByText('description')).toBeInTheDocument();
+  });
+
+  it('renders separator', async () => {
+    inputData = {};
+
+    renderReact(() => (
+      <InputPanel
+        inputEntries={[{type: 'separator'}]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    expect(screen.getByText('', {selector: 'hr'})).toBeInTheDocument();
+  });
+
+  it('renders numeric input', async () => {
+    inputData = {num: 7};
+
+    const {rerender} = renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'inputNumber',
+            title: () => 'title',
+            description: () => 'description',
+            getValue: (inputData) => inputData.num || 0,
+            getUpdatedInputData: (newValue) => ({num: newValue}),
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    const inputElement = screen.getByDisplayValue('7');
+    typeInput(inputElement, '8', {rerender});
+    expect(fnSetInputData).toHaveBeenCalledTimes(1);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({num: 78});
+    expect(screen.getByDisplayValue('78')).toBeInTheDocument();
+  });
+
+  it('renders checkbox group', async () => {
+    inputData = {check1: false, check2: false};
+
+    const {rerender} = renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'inputCheckGroup',
+            checkboxes: [
+              {
+                text: 'check 1',
+                getValue: (inputData) => inputData.check1 ?? false,
+                getUpdatedInputData: (newValue) => ({...inputData, check1: newValue}),
+              },
+              {
+                text: 'check 2',
+                getValue: (inputData) => inputData.check2 ?? false,
+                getUpdatedInputData: (newValue) => ({...inputData, check2: newValue}),
+              },
+            ],
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    const check1Button = screen.getByText('check 1');
+    const check2Button = screen.getByText('check 2');
+
+    userEvent.click(check1Button);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(1);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({check1: true, check2: false});
+
+    userEvent.click(check2Button);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(2);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({check1: true, check2: true});
+
+    userEvent.click(check1Button);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(3);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({check1: false, check2: true});
+  });
+
+  it('renders radio group', async () => {
+    inputData = {num: 1};
+
+    const {rerender} = renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'inputRadioGroup',
+            options: [
+              {text: 'option 1', code: 1},
+              {text: 'option 2', code: 2},
+              {text: 'option 3', code: 3},
+            ],
+            getValue: (inputData) => inputData.num || 1,
+            getUpdatedInputData: (newValue) => ({num: newValue}),
+            getCheckOptionComparer: (option) => option.code,
+            groupName: 'group',
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    const option2 = screen.getByText('option 2');
+
+    userEvent.click(option2);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(1);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({num: 2});
+  });
+
+  it('renders enum checkbox group', async () => {
+    inputData = {nums: []};
+
+    const {rerender} = renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'enumCheckGroup',
+            options: [
+              {
+                name: 'enum 1',
+                code: 1,
+                imagePath: 'enum1.png',
+                trans: {
+                  [SupportedLanguages.CHT]: 'enum 1 CHT',
+                  [SupportedLanguages.EN]: 'enum 1 EN',
+                  [SupportedLanguages.JP]: 'enum 1 JP',
+                },
+              },
+              {
+                name: 'enum 2',
+                code: 2,
+                imagePath: 'enum2.png',
+                trans: {
+                  [SupportedLanguages.CHT]: 'enum 2 CHT',
+                  [SupportedLanguages.EN]: 'enum 2 EN',
+                  [SupportedLanguages.JP]: 'enum 2 JP',
+                },
+              },
+            ],
+            getValue: (inputData) => inputData.nums ?? [],
+            getUpdatedInputData: (newValue) => ({nums: newValue}),
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    const enum1Element = screen.getByAltText('enum 1 EN');
+    const enum2Element = screen.getByAltText('enum 2 EN');
+
+    userEvent.click(enum1Element);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(1);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({nums: [1]});
+
+    userEvent.click(enum2Element);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(2);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({nums: [1, 2]});
+
+    userEvent.click(enum1Element);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(3);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({nums: [2]});
+  });
+
+  it('renders enum radio group', async () => {
+    inputData = {num: 1};
+
+    const {rerender} = renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'enumRadioGroup',
+            options: [
+              {
+                name: 'enum 1',
+                code: 1,
+                imagePath: 'enum1.png',
+                trans: {
+                  [SupportedLanguages.CHT]: 'enum 1 CHT',
+                  [SupportedLanguages.EN]: 'enum 1 EN',
+                  [SupportedLanguages.JP]: 'enum 1 JP',
+                },
+              },
+              {
+                name: 'enum 2',
+                code: 2,
+                imagePath: 'enum2.png',
+                trans: {
+                  [SupportedLanguages.CHT]: 'enum 2 CHT',
+                  [SupportedLanguages.EN]: 'enum 2 EN',
+                  [SupportedLanguages.JP]: 'enum 2 JP',
+                },
+              },
+            ],
+            getValue: (inputData) => inputData.num ?? 1,
+            getUpdatedInputData: (newValue) => ({num: newValue}),
+            groupName: 'group',
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    const enum1Element = screen.getByAltText('enum 1 EN');
+    const enum2Element = screen.getByAltText('enum 2 EN');
+
+    userEvent.click(enum2Element);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(1);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({num: 2});
+
+    userEvent.click(enum1Element);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(2);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({num: 1});
+
+    userEvent.click(enum2Element);
+    rerender();
+
+    expect(fnSetInputData).toHaveBeenCalledTimes(3);
+    expect(fnSetInputData).toHaveBeenLastCalledWith({num: 2});
+  });
+
+  it('renders multiple inputs', async () => {
+    inputData = {check1: false, check2: false};
+
+    renderReact(() => (
+      <InputPanel
+        inputEntries={[
+          {
+            type: 'title',
+            title: () => 'title',
+            description: () => 'description',
+          },
+          {
+            type: 'separator',
+          },
+          {
+            type: 'inputCheckGroup',
+            checkboxes: [
+              {
+                text: 'check 1',
+                getValue: (inputData) => inputData.check1 ?? false,
+                getUpdatedInputData: (newValue) => ({...inputData, check1: newValue}),
+              },
+              {
+                text: 'check 2',
+                getValue: (inputData) => inputData.check2 ?? false,
+                getUpdatedInputData: (newValue) => ({...inputData, check2: newValue}),
+              },
+            ],
+          },
+        ]}
+        inputData={inputData}
+        setInputData={fnSetInputData}
+      />
+    ));
+
+    expect(screen.getByText('title', {selector: 'h4'})).toBeInTheDocument();
+    expect(screen.getByText('', {selector: 'hr'})).toBeInTheDocument();
+    expect(screen.getByText('check 1')).toBeInTheDocument();
+    expect(screen.getByText('check 2')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/elements/input/main.tsx b/src/components/elements/input/main.tsx
new file mode 100644
index 00000000..b0e4600f
--- /dev/null
+++ b/src/components/elements/input/main.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {EnumEntry} from '../../../api-def/resources/types/enum';
+import {CheckOption} from '../common/check/types';
+import {InputPanelEntry} from './entry';
+import {InputPanelProps} from './types';
+
+
+export const InputPanel = <E extends CheckOption, E2 extends EnumEntry, T>({
+  inputEntries,
+  inputData,
+  setInputData,
+}: InputPanelProps<E, E2, T>) => {
+  return (
+    <>
+      {
+        inputEntries.map((inputEntry, idx) => (
+          <InputPanelEntry
+            key={idx}
+            inputEntry={inputEntry}
+            inputData={inputData}
+            setInputData={setInputData}
+          />
+        ))
+      }
+    </>
+  );
+};
diff --git a/src/components/elements/input/types.ts b/src/components/elements/input/types.ts
new file mode 100644
index 00000000..719f3224
--- /dev/null
+++ b/src/components/elements/input/types.ts
@@ -0,0 +1,72 @@
+import {EnumEntry} from '../../../api-def/resources/types/enum';
+import {GetTranslationFunction} from '../../../i18n/types';
+import {EnumChecksBoxProps} from '../common/check/enum/checkbox';
+import {EnumRadioGroupProps} from '../common/check/enum/radio';
+import {CheckboxInputProps} from '../common/check/item/checkbox';
+import {RadioGroupProps} from '../common/check/types';
+import {NumericInputProps} from '../common/input/numeric';
+import {DetailedProps} from '../common/types';
+
+
+export type InputEntryTitle = DetailedProps<GetTranslationFunction> & {
+  type: 'title',
+}
+
+export type InputEntrySubTitle = DetailedProps<GetTranslationFunction> & {
+  type: 'subTitle'
+}
+
+export type InputEntrySeparator = {
+  type: 'separator'
+}
+
+export type InputEntryNumber<T> =
+  DetailedProps<GetTranslationFunction> &
+  Omit<NumericInputProps<T>, keyof DetailedProps | keyof InputPanelCommonProps<T>> & {
+  type: 'inputNumber'
+}
+
+export type InputEntryCheckboxGroup<T> = {
+  type: 'inputCheckGroup',
+  checkboxes: Array<Omit<CheckboxInputProps<T>, keyof InputPanelCommonProps<T>>>,
+}
+
+export type InputEntryRadioGroup<E, T> =
+  Omit<RadioGroupProps<E, T>, keyof InputPanelCommonProps<T>> & {
+  type: 'inputRadioGroup'
+}
+
+export type InputEntryEnumRadioGroup<E2 extends EnumEntry, T> =
+  Omit<EnumRadioGroupProps<E2, T>, keyof InputPanelCommonProps<T>> & {
+  type: 'enumRadioGroup'
+}
+
+export type InputEntryEnumCheckGroup<E2 extends EnumEntry, T> =
+  Omit<EnumChecksBoxProps<E2, T>, keyof InputPanelCommonProps<T>> & {
+  type: 'enumCheckGroup'
+}
+
+export type InputEntry<E, E2 extends EnumEntry, T> =
+  InputEntryTitle |
+  InputEntrySubTitle |
+  InputEntrySeparator |
+  InputEntryNumber<T> |
+  InputEntryCheckboxGroup<T> |
+  InputEntryRadioGroup<E, T> |
+  InputEntryEnumRadioGroup<E2, T> |
+  InputEntryEnumCheckGroup<E2, T>
+
+export type InputEntries<E, E2 extends EnumEntry, T> = Array<InputEntry<E, E2, T>>
+
+type InputPanelCommonProps<T> = {
+  inputData: T,
+  setInputData: (newData: T) => void,
+}
+
+export type InputEntryProps<E, E2 extends EnumEntry, T> = InputPanelCommonProps<T> & {
+  inputEntry: InputEntry<E, E2, T>,
+}
+
+export type InputPanelProps<E, E2 extends EnumEntry, T> = InputPanelCommonProps<T> & {
+  inputEntries: InputEntries<E, E2, T>,
+}

From 979361f4ffcf3d9b740d242f8ab76c413742366b Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 02:09:42 -0500
Subject: [PATCH 22/61] IMP - Co-ab lookup input to use input panel

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/ex/in/filter.tsx        | 84 +++++++++----------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/components/elements/gameData/ex/in/filter.tsx b/src/components/elements/gameData/ex/in/filter.tsx
index 9df7a8c1..5b1f760d 100644
--- a/src/components/elements/gameData/ex/in/filter.tsx
+++ b/src/components/elements/gameData/ex/in/filter.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import {ElementEnums, ExBuffParams} from '../../../../../api-def/resources';
-import {useI18n} from '../../../../../i18n/hook';
-import {EnumCheckboxGroup} from '../../../common/check/enum/checkbox';
-import {SectionTitle} from '../../elements/title';
+import {InputPanel} from '../../../input/main';
 import {InputSectionBaseProps} from '../../props';
 import {InputData} from './types';
 import {overwriteInputData} from './utils';
@@ -20,45 +18,47 @@ export const SectionFilter = ({
   elementEnums,
   exBuffParams,
 }: SectionProps) => {
-  const {t} = useI18n();
-
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.ex.name.filterElement)}
-        description={t((t) => t.game.ex.desc.filterElement)}
-      />
-      <EnumCheckboxGroup
-        options={elementEnums.elemental}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.filter.elements}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {elements: newValue}})}
-      />
-      <SectionTitle
-        title={t((t) => t.game.ex.name.filterExBuffParam)}
-        description={t((t) => t.game.ex.desc.filterExBuffParam)}
-      />
-      <EnumCheckboxGroup
-        options={exBuffParams.exBuffParam}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.filter.exBuffParams}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {exBuffParams: newValue}})}
-        imageHeight="2rem"
-      />
-      <SectionTitle
-        title={t((t) => t.game.ex.name.filterChainedExBuffParam)}
-        description={t((t) => t.game.ex.desc.filterChainedExBuffParam)}
-      />
-      <EnumCheckboxGroup
-        options={exBuffParams.chainedExBuffParam}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.filter.cexBuffParams}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {cexBuffParams: newValue}})}
-        imageHeight="2rem"
-      />
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: (t) => t.game.ex.name.filterElement,
+          description: (t) => t.game.ex.desc.filterElement,
+        },
+        {
+          type: 'enumCheckGroup',
+          options: elementEnums.elemental,
+          getValue: (inputData) => inputData.filter.elements,
+          getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {elements: newValue}}),
+        },
+        {
+          type: 'title',
+          title: (t) => t.game.ex.name.filterExBuffParam,
+          description: (t) => t.game.ex.desc.filterExBuffParam,
+        },
+        {
+          type: 'enumCheckGroup',
+          options: exBuffParams.exBuffParam,
+          getValue: (inputData) => inputData.filter.exBuffParams,
+          getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {exBuffParams: newValue}}),
+          imageHeight: '2rem',
+        },
+        {
+          type: 'title',
+          title: (t) => t.game.ex.name.filterChainedExBuffParam,
+          description: (t) => t.game.ex.desc.filterChainedExBuffParam,
+        },
+        {
+          type: 'enumCheckGroup',
+          options: exBuffParams.chainedExBuffParam,
+          getValue: (inputData) => inputData.filter.cexBuffParams,
+          getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {cexBuffParams: newValue}}),
+          imageHeight: '2rem',
+        },
+      ]}
+    />
   );
 };

From 19d015dd306180c11bc10b7fe752216246b8559d Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 02:13:27 -0500
Subject: [PATCH 23/61] IMP - Input panel entry to receive string instead of
 translation getter

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/common/types.ts          |  8 ++++----
 .../elements/gameData/ex/in/filter.tsx           | 15 +++++++++------
 src/components/elements/input/entry.tsx          | 11 ++++-------
 src/components/elements/input/main.test.tsx      | 16 ++++++++--------
 src/components/elements/input/types.ts           |  7 +++----
 5 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/components/elements/common/types.ts b/src/components/elements/common/types.ts
index 17c70901..a9e24d30 100644
--- a/src/components/elements/common/types.ts
+++ b/src/components/elements/common/types.ts
@@ -1,9 +1,9 @@
-export type TitledProps<T = string> = {
-  title: T,
+export type TitledProps = {
+  title: string,
 }
 
-export type DetailedProps<T = string> = TitledProps<T> & {
-  description: T,
+export type DetailedProps = TitledProps & {
+  description: string,
 }
 
 export type ReadonlyInputProps<T, V> = {
diff --git a/src/components/elements/gameData/ex/in/filter.tsx b/src/components/elements/gameData/ex/in/filter.tsx
index 5b1f760d..65073264 100644
--- a/src/components/elements/gameData/ex/in/filter.tsx
+++ b/src/components/elements/gameData/ex/in/filter.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {ElementEnums, ExBuffParams} from '../../../../../api-def/resources';
+import {useI18n} from '../../../../../i18n/hook';
 import {InputPanel} from '../../../input/main';
 import {InputSectionBaseProps} from '../../props';
 import {InputData} from './types';
@@ -18,6 +19,8 @@ export const SectionFilter = ({
   elementEnums,
   exBuffParams,
 }: SectionProps) => {
+  const {t} = useI18n();
+
   return (
     <InputPanel
       inputData={inputData}
@@ -25,8 +28,8 @@ export const SectionFilter = ({
       inputEntries={[
         {
           type: 'title',
-          title: (t) => t.game.ex.name.filterElement,
-          description: (t) => t.game.ex.desc.filterElement,
+          title: t((t) => t.game.ex.name.filterElement),
+          description: t((t) => t.game.ex.desc.filterElement),
         },
         {
           type: 'enumCheckGroup',
@@ -36,8 +39,8 @@ export const SectionFilter = ({
         },
         {
           type: 'title',
-          title: (t) => t.game.ex.name.filterExBuffParam,
-          description: (t) => t.game.ex.desc.filterExBuffParam,
+          title: t((t) => t.game.ex.name.filterExBuffParam),
+          description: t((t) => t.game.ex.desc.filterExBuffParam),
         },
         {
           type: 'enumCheckGroup',
@@ -48,8 +51,8 @@ export const SectionFilter = ({
         },
         {
           type: 'title',
-          title: (t) => t.game.ex.name.filterChainedExBuffParam,
-          description: (t) => t.game.ex.desc.filterChainedExBuffParam,
+          title: t((t) => t.game.ex.name.filterChainedExBuffParam),
+          description: t((t) => t.game.ex.desc.filterChainedExBuffParam),
         },
         {
           type: 'enumCheckGroup',
diff --git a/src/components/elements/input/entry.tsx b/src/components/elements/input/entry.tsx
index e9be3ea1..51125555 100644
--- a/src/components/elements/input/entry.tsx
+++ b/src/components/elements/input/entry.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {EnumEntry} from '../../../api-def/resources';
-import {useI18n} from '../../../i18n/hook';
 import {EnumCheckboxGroup} from '../common/check/enum/checkbox';
 import {EnumRadioGroup} from '../common/check/enum/radio';
 import {RadioGroup} from '../common/check/group/radio';
@@ -18,13 +17,11 @@ export const InputPanelEntry = <E extends CheckOption, E2 extends EnumEntry, T>(
   inputData,
   setInputData,
 }: InputEntryProps<E, E2, T>) => {
-  const {t} = useI18n();
-
   if (inputEntry.type === 'title') {
-    return <SectionTitle title={t(inputEntry.title)} description={t(inputEntry.description)}/>;
+    return <SectionTitle title={inputEntry.title} description={inputEntry.description}/>;
   }
   if (inputEntry.type === 'subTitle') {
-    return <SectionSubTitle title={t(inputEntry.title)} description={t(inputEntry.description)}/>;
+    return <SectionSubTitle title={inputEntry.title} description={inputEntry.description}/>;
   }
   if (inputEntry.type === 'separator') {
     return <hr/>;
@@ -33,8 +30,8 @@ export const InputPanelEntry = <E extends CheckOption, E2 extends EnumEntry, T>(
     return (
       <NumericInput
         {...inputEntry}
-        title={t(inputEntry.title)}
-        description={t(inputEntry.description)}
+        title={inputEntry.title}
+        description={inputEntry.description}
         inputData={inputData}
         setInputData={setInputData}
       />
diff --git a/src/components/elements/input/main.test.tsx b/src/components/elements/input/main.test.tsx
index 4f26cae9..19d8a098 100644
--- a/src/components/elements/input/main.test.tsx
+++ b/src/components/elements/input/main.test.tsx
@@ -30,8 +30,8 @@ describe('Input collection', () => {
         inputEntries={[
           {
             type: 'title',
-            title: () => 'title',
-            description: () => 'description',
+            title: 'title',
+            description: 'description',
           },
         ]}
         inputData={inputData}
@@ -52,8 +52,8 @@ describe('Input collection', () => {
         inputEntries={[
           {
             type: 'subTitle',
-            title: () => 'title',
-            description: () => 'description',
+            title: 'title',
+            description: 'description',
           },
         ]}
         inputData={inputData}
@@ -88,8 +88,8 @@ describe('Input collection', () => {
         inputEntries={[
           {
             type: 'inputNumber',
-            title: () => 'title',
-            description: () => 'description',
+            title: 'title',
+            description: 'description',
             getValue: (inputData) => inputData.num || 0,
             getUpdatedInputData: (newValue) => ({num: newValue}),
           },
@@ -319,8 +319,8 @@ describe('Input collection', () => {
         inputEntries={[
           {
             type: 'title',
-            title: () => 'title',
-            description: () => 'description',
+            title: 'title',
+            description: 'description',
           },
           {
             type: 'separator',
diff --git a/src/components/elements/input/types.ts b/src/components/elements/input/types.ts
index 719f3224..141e7207 100644
--- a/src/components/elements/input/types.ts
+++ b/src/components/elements/input/types.ts
@@ -1,5 +1,4 @@
 import {EnumEntry} from '../../../api-def/resources/types/enum';
-import {GetTranslationFunction} from '../../../i18n/types';
 import {EnumChecksBoxProps} from '../common/check/enum/checkbox';
 import {EnumRadioGroupProps} from '../common/check/enum/radio';
 import {CheckboxInputProps} from '../common/check/item/checkbox';
@@ -8,11 +7,11 @@ import {NumericInputProps} from '../common/input/numeric';
 import {DetailedProps} from '../common/types';
 
 
-export type InputEntryTitle = DetailedProps<GetTranslationFunction> & {
+export type InputEntryTitle = DetailedProps & {
   type: 'title',
 }
 
-export type InputEntrySubTitle = DetailedProps<GetTranslationFunction> & {
+export type InputEntrySubTitle = DetailedProps & {
   type: 'subTitle'
 }
 
@@ -21,7 +20,7 @@ export type InputEntrySeparator = {
 }
 
 export type InputEntryNumber<T> =
-  DetailedProps<GetTranslationFunction> &
+  DetailedProps &
   Omit<NumericInputProps<T>, keyof DetailedProps | keyof InputPanelCommonProps<T>> & {
   type: 'inputNumber'
 }

From b5f123b7ba5fc47510c0b9890780d043f2c364bf Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 02:20:58 -0500
Subject: [PATCH 24/61] IMP - Co-ab lookup input rename

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/ex/in/filter.test.tsx          | 12 ++++++------
 src/components/elements/gameData/ex/in/filter.tsx    |  2 +-
 src/components/elements/gameData/ex/in/main.tsx      |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/elements/gameData/ex/in/filter.test.tsx b/src/components/elements/gameData/ex/in/filter.test.tsx
index 351c1808..6a9bfaa1 100644
--- a/src/components/elements/gameData/ex/in/filter.test.tsx
+++ b/src/components/elements/gameData/ex/in/filter.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import {renderReact} from '../../../../../../test/render/main';
 import {SupportedLanguages} from '../../../../../api-def/api';
 import {ElementEnums, ExBuffParams} from '../../../../../api-def/resources';
-import {SectionFilter} from './filter';
+import {Filter} from './filter';
 import {InputData} from './types';
 import {generateInputData} from './utils';
 
@@ -93,7 +93,7 @@ describe('EX/CEX filter section', () => {
 
   it('renders the filter section', async () => {
     renderReact(() => (
-      <SectionFilter
+      <Filter
         inputData={inputData}
         setInputData={setInputData}
         elementEnums={elementEnums}
@@ -104,7 +104,7 @@ describe('EX/CEX filter section', () => {
 
   it('can filter by element', async () => {
     renderReact(() => (
-      <SectionFilter
+      <Filter
         inputData={inputData}
         setInputData={setInputData}
         elementEnums={elementEnums}
@@ -121,7 +121,7 @@ describe('EX/CEX filter section', () => {
 
   it('can filter by EX parameter', async () => {
     renderReact(() => (
-      <SectionFilter
+      <Filter
         inputData={inputData}
         setInputData={setInputData}
         elementEnums={elementEnums}
@@ -138,7 +138,7 @@ describe('EX/CEX filter section', () => {
 
   it('can filter by CEX parameter', async () => {
     renderReact(() => (
-      <SectionFilter
+      <Filter
         inputData={inputData}
         setInputData={setInputData}
         elementEnums={elementEnums}
@@ -155,7 +155,7 @@ describe('EX/CEX filter section', () => {
 
   it('can filter by multiple conditions', async () => {
     const {rerender} = renderReact(() => (
-      <SectionFilter
+      <Filter
         inputData={inputData}
         setInputData={setInputData}
         elementEnums={elementEnums}
diff --git a/src/components/elements/gameData/ex/in/filter.tsx b/src/components/elements/gameData/ex/in/filter.tsx
index 65073264..8e5201b1 100644
--- a/src/components/elements/gameData/ex/in/filter.tsx
+++ b/src/components/elements/gameData/ex/in/filter.tsx
@@ -13,7 +13,7 @@ type SectionProps = InputSectionBaseProps<InputData> & {
   exBuffParams: ExBuffParams
 }
 
-export const SectionFilter = ({
+export const Filter = ({
   inputData,
   setInputData,
   elementEnums,
diff --git a/src/components/elements/gameData/ex/in/main.tsx b/src/components/elements/gameData/ex/in/main.tsx
index f8cfe745..84678d2a 100644
--- a/src/components/elements/gameData/ex/in/main.tsx
+++ b/src/components/elements/gameData/ex/in/main.tsx
@@ -8,7 +8,7 @@ import {alertDispatchers} from '../../../../../state/alert/dispatchers';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {isNotFetched} from '../../../common/fetch';
 import {SelectionData} from '../types';
-import {SectionFilter} from './filter';
+import {Filter} from './filter';
 import {InputData} from './types';
 import {generateInputData} from './utils';
 
@@ -72,7 +72,7 @@ export const ExAbilityInput = ({onSearchRequested}: InputProps) => {
 
   return (
     <div className="rounded bg-black-32 p-3">
-      <SectionFilter
+      <Filter
         elementEnums={selectionData.elementEnums}
         exBuffParams={selectionData.exBuffParams}
         inputData={inputData}

From e14026d910a6d3fd2808b14377705ef0f453276e Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 03:15:48 -0500
Subject: [PATCH 25/61] IMP - ATK skill lookup input to use input panel

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/in/filter.tsx  |  76 ++++++++
 .../elements/gameData/skillAtk/in/main.tsx    |   4 +-
 .../gameData/skillAtk/in/sections/atk.tsx     |  72 ++++----
 .../gameData/skillAtk/in/sections/buff.tsx    |  71 ++++----
 .../gameData/skillAtk/in/sections/crt.tsx     |  80 +++++----
 .../gameData/skillAtk/in/sections/ex.tsx      |  55 +++---
 .../gameData/skillAtk/in/sections/filter.tsx  |  74 --------
 .../gameData/skillAtk/in/sections/other.tsx   |  54 +++---
 .../skillAtk/in/sections/punisher.tsx         |  54 +++---
 .../gameData/skillAtk/in/sections/skill.tsx   |  69 ++++----
 .../gameData/skillAtk/in/sections/target.tsx  | 163 +++++++++---------
 11 files changed, 411 insertions(+), 361 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/in/filter.tsx
 delete mode 100644 src/components/elements/gameData/skillAtk/in/sections/filter.tsx

diff --git a/src/components/elements/gameData/skillAtk/in/filter.tsx b/src/components/elements/gameData/skillAtk/in/filter.tsx
new file mode 100644
index 00000000..27de8030
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/in/filter.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import {useI18n} from '../../../../../i18n/hook';
+import {InputPanel} from '../../../input/main';
+import {
+  SectionProps,
+  SectionPropsCondEnums,
+  SectionPropsElemEnums,
+} from './props';
+import {overwriteInputData} from './utils';
+
+
+type SectionFilterProps =
+  SectionProps &
+  SectionPropsCondEnums &
+  SectionPropsElemEnums;
+
+export const Filter = ({
+  inputData,
+  setInputData,
+  elementEnums,
+  conditionEnums,
+}: SectionFilterProps) => {
+  const {t} = useI18n();
+
+  return (
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.filter),
+          description: t((t) => t.game.skillAtk.desc.filter),
+        },
+        {
+          type: 'subTitle',
+          title: t((t) => t.game.skillAtk.name.filterElement),
+          description: t((t) => t.game.skillAtk.desc.filterElement),
+        },
+        {
+          type: 'enumCheckGroup',
+          options: elementEnums.elemental,
+          getValue: (inputData) => inputData.filter.elemCodes,
+          getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {elemCodes: newValue}}),
+        },
+        {
+          type: 'subTitle',
+          title: t((t) => t.game.skillAtk.name.filterAffliction),
+          description: t((t) => t.game.skillAtk.desc.filterAffliction),
+        },
+        {
+          type: 'enumCheckGroup',
+          options: conditionEnums.afflictions,
+          getValue: (inputData) => inputData.filter.afflictionCondCode,
+          getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {afflictionCondCode: newValue}}),
+        },
+        {
+          type: 'subTitle',
+          title: t((t) => t.game.skillAtk.name.filterOther),
+          description: t((t) => t.game.skillAtk.desc.filterOther),
+        },
+        {
+          type: 'inputCheckGroup',
+          checkboxes: [
+            {
+              text: t((t) => t.game.skillAtk.name.filterSharedOnly),
+              getValue: (inputData) => inputData.filter.sharedOnly,
+              getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {sharedOnly: newValue}}),
+            },
+          ],
+        },
+      ]}
+    />
+  );
+};
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index c3f14eea..19976d57 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -6,8 +6,8 @@ import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/re
 import {useI18n} from '../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
+import {Filter} from './filter';
 import {InputParameters} from './params';
-import {SectionFilter} from './sections/filter';
 import {InputData} from './types';
 import {generateInputData} from './utils';
 
@@ -49,7 +49,7 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
 
   return (
     <>
-      <SectionFilter
+      <Filter
         inputData={inputData}
         setInputData={setInputData}
         conditionEnums={conditionEnums.data}
diff --git a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
index 16db1a78..b47ba30a 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {NumericInput} from '../../../../common/input/numeric';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -11,35 +10,44 @@ export const SectionAtk = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.atk)}
-        description={t((t) => t.game.skillAtk.desc.atk)}/>
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.atkInGame)}
-        description={t((t) => t.game.skillAtk.desc.atkInGame)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.atk.inGame}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {atk: {inGame: newValue}}})}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.atkConditional)}
-        description={t((t) => t.game.skillAtk.desc.atkConditional)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.atk.conditionalPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {atk: {conditionalPct: newValue}}})}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.atkBuff)}
-        description={t((t) => t.game.skillAtk.desc.atkBuff)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.atk.conditionalPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {atk: {buffPct: newValue}}})}
-        maxValue={200}
-      />
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.atk),
+          description: t((t) => t.game.skillAtk.desc.atk),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.atk),
+          description: t((t) => t.game.skillAtk.desc.atk),
+          getValue: (inputData) => inputData.params.atk.inGame,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {atk: {inGame: newValue}}})
+          ),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.atkConditional),
+          description: t((t) => t.game.skillAtk.desc.atkConditional),
+          getValue: (inputData) => inputData.params.atk.conditionalPct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {atk: {conditionalPct: newValue}}})
+          ),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.atkBuff),
+          description: t((t) => t.game.skillAtk.desc.atkBuff),
+          getValue: (inputData) => inputData.params.atk.buffPct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {atk: {buffPct: newValue}}})
+          ),
+          maxValue: 200,
+        },
+      ]}
+    />
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
index 40fabcd1..ce120646 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {NumericInput} from '../../../../common/input/numeric';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -11,35 +10,43 @@ export const SectionBuff = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.buffBoost)}
-        description={t((t) => t.game.skillAtk.desc.buffBoost)}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.buffCount)}
-        description={t((t) => t.game.skillAtk.desc.buffCount)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.buff.count}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {buff: {count: newValue}}})}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.buffZoneSelf)}
-        description={t((t) => t.game.skillAtk.desc.buffZoneSelf)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.buff.zone.self}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {buff: {zone: {self: newValue}}}})}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.buffZoneAlly)}
-        description={t((t) => t.game.skillAtk.desc.buffZoneAlly)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.buff.zone.ally}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {buff: {zone: {ally: newValue}}}})}
-      />
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.buffBoost),
+          description: t((t) => t.game.skillAtk.desc.buffBoost),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.buffCount),
+          description: t((t) => t.game.skillAtk.desc.buffCount),
+          getValue: (inputData) => inputData.params.buff.count,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {buff: {count: newValue}}})
+          ),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.buffZoneSelf),
+          description: t((t) => t.game.skillAtk.desc.buffZoneSelf),
+          getValue: (inputData) => inputData.params.buff.zone.self,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {buff: {zone: {self: newValue}}}})
+          ),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.buffZoneAlly),
+          description: t((t) => t.game.skillAtk.desc.buffZoneAlly),
+          getValue: (inputData) => inputData.params.buff.zone.ally,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {buff: {zone: {ally: newValue}}}})
+          ),
+        },
+      ]}
+    />
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
index 956a1488..55a13d59 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {CheckboxInput} from '../../../../common/check/item/checkbox';
-import {NumericInput} from '../../../../common/input/numeric';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -12,38 +10,48 @@ export const SectionCrt = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.crt)}
-        description={t((t) => t.game.skillAtk.desc.crt)}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.crtRate)}
-        description={t((t) => t.game.skillAtk.desc.crtRate)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.crt.ratePct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {crt: {ratePct: newValue}}})}
-        maxValue={100}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.crtDamage)}
-        description={t((t) => t.game.skillAtk.desc.crtDamage)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.crt.damagePct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {crt: {damagePct: newValue}}})}
-        maxValue={400}
-      />
-      <div className="text-center">
-        <CheckboxInput
-          text={t((t) => t.game.skillAtk.name.crtInspired)}
-          inputData={inputData}
-          setInputData={setInputData}
-          getValue={(inputData) => inputData.params.crt.inspired}
-          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {crt: {inspired: newValue}}})}
-        />
-      </div>
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.crt),
+          description: t((t) => t.game.skillAtk.desc.crt),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.crtRate),
+          description: t((t) => t.game.skillAtk.desc.crtRate),
+          getValue: (inputData) => inputData.params.crt.ratePct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {crt: {ratePct: newValue}}})
+          ),
+          maxValue: 100,
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.crtDamage),
+          description: t((t) => t.game.skillAtk.desc.crtDamage),
+          getValue: (inputData) => inputData.params.crt.damagePct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {crt: {damagePct: newValue}}})
+          ),
+          maxValue: 400,
+        },
+        {
+          type: 'inputCheckGroup',
+          checkboxes: [
+            {
+              text: t((t) => t.game.skillAtk.name.crtInspired),
+              getValue: (inputData) => inputData.params.crt.inspired,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {params: {crt: {inspired: newValue}}})
+              ),
+            },
+          ],
+        },
+      ]}
+    />
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
index dfa31bd5..1bc8475c 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {CheckboxInput} from '../../../../common/check/item/checkbox';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -11,27 +10,35 @@ export const SectionEx = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.ex)}
-        description={t((t) => t.game.skillAtk.desc.ex)}
-      />
-      <div className="text-center">
-        <CheckboxInput
-          text={t((t) => t.game.skillAtk.name.exBlade)}
-          inputData={inputData}
-          setInputData={setInputData}
-          getValue={(inputData) => inputData.params.ex.blade}
-          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {ex: {blade: newValue}}})}
-        />
-        <CheckboxInput
-          text={t((t) => t.game.skillAtk.name.exWand)}
-          inputData={inputData}
-          setInputData={setInputData}
-          getValue={(inputData) => inputData.params.ex.wand}
-          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {ex: {wand: newValue}}})}
-        />
-      </div>
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.ex),
+          description: t((t) => t.game.skillAtk.desc.ex),
+        },
+        {
+          type: 'inputCheckGroup',
+          checkboxes: [
+            {
+              text: t((t) => t.game.skillAtk.name.exBlade),
+              getValue: (inputData) => inputData.params.ex.blade,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {params: {ex: {blade: newValue}}})
+              ),
+            },
+            {
+              text: t((t) => t.game.skillAtk.name.exWand),
+              getValue: (inputData) => inputData.params.ex.wand,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {params: {ex: {wand: newValue}}})
+              ),
+            },
+          ],
+        },
+      ]}
+    />
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/filter.tsx b/src/components/elements/gameData/skillAtk/in/sections/filter.tsx
deleted file mode 100644
index 067f48d6..00000000
--- a/src/components/elements/gameData/skillAtk/in/sections/filter.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-
-import Form from 'react-bootstrap/Form';
-
-import {useI18n} from '../../../../../../i18n/hook';
-import {EnumCheckboxGroup} from '../../../../common/check/enum/checkbox';
-import {CheckboxInput} from '../../../../common/check/item/checkbox';
-import {SectionSubTitle} from '../../../elements/subTitle';
-import {SectionTitle} from '../../../elements/title';
-import {
-  SectionProps,
-  SectionPropsCondEnums,
-  SectionPropsElemEnums,
-} from '../props';
-import {overwriteInputData} from '../utils';
-
-
-type SectionFilterProps =
-  SectionProps &
-  SectionPropsCondEnums &
-  SectionPropsElemEnums;
-
-export const SectionFilter = ({
-  inputData,
-  setInputData,
-  elementEnums,
-  conditionEnums,
-}: SectionFilterProps) => {
-  const {t} = useI18n();
-
-  return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.filter)}
-        description={t((t) => t.game.skillAtk.desc.filter)}
-      />
-      <SectionSubTitle
-        title={t((t) => t.game.skillAtk.name.filterElement)}
-        description={t((t) => t.game.skillAtk.desc.filterElement)}
-      />
-      <EnumCheckboxGroup
-        options={elementEnums.elemental}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.filter.elemCodes}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {elemCodes: newValue}})}
-      />
-      <SectionSubTitle
-        title={t((t) => t.game.skillAtk.name.filterAffliction)}
-        description={t((t) => t.game.skillAtk.desc.filterAffliction)}
-      />
-      <EnumCheckboxGroup
-        options={conditionEnums.afflictions}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.filter.afflictionCondCode}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {afflictionCondCode: newValue}})}
-      />
-      <SectionSubTitle
-        title={t((t) => t.game.skillAtk.name.filterOther)}
-        description={t((t) => t.game.skillAtk.desc.filterOther)}
-      />
-      <Form.Group className="mb-3 text-center">
-        <CheckboxInput
-          text={t((t) => t.game.skillAtk.name.filterSharedOnly)}
-          inputData={inputData}
-          setInputData={setInputData}
-          getValue={(inputData) => inputData.filter.sharedOnly}
-          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {filter: {sharedOnly: newValue}})}
-        />
-      </Form.Group>
-    </>
-  );
-};
diff --git a/src/components/elements/gameData/skillAtk/in/sections/other.tsx b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
index e551a3de..75b37809 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/other.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {NumericInput} from '../../../../common/input/numeric';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -11,27 +10,34 @@ export const SectionOther = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.other)}
-        description={t((t) => t.game.skillAtk.desc.other)}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.otherElementBonus)}
-        description={t((t) => t.game.skillAtk.desc.otherElementBonus)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.others.elemBonusPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {others: {elemBonusPct: newValue}}})}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.otherHp)}
-        description={t((t) => t.game.skillAtk.desc.otherHp)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.others.currentHpPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {others: {currentHpPct: newValue}}})}
-      />
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.other),
+          description: t((t) => t.game.skillAtk.desc.other),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.otherElementBonus),
+          description: t((t) => t.game.skillAtk.desc.otherElementBonus),
+          getValue: (inputData) => inputData.params.others.elemBonusPct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {others: {elemBonusPct: newValue}}})
+          ),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.otherHp),
+          description: t((t) => t.game.skillAtk.desc.otherHp),
+          getValue: (inputData) => inputData.params.others.currentHpPct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {others: {currentHpPct: newValue}}})
+          ),
+        },
+      ]}
+    />
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
index 727f7742..c0099f8c 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {NumericInput} from '../../../../common/input/numeric';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -11,27 +10,34 @@ export const SectionPunisher = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.punisher)}
-        description={t((t) => t.game.skillAtk.desc.punisher)}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.punisherBk)}
-        description={t((t) => t.game.skillAtk.desc.punisherBk)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.punishers.bkPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {punishers: {bkPct: newValue}}})}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.punisherOthers)}
-        description={t((t) => t.game.skillAtk.desc.punisherOthers)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.punishers.othersPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {punishers: {othersPct: newValue}}})}
-      />
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.punisher),
+          description: t((t) => t.game.skillAtk.desc.punisher),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.punisherBk),
+          description: t((t) => t.game.skillAtk.desc.punisherBk),
+          getValue: (inputData) => inputData.params.punishers.bkPct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {punishers: {bkPct: newValue}}})
+          ),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.otherHp),
+          description: t((t) => t.game.skillAtk.desc.otherHp),
+          getValue: (inputData) => inputData.params.others.currentHpPct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {others: {currentHpPct: newValue}}})
+          ),
+        },
+      ]}
+    />
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
index a30df25b..7cf48fa3 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
-import {CheckboxInput} from '../../../../common/check/item/checkbox';
-import {NumericInput} from '../../../../common/input/numeric';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -12,37 +10,38 @@ export const SectionSkill = ({inputData, setInputData}: SectionProps) => {
   const {t} = useI18n();
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.skill)}
-        description={t((t) => t.game.skillAtk.desc.skill)}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.skillPassive)}
-        description={t((t) => t.game.skillAtk.desc.skillPassive)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.skill.passivePct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {skill: {passivePct: newValue}}})}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.skillBuff)}
-        description={t((t) => t.game.skillAtk.desc.skillBuff)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.params.skill.buffPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {skill: {buffPct: newValue}}})}
-        maxValue={200}
-      />
-      <div className="text-center">
-        <CheckboxInput
-          text={t((t) => t.game.skillAtk.name.skillEnergized)}
-          inputData={inputData}
-          setInputData={setInputData}
-          getValue={(inputData) => inputData.params.skill.energized}
-          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {params: {skill: {energized: newValue}}})}
-        />
-      </div>
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.skill),
+          description: t((t) => t.game.skillAtk.desc.skill),
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.skillPassive),
+          description: t((t) => t.game.skillAtk.desc.skillPassive),
+          getValue: (inputData) => inputData.params.skill.passivePct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {params: {skill: {passivePct: newValue}}})
+          ),
+          maxValue: 200,
+        },
+        {
+          type: 'inputCheckGroup',
+          checkboxes: [
+            {
+              text: t((t) => t.game.skillAtk.name.skillEnergized),
+              getValue: (inputData) => inputData.params.skill.energized,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {params: {skill: {energized: newValue}}})
+              ),
+            },
+          ],
+        },
+      ]}
+    />
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/in/sections/target.tsx b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
index c764885e..a84b96e0 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/target.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
@@ -3,13 +3,8 @@ import React from 'react';
 import {ConditionCodes} from '../../../../../../const/gameData';
 import {useI18n} from '../../../../../../i18n/hook';
 import {getConditionName} from '../../../../../../utils/game/conditionName';
-import {EnumCheckboxGroup} from '../../../../common/check/enum/checkbox';
-import {EnumRadioGroup} from '../../../../common/check/enum/radio';
-import {RadioGroup} from '../../../../common/check/group/radio';
 import {CheckOption} from '../../../../common/check/types';
-import {NumericInput} from '../../../../common/input/numeric';
-import {SectionSubTitle} from '../../../elements/subTitle';
-import {SectionTitle} from '../../../elements/title';
+import {InputPanel} from '../../../../input/main';
 import {SectionProps, SectionPropsCondEnums} from '../props';
 import {overwriteInputData} from '../utils';
 
@@ -31,77 +26,89 @@ export const SectionTarget = ({
     .map((code) => ({text: getConditionName(code, t), code}));
 
   return (
-    <>
-      <SectionTitle
-        title={t((t) => t.game.skillAtk.name.target)}
-        description={t((t) => t.game.skillAtk.desc.target)}
-      />
-      <SectionSubTitle
-        title={t((t) => t.game.skillAtk.name.targetElement)}
-        description={t((t) => t.game.skillAtk.desc.targetElement)}
-      />
-      <EnumRadioGroup
-        options={conditionEnums.elements}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.target.elemCondCode}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {elemCondCode: newValue}})}
-        groupName="targetElement"
-      />
-      <SectionSubTitle
-        title={t((t) => t.game.skillAtk.name.targetAffliction)}
-        description={t((t) => t.game.skillAtk.desc.targetAffliction)}
-      />
-      <EnumCheckboxGroup
-        options={conditionEnums.afflictions}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.target.afflictionCodes}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {afflictionCodes: newValue}})}
-      />
-      <SectionSubTitle
-        title={t((t) => t.game.skillAtk.name.targetState.title)}
-        description={t((t) => t.game.skillAtk.desc.targetState.title)}
-      />
-      <div className="text-center mb-3">
-        <RadioGroup
-          options={stateLabels}
-          inputData={inputData}
-          setInputData={setInputData}
-          getValue={(inputData) => inputData.target.state}
-          getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {state: newValue}})}
-          getCheckOptionComparer={(option) => option.code}
-          groupName="targetState"
-        />
-      </div>
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.targetDefDown)}
-        description={t((t) => t.game.skillAtk.desc.targetDefDown)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.target.def.downPct}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {def: {downPct: newValue}}})}
-        minValue={0}
-        maxValue={50}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.targetDef)}
-        description={t((t) => t.game.skillAtk.desc.targetDef)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.target.def.base}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {def: {base: newValue}}})}
-        minValue={0.0001}
-      />
-      <NumericInput
-        title={t((t) => t.game.skillAtk.name.targetDefBk)}
-        description={t((t) => t.game.skillAtk.desc.targetDefBk)}
-        inputData={inputData}
-        setInputData={setInputData}
-        getValue={(inputData) => inputData.target.def.bkRate}
-        getUpdatedInputData={(newValue) => overwriteInputData(inputData, {target: {def: {bkRate: newValue}}})}
-        minValue={0.0001}
-      />
-    </>
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.name.target),
+          description: t((t) => t.game.skillAtk.desc.target),
+        },
+        {
+          type: 'subTitle',
+          title: t((t) => t.game.skillAtk.name.targetElement),
+          description: t((t) => t.game.skillAtk.desc.targetElement),
+        },
+        {
+          type: 'enumRadioGroup',
+          options: conditionEnums.elements,
+          getValue: (inputData) => inputData.target.elemCondCode,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {target: {elemCondCode: newValue}})
+          ),
+          groupName: 'targetElement',
+        },
+        {
+          type: 'subTitle',
+          title: t((t) => t.game.skillAtk.name.targetAffliction),
+          description: t((t) => t.game.skillAtk.desc.targetAffliction),
+        },
+        {
+          type: 'enumCheckGroup',
+          options: conditionEnums.afflictions,
+          getValue: (inputData) => inputData.target.afflictionCodes,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {target: {afflictionCodes: newValue}})
+          ),
+        },
+        {
+          type: 'subTitle',
+          title: t((t) => t.game.skillAtk.name.targetState.title),
+          description: t((t) => t.game.skillAtk.desc.targetState.title),
+        },
+        {
+          type: 'inputRadioGroup',
+          options: stateLabels,
+          getValue: (inputData) => inputData.target.state,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {target: {state: newValue}})
+          ),
+          getCheckOptionComparer: (option) => option.code,
+          groupName: 'targetState',
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.targetDefDown),
+          description: t((t) => t.game.skillAtk.desc.targetDefDown),
+          getValue: (inputData) => inputData.target.def.downPct,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {target: {def: {downPct: newValue}}})
+          ),
+          minValue: 0,
+          maxValue: 50,
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.targetDef),
+          description: t((t) => t.game.skillAtk.desc.targetDef),
+          getValue: (inputData) => inputData.target.def.base,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {target: {def: {base: newValue}}})
+          ),
+          minValue: 0.0001,
+        },
+        {
+          type: 'inputNumber',
+          title: t((t) => t.game.skillAtk.name.targetDefBk),
+          description: t((t) => t.game.skillAtk.desc.targetDefBk),
+          getValue: (inputData) => inputData.target.def.bkRate,
+          getUpdatedInputData: (newValue) => (
+            overwriteInputData(inputData, {target: {def: {bkRate: newValue}}})
+          ),
+          minValue: 0.0001,
+        },
+      ]}
+    />
   );
 };

From e60ab37b78e4abe72def3e82349af498f96bb5f4 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 03:22:38 -0500
Subject: [PATCH 26/61] IMP - Refactor input type definitions

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/gameData/ex/in/filter.tsx       | 4 ++--
 src/components/elements/gameData/props.ts               | 4 ----
 src/components/elements/gameData/skillAtk/in/params.tsx | 4 ++--
 src/components/elements/gameData/skillAtk/in/props.ts   | 4 ++--
 src/components/elements/input/types.ts                  | 2 +-
 5 files changed, 7 insertions(+), 11 deletions(-)
 delete mode 100644 src/components/elements/gameData/props.ts

diff --git a/src/components/elements/gameData/ex/in/filter.tsx b/src/components/elements/gameData/ex/in/filter.tsx
index 8e5201b1..f30e7b7b 100644
--- a/src/components/elements/gameData/ex/in/filter.tsx
+++ b/src/components/elements/gameData/ex/in/filter.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 import {ElementEnums, ExBuffParams} from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
 import {InputPanel} from '../../../input/main';
-import {InputSectionBaseProps} from '../../props';
+import {InputPanelCommonProps} from '../../../input/types';
 import {InputData} from './types';
 import {overwriteInputData} from './utils';
 
 
-type SectionProps = InputSectionBaseProps<InputData> & {
+type SectionProps = InputPanelCommonProps<InputData> & {
   elementEnums: ElementEnums,
   exBuffParams: ExBuffParams
 }
diff --git a/src/components/elements/gameData/props.ts b/src/components/elements/gameData/props.ts
deleted file mode 100644
index b44744f6..00000000
--- a/src/components/elements/gameData/props.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type InputSectionBaseProps<T> = {
-  inputData: T,
-  setInputData: (newData: T) => void,
-}
diff --git a/src/components/elements/gameData/skillAtk/in/params.tsx b/src/components/elements/gameData/skillAtk/in/params.tsx
index 6c865d77..002491af 100644
--- a/src/components/elements/gameData/skillAtk/in/params.tsx
+++ b/src/components/elements/gameData/skillAtk/in/params.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Collapse from 'react-bootstrap/Collapse';
 
 import {CategorizedConditionEnums} from '../../../../../api-def/resources';
-import {InputSectionBaseProps} from '../../props';
+import {InputPanelCommonProps} from '../../../input/types';
 import {SectionAtk} from './sections/atk';
 import {SectionBuff} from './sections/buff';
 import {SectionCrt} from './sections/crt';
@@ -16,7 +16,7 @@ import {InputSummary} from './summary';
 import {InputData} from './types';
 
 
-type InputParametersProps = InputSectionBaseProps<InputData> & {
+type InputParametersProps = InputPanelCommonProps<InputData> & {
   collapsed: boolean,
   conditionEnums: CategorizedConditionEnums,
 }
diff --git a/src/components/elements/gameData/skillAtk/in/props.ts b/src/components/elements/gameData/skillAtk/in/props.ts
index ca9ee8df..d42df0b2 100644
--- a/src/components/elements/gameData/skillAtk/in/props.ts
+++ b/src/components/elements/gameData/skillAtk/in/props.ts
@@ -1,9 +1,9 @@
 import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/resources';
-import {InputSectionBaseProps} from '../../props';
+import {InputPanelCommonProps} from '../../../input/types';
 import {InputData} from './types';
 
 
-export type SectionProps = InputSectionBaseProps<InputData>
+export type SectionProps = InputPanelCommonProps<InputData>
 
 export type SectionPropsCondEnums = SectionProps & {
   conditionEnums: CategorizedConditionEnums
diff --git a/src/components/elements/input/types.ts b/src/components/elements/input/types.ts
index 141e7207..6ce7a72a 100644
--- a/src/components/elements/input/types.ts
+++ b/src/components/elements/input/types.ts
@@ -57,7 +57,7 @@ export type InputEntry<E, E2 extends EnumEntry, T> =
 
 export type InputEntries<E, E2 extends EnumEntry, T> = Array<InputEntry<E, E2, T>>
 
-type InputPanelCommonProps<T> = {
+export type InputPanelCommonProps<T> = {
   inputData: T,
   setInputData: (newData: T) => void,
 }

From 270dd63f9b9e70d0289c3db76141535430c5c104 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 07:18:43 -0500
Subject: [PATCH 27/61] ADD - Input filter to select what to display (#156)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 pages/[lang]/skill/atk.tsx                    |  90 +---------
 .../elements/gameData/skillAtk/in/filter.tsx  |   6 +-
 .../elements/gameData/skillAtk/in/limit.tsx   |  73 ++++++++
 .../gameData/skillAtk/in/main.test.tsx        |  42 ++++-
 .../elements/gameData/skillAtk/in/main.tsx    |  51 +++---
 .../elements/gameData/skillAtk/in/props.ts    |  14 --
 .../gameData/skillAtk/in/sections/atk.tsx     |   2 +-
 .../gameData/skillAtk/in/sections/buff.tsx    |   2 +-
 .../gameData/skillAtk/in/sections/crt.tsx     |   2 +-
 .../gameData/skillAtk/in/sections/ex.tsx      |   2 +-
 .../gameData/skillAtk/in/sections/other.tsx   |   2 +-
 .../skillAtk/in/sections/punisher.tsx         |   2 +-
 .../gameData/skillAtk/in/sections/skill.tsx   |   2 +-
 .../gameData/skillAtk/in/sections/target.tsx  |   2 +-
 .../elements/gameData/skillAtk/in/types.ts    |  12 ++
 .../elements/gameData/skillAtk/in/utils.ts    |  23 ++-
 .../elements/gameData/skillAtk/main.test.tsx  | 164 ++++++++++++++++++
 .../elements/gameData/skillAtk/main.tsx       |  90 ++++++++++
 .../elements/gameData/skillAtk/out/entry.tsx  |  38 ++--
 src/i18n/translations/cht/translation.ts      |  15 ++
 src/i18n/translations/definition.ts           |  15 ++
 src/i18n/translations/en/translation.ts       |  15 ++
 src/i18n/translations/jp/translation.ts       |  15 ++
 23 files changed, 526 insertions(+), 153 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/in/limit.tsx
 delete mode 100644 src/components/elements/gameData/skillAtk/in/props.ts
 create mode 100644 src/components/elements/gameData/skillAtk/main.test.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/main.tsx

diff --git a/pages/[lang]/skill/atk.tsx b/pages/[lang]/skill/atk.tsx
index a6cd8617..08d0c4a1 100644
--- a/pages/[lang]/skill/atk.tsx
+++ b/pages/[lang]/skill/atk.tsx
@@ -1,92 +1,4 @@
-import React from 'react';
+import {AttackingSkillLookup} from '../../../src/components/elements/gameData/skillAtk/main';
 
-import Col from 'react-bootstrap/Col';
-import Row from 'react-bootstrap/Row';
-
-import {ConditionEnumMap} from '../../../src/api-def/resources/types/export/enums';
-import {ElementBonus, ElementBonusData} from '../../../src/api-def/resources/types/export/misc';
-import {AttackingSkillData} from '../../../src/api-def/resources/types/skillAtk';
-import {SkillIdentifierInfo} from '../../../src/api-def/resources/types/skillIdentifier';
-import {useFetchState, useFetchStateProcessed} from '../../../src/components/elements/common/fetch';
-import {AttackingSkillInput} from '../../../src/components/elements/gameData/skillAtk/in/main';
-import {InputData} from '../../../src/components/elements/gameData/skillAtk/in/types';
-import {AttackingSkillOutput} from '../../../src/components/elements/gameData/skillAtk/out/main';
-import {scrollRefToTop} from '../../../src/utils/scroll';
-import {GoogleAnalytics} from '../../../src/utils/services/ga';
-import {ResourceLoader} from '../../../src/utils/services/resources/loader';
-
-
-const AttackingSkillLookup = () => {
-  const [inputDataForward, setInputDataForward] = React.useState<InputData>();
-  const entryCol = React.useRef<HTMLDivElement>(null);
-
-  const {
-    fetchStatus: elementBonuses,
-    fetchFunction: fetchElementBonuses,
-  } = useFetchStateProcessed<ElementBonusData, ElementBonus>(
-    new ElementBonusData(),
-    ResourceLoader.getElementBonusData,
-    'Failed to fetch element bonus data.',
-    (response) => new ElementBonusData(response),
-  );
-  const {
-    fetchStatus: conditionEnums,
-    fetchFunction: fetchConditionEnums,
-  } = useFetchState<ConditionEnumMap>(
-    {},
-    ResourceLoader.getEnumAllConditions,
-    'Failed to fetch condition enums.',
-  );
-  const {
-    fetchStatus: skillIdentifiers,
-    fetchFunction: fetchSkillIdentifiers,
-  } = useFetchState<SkillIdentifierInfo>(
-    {},
-    ResourceLoader.getSkillIdentifierInfo,
-    'Failed to fetch skill identifiers.',
-  );
-  const {
-    fetchStatus: attackingSkillEntries,
-    fetchFunction: fetchAttackingSkillEntries,
-  } = useFetchState<Array<AttackingSkillData>>(
-    [],
-    ResourceLoader.getAttackingSkillEntries,
-    'Failed to fetch attacking skill entries.',
-  );
-
-  fetchElementBonuses();
-  fetchConditionEnums();
-  fetchSkillIdentifiers();
-  fetchAttackingSkillEntries();
-
-  React.useEffect(() => {
-    if (inputDataForward) {
-      scrollRefToTop(entryCol);
-    }
-  }, [inputDataForward]);
-
-  return (
-    <Row>
-      <Col lg={4} className="rounded bg-black-32 p-3 mb-3">
-        <AttackingSkillInput
-          onSearchRequested={(inputData: InputData) => () => {
-            GoogleAnalytics.damageCalc('search', inputData);
-
-            setInputDataForward(inputData);
-          }}
-        />
-      </Col>
-      <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
-        <AttackingSkillOutput
-          inputData={inputDataForward}
-          allConditionEnums={conditionEnums.data}
-          elementBonusData={elementBonuses.data}
-          skillIdentifierInfo={skillIdentifiers.data}
-          atkSkillEntries={attackingSkillEntries.data}
-        />
-      </Col>
-    </Row>
-  );
-};
 
 export default AttackingSkillLookup;
diff --git a/src/components/elements/gameData/skillAtk/in/filter.tsx b/src/components/elements/gameData/skillAtk/in/filter.tsx
index 27de8030..6b907085 100644
--- a/src/components/elements/gameData/skillAtk/in/filter.tsx
+++ b/src/components/elements/gameData/skillAtk/in/filter.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../i18n/hook';
 import {InputPanel} from '../../../input/main';
-import {
-  SectionProps,
-  SectionPropsCondEnums,
-  SectionPropsElemEnums,
-} from './props';
+import {SectionProps, SectionPropsCondEnums, SectionPropsElemEnums} from './types';
 import {overwriteInputData} from './utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/limit.tsx b/src/components/elements/gameData/skillAtk/in/limit.tsx
new file mode 100644
index 00000000..5ca4ad6d
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/in/limit.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {useI18n} from '../../../../../i18n/hook';
+import {InputPanel} from '../../../input/main';
+import {InputPanelCommonProps} from '../../../input/types';
+import {InputData} from './types';
+import {overwriteInputData} from './utils';
+
+
+export const DisplayItemPicker = ({inputData, setInputData}: InputPanelCommonProps<InputData>) => {
+  const {t} = useI18n();
+
+  return (
+    <InputPanel
+      inputData={inputData}
+      setInputData={setInputData}
+      inputEntries={[
+        {
+          type: 'title',
+          title: t((t) => t.game.skillAtk.display.title),
+          description: t((t) => t.game.skillAtk.display.desc),
+        },
+        {
+          type: 'inputCheckGroup',
+          checkboxes: [
+            {
+              text: t((t) => t.game.skillAtk.display.options.damageInfo),
+              getValue: (inputData) => inputData.display.damageInfo,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {display: {damageInfo: newValue}})
+              ),
+            },
+            {
+              text: t((t) => t.game.skillAtk.display.options.affliction),
+              getValue: (inputData) => inputData.display.affliction,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {display: {affliction: newValue}})
+              ),
+            },
+            {
+              text: t((t) => t.game.skillAtk.display.options.spInfo),
+              getValue: (inputData) => inputData.display.spInfo,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {display: {spInfo: newValue}})
+              ),
+            },
+            {
+              text: t((t) => t.game.skillAtk.display.options.actualDamage),
+              getValue: (inputData) => inputData.display.actualDamage,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {display: {actualDamage: newValue}})
+              ),
+            },
+            {
+              text: t((t) => t.game.skillAtk.display.options.damageDistribution),
+              getValue: (inputData) => inputData.display.damageDist,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {display: {damageDist: newValue}})
+              ),
+            },
+            {
+              text: t((t) => t.game.skillAtk.display.options.animationInfo),
+              getValue: (inputData) => inputData.display.animationInfo,
+              getUpdatedInputData: (newValue) => (
+                overwriteInputData(inputData, {display: {animationInfo: newValue}})
+              ),
+            },
+          ],
+        },
+      ]}
+    />
+  );
+};
diff --git a/src/components/elements/gameData/skillAtk/in/main.test.tsx b/src/components/elements/gameData/skillAtk/in/main.test.tsx
index 3c352c0b..21fbe623 100644
--- a/src/components/elements/gameData/skillAtk/in/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.test.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
-import {screen} from '@testing-library/react';
+import {screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import {renderReact} from '../../../../../../test/render/main';
 import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
 import {AttackingSkillInput} from './main';
+import {generateInputData, overwriteInputData} from './utils';
 
 
 describe('ATK skill input', () => {
@@ -24,6 +26,44 @@ describe('ATK skill input', () => {
     expect(inspireButton).not.toBeInTheDocument();
   });
 
+  it('cannot search if no info to display', async () => {
+    renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch}/>);
+
+    const displayDamageInfo = screen.getByText(translationEN.game.skillAtk.display.options.damageInfo);
+    const displaySpInfo = screen.getByText(translationEN.game.skillAtk.display.options.spInfo);
+    const displayAffliction = screen.getByText(
+      translationEN.game.skillAtk.display.options.affliction,
+      {selector: 'span'},
+    );
+    userEvent.click(displayDamageInfo);
+    userEvent.click(displaySpInfo);
+    userEvent.click(displayAffliction);
+
+    const searchButton = screen.getByText(translationEN.misc.search);
+    userEvent.click(searchButton);
+
+    const errorMessage = translationEN.game.skillAtk.error.noInfoToDisplay;
+    await waitFor(() => expect(screen.getByText(errorMessage)).toBeInTheDocument());
+    expect(fnOnSearch).not.toHaveBeenCalled();
+  });
+
+  it('sends correct items to display in input data', async () => {
+    renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch}/>);
+
+    const displayAffliction = screen.getByText(
+      translationEN.game.skillAtk.display.options.affliction,
+      {selector: 'span'},
+    );
+    userEvent.click(displayAffliction);
+
+    const searchButton = screen.getByText(translationEN.misc.search);
+    userEvent.click(searchButton);
+
+    expect(fnOnSearch).toHaveBeenCalledTimes(1);
+    expect(fnOnSearch)
+      .toHaveBeenLastCalledWith(overwriteInputData(generateInputData(), {display: {affliction: false}}));
+  });
+
   it.todo('expands');
 
   it.todo('uses correct input data to search after changes');
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 19976d57..3c530310 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -1,4 +1,4 @@
-import React, {MouseEvent} from 'react';
+import React from 'react';
 
 import Button from 'react-bootstrap/Button';
 
@@ -6,40 +6,36 @@ import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/re
 import {useI18n} from '../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
+import {CommonModal, ModalState} from '../../../common/modal';
 import {Filter} from './filter';
+import {DisplayItemPicker} from './limit';
 import {InputParameters} from './params';
 import {InputData} from './types';
-import {generateInputData} from './utils';
+import {generateInputData, validateInputData} from './utils';
 
 
 type InputProps = {
-  onSearchRequested: (inputData: InputData) => (event: MouseEvent<HTMLButtonElement>) => void,
+  onSearchRequested: (inputData: InputData) => void,
 }
 
 export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
-  const {t} = useI18n();
+  const {t, lang} = useI18n();
 
   const [collapsed, setCollapsed] = React.useState(true);
   const [inputData, setInputData] = React.useState<InputData>(generateInputData());
+  const [modalState, setModalState] = React.useState<ModalState>({
+    show: false,
+    title: '',
+    message: '',
+  });
 
-  const {
-    fetchStatus: conditionEnums,
-    fetchFunction: fetchConditionEnums,
-  } = useFetchState<CategorizedConditionEnums>(
-    {
-      afflictions: [],
-      elements: [],
-    },
+  const {fetchStatus: conditionEnums, fetchFunction: fetchConditionEnums} = useFetchState<CategorizedConditionEnums>(
+    {afflictions: [], elements: []},
     ResourceLoader.getEnumCategorizedConditions,
     'Failed to fetch the condition enums.',
   );
-  const {
-    fetchStatus: elemEnums,
-    fetchFunction: fetchElemEnums,
-  } = useFetchState<ElementEnums>(
-    {
-      elemental: [],
-    },
+  const {fetchStatus: elemEnums, fetchFunction: fetchElemEnums} = useFetchState<ElementEnums>(
+    {elemental: []},
     ResourceLoader.getEnumElements,
     'Failed to fetch the element enums.',
   );
@@ -49,6 +45,7 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
 
   return (
     <>
+      <CommonModal modalState={modalState} setModalState={setModalState}/>
       <Filter
         inputData={inputData}
         setInputData={setInputData}
@@ -56,11 +53,25 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
         elementEnums={elemEnums.data}
       />
       <hr/>
+      <DisplayItemPicker inputData={inputData} setInputData={setInputData}/>
+      <hr/>
       <div className="text-right">
         <Button variant="outline-primary" onClick={() => setCollapsed(!collapsed)} className="mr-2">
           {t((t) => t.game.skillAtk.collapse)}
         </Button>
-        <Button variant="outline-info" onClick={onSearchRequested(inputData)}>
+        <Button variant="outline-info" onClick={() => {
+          const isInputValid = validateInputData(
+            inputData,
+            lang,
+            (message) => setModalState({...modalState, show: true, message}),
+          );
+
+          if (!isInputValid) {
+            return;
+          }
+
+          onSearchRequested(inputData);
+        }}>
           {t((t) => t.misc.search)}
         </Button>
       </div>
diff --git a/src/components/elements/gameData/skillAtk/in/props.ts b/src/components/elements/gameData/skillAtk/in/props.ts
deleted file mode 100644
index d42df0b2..00000000
--- a/src/components/elements/gameData/skillAtk/in/props.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/resources';
-import {InputPanelCommonProps} from '../../../input/types';
-import {InputData} from './types';
-
-
-export type SectionProps = InputPanelCommonProps<InputData>
-
-export type SectionPropsCondEnums = SectionProps & {
-  conditionEnums: CategorizedConditionEnums
-};
-
-export type SectionPropsElemEnums = SectionProps & {
-  elementEnums: ElementEnums
-};
diff --git a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
index b47ba30a..324483dd 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps} from '../props';
+import {SectionProps} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
index ce120646..fe8831bc 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps} from '../props';
+import {SectionProps} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
index 55a13d59..34de9495 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps} from '../props';
+import {SectionProps} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
index 1bc8475c..7a57b75a 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps} from '../props';
+import {SectionProps} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sections/other.tsx b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
index 75b37809..5881ada0 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/other.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps} from '../props';
+import {SectionProps} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
index c0099f8c..83ce7183 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps} from '../props';
+import {SectionProps} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
index 7cf48fa3..3e5220e5 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps} from '../props';
+import {SectionProps} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/sections/target.tsx b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
index a84b96e0..3b0348e7 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/target.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
@@ -5,7 +5,7 @@ import {useI18n} from '../../../../../../i18n/hook';
 import {getConditionName} from '../../../../../../utils/game/conditionName';
 import {CheckOption} from '../../../../common/check/types';
 import {InputPanel} from '../../../../input/main';
-import {SectionProps, SectionPropsCondEnums} from '../props';
+import {SectionProps, SectionPropsCondEnums} from '../types';
 import {overwriteInputData} from '../utils';
 
 
diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index 8307e9d4..e3f8238b 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -1,4 +1,6 @@
+import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/resources/types/export/enums';
 import {ConditionCodes} from '../../../../../const/gameData';
+import {InputPanelCommonProps} from '../../../input/types';
 
 
 export type InputData = {
@@ -65,3 +67,13 @@ export type InputData = {
     animationInfo: boolean,
   }
 }
+
+export type SectionProps = InputPanelCommonProps<InputData>
+
+export type SectionPropsCondEnums = SectionProps & {
+  conditionEnums: CategorizedConditionEnums
+}
+
+export type SectionPropsElemEnums = SectionProps & {
+  elementEnums: ElementEnums
+}
diff --git a/src/components/elements/gameData/skillAtk/in/utils.ts b/src/components/elements/gameData/skillAtk/in/utils.ts
index a145c4e2..dc5f962e 100644
--- a/src/components/elements/gameData/skillAtk/in/utils.ts
+++ b/src/components/elements/gameData/skillAtk/in/utils.ts
@@ -1,4 +1,6 @@
+import {SupportedLanguages} from '../../../../../api-def/api/other/lang';
 import {ConditionCodes} from '../../../../../const/gameData';
+import {translations} from '../../../../../i18n/translations/main';
 import {DeepPartial} from '../../../../../utils/types';
 import {InputData} from './types';
 
@@ -121,12 +123,27 @@ export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData
     },
     display: {
       actualDamage: false,
-      damageInfo: false,
+      damageInfo: true,
       damageDist: false,
-      affliction: false,
-      spInfo: false,
+      affliction: true,
+      spInfo: true,
       animationInfo: false,
     },
   },
   overwrite || {},
 );
+
+export const validateInputData = (
+  inputData: InputData,
+  lang: SupportedLanguages,
+  onInvalid: (errorMessage: string) => void,
+) => {
+  const displayInfoCount = Object.values(inputData.display).filter((display) => display).length;
+
+  if (!displayInfoCount) {
+    onInvalid(translations[lang].game.skillAtk.error.noInfoToDisplay);
+    return false;
+  }
+
+  return true;
+};
diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
new file mode 100644
index 00000000..c6a3de70
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+
+import {screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {renderReact} from '../../../../../test/render/main';
+import {translation as translationEN} from '../../../../i18n/translations/en/translation';
+import {overwriteInputData} from './in/utils';
+import * as utils from './in/utils';
+import {AttackingSkillLookup} from './main';
+
+
+describe('ATK skill lookup', () => {
+  const inputDataTemplate = utils.generateInputData();
+
+  it('only display damage info', async () => {
+    jest.spyOn(utils, 'generateInputData').mockImplementation(() => (
+      overwriteInputData(
+        inputDataTemplate,
+        {
+          filter: {
+            afflictionCondCode: [109], // 109 for affliction condition code defined in the parser
+          },
+          display: {
+            damageInfo: true,
+            spInfo: false,
+            affliction: false,
+            actualDamage: false,
+            animationInfo: false,
+            damageDist: false,
+          },
+        },
+      )
+    ));
+
+    renderReact(() => <AttackingSkillLookup/>);
+
+    const searchButton = screen.getByText(translationEN.misc.search);
+    userEvent.click(searchButton);
+
+    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+    // Damage info from S!Julietta
+    expect(screen.getByText('2708%')).toBeInTheDocument();
+    expect(screen.getAllByText('3 HIT').length).toBe(2); // There are multiple 3 hit bog skills
+    // Actual damage from S!Julietta
+    expect(screen.queryByText('161,524')).not.toBeInTheDocument();
+    // Affliction from S!Julietta
+    expect(screen.queryByAltText('Bog')).not.toBeInTheDocument();
+    // Affliction from S!Julietta
+    expect(screen.queryByText('', {selector: 'svg > rect'})).not.toBeInTheDocument();
+  });
+
+  it('only display affliction', async () => {
+    jest.spyOn(utils, 'generateInputData').mockImplementation(() => (
+      overwriteInputData(
+        inputDataTemplate,
+        {
+          filter: {
+            afflictionCondCode: [109], // 109 for affliction condition code defined in the parser
+          },
+          display: {
+            damageInfo: false,
+            spInfo: false,
+            affliction: true,
+            actualDamage: false,
+            animationInfo: false,
+            damageDist: false,
+          },
+        },
+      )
+    ));
+
+    renderReact(() => <AttackingSkillLookup/>);
+
+    const searchButton = screen.getByText(translationEN.misc.search);
+    userEvent.click(searchButton);
+
+    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+    // Damage info from S!Julietta
+    expect(screen.queryByText('2708%')).not.toBeInTheDocument();
+    expect(screen.queryAllByText('3 HIT').length).toBe(0);
+    // Actual damage from S!Julietta
+    expect(screen.queryByText('161,524')).not.toBeInTheDocument();
+    // Affliction from S!Julietta
+    await waitFor(() => expect(screen.getByAltText('Bog')).toBeInTheDocument());
+    // Affliction from S!Julietta
+    expect(screen.queryByText('', {selector: 'svg > rect'})).not.toBeInTheDocument();
+  });
+
+  it('only display damage distribution', async () => {
+    jest.spyOn(utils, 'generateInputData').mockImplementation(() => (
+      overwriteInputData(
+        inputDataTemplate,
+        {
+          filter: {
+            afflictionCondCode: [109], // 109 for affliction condition code defined in the parser
+          },
+          display: {
+            damageInfo: false,
+            spInfo: false,
+            affliction: false,
+            actualDamage: false,
+            animationInfo: false,
+            damageDist: true,
+          },
+        },
+      )
+    ));
+
+    renderReact(() => <AttackingSkillLookup/>);
+
+    const searchButton = screen.getByText(translationEN.misc.search);
+    userEvent.click(searchButton);
+
+    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+    // Damage info from S!Julietta
+    expect(screen.queryByText('2708%')).not.toBeInTheDocument();
+    expect(screen.queryAllByText('3 HIT').length).toBe(0);
+    // Actual damage from S!Julietta
+    expect(screen.queryByText('161,524')).not.toBeInTheDocument();
+    // Affliction from S!Julietta
+    expect(screen.queryByAltText('Bog')).not.toBeInTheDocument();
+    // Affliction from S!Julietta
+    expect(screen.getAllByText('', {selector: 'svg > rect'}).length).toBeGreaterThan(0);
+  });
+
+  it('only display actual damage', async () => {
+    jest.spyOn(utils, 'generateInputData').mockImplementation(() => (
+      overwriteInputData(
+        inputDataTemplate,
+        {
+          filter: {
+            afflictionCondCode: [109], // 109 for affliction condition code defined in the parser
+          },
+          display: {
+            damageInfo: false,
+            spInfo: false,
+            affliction: false,
+            actualDamage: true,
+            animationInfo: false,
+            damageDist: false,
+          },
+        },
+      )
+    ));
+
+    renderReact(() => <AttackingSkillLookup/>);
+
+    const searchButton = screen.getByText(translationEN.misc.search);
+    userEvent.click(searchButton);
+
+    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+
+    // Damage info from S!Julietta
+    expect(screen.queryByText('2708%')).not.toBeInTheDocument();
+    expect(screen.queryAllByText('3 HIT').length).toBe(0);
+    // Actual damage from S!Julietta
+    expect(screen.getByText('161,524')).toBeInTheDocument();
+    // Affliction from S!Julietta
+    expect(screen.queryByAltText('Bog')).not.toBeInTheDocument();
+    // Affliction from S!Julietta
+    expect(screen.queryByText('', {selector: 'svg > rect'})).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
new file mode 100644
index 00000000..9609675d
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+
+import {ConditionEnumMap} from '../../../../api-def/resources/types/export/enums';
+import {ElementBonus, ElementBonusData} from '../../../../api-def/resources/types/export/misc';
+import {AttackingSkillData} from '../../../../api-def/resources/types/skillAtk';
+import {SkillIdentifierInfo} from '../../../../api-def/resources/types/skillIdentifier';
+import {scrollRefToTop} from '../../../../utils/scroll';
+import {GoogleAnalytics} from '../../../../utils/services/ga';
+import {ResourceLoader} from '../../../../utils/services/resources/loader';
+import {useFetchState, useFetchStateProcessed} from '../../common/fetch';
+import {AttackingSkillInput} from './in/main';
+import {InputData} from './in/types';
+import {AttackingSkillOutput} from './out/main';
+
+
+export const AttackingSkillLookup = () => {
+  const [inputDataForward, setInputDataForward] = React.useState<InputData>();
+  const entryCol = React.useRef<HTMLDivElement>(null);
+
+  const {
+    fetchStatus: elementBonuses,
+    fetchFunction: fetchElementBonuses,
+  } = useFetchStateProcessed<ElementBonusData, ElementBonus>(
+    new ElementBonusData(),
+    ResourceLoader.getElementBonusData,
+    'Failed to fetch element bonus data.',
+    (response) => new ElementBonusData(response),
+  );
+  const {
+    fetchStatus: conditionEnums,
+    fetchFunction: fetchConditionEnums,
+  } = useFetchState<ConditionEnumMap>(
+    {},
+    ResourceLoader.getEnumAllConditions,
+    'Failed to fetch condition enums.',
+  );
+  const {
+    fetchStatus: skillIdentifiers,
+    fetchFunction: fetchSkillIdentifiers,
+  } = useFetchState<SkillIdentifierInfo>(
+    {},
+    ResourceLoader.getSkillIdentifierInfo,
+    'Failed to fetch skill identifiers.',
+  );
+  const {
+    fetchStatus: attackingSkillEntries,
+    fetchFunction: fetchAttackingSkillEntries,
+  } = useFetchState<Array<AttackingSkillData>>(
+    [],
+    ResourceLoader.getAttackingSkillEntries,
+    'Failed to fetch attacking skill entries.',
+  );
+
+  fetchElementBonuses();
+  fetchConditionEnums();
+  fetchSkillIdentifiers();
+  fetchAttackingSkillEntries();
+
+  React.useEffect(() => {
+    if (inputDataForward) {
+      scrollRefToTop(entryCol);
+    }
+  }, [inputDataForward]);
+
+  return (
+    <Row>
+      <Col lg={4} className="rounded bg-black-32 p-3 mb-3">
+        <AttackingSkillInput
+          onSearchRequested={(inputData: InputData) => {
+            GoogleAnalytics.damageCalc('search', inputData);
+
+            setInputDataForward(inputData);
+          }}
+        />
+      </Col>
+      <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
+        <AttackingSkillOutput
+          inputData={inputDataForward}
+          allConditionEnums={conditionEnums.data}
+          elementBonusData={elementBonuses.data}
+          skillIdentifierInfo={skillIdentifiers.data}
+          atkSkillEntries={attackingSkillEntries.data}
+        />
+      </Col>
+    </Row>
+  );
+};
diff --git a/src/components/elements/gameData/skillAtk/out/entry.tsx b/src/components/elements/gameData/skillAtk/out/entry.tsx
index 23fffd45..62f15d21 100644
--- a/src/components/elements/gameData/skillAtk/out/entry.tsx
+++ b/src/components/elements/gameData/skillAtk/out/entry.tsx
@@ -45,21 +45,33 @@ export const AttackingSkillEntry = ({
         <Col className="my-auto">
           <SectionSkillName atkSkillEntry={atkSkillEntry} skillIdentifierInfo={skillIdentifierInfo}/>
         </Col>
-        <Col xs="auto" sm="auto" className="text-right my-auto">
-          <SectionSkillInfo atkSkillEntry={atkSkillEntry} calculatedData={calculatedData}/>
-        </Col>
-        <Col className="text-center my-auto" lg={5}>
-          <SectionSkillDamage calculatedData={calculatedData}/>
-          <ConditionBadges conditionCodes={calculatedData.skillEntry.condition} conditionEnums={conditionEnumMap}/>
-        </Col>
-      </Row>
-      <Row className="text-center">
-        <Col>
-          <DistributionBar data={atkSkillEntry.skill.modsMax} padding={0} height="0.5rem" displayText={false}/>
-        </Col>
+        {
+          inputData.display.damageInfo &&
+          <Col xs="auto" sm="auto" className="text-right my-auto">
+            <SectionSkillInfo atkSkillEntry={atkSkillEntry} calculatedData={calculatedData}/>
+          </Col>
+        }
+        {
+          inputData.display.actualDamage &&
+          <Col className="text-center my-auto" lg={5}>
+            <SectionSkillDamage calculatedData={calculatedData}/>
+            <ConditionBadges conditionCodes={calculatedData.skillEntry.condition} conditionEnums={conditionEnumMap}/>
+          </Col>
+        }
       </Row>
+      {
+        inputData.display.damageDist &&
+        <Row className="text-center">
+          <Col>
+            <DistributionBar data={atkSkillEntry.skill.modsMax} padding={0} height="0.5rem" displayText={false}/>
+          </Col>
+        </Row>
+      }
       <Row>
-        <SectionAffliction atkSkillEntry={atkSkillEntry}/>
+        {
+          inputData.display.affliction &&
+          <SectionAffliction atkSkillEntry={atkSkillEntry}/>
+        }
         <SectionBadges atkSkillEntry={atkSkillEntry}/>
       </Row>
     </div>
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 09363212..82646d9c 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -129,6 +129,18 @@ export const translation: TranslationStruct = {
           '注意，這邊的條件篩選指的是技能本身所帶的異常狀態，並非異常特攻。',
         filterOther: '其他篩選條件。如果有勾選限定共享技，則篩選、計算時，只會考慮、顯示共享技能。',
       },
+      display: {
+        title: '顯示資訊',
+        desc: '選擇想要在結果中看到的資訊。',
+        options: {
+          actualDamage: '實際傷害',
+          damageInfo: '傷害資訊',
+          damageDistribution: '傷害分布',
+          affliction: '異常狀態',
+          spInfo: 'SP 資訊',
+          animationInfo: '動畫資訊',
+        },
+      },
       entry: {
         notCancelable: '此技能無法取消。',
         cancelable: '此技能可於 {{cancelTime}} 秒後取消。',
@@ -177,6 +189,9 @@ export const translation: TranslationStruct = {
         otherData: '屬性增傷 +{{otherElemBonusPct}}% / HP {{otherCurrentHpPct}}%',
       },
       collapse: '摺疊/展開',
+      error: {
+        noInfoToDisplay: '請選擇至少一項顯示資訊。',
+      },
     },
     tools: {
       titleSelf: '遊戲工具',
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index be23bd93..785a02cd 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -126,6 +126,18 @@ export type TranslationStruct = {
         filterAffliction: string,
         filterOther: string,
       },
+      display: {
+        title: string,
+        desc: string,
+        options: {
+          actualDamage: string,
+          damageInfo: string,
+          damageDistribution: string,
+          affliction: string,
+          spInfo: string,
+          animationInfo: string,
+        },
+      }
       entry: {
         notCancelable: string,
         cancelable: string,
@@ -174,6 +186,9 @@ export type TranslationStruct = {
         otherData: string,
       },
       collapse: string,
+      error: {
+        noInfoToDisplay: string,
+      },
     },
     tools: {
       titleSelf: string,
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 9b7b339b..4783528c 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -152,6 +152,18 @@ export const translation: TranslationStruct = {
           'If Shared Skill Only is selected, then when filtering and calculating, ' +
           'only shared skills will be considered and displayed.',
       },
+      display: {
+        title: 'Info to Display',
+        desc: 'Info to display in the results.',
+        options: {
+          actualDamage: 'Actual Damage',
+          damageInfo: 'Damage Info',
+          damageDistribution: 'Damage Spread',
+          affliction: 'Affliction',
+          spInfo: 'SP Info',
+          animationInfo: 'Animation',
+        },
+      },
       entry: {
         notCancelable: 'This skill is not cancelable',
         cancelable: 'This skill can be canceled after {{cancelTime}} seconds.',
@@ -201,6 +213,9 @@ export const translation: TranslationStruct = {
         otherData: 'Element +{{otherElemBonusPct}}% / HP {{otherCurrentHpPct}}%',
       },
       collapse: 'Collapse/Expand',
+      error: {
+        noInfoToDisplay: 'Please select at least 1 info to display.',
+      },
     },
     tools: {
       titleSelf: 'Game Tools',
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 8572ea02..e741e862 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -128,6 +128,18 @@ export const translation: TranslationStruct = {
           '※状態異常付与できるスキルを検索する機能です。(状態異常特効を持つスキルを検索しているのではありません。)',
         filterOther: 'その他フィルタリング条件。シェアスキルのみ検索可能です。',
       },
+      display: {
+        title: '顯示資訊',
+        desc: '選擇想要在結果中看到的資訊。',
+        options: {
+          actualDamage: '實際傷害',
+          damageInfo: '傷害資訊',
+          damageDistribution: '傷害分布',
+          affliction: '異常狀態',
+          spInfo: 'SP 資訊',
+          animationInfo: '動畫資訊',
+        },
+      },
       entry: {
         notCancelable: 'モーションキャンセル不可',
         cancelable: 'モーション発動 {{cancelTime}} 秒後キャンセル可能',
@@ -176,6 +188,9 @@ export const translation: TranslationStruct = {
         otherData: '属性ダメ +{{otherElemBonusPct}}% / HP {{otherCurrentHpPct}}%',
       },
       collapse: '展開 / 折り畳み',
+      error: {
+        noInfoToDisplay: 'Please select at least 1 info to display.',
+      },
     },
     tools: {
       titleSelf: '他のツール',

From 0edc3d1175c9394763d51380baf867bfd5732748 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 13:11:31 -0500
Subject: [PATCH 28/61] ADD - Utils to reverse lookup enum entry

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../skillAtk/out/sections/affliction.tsx      |  9 +++-
 src/utils/services/resources/utils.test.ts    | 41 +++++++++++++++++++
 src/utils/services/resources/utils.ts         |  9 ++++
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/services/resources/utils.test.ts
 create mode 100644 src/utils/services/resources/utils.ts

diff --git a/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
index 9f5d0a7d..bd963027 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
@@ -6,6 +6,7 @@ import Col from 'react-bootstrap/Col';
 import {DepotPaths, AfflictionUnit, StatusEnums} from '../../../../../../api-def/resources';
 import {useI18n} from '../../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../../utils/services/resources/loader';
+import {reverseEnumTransLookup} from '../../../../../../utils/services/resources/utils';
 import {useFetchState} from '../../../../common/fetch';
 import {ImageWithOverlay} from '../../../../common/image';
 import {SectionProps} from '../props';
@@ -19,8 +20,12 @@ type AfflictionEntryProps = {
 const AfflictionEntry = ({affliction, statusEnums}: AfflictionEntryProps) => {
   const {t, lang} = useI18n();
 
-  const afflictionName = statusEnums.status.find((entry) => entry.code === affliction.statusCode)?.trans[lang] ||
-    affliction.statusIcon;
+  const afflictionName = reverseEnumTransLookup(
+    statusEnums.status,
+    affliction.statusCode,
+    lang,
+    affliction.statusCode.toString(),
+  );
 
   // <div> for line separation
   return (
diff --git a/src/utils/services/resources/utils.test.ts b/src/utils/services/resources/utils.test.ts
new file mode 100644
index 00000000..8c5e706b
--- /dev/null
+++ b/src/utils/services/resources/utils.test.ts
@@ -0,0 +1,41 @@
+import {SupportedLanguages} from '../../../api-def/api/other/lang';
+import {EnumEntry} from '../../../api-def/resources';
+import {reverseEnumTransLookup} from './utils';
+
+
+describe('Resource utils', () => {
+  const enums: Array<EnumEntry> = [
+    {
+      name: '#1',
+      code: 1,
+      imagePath: '/1.jpg',
+      trans: {
+        [SupportedLanguages.CHT]: 'CHT 1',
+        [SupportedLanguages.EN]: 'EN 1',
+        [SupportedLanguages.JP]: 'JP 1',
+      },
+    },
+    {
+      name: '#2',
+      code: 2,
+      imagePath: '/2.jpg',
+      trans: {
+        [SupportedLanguages.CHT]: 'CHT 2',
+        [SupportedLanguages.EN]: 'EN 2',
+        [SupportedLanguages.JP]: 'JP 2',
+      },
+    },
+  ];
+
+  it('returns correct translation of the found enum entry', async () => {
+    const foundEnum = reverseEnumTransLookup(enums, 1, SupportedLanguages.EN, 'not found');
+
+    expect(foundEnum).toBe('EN 1');
+  });
+
+  it('returns the fallback name of the enum if not found', async () => {
+    const foundEnum = reverseEnumTransLookup(enums, 3, SupportedLanguages.EN, 'not found');
+
+    expect(foundEnum).toBe('not found');
+  });
+});
diff --git a/src/utils/services/resources/utils.ts b/src/utils/services/resources/utils.ts
new file mode 100644
index 00000000..a5619aca
--- /dev/null
+++ b/src/utils/services/resources/utils.ts
@@ -0,0 +1,9 @@
+import {SupportedLanguages} from '../../../api-def/api/other/lang';
+import {EnumEntry} from '../../../api-def/resources';
+
+
+export const reverseEnumTransLookup = (
+  enums: Array<EnumEntry>, targetCode: number, lang: SupportedLanguages, onNotFound: string,
+): string => {
+  return enums.find((entry) => entry.code === targetCode)?.trans[lang] || onNotFound;
+};

From 216a4dd4475e71e4ef666856645cc883765a813e Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 13:12:29 -0500
Subject: [PATCH 29/61] ADD - Resource loader to load skill enums

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/api-def                            |  2 +-
 src/utils/services/resources/loader.ts | 12 ++++++++++++
 test/data/resources                    |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/api-def b/src/api-def
index 636f654b..3fc149a2 160000
--- a/src/api-def
+++ b/src/api-def
@@ -1 +1 @@
-Subproject commit 636f654be6ef92d31b6f7a1c3055d98781463ae7
+Subproject commit 3fc149a202dee3d57f084fdef0375ab68a436b3e
diff --git a/src/utils/services/resources/loader.ts b/src/utils/services/resources/loader.ts
index 9b59e491..351c1d1a 100644
--- a/src/utils/services/resources/loader.ts
+++ b/src/utils/services/resources/loader.ts
@@ -10,6 +10,7 @@ import {
   ElementEnums,
   ExBuffParams,
   ResourcePaths,
+  SkillEnums,
   SkillIdentifierInfo,
   StatusEnums,
   WeaponTypeEnums,
@@ -120,6 +121,17 @@ export class ResourceLoader {
     return ResourceLoader.fetchResources<ExBuffParams>(ResourcePaths.ENUMS_EX_PARAMS, callback);
   }
 
+  /**
+   * Get the skill enums.
+   *
+   * @function
+   * @param {function?} callback function to be called after fetching the resource
+   * @return {Promise<ExBuffParams>} promise after the callback
+   */
+  static getEnumSkill(callback?: (skillEnums: SkillEnums) => void): Promise<SkillEnums> {
+    return ResourceLoader.fetchResources<SkillEnums>(ResourcePaths.ENUMS_SKILL, callback);
+  }
+
   // endregion
 
   // region Skill data
diff --git a/test/data/resources b/test/data/resources
index 10ff02bb..529c6514 160000
--- a/test/data/resources
+++ b/test/data/resources
@@ -1 +1 @@
-Subproject commit 10ff02bb24df56eda2160163966f63f73cb24170
+Subproject commit 529c65142d2d569c88671f4f44d985abd5547af2

From b49b908aeb99f4d8d9d478147f6d67aa75146645 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Sun, 27 Jun 2021 13:12:47 -0500
Subject: [PATCH 30/61] IMP - Reduces lookup result count from 120 to 50

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/const/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/const/config.ts b/src/const/config.ts
index 5487ec28..18e48f5c 100644
--- a/src/const/config.ts
+++ b/src/const/config.ts
@@ -1 +1 @@
-export const PAGE_ATK_SKILL_MAX_ENTRIES = 120;
+export const PAGE_ATK_SKILL_MAX_ENTRIES = 50;

From adcd072bad8ea7adc01567d9bc2d09f6e0ee282d Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 03:17:56 -0500
Subject: [PATCH 31/61] ADD - ATK skill list hit timing / cancel info (#157 /
 #158)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/ex/out/main.tsx         |   2 +-
 .../elements/gameData/skillAtk/main.tsx       |  11 +-
 .../elements/gameData/skillAtk/out/entry.tsx  |  12 +-
 .../elements/gameData/skillAtk/out/main.tsx   |  27 ++-
 .../elements/gameData/skillAtk/out/props.ts   |   9 +-
 .../skillAtk/out/sections/affliction.test.tsx |  50 +---
 .../out/sections/animation.module.css         |  28 +++
 .../out/sections/animation.module.css.map     |   1 +
 .../out/sections/animation.module.scss        |  42 ++++
 .../skillAtk/out/sections/animation.test.tsx  | 224 ++++++++++++++++++
 .../skillAtk/out/sections/animation.tsx       | 134 +++++++++++
 src/components/elements/gameData/utils.tsx    |  49 ----
 .../elements/gameData/warnings/animation.tsx  |  16 ++
 .../elements/gameData/warnings/overLength.tsx |  38 +++
 src/i18n/translations/cht/translation.ts      |  13 +
 src/i18n/translations/definition.ts           |  13 +
 src/i18n/translations/en/translation.ts       |  15 +-
 src/i18n/translations/jp/translation.ts       |  13 +
 src/utils/game.ts                             |   2 -
 src/utils/game/damage.test.ts                 |  40 +---
 test/data/mock/skill.ts                       |  52 ++++
 21 files changed, 633 insertions(+), 158 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/animation.module.css
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/animation.module.scss
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/animation.test.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/animation.tsx
 delete mode 100644 src/components/elements/gameData/utils.tsx
 create mode 100644 src/components/elements/gameData/warnings/animation.tsx
 create mode 100644 src/components/elements/gameData/warnings/overLength.tsx
 delete mode 100644 src/utils/game.ts
 create mode 100644 test/data/mock/skill.ts

diff --git a/src/components/elements/gameData/ex/out/main.tsx b/src/components/elements/gameData/ex/out/main.tsx
index 33c992b2..b1b9dc49 100644
--- a/src/components/elements/gameData/ex/out/main.tsx
+++ b/src/components/elements/gameData/ex/out/main.tsx
@@ -4,7 +4,7 @@ import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
 import {CharaExAbilityDataEntry, ConditionEnumMap} from '../../../../../api-def/resources';
-import {overLengthWarningCheck} from '../../utils';
+import {overLengthWarningCheck} from '../../warnings/overLength';
 import {InputData} from '../in/types';
 import {ExAbilityEntry} from './entry';
 import {filterExAbilityData} from './utils';
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 9609675d..268bb6c4 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {ConditionEnumMap} from '../../../../api-def/resources/types/export/enums';
+import {ConditionEnumMap, SkillEnums} from '../../../../api-def/resources/types/export/enums';
 import {ElementBonus, ElementBonusData} from '../../../../api-def/resources/types/export/misc';
 import {AttackingSkillData} from '../../../../api-def/resources/types/skillAtk';
 import {SkillIdentifierInfo} from '../../../../api-def/resources/types/skillIdentifier';
@@ -53,11 +53,17 @@ export const AttackingSkillLookup = () => {
     ResourceLoader.getAttackingSkillEntries,
     'Failed to fetch attacking skill entries.',
   );
+  const {fetchStatus: skillEnums, fetchFunction: fetchSkillEnums} = useFetchState<SkillEnums>(
+    {cancel: []},
+    ResourceLoader.getEnumSkill,
+    'Failed to fetch skill enums.',
+  );
 
   fetchElementBonuses();
   fetchConditionEnums();
   fetchSkillIdentifiers();
   fetchAttackingSkillEntries();
+  fetchSkillEnums();
 
   React.useEffect(() => {
     if (inputDataForward) {
@@ -79,10 +85,11 @@ export const AttackingSkillLookup = () => {
       <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
         <AttackingSkillOutput
           inputData={inputDataForward}
-          allConditionEnums={conditionEnums.data}
+          conditionEnumMap={conditionEnums.data}
           elementBonusData={elementBonuses.data}
           skillIdentifierInfo={skillIdentifiers.data}
           atkSkillEntries={attackingSkillEntries.data}
+          skillEnums={skillEnums.data}
         />
       </Col>
     </Row>
diff --git a/src/components/elements/gameData/skillAtk/out/entry.tsx b/src/components/elements/gameData/skillAtk/out/entry.tsx
index 62f15d21..b865bf86 100644
--- a/src/components/elements/gameData/skillAtk/out/entry.tsx
+++ b/src/components/elements/gameData/skillAtk/out/entry.tsx
@@ -3,12 +3,13 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {ConditionEnumMap, SkillIdentifierInfo} from '../../../../../api-def/resources';
 import {DistributionBar} from '../../../charts';
 import {ConditionBadges} from '../../elements/conditionBadges';
 import {InputData} from '../in/types';
 import {CalculatedData} from './main';
+import {EnumDataPack} from './props';
 import {SectionAffliction} from './sections/affliction';
+import {SectionAnimation} from './sections/animation';
 import {SectionBadges} from './sections/badges';
 import {SectionImageIcon} from './sections/icon';
 import {SectionSkillDamage} from './sections/skillDamage';
@@ -16,11 +17,9 @@ import {SectionSkillInfo} from './sections/skillInfo';
 import {SectionSkillName} from './sections/skillName';
 
 
-type SkillEntryProps = {
+type SkillEntryProps = EnumDataPack & {
   inputData?: InputData,
   calculatedData: CalculatedData,
-  conditionEnumMap: ConditionEnumMap,
-  skillIdentifierInfo: SkillIdentifierInfo,
 }
 
 export const AttackingSkillEntry = ({
@@ -28,6 +27,7 @@ export const AttackingSkillEntry = ({
   calculatedData,
   conditionEnumMap,
   skillIdentifierInfo,
+  skillEnums,
 }: SkillEntryProps) => {
   const atkSkillEntry = calculatedData.skillEntry;
 
@@ -74,6 +74,10 @@ export const AttackingSkillEntry = ({
         }
         <SectionBadges atkSkillEntry={atkSkillEntry}/>
       </Row>
+      {
+        inputData.display.animationInfo &&
+        <SectionAnimation atkSkillEntry={atkSkillEntry} skillEnums={skillEnums} conditionEnumMap={conditionEnumMap}/>
+      }
     </div>
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index d7449f2f..1e838f5f 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
 
-import {
-  AttackingSkillData,
-  ConditionEnumMap,
-  ElementBonusData,
-  SkillIdentifierInfo,
-} from '../../../../../api-def/resources';
-import {calculateDamage, CalculateDamageReturn} from '../../../../../utils/game';
-import {overLengthWarningCheck} from '../../utils';
+import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
+import {calculateDamage, CalculateDamageReturn} from '../../../../../utils/game/damage';
+import {AnimationInfoWarning} from '../../warnings/animation';
+import {overLengthWarningCheck} from '../../warnings/overLength';
 import {InputData} from '../in/types';
 import {AttackingSkillEntry} from './entry';
+import {EnumDataPack} from './props';
 import {filterSkillEntries} from './utils';
 
 
@@ -18,20 +15,19 @@ export type CalculatedData = {
   skillEntry: AttackingSkillData,
 }
 
-type OutputProps = {
+type OutputProps = EnumDataPack & {
   inputData?: InputData,
   elementBonusData: ElementBonusData,
   atkSkillEntries: Array<AttackingSkillData>,
-  allConditionEnums: ConditionEnumMap,
-  skillIdentifierInfo: SkillIdentifierInfo,
 }
 
 export const AttackingSkillOutput = ({
   inputData,
   elementBonusData,
   atkSkillEntries,
-  allConditionEnums,
+  conditionEnumMap,
   skillIdentifierInfo,
+  skillEnums,
 }: OutputProps) => {
   // Early termination if no input
   if (!inputData) {
@@ -66,6 +62,10 @@ export const AttackingSkillOutput = ({
   if (warning !== null) {
     entries.push(warning);
   }
+  // Check if animation info warning should be displayed
+  if (inputData.display.animationInfo) {
+    entries.push(<AnimationInfoWarning/>);
+  }
 
   // Add transformed entries
   entries.push(
@@ -75,8 +75,9 @@ export const AttackingSkillOutput = ({
           key={index}
           inputData={inputData}
           calculatedData={calculatedData}
-          conditionEnumMap={allConditionEnums}
+          conditionEnumMap={conditionEnumMap}
           skillIdentifierInfo={skillIdentifierInfo}
+          skillEnums={skillEnums}
         />
       )),
   );
diff --git a/src/components/elements/gameData/skillAtk/out/props.ts b/src/components/elements/gameData/skillAtk/out/props.ts
index 9763db96..38f06622 100644
--- a/src/components/elements/gameData/skillAtk/out/props.ts
+++ b/src/components/elements/gameData/skillAtk/out/props.ts
@@ -1,5 +1,12 @@
-import {AttackingSkillData} from '../../../../../api-def/resources';
+import {AttackingSkillData, ConditionEnumMap, SkillEnums, SkillIdentifierInfo} from '../../../../../api-def/resources';
+
 
 export type SectionProps = {
   atkSkillEntry: AttackingSkillData
 }
+
+export type EnumDataPack = {
+  conditionEnumMap: ConditionEnumMap,
+  skillIdentifierInfo: SkillIdentifierInfo,
+  skillEnums: SkillEnums,
+}
diff --git a/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx b/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
index 1ce886f4..84838200 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
@@ -2,59 +2,15 @@ import React from 'react';
 
 import {screen, waitFor} from '@testing-library/react';
 
+import {generateAttackingSkillEntry} from '../../../../../../../test/data/mock/skill';
 import {renderReact} from '../../../../../../../test/render/main';
-import {SupportedLanguages} from '../../../../../../api-def/api';
-import {AttackingSkillData, DepotPaths, Element} from '../../../../../../api-def/resources';
+import {AttackingSkillData, DepotPaths} from '../../../../../../api-def/resources';
 import {translation as translationEN} from '../../../../../../i18n/translations/en/translation';
 import {SectionAffliction} from './affliction';
 
 
 describe('Affliction section', () => {
-  const templateEntry: AttackingSkillData = {
-    chara: {
-      element: Element.FLAME,
-      iconName: 'icon',
-      name: {
-        [SupportedLanguages.CHT]: 'CHT name',
-        [SupportedLanguages.EN]: 'EN name',
-        [SupportedLanguages.JP]: 'JP name',
-      },
-    },
-    condition: [],
-    skill: {
-      afflictions: [{
-        actionTime: 1.5,
-        duration: 15,
-        probabilityPct: 120,
-        stackable: true,
-        statusCode: 5,
-        statusConditionCode: 0,
-        statusIcon: 'afflictionIcon',
-      }],
-      buffCountBoost: [],
-      buffZoneBoost: {
-        self: 0,
-        ally: 0,
-      },
-      crisisMax: [],
-      dispelMax: false,
-      dispelTimingMax: [],
-      hitsMax: 0,
-      identifiers: ['s1'],
-      internalId: 109501011,
-      modsMax: [7],
-      name: {
-        [SupportedLanguages.CHT]: 'CHT skill',
-        [SupportedLanguages.EN]: 'EN skill',
-        [SupportedLanguages.JP]: 'JP skill',
-      },
-      sharable: false,
-      spMax: 9999,
-      ssCost: 5,
-      ssSp: 17777,
-    },
-    uniqueHash: 'hash',
-  };
+  const templateEntry: AttackingSkillData = generateAttackingSkillEntry();
 
   it('shows affliction with name', async () => {
     const entry = {...templateEntry};
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.module.css b/src/components/elements/gameData/skillAtk/out/sections/animation.module.css
new file mode 100644
index 00000000..0660535b
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/animation.module.css
@@ -0,0 +1,28 @@
+.animation table {
+  width: 100%;
+  padding-right: 30px;
+}
+.animation table tr {
+  background-color: #0e0e0e;
+  border: 1px solid #656565;
+}
+.animation table tr:last-child {
+  margin-bottom: 0;
+}
+.animation table th,
+.animation table td {
+  padding: 0.2rem 1rem;
+  text-align: center;
+  white-space: nowrap;
+}
+.animation table tbody tr:nth-of-type(odd) {
+  background-color: #141414;
+}
+.animation table tbody tr:nth-of-type(even) {
+  background-color: #202020;
+}
+.animation table tbody tr:hover {
+  background-color: #042a3b;
+}
+
+/*# sourceMappingURL=animation.module.css.map */
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map b/src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map
new file mode 100644
index 00000000..4c78ac54
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["animation.module.scss"],"names":[],"mappings":"AAKE;EAGE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE","file":"animation.module.css"}
\ No newline at end of file
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.module.scss b/src/components/elements/gameData/skillAtk/out/sections/animation.module.scss
new file mode 100644
index 00000000..6544e279
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/animation.module.scss
@@ -0,0 +1,42 @@
+@use "../../../../../../../public/colors";
+
+$item-margin: 0.75rem;
+
+.animation {
+  table {
+    $table-border-color: #656565;
+
+    width: 100%;
+    padding-right: 30px;
+
+    tr {
+      background-color: #0e0e0e;
+      border: 1px solid $table-border-color;
+    }
+
+    tr:last-child {
+      margin-bottom: 0;
+    }
+
+    th,
+    td {
+      padding: 0.2rem 1rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    tbody {
+      tr:nth-of-type(odd) {
+        background-color: rgb(20, 20, 20);
+      }
+
+      tr:nth-of-type(even) {
+        background-color: rgb(32, 32, 32);
+      }
+
+      tr:hover {
+        background-color: rgb(4, 42, 59);
+      }
+    }
+  }
+}
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.test.tsx b/src/components/elements/gameData/skillAtk/out/sections/animation.test.tsx
new file mode 100644
index 00000000..ed9e6164
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/animation.test.tsx
@@ -0,0 +1,224 @@
+import React from 'react';
+
+import {screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {generateAttackingSkillEntry} from '../../../../../../../test/data/mock/skill';
+import {renderReact} from '../../../../../../../test/render/main';
+import {ConditionEnumMap, SkillEnums} from '../../../../../../api-def/resources';
+import {translation as translationEN} from '../../../../../../i18n/translations/en/translation';
+import {ResourceLoader} from '../../../../../../utils/services/resources/loader';
+import {SectionAnimation} from './animation';
+
+
+describe('ATK skill entry - Animation info section', () => {
+  let atkSkillEntryTemplate = {...generateAttackingSkillEntry()};
+  atkSkillEntryTemplate = {
+    ...atkSkillEntryTemplate,
+    skill: {
+      ...atkSkillEntryTemplate.skill,
+      hitTimingSecMax: [0.7, 1.3, 2.0],
+      cancelActionsMax: [
+        {
+          action: 0,
+          time: 2.7,
+          conditions: [],
+        },
+        {
+          action: 0,
+          time: 5.4,
+          conditions: [181],
+        },
+      ],
+    },
+  };
+  let conditionEnumMap: ConditionEnumMap;
+  let skillEnums: SkillEnums;
+
+  beforeAll(async () => {
+    conditionEnumMap = await ResourceLoader.getEnumAllConditions();
+    skillEnums = await ResourceLoader.getEnumSkill();
+  });
+
+  it('collapses hit timing table on load', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    expect(screen.queryByText('2.00', {selector: '.collapse.show'})).not.toBeInTheDocument();
+  });
+
+  it('collapses cancel info table on load', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    expect(screen.queryByText('5.40', {selector: '.collapse.show'})).not.toBeInTheDocument();
+  });
+
+  it('expands to show hit timing table', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    const hitTimingButton = screen.getByText(
+      new RegExp(translationEN.game.skillAtk.animation.hitTiming),
+      {selector: 'button'},
+    );
+    userEvent.click(hitTimingButton);
+
+    await waitFor(() => expect(screen.getByText('2.00', {selector: '.collapse.show *'})).toBeInTheDocument());
+  });
+
+  it('expands to show cancel info table', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    const cancelInfoButton = screen.getByText(new RegExp(translationEN.game.skillAtk.animation.cancelInfo));
+    userEvent.click(cancelInfoButton);
+
+    await waitFor(() => expect(screen.getByText('5.40', {selector: '.collapse.show *'})).toBeInTheDocument());
+  });
+
+  it('hides hit timing table on button click', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    const hitTimingButton = screen.getByText(
+      new RegExp(translationEN.game.skillAtk.animation.hitTiming),
+      {selector: 'button'},
+    );
+    userEvent.click(hitTimingButton);
+
+    await waitFor(() => expect(screen.getByText('2.00', {selector: '.collapse.show *'})).toBeInTheDocument());
+
+    userEvent.click(hitTimingButton);
+
+    await waitFor(() => expect(screen.queryByText('2.00', {selector: '.collapse.show *'})).not.toBeInTheDocument());
+  });
+
+  it('hides cancel info table on button click', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    const cancelInfoButton = screen.getByText(new RegExp(translationEN.game.skillAtk.animation.cancelInfo));
+    userEvent.click(cancelInfoButton);
+
+    await waitFor(() => expect(screen.getByText('5.40', {selector: '.collapse.show *'})).toBeInTheDocument());
+
+    userEvent.click(cancelInfoButton);
+
+    await waitFor(() => expect(screen.queryByText('5.40', {selector: '.collapse.show *'})).not.toBeInTheDocument());
+  });
+
+  it('shows cancel action precondition column if any cancel action has it', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    expect(screen.queryByText(translationEN.game.skillAtk.animation.cancelHeader.preConditions))
+      .toBeInTheDocument();
+    expect(screen.getByText('Target State: OD')).toBeInTheDocument();
+  });
+
+  it('hides cancel action precondition column if no cancel action has it', async () => {
+    const atkSkillEntry = {
+      ...atkSkillEntryTemplate,
+      skill: {
+        ...atkSkillEntryTemplate.skill,
+        cancelActionsMax: [{
+          action: 0,
+          time: 2.7,
+          conditions: [],
+        }],
+      },
+    };
+
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntry}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    expect(screen.queryByText(new RegExp(translationEN.game.skillAtk.animation.cancelHeader.preConditions)))
+      .not.toBeInTheDocument();
+  });
+
+  it('shows earliest hit timing', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    expect(screen.getByText(/0.70 sec @ Earliest/)).toBeInTheDocument();
+  });
+
+  it('shows disabled button for cancel info if unavailable', async () => {
+    const atkSkillEntry = {
+      ...atkSkillEntryTemplate,
+      skill: {
+        ...atkSkillEntryTemplate.skill,
+        cancelActionsMax: [],
+      },
+    };
+
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntry}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    expect(screen.queryByText(new RegExp(translationEN.game.skillAtk.animation.cancelInfo)))
+      .toHaveAttribute('disabled');
+  });
+
+  it('shows earliest cancel timing', async () => {
+    renderReact(() => (
+      <SectionAnimation
+        atkSkillEntry={atkSkillEntryTemplate}
+        conditionEnumMap={conditionEnumMap}
+        skillEnums={skillEnums}
+      />
+    ));
+
+    expect(screen.getByText(/2.70 sec @ Earliest/)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.tsx b/src/components/elements/gameData/skillAtk/out/sections/animation.tsx
new file mode 100644
index 00000000..4c6e36b8
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/animation.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Collapse from 'react-bootstrap/Collapse';
+import Form from 'react-bootstrap/Form';
+
+import {useI18n} from '../../../../../../i18n/hook';
+import {reverseEnumTransLookup} from '../../../../../../utils/services/resources/utils';
+import {EnumDataPack, SectionProps} from '../props';
+import styles from './animation.module.css';
+
+
+const HitTiming = ({atkSkillEntry}: SectionProps) => {
+  const {t} = useI18n();
+
+  const [show, setShow] = React.useState(false);
+
+  const earliest = Math.min(...atkSkillEntry.skill.hitTimingSecMax);
+
+  return (
+    <div className="text-center">
+      <Button variant="outline-light" size="sm" className="mt-2" onClick={() => setShow(!show)}>
+        <i className="bi bi-arrows-collapse"/>&nbsp;
+        {t((t) => t.game.skillAtk.animation.hitTiming)}&nbsp;-&nbsp;
+        {t((t) => t.game.skillAtk.animation.earliest, {time: earliest.toFixed(2)})}
+      </Button>
+      <Collapse in={show}>
+        <div className="mt-2">
+          <table>
+            <tr>
+              <th>#</th>
+              <th>{t((t) => t.game.skillAtk.animation.hitTimingHeader)}</th>
+            </tr>
+            <tbody>
+              {
+                atkSkillEntry.skill.hitTimingSecMax.map((timing, idx) => (
+                  <tr key={idx}>
+                    <td>{idx + 1}</td>
+                    <td>{timing.toFixed(2)}</td>
+                  </tr>
+                ))
+              }
+            </tbody>
+          </table>
+        </div>
+      </Collapse>
+    </div>
+  );
+};
+
+const CancelAction = ({atkSkillEntry, skillEnums, conditionEnumMap}: SectionAnimationProps) => {
+  const {t, lang} = useI18n();
+
+  const [show, setShow] = React.useState(false);
+
+  const isAnyCancelHasPreconditions = atkSkillEntry.skill.cancelActionsMax
+    .some((cancelUnit) => !!cancelUnit.conditions.length);
+  const earliest = Math.min(...atkSkillEntry.skill.cancelActionsMax.map((cancelUnit) => cancelUnit.time));
+  const isAvailable = earliest !== Infinity;
+
+  return (
+    <div className="text-center">
+      <Button
+        variant="outline-light" size="sm" className="mt-2"
+        onClick={() => setShow(!show)} disabled={!isAvailable}
+      >
+        <i className="bi bi-arrows-collapse"/>&nbsp;
+        {t((t) => t.game.skillAtk.animation.cancelInfo)}&nbsp;-&nbsp;
+        {
+          isAvailable ?
+            t((t) => t.game.skillAtk.animation.earliest, {time: earliest.toFixed(2)}) :
+            t((t) => t.game.skillAtk.animation.earliestUnavailable)
+        }
+      </Button>
+      <Collapse in={show}>
+        <div className="mt-2">
+          <table>
+            <tr>
+              <th>{t((t) => t.game.skillAtk.animation.cancelHeader.action)}</th>
+              <th>{t((t) => t.game.skillAtk.animation.cancelHeader.time)}</th>
+              {
+                isAnyCancelHasPreconditions &&
+                <th>{t((t) => t.game.skillAtk.animation.cancelHeader.preConditions)}</th>
+              }
+            </tr>
+            <tbody>
+              {
+                atkSkillEntry.skill.cancelActionsMax.map((cancelUnit, idx) => (
+                  <tr key={idx}>
+                    <td>{
+                      reverseEnumTransLookup(
+                        skillEnums.cancel,
+                        cancelUnit.action,
+                        lang,
+                        cancelUnit.action.toString(),
+                      )
+                    }</td>
+                    <td>{cancelUnit.time.toFixed(2)}</td>
+                    {
+                      isAnyCancelHasPreconditions &&
+                      <td>{
+                        cancelUnit.conditions
+                          .map((conditionCode) => conditionEnumMap[String(conditionCode)].trans[lang])
+                          .join(' & ')
+                      }</td>
+                    }
+                  </tr>
+                ))
+              }
+            </tbody>
+          </table>
+        </div>
+      </Collapse>
+    </div>
+  );
+};
+
+type SectionAnimationProps = SectionProps & Pick<EnumDataPack, 'skillEnums' | 'conditionEnumMap'>
+
+export const SectionAnimation = ({atkSkillEntry, skillEnums, conditionEnumMap}: SectionAnimationProps) => {
+  return (
+    <div className={styles.animation}>
+      <Form.Row>
+        <Col lg={6}>
+          <HitTiming atkSkillEntry={atkSkillEntry}/>
+        </Col>
+        <Col lg={6}>
+          <CancelAction atkSkillEntry={atkSkillEntry} skillEnums={skillEnums} conditionEnumMap={conditionEnumMap}/>
+        </Col>
+      </Form.Row>
+    </div>
+  );
+};
diff --git a/src/components/elements/gameData/utils.tsx b/src/components/elements/gameData/utils.tsx
deleted file mode 100644
index 2932d467..00000000
--- a/src/components/elements/gameData/utils.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-import Alert from 'react-bootstrap/Alert';
-
-import {PAGE_ATK_SKILL_MAX_ENTRIES} from '../../../const/config';
-import {useI18n} from '../../../i18n/hook';
-
-
-type TruncatedEntryProps = {
-  displayed: number,
-  returned: number,
-}
-
-
-const TruncatedWarningEntry = ({displayed, returned}: TruncatedEntryProps) => {
-  const {t} = useI18n();
-
-  return (
-    <Alert variant="warning" className="rounded bg-black-32 p-2 mb-2">
-      {t(
-        (t) => t.message.warning.truncated,
-        {
-          displayed: displayed.toFixed(0),
-          returned: returned.toFixed(0),
-        },
-      )}
-    </Alert>
-  );
-};
-
-
-/**
- * Check the length of the entries.
- *
- * If it goes beyond a certain limit, splice the entries and return a warning entry to be attached.
- * Otherwise, return null.
- *
- * @param {Array<React.ReactElement>} entries element entry array to be checked
- * @return {React.ReactElement?} a warning entry if the length is too long, null otherwise
- */
-export const overLengthWarningCheck = (entries: Array<any>) => {
-  if (entries.length > PAGE_ATK_SKILL_MAX_ENTRIES) {
-    const actualLength = entries.length;
-    entries.splice(PAGE_ATK_SKILL_MAX_ENTRIES);
-    return <TruncatedWarningEntry displayed={PAGE_ATK_SKILL_MAX_ENTRIES} returned={actualLength} key="overLength"/>;
-  }
-
-  return null;
-};
diff --git a/src/components/elements/gameData/warnings/animation.tsx b/src/components/elements/gameData/warnings/animation.tsx
new file mode 100644
index 00000000..799e32f6
--- /dev/null
+++ b/src/components/elements/gameData/warnings/animation.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Alert from 'react-bootstrap/Alert';
+
+import {useI18n} from '../../../../i18n/hook';
+
+
+export const AnimationInfoWarning = () => {
+  const {t} = useI18n();
+
+  return (
+    <Alert variant="warning" className="rounded bg-black-32 p-2 mb-2">
+      {t((t) => t.game.skillAtk.animation.warning)}
+    </Alert>
+  );
+};
diff --git a/src/components/elements/gameData/warnings/overLength.tsx b/src/components/elements/gameData/warnings/overLength.tsx
new file mode 100644
index 00000000..afc2f729
--- /dev/null
+++ b/src/components/elements/gameData/warnings/overLength.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import Alert from 'react-bootstrap/Alert';
+
+import {PAGE_ATK_SKILL_MAX_ENTRIES} from '../../../../const/config';
+import {useI18n} from '../../../../i18n/hook';
+
+
+type OverLengthWarningProps = {
+  displayed: number,
+  returned: number,
+}
+
+const OverLengthWarning = ({displayed, returned}: OverLengthWarningProps) => {
+  const {t} = useI18n();
+
+  return (
+    <Alert variant="warning" className="rounded bg-black-32 p-2 mb-2">
+      {t(
+        (t) => t.message.warning.truncated,
+        {
+          displayed: displayed.toFixed(0),
+          returned: returned.toFixed(0),
+        },
+      )}
+    </Alert>
+  );
+};
+
+export const overLengthWarningCheck = (entries: Array<any>) => {
+  if (entries.length > PAGE_ATK_SKILL_MAX_ENTRIES) {
+    const actualLength = entries.length;
+    entries.splice(PAGE_ATK_SKILL_MAX_ENTRIES);
+    return <OverLengthWarning displayed={PAGE_ATK_SKILL_MAX_ENTRIES} returned={actualLength} key="overLength"/>;
+  }
+
+  return null;
+};
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 82646d9c..b5852ad5 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -192,6 +192,19 @@ export const translation: TranslationStruct = {
       error: {
         noInfoToDisplay: '請選擇至少一項顯示資訊。',
       },
+      animation: {
+        earliest: '最早於 {{time}} 秒',
+        earliestUnavailable: '無資料',
+        hitTiming: '攻擊時間',
+        hitTimingHeader: '攻擊時間 (秒)',
+        cancelInfo: '取消資訊',
+        cancelHeader: {
+          action: '行動',
+          time: '開放時間 (秒)',
+          preConditions: '其他條件',
+        },
+        warning: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
+      },
     },
     tools: {
       titleSelf: '遊戲工具',
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index 785a02cd..fb6b6e83 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -189,6 +189,19 @@ export type TranslationStruct = {
       error: {
         noInfoToDisplay: string,
       },
+      animation: {
+        earliest: string,
+        earliestUnavailable: string,
+        hitTiming: string,
+        hitTimingHeader: string,
+        cancelInfo: string,
+        cancelHeader: {
+          action: string,
+          time: string,
+          preConditions: string,
+        },
+        warning: string,
+      },
     },
     tools: {
       titleSelf: string,
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 4783528c..cf1df299 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -216,6 +216,19 @@ export const translation: TranslationStruct = {
       error: {
         noInfoToDisplay: 'Please select at least 1 info to display.',
       },
+      animation: {
+        earliest: '{{time}} sec @ Earliest',
+        earliestUnavailable: 'Unavailable',
+        hitTiming: 'Hit Timing',
+        hitTimingHeader: 'Hit Timing (sec)',
+        cancelInfo: 'Cancel Info',
+        cancelHeader: {
+          action: 'Action',
+          time: 'Time (sec)',
+          preConditions: 'Other Conditions',
+        },
+        warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
+      },
     },
     tools: {
       titleSelf: 'Game Tools',
@@ -242,7 +255,7 @@ export const translation: TranslationStruct = {
     warning: {
       adminOnly: 'You must have admin privilege to access this page.',
       truncated: 'Due to excessive number of results, ' +
-        'results are truncated ({{displayed}} Displayed / {{returned} Available). ' +
+        'results are truncated ({{displayed}} Displayed / {{returned}} Available). ' +
         'To display the truncated results, please narrow the search condition.',
     },
     info: {
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index e741e862..40a38331 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -191,6 +191,19 @@ export const translation: TranslationStruct = {
       error: {
         noInfoToDisplay: 'Please select at least 1 info to display.',
       },
+      animation: {
+        earliest: '{{time}} sec @ Earliest',
+        earliestUnavailable: 'Unavailable',
+        hitTiming: 'Hit Timing',
+        hitTimingHeader: 'Hit Timing (sec)',
+        cancelInfo: 'Cancel Info',
+        cancelHeader: {
+          action: 'Action',
+          time: 'Time (sec)',
+          preConditions: 'Other Conditions',
+        },
+        warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
+      },
     },
     tools: {
       titleSelf: '他のツール',
diff --git a/src/utils/game.ts b/src/utils/game.ts
deleted file mode 100644
index d58f36c8..00000000
--- a/src/utils/game.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export {calculateDamage} from './game/damage';
-export type {CalculateDamageReturn} from './game/damage';
diff --git a/src/utils/game/damage.test.ts b/src/utils/game/damage.test.ts
index 2ff1d1d6..679b8402 100644
--- a/src/utils/game/damage.test.ts
+++ b/src/utils/game/damage.test.ts
@@ -1,3 +1,4 @@
+import {generateAttackingSkillEntry} from '../../../test/data/mock/skill';
 import {AttackingSkillData} from '../../api-def/resources';
 import {InputData} from '../../components/elements/gameData/skillAtk/in/types';
 import {generateInputData} from '../../components/elements/gameData/skillAtk/in/utils';
@@ -6,44 +7,7 @@ import {calculateDamage, CalculateDamageReturn} from './damage';
 
 
 describe('Damage calculation', () => {
-  const attackingSkillDataTemplate: AttackingSkillData = {
-    uniqueHash: '',
-    condition: [],
-    chara: {
-      id: 0,
-      iconName: '',
-      name: {
-        cht: '',
-        en: '',
-        jp: '',
-      },
-      element: 0,
-    },
-    skill: {
-      identifiers: [],
-      internalId: 0,
-      name: {
-        cht: '',
-        en: '',
-        jp: '',
-      },
-      spMax: 0,
-      sharable: false,
-      ssCost: 0,
-      ssSp: 0,
-      modsMax: [],
-      crisisMax: [],
-      hitsMax: 0,
-      afflictions: [],
-      buffCountBoost: [],
-      buffZoneBoost: {
-        self: 0,
-        ally: 0,
-      },
-      dispelMax: false,
-      dispelTimingMax: [],
-    },
-  };
+  const attackingSkillDataTemplate: AttackingSkillData = generateAttackingSkillEntry();
 
   it('checks if the damage is calculated correctly', () => {
     const inputData: InputData = generateInputData({
diff --git a/test/data/mock/skill.ts b/test/data/mock/skill.ts
new file mode 100644
index 00000000..97103890
--- /dev/null
+++ b/test/data/mock/skill.ts
@@ -0,0 +1,52 @@
+import {SupportedLanguages} from '../../../src/api-def/api';
+import {AttackingSkillData, Element} from '../../../src/api-def/resources';
+
+
+export const generateAttackingSkillEntry = (): AttackingSkillData => ({
+  chara: {
+    id: 10999999,
+    element: Element.FLAME,
+    iconName: 'icon',
+    name: {
+      [SupportedLanguages.CHT]: 'CHT name',
+      [SupportedLanguages.EN]: 'EN name',
+      [SupportedLanguages.JP]: 'JP name',
+    },
+  },
+  condition: [],
+  skill: {
+    afflictions: [{
+      actionTime: 1.5,
+      duration: 15,
+      probabilityPct: 120,
+      stackable: true,
+      statusCode: 5,
+      statusConditionCode: 0,
+      statusIcon: 'afflictionIcon',
+    }],
+    buffCountBoost: [],
+    buffZoneBoost: {
+      self: 0,
+      ally: 0,
+    },
+    crisisMax: [],
+    dispelMax: false,
+    dispelTimingMax: [],
+    hitsMax: 0,
+    identifiers: ['s1'],
+    internalId: 109501011,
+    modsMax: [7],
+    name: {
+      [SupportedLanguages.CHT]: 'CHT skill',
+      [SupportedLanguages.EN]: 'EN skill',
+      [SupportedLanguages.JP]: 'JP skill',
+    },
+    sharable: false,
+    spMax: 9999,
+    ssCost: 5,
+    ssSp: 17777,
+    hitTimingSecMax: [],
+    cancelActionsMax: [],
+  },
+  uniqueHash: 'hash',
+});

From 22135f92d5a3681741642ddb9efa90fa5d5cdeb7 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 04:58:33 -0500
Subject: [PATCH 32/61] ADD - ATK skill filter dispel only (#174)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../skillAtk/entryProcessing.test.tsx         | 28 +++++++++++++++----
 .../elements/gameData/skillAtk/in/filter.tsx  |  5 ++++
 .../elements/gameData/skillAtk/in/types.ts    |  1 +
 .../elements/gameData/skillAtk/in/utils.ts    |  2 ++
 .../elements/gameData/skillAtk/out/utils.ts   |  5 ++++
 src/i18n/translations/cht/translation.ts      |  1 +
 src/i18n/translations/definition.ts           |  1 +
 src/i18n/translations/en/translation.ts       |  1 +
 src/i18n/translations/jp/translation.ts       |  1 +
 9 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx b/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
index dfe721e7..d55d8cfe 100644
--- a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
+++ b/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
@@ -7,14 +7,14 @@ import {filterSkillEntries} from './out/utils';
 describe('Attacking skill entries processing', () => {
   const inputDataTemplate: InputData = generateInputData();
 
-  it('checks if the promise is returning data', async () => {
+  it('returns skill entries', async () => {
     await ResourceLoader.getAttackingSkillEntries((data) => data)
       .then((data) => {
         expect(data.length).toBeGreaterThan(0);
       });
   });
 
-  it('checks if all entries are returned when no filter is applicable', async () => {
+  it('returns all entries if no filter', async () => {
     await ResourceLoader.getAttackingSkillEntries((data) => data)
       .then((data) => {
         data = filterSkillEntries(inputDataTemplate, data);
@@ -22,7 +22,7 @@ describe('Attacking skill entries processing', () => {
       });
   });
 
-  it('checks if SS only filtering is working correctly', async () => {
+  it('returns SS only', async () => {
     await ResourceLoader.getAttackingSkillEntries((data) => data)
       .then((data) => {
         const dataFiltered = filterSkillEntries(
@@ -40,7 +40,25 @@ describe('Attacking skill entries processing', () => {
       });
   });
 
-  it('checks if elemental filtering is working correctly', async () => {
+  it('returns dispel only', async () => {
+    await ResourceLoader.getAttackingSkillEntries((data) => data)
+      .then((data) => {
+        const dataFiltered = filterSkillEntries(
+          {
+            ...inputDataTemplate,
+            filter: {
+              ...inputDataTemplate.filter,
+              dispelOnly: true,
+            },
+          },
+          data,
+        );
+        expect(dataFiltered.length).toBeGreaterThan(0);
+        expect(dataFiltered.map((entry) => entry.skill.dispelMax)).not.toContain(false);
+      });
+  });
+
+  it('returns specified element only', async () => {
     const enumElements = () => ResourceLoader.getEnumElements();
     const attackingEntries = () => ResourceLoader.getAttackingSkillEntries();
 
@@ -65,7 +83,7 @@ describe('Attacking skill entries processing', () => {
       });
   });
 
-  it('checks if affliction filtering is working correctly', async () => {
+  it('returns specified affliction', async () => {
     const enumConditions = () => ResourceLoader.getEnumCategorizedConditions();
     const attackingEntries = () => ResourceLoader.getAttackingSkillEntries();
 
diff --git a/src/components/elements/gameData/skillAtk/in/filter.tsx b/src/components/elements/gameData/skillAtk/in/filter.tsx
index 6b907085..16cab7f1 100644
--- a/src/components/elements/gameData/skillAtk/in/filter.tsx
+++ b/src/components/elements/gameData/skillAtk/in/filter.tsx
@@ -64,6 +64,11 @@ export const Filter = ({
               getValue: (inputData) => inputData.filter.sharedOnly,
               getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {sharedOnly: newValue}}),
             },
+            {
+              text: t((t) => t.game.skillAtk.name.filterDispelOnly),
+              getValue: (inputData) => inputData.filter.dispelOnly,
+              getUpdatedInputData: (newValue) => overwriteInputData(inputData, {filter: {dispelOnly: newValue}}),
+            },
           ],
         },
       ]}
diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index e3f8238b..921c6b5d 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -54,6 +54,7 @@ export type InputData = {
     elemCodes: Array<number>,
     afflictionCondCode: Array<number>,
     sharedOnly: boolean,
+    dispelOnly: boolean,
   },
   display: {
     actualDamage: boolean,
diff --git a/src/components/elements/gameData/skillAtk/in/utils.ts b/src/components/elements/gameData/skillAtk/in/utils.ts
index dc5f962e..c705e5ed 100644
--- a/src/components/elements/gameData/skillAtk/in/utils.ts
+++ b/src/components/elements/gameData/skillAtk/in/utils.ts
@@ -56,6 +56,7 @@ export const overwriteInputData = (original: InputData, overwrite: DeepPartial<I
     elemCodes: overwrite?.filter?.elemCodes ?? original.filter.elemCodes,
     afflictionCondCode: overwrite?.filter?.afflictionCondCode ?? original.filter.afflictionCondCode,
     sharedOnly: overwrite?.filter?.sharedOnly ?? original.filter.sharedOnly,
+    dispelOnly: overwrite?.filter?.dispelOnly ?? original.filter.dispelOnly,
   },
   display: {
     actualDamage: overwrite?.display?.actualDamage ?? original.display.actualDamage,
@@ -120,6 +121,7 @@ export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData
       elemCodes: [],
       afflictionCondCode: [],
       sharedOnly: false,
+      dispelOnly: false,
     },
     display: {
       actualDamage: false,
diff --git a/src/components/elements/gameData/skillAtk/out/utils.ts b/src/components/elements/gameData/skillAtk/out/utils.ts
index 53c027a2..19328c2e 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.ts
+++ b/src/components/elements/gameData/skillAtk/out/utils.ts
@@ -8,6 +8,11 @@ export const filterSkillEntries = (inputData: InputData, atkSkillEntries: Array<
     atkSkillEntries = atkSkillEntries.filter((entry) => entry.skill.sharable);
   }
 
+  // Filter dispel skill only if set
+  if (inputData.filter.dispelOnly) {
+    atkSkillEntries = atkSkillEntries.filter((entry) => entry.skill.dispelMax);
+  }
+
   // Filter element if specified
   if (inputData.filter.elemCodes.length) {
     atkSkillEntries = atkSkillEntries
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index b5852ad5..14c956cd 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -89,6 +89,7 @@ export const translation: TranslationStruct = {
         filterAffliction: '異常狀態',
         filterOther: '其他',
         filterSharedOnly: '限定共享技',
+        filterDispelOnly: '限定可驅散',
       },
       desc: {
         atk: '泛指所有遊戲內與攻擊力有關的參數。',
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index fb6b6e83..e802e6eb 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -89,6 +89,7 @@ export type TranslationStruct = {
         filterAffliction: string,
         filterOther: string,
         filterSharedOnly: string,
+        filterDispelOnly: string,
       },
       desc: {
         atk: string,
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index cf1df299..41ebbdb9 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -96,6 +96,7 @@ export const translation: TranslationStruct = {
         filterAffliction: 'Affliction',
         filterOther: 'Other',
         filterSharedOnly: 'Shared Skill Only',
+        filterDispelOnly: 'Dispel Only',
       },
       desc: {
         atk: 'Any parameter that relates to strength',
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 40a38331..8c8e87f4 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -88,6 +88,7 @@ export const translation: TranslationStruct = {
         filterAffliction: '状態異常',
         filterOther: 'その他',
         filterSharedOnly: 'シェアスキルのみ表示',
+        filterDispelOnly: 'Dispel Only',
       },
       desc: {
         atk: '攻撃力に関するパラメータ全般。',

From 182b153f56383b267558ca7007f68419aea1ea90 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 05:02:32 -0500
Subject: [PATCH 33/61] IMP - Codacy duplication detection to exclude test data
 sources

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .codacy.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.codacy.yml b/.codacy.yml
index a1b0e2a3..a7fdc79d 100644
--- a/.codacy.yml
+++ b/.codacy.yml
@@ -4,3 +4,5 @@ engines:
     exclude_paths:
       # Test files
       - "**.test.ts"
+      # Test data
+      - "test/data/**"

From c90407317d3c4258c9ed53827dfd1dc946476beb Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 07:39:31 -0500
Subject: [PATCH 34/61] FIX - Incorrect unit name text transformation (#168)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 doc/markdown.md                               |  8 +++--
 doc/quickReference.md                         | 36 +++++++++++++++++++
 .../transformers/quickReference.test.ts       | 12 +++++--
 .../process/transformers/quickReference.ts    | 11 +++---
 4 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 doc/quickReference.md

diff --git a/doc/markdown.md b/doc/markdown.md
index 27e1ac2c..eb96d0bb 100644
--- a/doc/markdown.md
+++ b/doc/markdown.md
@@ -1,13 +1,17 @@
 # Markdown Cheatsheet
 
+Syntax below can be seen immediately in markdown input preview.
+
+However, there are some syntax that will only process after the form submission,
+such as [quick reference](/doc/quickReference.md).
+
 ## Common usage
 
 [Cheatsheet](https://www.markdownguide.org/cheat-sheet/)
 
 ## Customized syntax
 
-`[R]` means required.
-`[O]` means optional.
+`[R]` means required; `[O]` means optional.
 
 ### Text coloring
 
diff --git a/doc/quickReference.md b/doc/quickReference.md
new file mode 100644
index 00000000..8ec0850a
--- /dev/null
+++ b/doc/quickReference.md
@@ -0,0 +1,36 @@
+# Quick Reference cheatsheet
+
+These are available in some fields.
+
+Usually, all markdown input fields support such transformations after form submission.
+
+## Usages
+
+`[R]` means required; `[O]` means optional.
+
+### Quest Post / Miscellaneous Post
+
+For quest post:
+
+```
+#Q<pid>
+```
+
+For miscellaneous post:
+
+```
+#M<pid>
+```
+
+- `[R]` `<pid>` is the post ID.
+
+### Unit analysis
+
+```
+:<UnitName>:
+```
+
+- `[R]` `<UnitName>` is the analysis unit name.
+  - This can be either the name of a character or a dragon.
+  - This can be in either one of the supported languages (CHT, EN, JP).
+  - There are some commonly-seen names available.
diff --git a/src/utils/process/transformers/quickReference.test.ts b/src/utils/process/transformers/quickReference.test.ts
index 909b2f1c..b7b371b9 100644
--- a/src/utils/process/transformers/quickReference.test.ts
+++ b/src/utils/process/transformers/quickReference.test.ts
@@ -100,6 +100,14 @@ describe('Quick reference transformer (Analysis)', () => {
   });
 
   it('transforms analysis link', async () => {
+    const text = ':Gala Mym:';
+
+    const result = await transformQuickReference({text, lang});
+
+    expect(result).toBe(galaMymMdTransformed);
+  });
+
+  it('transforms simple unit name', async () => {
     const text = 'Gala Mym';
 
     const result = await transformQuickReference({text, lang});
@@ -108,7 +116,7 @@ describe('Quick reference transformer (Analysis)', () => {
   });
 
   it('transforms analysis link (sentenced)', async () => {
-    const text = 'Check Gala Mym Analysis';
+    const text = 'Check :Gala Mym: Analysis';
 
     const result = await transformQuickReference({text, lang});
 
@@ -135,7 +143,7 @@ describe('Quick reference transformer (Analysis)', () => {
     const brunhildaExtImageMd = `![BrunhildaExtended](${DepotPaths.getDragonIconURL('210039_01')}|unitIcon)`;
     const brunhildaExtMdTransformed = `${brunhildaExtImageMd}${brunhildaExtAnalysisLink}`;
 
-    const text = 'BrunhildaExtended';
+    const text = ':BrunhildaExtended:';
 
     const result = await transformQuickReference({text, lang});
 
diff --git a/src/utils/process/transformers/quickReference.ts b/src/utils/process/transformers/quickReference.ts
index c3f0ee39..ddbeae61 100644
--- a/src/utils/process/transformers/quickReference.ts
+++ b/src/utils/process/transformers/quickReference.ts
@@ -23,12 +23,10 @@ const transformAnalysis: TextTransformer = async ({text, lang}) => {
     return text;
   }
 
+  // Sort the keys by its length descending for greedy match
+  const nameRegex = [...unitNameIdMap.keys()].sort((a, b) => b.length - a.length).join('|');
   // Source: https://stackoverflow.com/a/15604206/11571888
-  const regex = new RegExp(
-    // Sort the keys by its length descending for greedy match
-    `([^\\[])?(${[...unitNameIdMap.keys()].sort((a, b) => b.length - a.length).join('|')})([^\\]]|$)`,
-    'g',
-  );
+  const regex = new RegExp(`([^\\[]|:|^)(${nameRegex})([^\\]]|:|$)`, 'g');
   text = text.replace(
     regex,
     (matched, leftRemainder, unitName, rightRemainder) => {
@@ -40,6 +38,9 @@ const transformAnalysis: TextTransformer = async ({text, lang}) => {
       const postPath = makePostPath(PostPath.ANALYSIS, {pid: unitInfo.id, lang});
       const imageMd = `![${unitName}](${getImageURL(unitInfo)}|unitIcon)`;
 
+      leftRemainder = leftRemainder.replace(/:/g, '');
+      rightRemainder = rightRemainder.replace(/:/g, '');
+
       return `${leftRemainder || ''}${imageMd}[${unitName}](${postPath})${rightRemainder}`;
     },
   );

From 1c6101d4a315078d0ba4a581911209a508c014ae Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 19:47:30 -0500
Subject: [PATCH 35/61] ADD - EX/CEX entry to show unit name and link to
 analysis (#147)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/ex/out/entry.test.tsx   |  33 +++++
 .../elements/gameData/ex/out/entry.tsx        |  60 ++++-----
 .../elements/gameData/ex/out/exEffectUnit.tsx |  58 ++++-----
 test/data/mock/exAbilityData.ts               | 114 ++++++++++++++++++
 4 files changed, 206 insertions(+), 59 deletions(-)
 create mode 100644 src/components/elements/gameData/ex/out/entry.test.tsx
 create mode 100644 test/data/mock/exAbilityData.ts

diff --git a/src/components/elements/gameData/ex/out/entry.test.tsx b/src/components/elements/gameData/ex/out/entry.test.tsx
new file mode 100644
index 00000000..97d07b33
--- /dev/null
+++ b/src/components/elements/gameData/ex/out/entry.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {screen} from '@testing-library/react';
+
+import {generateExAbilityDataEntry} from '../../../../../../test/data/mock/exAbilityData';
+import {renderReact} from '../../../../../../test/render/main';
+import {SupportedLanguages} from '../../../../../api-def/api';
+import {ConditionEnumMap} from '../../../../../api-def/resources';
+import {PostPath} from '../../../../../const/path/definitions';
+import {makePostPath} from '../../../../../utils/path/make';
+import {ResourceLoader} from '../../../../../utils/services/resources/loader';
+import {ExAbilityEntry} from './entry';
+
+
+describe('Co-ability output entry', () => {
+  let conditionEnumMap: ConditionEnumMap;
+
+  beforeAll(async () => {
+    conditionEnumMap = await ResourceLoader.getEnumAllConditions();
+  });
+
+  it('renders unit name as a link to their analysis', async () => {
+    renderReact(() => (
+      <ExAbilityEntry
+        entry={generateExAbilityDataEntry()}
+        conditionEnums={conditionEnumMap}
+      />
+    ));
+
+    const expectedLink = makePostPath(PostPath.ANALYSIS, {pid: 10950101, lang: SupportedLanguages.EN});
+    expect(screen.getByText('EN name')).toHaveAttribute('href', expectedLink);
+  });
+});
diff --git a/src/components/elements/gameData/ex/out/entry.tsx b/src/components/elements/gameData/ex/out/entry.tsx
index a849167c..eca19911 100644
--- a/src/components/elements/gameData/ex/out/entry.tsx
+++ b/src/components/elements/gameData/ex/out/entry.tsx
@@ -3,13 +3,12 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {
-  DepotPaths,
-  ConditionEnumMap,
-  CharaExAbilityDataEntry,
-} from '../../../../../api-def/resources';
+import {CharaExAbilityDataEntry, ConditionEnumMap, DepotPaths} from '../../../../../api-def/resources';
+import {PostPath} from '../../../../../const/path/definitions';
 import {useI18n} from '../../../../../i18n/hook';
+import {makePostPath} from '../../../../../utils/path/make';
 import {ImageWithOverlay} from '../../../common/image';
+import {NextLink} from '../../../common/link';
 import {ExAbility} from './exUnit';
 
 
@@ -18,7 +17,6 @@ type ExAbilityEntryProps = {
   conditionEnums: ConditionEnumMap,
 }
 
-
 export const ExAbilityEntry = ({entry, conditionEnums}: ExAbilityEntryProps) => {
   const {t, lang} = useI18n();
 
@@ -27,30 +25,38 @@ export const ExAbilityEntry = ({entry, conditionEnums}: ExAbilityEntryProps) =>
 
   return (
     <div className="rounded bg-black-32 p-2 mb-2">
+      <Row noGutters className="align-items-center">
+        <Col xs="auto">
+          <ImageWithOverlay src={charaIconURL} text={charaName} style={{height: '3rem'}}/>
+        </Col>
+        <Col className="text-center">
+          <span style={{fontSize: '1.1rem'}}>
+            <NextLink href={makePostPath(PostPath.ANALYSIS, {pid: entry.chara.id, lang})}>
+              {charaName}
+            </NextLink>
+          </span>
+        </Col>
+      </Row>
+      <hr className="m-1"/>
       <Row noGutters>
-        <Col xs="auto" className="align-middle">
-          <ImageWithOverlay src={charaIconURL} text={charaName} style={{height: '4rem'}}/>
+        <Col>
+          <ExAbility
+            effectUnits={entry.ex}
+            name={t((t) => t.game.ex.name.exAbility)}
+            description={t((t) => t.game.ex.desc.exAbility)}
+            conditionEnums={conditionEnums}
+            isEx
+          />
         </Col>
+      </Row>
+      <Row noGutters>
         <Col>
-          <Row noGutters>
-            <Col>
-              <ExAbility
-                effectUnits={entry.ex}
-                name={t((t) => t.game.ex.name.exAbility)}
-                description={t((t) => t.game.ex.desc.exAbility)}
-                conditionEnums={conditionEnums}
-                isEx
-              />
-            </Col>
-            <Col>
-              <ExAbility
-                effectUnits={entry.chainedEx}
-                name={t((t) => t.game.ex.name.chainedExAbility)}
-                description={t((t) => t.game.ex.desc.chainedExAbility)}
-                conditionEnums={conditionEnums}
-              />
-            </Col>
-          </Row>
+          <ExAbility
+            effectUnits={entry.chainedEx}
+            name={t((t) => t.game.ex.name.chainedExAbility)}
+            description={t((t) => t.game.ex.desc.chainedExAbility)}
+            conditionEnums={conditionEnums}
+          />
         </Col>
       </Row>
     </div>
diff --git a/src/components/elements/gameData/ex/out/exEffectUnit.tsx b/src/components/elements/gameData/ex/out/exEffectUnit.tsx
index a96751cd..41cd7e63 100644
--- a/src/components/elements/gameData/ex/out/exEffectUnit.tsx
+++ b/src/components/elements/gameData/ex/out/exEffectUnit.tsx
@@ -15,40 +15,34 @@ type ExEffectUnitProps = {
   badges: Array<React.ReactElement>,
 }
 
-export const ExEffectUnit = ({
-  effectUnit, rate, badges,
-}: ExEffectUnitProps) => {
+export const ExEffectUnit = ({effectUnit, rate, badges}: ExEffectUnitProps) => {
   const {lang} = useI18n();
 
   return (
-    <>
-      <Row>
-        <Col style={{fontSize: '1.1rem'}}>
-          <ImageWithOverlay
-            src={DepotPaths.getImageURL(effectUnit.parameter.imagePath)}
-            text={effectUnit.parameter.name[lang]}
-            style={{height: '2rem'}}
-          />
-          <OverlayTooltip text={rate.toString()} key={rate}>
-            <span className="align-middle">
-              &nbsp;{rate.toFixed(0)}&nbsp;{effectUnit.paramUnit.name[lang]}
-            </span>
-          </OverlayTooltip>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          {
-            badges.map((badge, idx: number) => {
-              return (
-                <React.Fragment key={idx}>
-                  {idx > 0 && ' '}{badge}
-                </React.Fragment>
-              );
-            })
-          }
-        </Col>
-      </Row>
-    </>
+    <Row className="align-items-center">
+      <Col xs="auto" className="px-3 text-info text-right">
+        <ImageWithOverlay
+          src={DepotPaths.getImageURL(effectUnit.parameter.imagePath)}
+          text={effectUnit.parameter.name[lang]}
+          style={{height: '1.5rem'}}
+        />
+        <OverlayTooltip text={rate.toString()} key={rate}>
+          <span className="align-middle">
+            &nbsp;{rate.toFixed(0)}&nbsp;{effectUnit.paramUnit.name[lang]}
+          </span>
+        </OverlayTooltip>
+      </Col>
+      <Col>
+        {
+          badges.map((badge, idx: number) => {
+            return (
+              <React.Fragment key={idx}>
+                {idx > 0 && ' '}{badge}
+              </React.Fragment>
+            );
+          })
+        }
+      </Col>
+    </Row>
   );
 };
diff --git a/test/data/mock/exAbilityData.ts b/test/data/mock/exAbilityData.ts
new file mode 100644
index 00000000..1adc8b4c
--- /dev/null
+++ b/test/data/mock/exAbilityData.ts
@@ -0,0 +1,114 @@
+import {SupportedLanguages} from '../../../src/api-def/api';
+import {CharaExAbilityDataEntry, Element} from '../../../src/api-def/resources';
+
+
+export const generateExAbilityDataEntry = (): CharaExAbilityDataEntry => {
+  return {
+    chara: {
+      element: Element.FLAME,
+      iconName: 'icon',
+      id: 10950101,
+      name: {
+        [SupportedLanguages.CHT]: 'CHT name',
+        [SupportedLanguages.EN]: 'EN name',
+        [SupportedLanguages.JP]: 'JP name',
+      },
+    },
+    ex: [{
+      conditions: [],
+      cooldownSec: 0,
+      durationCount: 0,
+      durationSec: 0,
+      maxOccurrences: 0,
+      maxStackCount: 0,
+      paramUnit: {
+        code: 0,
+        isPercentage: false,
+        name: {
+          [SupportedLanguages.CHT]: '%',
+          [SupportedLanguages.EN]: '%',
+          [SupportedLanguages.JP]: '%',
+        },
+      },
+      parameter: {
+        code: 0,
+        imagePath: '',
+        name: {
+          [SupportedLanguages.CHT]: 'EX CHT',
+          [SupportedLanguages.EN]: 'EX EN',
+          [SupportedLanguages.JP]: 'EX JP',
+        },
+      },
+      probabilityPct: 100,
+      rate: 0,
+      rateMax: 0,
+      slipDamageMod: 0,
+      slipInterval: 0,
+      sourceAbilityId: 0,
+      stackable: false,
+      status: {
+        [SupportedLanguages.CHT]: 'EX CHT',
+        [SupportedLanguages.EN]: 'EX EN',
+        [SupportedLanguages.JP]: 'EX JP',
+      },
+      target: {
+        [SupportedLanguages.CHT]: 'EX CHT',
+        [SupportedLanguages.EN]: 'EX EN',
+        [SupportedLanguages.JP]: 'EX JP',
+      },
+      targetAction: {
+        [SupportedLanguages.CHT]: 'EX CHT',
+        [SupportedLanguages.EN]: 'EX EN',
+        [SupportedLanguages.JP]: 'EX JP',
+      },
+    }],
+    chainedEx: [{
+      conditions: [],
+      cooldownSec: 0,
+      durationCount: 0,
+      durationSec: 0,
+      maxOccurrences: 0,
+      maxStackCount: 0,
+      paramUnit: {
+        code: 0,
+        isPercentage: false,
+        name: {
+          [SupportedLanguages.CHT]: '%',
+          [SupportedLanguages.EN]: '%',
+          [SupportedLanguages.JP]: '%',
+        },
+      },
+      parameter: {
+        code: 0,
+        imagePath: '',
+        name: {
+          [SupportedLanguages.CHT]: 'EX CHT',
+          [SupportedLanguages.EN]: 'EX EN',
+          [SupportedLanguages.JP]: 'EX JP',
+        },
+      },
+      probabilityPct: 100,
+      rate: 0,
+      rateMax: 0,
+      slipDamageMod: 0,
+      slipInterval: 0,
+      sourceAbilityId: 0,
+      stackable: false,
+      status: {
+        [SupportedLanguages.CHT]: 'EX CHT',
+        [SupportedLanguages.EN]: 'EX EN',
+        [SupportedLanguages.JP]: 'EX JP',
+      },
+      target: {
+        [SupportedLanguages.CHT]: 'EX CHT',
+        [SupportedLanguages.EN]: 'EX EN',
+        [SupportedLanguages.JP]: 'EX JP',
+      },
+      targetAction: {
+        [SupportedLanguages.CHT]: 'EX CHT',
+        [SupportedLanguages.EN]: 'EX EN',
+        [SupportedLanguages.JP]: 'EX JP',
+      },
+    }],
+  };
+};

From bf07887f1d1d72b7023a1556693124710bd52319 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 20:12:03 -0500
Subject: [PATCH 36/61] ADD - Input section titles to have icons for showing
 details (#167)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/gameData/elements/subTitle.tsx | 10 +++++++---
 src/components/elements/gameData/elements/title.tsx    | 10 +++++++---
 .../elements/gameData/skillAtk/main.test.tsx           |  8 ++++----
 src/components/elements/input/main.test.tsx            | 10 +++++-----
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/elements/gameData/elements/subTitle.tsx b/src/components/elements/gameData/elements/subTitle.tsx
index 903aa456..3fb73290 100644
--- a/src/components/elements/gameData/elements/subTitle.tsx
+++ b/src/components/elements/gameData/elements/subTitle.tsx
@@ -3,10 +3,14 @@ import React from 'react';
 import {OverlayPopover} from '../../common/overlay/popover';
 import {DetailedProps} from '../../common/types';
 
+
 export const SectionSubTitle = ({title, description}: DetailedProps) => {
   return (
-    <OverlayPopover title={title} content={description}>
-      <h5 className="mb-3">{title}</h5>
-    </OverlayPopover>
+    <h5>
+      {title}&nbsp;
+      <OverlayPopover title={title} content={description}>
+        <i className="bi bi-info-circle"/>
+      </OverlayPopover>
+    </h5>
   );
 };
diff --git a/src/components/elements/gameData/elements/title.tsx b/src/components/elements/gameData/elements/title.tsx
index 601b22de..c400b50a 100644
--- a/src/components/elements/gameData/elements/title.tsx
+++ b/src/components/elements/gameData/elements/title.tsx
@@ -3,10 +3,14 @@ import React from 'react';
 import {OverlayPopover} from '../../common/overlay/popover';
 import {DetailedProps} from '../../common/types';
 
+
 export const SectionTitle = ({title, description}: DetailedProps) => {
   return (
-    <OverlayPopover title={title} content={description}>
-      <h4 className="mb-3">{title}</h4>
-    </OverlayPopover>
+    <h4>
+      {title}&nbsp;
+      <OverlayPopover title={title} content={description}>
+        <i className="bi bi-info-circle"/>
+      </OverlayPopover>
+    </h4>
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
index c6a3de70..4d773525 100644
--- a/src/components/elements/gameData/skillAtk/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -38,7 +38,7 @@ describe('ATK skill lookup', () => {
     const searchButton = screen.getByText(translationEN.misc.search);
     userEvent.click(searchButton);
 
-    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+    expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
     // Damage info from S!Julietta
     expect(screen.getByText('2708%')).toBeInTheDocument();
     expect(screen.getAllByText('3 HIT').length).toBe(2); // There are multiple 3 hit bog skills
@@ -75,7 +75,7 @@ describe('ATK skill lookup', () => {
     const searchButton = screen.getByText(translationEN.misc.search);
     userEvent.click(searchButton);
 
-    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+    expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
     // Damage info from S!Julietta
     expect(screen.queryByText('2708%')).not.toBeInTheDocument();
     expect(screen.queryAllByText('3 HIT').length).toBe(0);
@@ -112,7 +112,7 @@ describe('ATK skill lookup', () => {
     const searchButton = screen.getByText(translationEN.misc.search);
     userEvent.click(searchButton);
 
-    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+    expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
     // Damage info from S!Julietta
     expect(screen.queryByText('2708%')).not.toBeInTheDocument();
     expect(screen.queryAllByText('3 HIT').length).toBe(0);
@@ -149,7 +149,7 @@ describe('ATK skill lookup', () => {
     const searchButton = screen.getByText(translationEN.misc.search);
     userEvent.click(searchButton);
 
-    await waitFor(() => expect(screen.getByText('Summer Julietta')).toBeInTheDocument());
+    expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
 
     // Damage info from S!Julietta
     expect(screen.queryByText('2708%')).not.toBeInTheDocument();
diff --git a/src/components/elements/input/main.test.tsx b/src/components/elements/input/main.test.tsx
index 19d8a098..bdae3831 100644
--- a/src/components/elements/input/main.test.tsx
+++ b/src/components/elements/input/main.test.tsx
@@ -22,7 +22,7 @@ describe('Input collection', () => {
     fnSetInputData = jest.fn().mockImplementation((newData) => inputData = newData);
   });
 
-  it('renders section title', async () => {
+  it('renders section title w/ click to show description', async () => {
     inputData = {};
 
     renderReact(() => (
@@ -39,12 +39,12 @@ describe('Input collection', () => {
       />
     ));
 
-    const titleElement = screen.getByText('title', {selector: 'h4'});
-    userEvent.click(titleElement);
+    const infoIcon = screen.getByText('', {selector: 'i.bi'});
+    userEvent.click(infoIcon);
     expect(screen.getByText('description')).toBeInTheDocument();
   });
 
-  it('renders sub title', async () => {
+  it('renders sub title w/ click to show description', async () => {
     inputData = {};
 
     renderReact(() => (
@@ -61,7 +61,7 @@ describe('Input collection', () => {
       />
     ));
 
-    const titleElement = screen.getByText('title', {selector: 'h5'});
+    const titleElement = screen.getByText('', {selector: 'i.bi'});
     userEvent.click(titleElement);
     expect(screen.getByText('description')).toBeInTheDocument();
   });

From 14c7243509bc898fae38e133898c4ab0459f56c7 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 21:23:01 -0500
Subject: [PATCH 37/61] IMP - Refactor ATK skill entry utils

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../skillAtk/entryProcessing.test.tsx         | 109 ------------------
 .../gameData/skillAtk/out/utils.test.tsx      | 103 +++++++++++++++++
 2 files changed, 103 insertions(+), 109 deletions(-)
 delete mode 100644 src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/out/utils.test.tsx

diff --git a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx b/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
deleted file mode 100644
index d55d8cfe..00000000
--- a/src/components/elements/gameData/skillAtk/entryProcessing.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import {ResourceLoader} from '../../../../utils/services/resources';
-import {InputData} from './in/types';
-import {generateInputData} from './in/utils';
-import {filterSkillEntries} from './out/utils';
-
-
-describe('Attacking skill entries processing', () => {
-  const inputDataTemplate: InputData = generateInputData();
-
-  it('returns skill entries', async () => {
-    await ResourceLoader.getAttackingSkillEntries((data) => data)
-      .then((data) => {
-        expect(data.length).toBeGreaterThan(0);
-      });
-  });
-
-  it('returns all entries if no filter', async () => {
-    await ResourceLoader.getAttackingSkillEntries((data) => data)
-      .then((data) => {
-        data = filterSkillEntries(inputDataTemplate, data);
-        expect(data.length).toBeGreaterThan(0);
-      });
-  });
-
-  it('returns SS only', async () => {
-    await ResourceLoader.getAttackingSkillEntries((data) => data)
-      .then((data) => {
-        const dataFiltered = filterSkillEntries(
-          {
-            ...inputDataTemplate,
-            filter: {
-              ...inputDataTemplate.filter,
-              sharedOnly: true,
-            },
-          },
-          data,
-        );
-        expect(dataFiltered.length).toBeGreaterThan(0);
-        expect(dataFiltered.map((entry) => entry.skill.sharable)).not.toContain(false);
-      });
-  });
-
-  it('returns dispel only', async () => {
-    await ResourceLoader.getAttackingSkillEntries((data) => data)
-      .then((data) => {
-        const dataFiltered = filterSkillEntries(
-          {
-            ...inputDataTemplate,
-            filter: {
-              ...inputDataTemplate.filter,
-              dispelOnly: true,
-            },
-          },
-          data,
-        );
-        expect(dataFiltered.length).toBeGreaterThan(0);
-        expect(dataFiltered.map((entry) => entry.skill.dispelMax)).not.toContain(false);
-      });
-  });
-
-  it('returns specified element only', async () => {
-    const enumElements = () => ResourceLoader.getEnumElements();
-    const attackingEntries = () => ResourceLoader.getAttackingSkillEntries();
-
-    await Promise.all([enumElements(), attackingEntries()])
-      .then(([elemEnums, data]) => {
-        elemEnums.elemental.map((elemEnum) => {
-          const elemEnumCode = elemEnum.code;
-
-          const dataFiltered = filterSkillEntries(
-            {
-              ...inputDataTemplate,
-              filter: {
-                ...inputDataTemplate.filter,
-                elemCodes: [elemEnumCode],
-              },
-            },
-            data,
-          );
-          expect(dataFiltered.length).toBeGreaterThan(0);
-          expect(dataFiltered.map((entry) => entry.chara.element === elemEnumCode)).not.toContain(false);
-        });
-      });
-  });
-
-  it('returns specified affliction', async () => {
-    const enumConditions = () => ResourceLoader.getEnumCategorizedConditions();
-    const attackingEntries = () => ResourceLoader.getAttackingSkillEntries();
-
-    await Promise.all([enumConditions(), attackingEntries()])
-      .then(([conditionEnums, data]) => {
-        conditionEnums.afflictions.map((afflictionEnum) => {
-          const afflictionEnumCode = afflictionEnum.code;
-
-          const dataFiltered = filterSkillEntries(
-            {
-              ...inputDataTemplate,
-              filter: {
-                ...inputDataTemplate.filter,
-                elemCodes: [afflictionEnumCode],
-              },
-            },
-            data,
-          );
-          expect(dataFiltered.map((entry) => entry.chara.element === afflictionEnumCode)).not.toContain(false);
-        });
-      });
-  });
-});
diff --git a/src/components/elements/gameData/skillAtk/out/utils.test.tsx b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
new file mode 100644
index 00000000..154a0fd0
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
@@ -0,0 +1,103 @@
+import {ResourceLoader} from '../../../../../utils/services/resources';
+import {InputData} from '../in/types';
+import {generateInputData} from '../in/utils';
+import {filterSkillEntries} from './utils';
+
+
+const inputDataTemplate: InputData = generateInputData();
+
+describe('Filter ATK skill entries', () => {
+  it('returns skill entries', async () => {
+    const data = await ResourceLoader.getAttackingSkillEntries();
+
+    expect(data.length).toBeGreaterThan(0);
+  });
+
+  it('returns all entries if no filter', async () => {
+    let data = await ResourceLoader.getAttackingSkillEntries();
+
+    data = filterSkillEntries(inputDataTemplate, data);
+    expect(data.length).toBeGreaterThan(0);
+  });
+
+  it('returns SS only', async () => {
+    const data = await ResourceLoader.getAttackingSkillEntries();
+
+    const dataFiltered = filterSkillEntries(
+      {
+        ...inputDataTemplate,
+        filter: {
+          ...inputDataTemplate.filter,
+          sharedOnly: true,
+        },
+      },
+      data,
+    );
+    expect(dataFiltered.length).toBeGreaterThan(0);
+    expect(dataFiltered.map((entry) => entry.skill.sharable)).not.toContain(false);
+  });
+
+  it('returns dispel only', async () => {
+    const data = await ResourceLoader.getAttackingSkillEntries();
+
+    const dataFiltered = filterSkillEntries(
+      {
+        ...inputDataTemplate,
+        filter: {
+          ...inputDataTemplate.filter,
+          dispelOnly: true,
+        },
+      },
+      data,
+    );
+    expect(dataFiltered.length).toBeGreaterThan(0);
+    expect(dataFiltered.map((entry) => entry.skill.dispelMax)).not.toContain(false);
+  });
+
+  it('returns specified element only', async () => {
+    const [elemEnums, data] = await Promise.all([
+      ResourceLoader.getEnumElements(),
+      ResourceLoader.getAttackingSkillEntries(),
+    ]);
+
+    elemEnums.elemental.map((elemEnum) => {
+      const elemEnumCode = elemEnum.code;
+
+      const dataFiltered = filterSkillEntries(
+        {
+          ...inputDataTemplate,
+          filter: {
+            ...inputDataTemplate.filter,
+            elemCodes: [elemEnumCode],
+          },
+        },
+        data,
+      );
+      expect(dataFiltered.length).toBeGreaterThan(0);
+      expect(dataFiltered.map((entry) => entry.chara.element === elemEnumCode)).not.toContain(false);
+    });
+  });
+
+  it('returns specified affliction', async () => {
+    const [conditionEnums, data] = await Promise.all([
+      ResourceLoader.getEnumCategorizedConditions(),
+      ResourceLoader.getAttackingSkillEntries(),
+    ]);
+
+    conditionEnums.afflictions.forEach((afflictionEnum) => {
+      const afflictionEnumCode = afflictionEnum.code;
+
+      const dataFiltered = filterSkillEntries(
+        {
+          ...inputDataTemplate,
+          filter: {
+            ...inputDataTemplate.filter,
+            elemCodes: [afflictionEnumCode],
+          },
+        },
+        data,
+      );
+      expect(dataFiltered.map((entry) => entry.chara.element === afflictionEnumCode)).not.toContain(false);
+    });
+  });
+});

From ce7c046690e86163a6e67e0db33ec2f9427cf7b0 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 21:35:48 -0500
Subject: [PATCH 38/61] IMP - Refactor out ATK skill entry calculation function

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/in/types.ts    |  3 +
 .../elements/gameData/skillAtk/in/utils.ts    |  2 +
 .../elements/gameData/skillAtk/out/main.tsx   | 23 ++----
 .../gameData/skillAtk/out/utils.test.tsx      | 80 ++++++++++++++-----
 .../elements/gameData/skillAtk/out/utils.ts   | 26 +++++-
 5 files changed, 96 insertions(+), 38 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index 921c6b5d..9df309f8 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -3,6 +3,8 @@ import {ConditionCodes} from '../../../../../const/gameData';
 import {InputPanelCommonProps} from '../../../input/types';
 
 
+export type SortBy = 'damage' | 'sp' | 'ssp'
+
 export type InputData = {
   params: {
     atk: {
@@ -67,6 +69,7 @@ export type InputData = {
     // Hit timings, cancellation info, animation duration
     animationInfo: boolean,
   }
+  sortBy: SortBy,
 }
 
 export type SectionProps = InputPanelCommonProps<InputData>
diff --git a/src/components/elements/gameData/skillAtk/in/utils.ts b/src/components/elements/gameData/skillAtk/in/utils.ts
index c705e5ed..0f2eb3b2 100644
--- a/src/components/elements/gameData/skillAtk/in/utils.ts
+++ b/src/components/elements/gameData/skillAtk/in/utils.ts
@@ -66,6 +66,7 @@ export const overwriteInputData = (original: InputData, overwrite: DeepPartial<I
     spInfo: overwrite?.display?.spInfo ?? original.display.spInfo,
     animationInfo: overwrite?.display?.animationInfo ?? original.display.animationInfo,
   },
+  sortBy: overwrite?.sortBy ?? original.sortBy,
 });
 
 export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData => overwriteInputData(
@@ -131,6 +132,7 @@ export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData
       spInfo: true,
       animationInfo: false,
     },
+    sortBy: 'damage',
   },
   overwrite || {},
 );
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index 1e838f5f..d207ad2d 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
-import {calculateDamage, CalculateDamageReturn} from '../../../../../utils/game/damage';
+import {CalculateDamageReturn} from '../../../../../utils/game/damage';
 import {AnimationInfoWarning} from '../../warnings/animation';
 import {overLengthWarningCheck} from '../../warnings/overLength';
 import {InputData} from '../in/types';
 import {AttackingSkillEntry} from './entry';
 import {EnumDataPack} from './props';
-import {filterSkillEntries} from './utils';
+import {calculateEntries, filterSkillEntries} from './utils';
 
 
 export type CalculatedData = {
@@ -38,22 +38,9 @@ export const AttackingSkillOutput = ({
   const atkSkillEntriesFiltered = filterSkillEntries(inputData, atkSkillEntries);
 
   // Calculate entries
-  const calculatedEntries: Array<CalculatedData> = atkSkillEntriesFiltered
-    .map((entry: AttackingSkillData) => {
-      // Element bonus rate
-      const charaElementRate = elementBonusData.getElementBonus(
-        String(entry.chara.element),
-        String(inputData.target.elemCondCode),
-      );
-
-      // Calculate skill damage
-      const skillDamage = calculateDamage(inputData, entry, charaElementRate);
-      // endregion
-
-      return {skillDamage, skillEntry: entry};
-    })
-    .filter((calcData) => calcData.skillDamage.expected > 0)
-    .sort((a, b) => b.skillDamage.expected - a.skillDamage.expected);
+  const calculatedEntries: Array<CalculatedData> = calculateEntries(
+    atkSkillEntriesFiltered, inputData, elementBonusData,
+  );
 
   const entries: Array<React.ReactElement> = [];
 
diff --git a/src/components/elements/gameData/skillAtk/out/utils.test.tsx b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
index 154a0fd0..1c601e5e 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
@@ -1,28 +1,29 @@
+import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
 import {ResourceLoader} from '../../../../../utils/services/resources';
 import {InputData} from '../in/types';
 import {generateInputData} from '../in/utils';
-import {filterSkillEntries} from './utils';
+import {calculateEntries, filterSkillEntries} from './utils';
 
 
 const inputDataTemplate: InputData = generateInputData();
 
 describe('Filter ATK skill entries', () => {
-  it('returns skill entries', async () => {
-    const data = await ResourceLoader.getAttackingSkillEntries();
+  let data: Array<AttackingSkillData>;
+
+  beforeAll(async () => {
+    data = await ResourceLoader.getAttackingSkillEntries();
+  });
 
+  it('returns skill entries', async () => {
     expect(data.length).toBeGreaterThan(0);
   });
 
   it('returns all entries if no filter', async () => {
-    let data = await ResourceLoader.getAttackingSkillEntries();
-
-    data = filterSkillEntries(inputDataTemplate, data);
-    expect(data.length).toBeGreaterThan(0);
+    const dataFiltered = filterSkillEntries(inputDataTemplate, data);
+    expect(dataFiltered.length).toBeGreaterThan(0);
   });
 
   it('returns SS only', async () => {
-    const data = await ResourceLoader.getAttackingSkillEntries();
-
     const dataFiltered = filterSkillEntries(
       {
         ...inputDataTemplate,
@@ -38,8 +39,6 @@ describe('Filter ATK skill entries', () => {
   });
 
   it('returns dispel only', async () => {
-    const data = await ResourceLoader.getAttackingSkillEntries();
-
     const dataFiltered = filterSkillEntries(
       {
         ...inputDataTemplate,
@@ -55,10 +54,7 @@ describe('Filter ATK skill entries', () => {
   });
 
   it('returns specified element only', async () => {
-    const [elemEnums, data] = await Promise.all([
-      ResourceLoader.getEnumElements(),
-      ResourceLoader.getAttackingSkillEntries(),
-    ]);
+    const elemEnums = await ResourceLoader.getEnumElements();
 
     elemEnums.elemental.map((elemEnum) => {
       const elemEnumCode = elemEnum.code;
@@ -79,10 +75,7 @@ describe('Filter ATK skill entries', () => {
   });
 
   it('returns specified affliction', async () => {
-    const [conditionEnums, data] = await Promise.all([
-      ResourceLoader.getEnumCategorizedConditions(),
-      ResourceLoader.getAttackingSkillEntries(),
-    ]);
+    const conditionEnums = await ResourceLoader.getEnumCategorizedConditions();
 
     conditionEnums.afflictions.forEach((afflictionEnum) => {
       const afflictionEnumCode = afflictionEnum.code;
@@ -101,3 +94,52 @@ describe('Filter ATK skill entries', () => {
     });
   });
 });
+
+describe('Sort ATK skill entries', () => {
+  let data: Array<AttackingSkillData>;
+  let elemBonusData: ElementBonusData;
+
+  beforeAll(async () => {
+    data = await ResourceLoader.getAttackingSkillEntries();
+    elemBonusData = new ElementBonusData(await ResourceLoader.getElementBonusData());
+  });
+
+  it('sorts entries by damage DESC', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'damage',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData);
+    expect(entries[0].skillDamage.expected > entries[1].skillDamage.expected);
+    expect(entries[1].skillDamage.expected > entries[2].skillDamage.expected);
+    expect(entries[2].skillDamage.expected > entries[3].skillDamage.expected);
+    expect(entries[3].skillDamage.expected > entries[4].skillDamage.expected);
+  });
+
+  it('sorts entries by SP ASC', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'sp',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData);
+    expect(entries[0].skillEntry.skill.spMax > entries[1].skillEntry.skill.spMax);
+    expect(entries[1].skillEntry.skill.spMax > entries[2].skillEntry.skill.spMax);
+    expect(entries[2].skillEntry.skill.spMax > entries[3].skillEntry.skill.spMax);
+    expect(entries[3].skillEntry.skill.spMax > entries[4].skillEntry.skill.spMax);
+  });
+
+  it('sorts entries by SSP ASC', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'ssp',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData);
+    expect(entries[0].skillEntry.skill.ssSp > entries[1].skillEntry.skill.ssSp);
+    expect(entries[1].skillEntry.skill.ssSp > entries[2].skillEntry.skill.ssSp);
+    expect(entries[2].skillEntry.skill.ssSp > entries[3].skillEntry.skill.ssSp);
+    expect(entries[3].skillEntry.skill.ssSp > entries[4].skillEntry.skill.ssSp);
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/out/utils.ts b/src/components/elements/gameData/skillAtk/out/utils.ts
index 19328c2e..eea87ae5 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.ts
+++ b/src/components/elements/gameData/skillAtk/out/utils.ts
@@ -1,5 +1,7 @@
-import {AttackingSkillData} from '../../../../../api-def/resources';
+import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
+import {calculateDamage} from '../../../../../utils/game/damage';
 import {InputData} from '../in/types';
+import {sortFunc} from './sorter/lookup';
 
 
 export const filterSkillEntries = (inputData: InputData, atkSkillEntries: Array<AttackingSkillData>) => {
@@ -31,3 +33,25 @@ export const filterSkillEntries = (inputData: InputData, atkSkillEntries: Array<
 
   return atkSkillEntries;
 };
+
+
+export const calculateEntries = (
+  atkSkillEntries: Array<AttackingSkillData>, inputData: InputData, elemBonusData: ElementBonusData,
+) => {
+  return atkSkillEntries
+    .map((entry: AttackingSkillData) => {
+      // Element bonus rate
+      const charaElementRate = elemBonusData.getElementBonus(
+        String(entry.chara.element),
+        String(inputData.target.elemCondCode),
+      );
+
+      // Calculate skill damage
+      const skillDamage = calculateDamage(inputData, entry, charaElementRate);
+      // endregion
+
+      return {skillDamage, skillEntry: entry};
+    })
+    .filter((calcData) => calcData.skillDamage.expected > 0)
+    .sort(sortFunc[inputData.sortBy]);
+};

From 27c238d81e916767f8edf7161bac0233e72a1677 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 23:16:27 -0500
Subject: [PATCH 39/61] ADD - Skill efficiency calculation

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/in/types.ts    |   9 +-
 .../elements/gameData/skillAtk/in/utils.ts    |   2 +-
 .../elements/gameData/skillAtk/out/entry.tsx  |   4 +-
 .../elements/gameData/skillAtk/out/main.tsx   |  11 +-
 .../skillAtk/out/sections/skillDamage.tsx     |   4 +-
 .../skillAtk/out/sections/skillInfo.tsx       |   4 +-
 .../gameData/skillAtk/out/sorter/lookup.ts    |  30 +++
 .../elements/gameData/skillAtk/out/types.ts   |  16 ++
 .../gameData/skillAtk/out/utils.test.tsx      | 234 ++++++++++++++++--
 .../elements/gameData/skillAtk/out/utils.ts   |  23 +-
 src/i18n/translations/cht/translation.ts      |   9 +
 src/i18n/translations/definition.ts           |   9 +
 src/i18n/translations/en/translation.ts       |   9 +
 src/i18n/translations/jp/translation.ts       |   9 +
 test/data/mock/skill.ts                       |   8 +-
 15 files changed, 341 insertions(+), 40 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
 create mode 100644 src/components/elements/gameData/skillAtk/out/types.ts

diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index 9df309f8..903c8ed3 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -3,7 +3,14 @@ import {ConditionCodes} from '../../../../../const/gameData';
 import {InputPanelCommonProps} from '../../../input/types';
 
 
-export type SortBy = 'damage' | 'sp' | 'ssp'
+export type SortBy =
+  'damageDesc' |
+  'spAsc' |
+  'sspAsc' |
+  'spPer1KModDesc' |
+  'sspPer1KModDesc' |
+  'afflictionLengthPer1KSpDesc' |
+  'afflictionLengthPer1KSspDesc'
 
 export type InputData = {
   params: {
diff --git a/src/components/elements/gameData/skillAtk/in/utils.ts b/src/components/elements/gameData/skillAtk/in/utils.ts
index 0f2eb3b2..c5f9ed34 100644
--- a/src/components/elements/gameData/skillAtk/in/utils.ts
+++ b/src/components/elements/gameData/skillAtk/in/utils.ts
@@ -132,7 +132,7 @@ export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData
       spInfo: true,
       animationInfo: false,
     },
-    sortBy: 'damage',
+    sortBy: 'damageDesc',
   },
   overwrite || {},
 );
diff --git a/src/components/elements/gameData/skillAtk/out/entry.tsx b/src/components/elements/gameData/skillAtk/out/entry.tsx
index b865bf86..604956ab 100644
--- a/src/components/elements/gameData/skillAtk/out/entry.tsx
+++ b/src/components/elements/gameData/skillAtk/out/entry.tsx
@@ -6,7 +6,6 @@ import Row from 'react-bootstrap/Row';
 import {DistributionBar} from '../../../charts';
 import {ConditionBadges} from '../../elements/conditionBadges';
 import {InputData} from '../in/types';
-import {CalculatedData} from './main';
 import {EnumDataPack} from './props';
 import {SectionAffliction} from './sections/affliction';
 import {SectionAnimation} from './sections/animation';
@@ -15,11 +14,12 @@ import {SectionImageIcon} from './sections/icon';
 import {SectionSkillDamage} from './sections/skillDamage';
 import {SectionSkillInfo} from './sections/skillInfo';
 import {SectionSkillName} from './sections/skillName';
+import {CalculatedSkillEntry} from './types';
 
 
 type SkillEntryProps = EnumDataPack & {
   inputData?: InputData,
-  calculatedData: CalculatedData,
+  calculatedData: CalculatedSkillEntry,
 }
 
 export const AttackingSkillEntry = ({
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index d207ad2d..b5fe2958 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -1,20 +1,15 @@
 import React from 'react';
 
 import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
-import {CalculateDamageReturn} from '../../../../../utils/game/damage';
 import {AnimationInfoWarning} from '../../warnings/animation';
 import {overLengthWarningCheck} from '../../warnings/overLength';
 import {InputData} from '../in/types';
 import {AttackingSkillEntry} from './entry';
 import {EnumDataPack} from './props';
+import {CalculatedSkillEntry} from './types';
 import {calculateEntries, filterSkillEntries} from './utils';
 
 
-export type CalculatedData = {
-  skillDamage: CalculateDamageReturn,
-  skillEntry: AttackingSkillData,
-}
-
 type OutputProps = EnumDataPack & {
   inputData?: InputData,
   elementBonusData: ElementBonusData,
@@ -38,7 +33,7 @@ export const AttackingSkillOutput = ({
   const atkSkillEntriesFiltered = filterSkillEntries(inputData, atkSkillEntries);
 
   // Calculate entries
-  const calculatedEntries: Array<CalculatedData> = calculateEntries(
+  const calculatedEntries: Array<CalculatedSkillEntry> = calculateEntries(
     atkSkillEntriesFiltered, inputData, elementBonusData,
   );
 
@@ -57,7 +52,7 @@ export const AttackingSkillOutput = ({
   // Add transformed entries
   entries.push(
     ...calculatedEntries
-      .map((calculatedData: CalculatedData, index: number) => (
+      .map((calculatedData: CalculatedSkillEntry, index: number) => (
         <AttackingSkillEntry
           key={index}
           inputData={inputData}
diff --git a/src/components/elements/gameData/skillAtk/out/sections/skillDamage.tsx b/src/components/elements/gameData/skillAtk/out/sections/skillDamage.tsx
index e78730ff..b6396714 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/skillDamage.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/skillDamage.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {CalculatedData} from '../main';
+import {CalculatedSkillEntry} from '../types';
 
 
 type SectionSkillDamageProps = {
-  calculatedData: CalculatedData,
+  calculatedData: CalculatedSkillEntry,
 }
 
 export const SectionSkillDamage = ({calculatedData}: SectionSkillDamageProps) => {
diff --git a/src/components/elements/gameData/skillAtk/out/sections/skillInfo.tsx b/src/components/elements/gameData/skillAtk/out/sections/skillInfo.tsx
index 8e389aa3..5358c43b 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/skillInfo.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/skillInfo.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import {CalculatedData} from '../main';
 import {SectionProps} from '../props';
+import {CalculatedSkillEntry} from '../types';
 
 
 type SectionSkillInfoProps = SectionProps & {
-  calculatedData: CalculatedData,
+  calculatedData: CalculatedSkillEntry,
 }
 
 export const SectionSkillInfo = ({atkSkillEntry, calculatedData}: SectionSkillInfoProps) => (
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
new file mode 100644
index 00000000..053a5287
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
@@ -0,0 +1,30 @@
+import {GetTranslationFunction} from '../../../../../../i18n/types';
+import {SortBy} from '../../in/types';
+import {CalculatedSkillEntry} from '../types';
+
+
+type SortFuncLookup = { [sortBy in SortBy]: (entryA: CalculatedSkillEntry, entryB: CalculatedSkillEntry) => number }
+
+export const sortFunc: SortFuncLookup = {
+  damageDesc: (a, b) => b.skillDamage.expected - a.skillDamage.expected,
+  spAsc: (a, b) => a.skillEntry.skill.spMax - b.skillEntry.skill.spMax,
+  sspAsc: (a, b) => a.skillEntry.skill.ssSp - b.skillEntry.skill.ssSp,
+  spPer1KModDesc: (a, b) => b.efficiency.spPer1KMod - a.efficiency.spPer1KMod,
+  sspPer1KModDesc: (a, b) => b.efficiency.sspPer1KMod - a.efficiency.sspPer1KMod,
+  afflictionLengthPer1KSpDesc: (a, b) => (
+    Math.min(...Object.values(b.efficiency.secPer1KSp)) - Math.min(...Object.values(a.efficiency.secPer1KSp))
+  ),
+  afflictionLengthPer1KSspDesc: (a, b) => (
+    Math.min(...Object.values(b.efficiency.secPer1KSsp)) - Math.min(...Object.values(a.efficiency.secPer1KSsp))
+  ),
+};
+
+export const sortName: { [sortBy in SortBy]: GetTranslationFunction } = {
+  damageDesc: (t) => t.game.skillAtk.sort.damageDesc,
+  spAsc: (t) => t.game.skillAtk.sort.spAsc,
+  sspAsc: (t) => t.game.skillAtk.sort.sspAsc,
+  spPer1KModDesc: (t) => t.game.skillAtk.sort.spPer1KModDesc,
+  sspPer1KModDesc: (t) => t.game.skillAtk.sort.sspPer1KModDesc,
+  afflictionLengthPer1KSpDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSpAsc,
+  afflictionLengthPer1KSspDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSspAsc,
+};
diff --git a/src/components/elements/gameData/skillAtk/out/types.ts b/src/components/elements/gameData/skillAtk/out/types.ts
new file mode 100644
index 00000000..ee5f90a5
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/types.ts
@@ -0,0 +1,16 @@
+import {AttackingSkillData} from '../../../../../api-def/resources';
+import {CalculateDamageReturn} from '../../../../../utils/game/damage';
+
+
+export type Efficiency = {
+  spPer1KMod: number,
+  sspPer1KMod: number,
+  secPer1KSp: {[StatusCode in number]: number},
+  secPer1KSsp: {[StatusCode in number]: number},
+}
+
+export type CalculatedSkillEntry = {
+  skillDamage: CalculateDamageReturn,
+  skillEntry: AttackingSkillData,
+  efficiency: Efficiency,
+}
diff --git a/src/components/elements/gameData/skillAtk/out/utils.test.tsx b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
index 1c601e5e..d138f51d 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
@@ -1,3 +1,4 @@
+import {generateAttackingSkillEntry} from '../../../../../../test/data/mock/skill';
 import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
 import {ResourceLoader} from '../../../../../utils/services/resources';
 import {InputData} from '../in/types';
@@ -96,6 +97,8 @@ describe('Filter ATK skill entries', () => {
 });
 
 describe('Sort ATK skill entries', () => {
+  // Source of getting the unique ordered array: https://stackoverflow.com/a/34191046/11571888
+
   let data: Array<AttackingSkillData>;
   let elemBonusData: ElementBonusData;
 
@@ -107,39 +110,234 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by damage DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'damage',
+      sortBy: 'damageDesc',
     };
 
-    const entries = calculateEntries(data, inputData, elemBonusData);
-    expect(entries[0].skillDamage.expected > entries[1].skillDamage.expected);
-    expect(entries[1].skillDamage.expected > entries[2].skillDamage.expected);
-    expect(entries[2].skillDamage.expected > entries[3].skillDamage.expected);
-    expect(entries[3].skillDamage.expected > entries[4].skillDamage.expected);
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => entry.skillDamage.expected)
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeGreaterThan(entries[1]);
+    expect(entries[1]).toBeGreaterThan(entries[2]);
+    expect(entries[2]).toBeGreaterThan(entries[3]);
+    expect(entries[3]).toBeGreaterThan(entries[4]);
   });
 
   it('sorts entries by SP ASC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'sp',
+      sortBy: 'spAsc',
     };
 
-    const entries = calculateEntries(data, inputData, elemBonusData);
-    expect(entries[0].skillEntry.skill.spMax > entries[1].skillEntry.skill.spMax);
-    expect(entries[1].skillEntry.skill.spMax > entries[2].skillEntry.skill.spMax);
-    expect(entries[2].skillEntry.skill.spMax > entries[3].skillEntry.skill.spMax);
-    expect(entries[3].skillEntry.skill.spMax > entries[4].skillEntry.skill.spMax);
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => entry.skillEntry.skill.spMax)
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeLessThan(entries[1]);
+    expect(entries[1]).toBeLessThan(entries[2]);
+    expect(entries[2]).toBeLessThan(entries[3]);
+    expect(entries[3]).toBeLessThan(entries[4]);
   });
 
   it('sorts entries by SSP ASC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'ssp',
+      sortBy: 'sspAsc',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => entry.skillEntry.skill.ssSp)
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeLessThan(entries[1]);
+    expect(entries[1]).toBeLessThan(entries[2]);
+    expect(entries[2]).toBeLessThan(entries[3]);
+    expect(entries[3]).toBeLessThan(entries[4]);
+  });
+
+  it('sorts entries by SP efficiency DESC', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'spPer1KModDesc',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => entry.efficiency.spPer1KMod)
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeGreaterThan(entries[1]);
+    expect(entries[1]).toBeGreaterThan(entries[2]);
+    expect(entries[2]).toBeGreaterThan(entries[3]);
+    expect(entries[3]).toBeGreaterThan(entries[4]);
+  });
+
+  it('sorts entries by SSP efficiency DESC', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'sspPer1KModDesc',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => entry.efficiency.sspPer1KMod)
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeGreaterThan(entries[1]);
+    expect(entries[1]).toBeGreaterThan(entries[2]);
+    expect(entries[2]).toBeGreaterThan(entries[3]);
+    expect(entries[3]).toBeGreaterThan(entries[4]);
+  });
+
+  it('sorts entries by affliction duration SP efficiency DESC', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'afflictionLengthPer1KSpDesc',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => Math.min(...Object.values(entry.efficiency.secPer1KSp)))
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeGreaterThan(entries[1]);
+    expect(entries[1]).toBeGreaterThan(entries[2]);
+    expect(entries[2]).toBeGreaterThan(entries[3]);
+    expect(entries[3]).toBeGreaterThan(entries[4]);
+  });
+
+  it('sorts entries by affliction duration SSP efficiency DESC', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'afflictionLengthPer1KSspDesc',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => Math.min(...Object.values(entry.efficiency.secPer1KSsp)))
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeGreaterThan(entries[1]);
+    expect(entries[1]).toBeGreaterThan(entries[2]);
+    expect(entries[2]).toBeGreaterThan(entries[3]);
+    expect(entries[3]).toBeGreaterThan(entries[4]);
+  });
+});
+
+describe('Entry calculation', () => {
+  const data: AttackingSkillData = generateAttackingSkillEntry();
+  let elemBonusData: ElementBonusData;
+
+  beforeAll(async () => {
+    elemBonusData = new ElementBonusData(await ResourceLoader.getElementBonusData());
+  });
+
+  it('calculates SP efficiency', async () => {
+    const dataModified: AttackingSkillData = {
+      ...data,
+      skill: {
+        ...data.skill,
+        spMax: 5000,
+        modsMax: [10, 15],
+        buffCountBoost: [
+          {
+            each: 0,
+            inEffect: 0,
+            limit: 0,
+          },
+          {
+            each: 0,
+            inEffect: 0,
+            limit: 0,
+          },
+        ],
+        crisisMax: [0, 0],
+      },
+    };
+
+    const entry = calculateEntries([dataModified], inputDataTemplate, elemBonusData)[0];
+    expect(entry.efficiency.spPer1KMod).toBe(2000);
+  });
+
+  it('calculates SSP efficiency', async () => {
+    const dataModified: AttackingSkillData = {
+      ...data,
+      skill: {
+        ...data.skill,
+        ssSp: 25000,
+        modsMax: [10, 15],
+        buffCountBoost: [
+          {
+            each: 0,
+            inEffect: 0,
+            limit: 0,
+          },
+          {
+            each: 0,
+            inEffect: 0,
+            limit: 0,
+          },
+        ],
+        crisisMax: [0, 0],
+      },
+    };
+
+    const entry = calculateEntries([dataModified], inputDataTemplate, elemBonusData)[0];
+    expect(entry.efficiency.sspPer1KMod).toBe(10000);
+  });
+
+  it('calculates affliction duration SP efficiency', async () => {
+    const dataModified: AttackingSkillData = {
+      ...data,
+      skill: {
+        ...data.skill,
+        spMax: 25000,
+        afflictions: [
+          {
+            actionTime: 1.5,
+            duration: 25,
+            probabilityPct: 120,
+            stackable: true,
+            statusCode: 4,
+            statusConditionCode: 0,
+            statusIcon: 'afflictionIcon',
+          },
+          {
+            actionTime: 1.5,
+            duration: 50,
+            probabilityPct: 120,
+            stackable: true,
+            statusCode: 5,
+            statusConditionCode: 0,
+            statusIcon: 'afflictionIcon',
+          },
+        ],
+      },
+    };
+
+    const entry = calculateEntries([dataModified], inputDataTemplate, elemBonusData)[0];
+    expect(entry.efficiency.secPer1KSp).toStrictEqual({4: 1, 5: 2});
+  });
+
+  it('calculates affliction duration SSP efficiency', async () => {
+    const dataModified: AttackingSkillData = {
+      ...data,
+      skill: {
+        ...data.skill,
+        ssSp: 12500,
+        afflictions: [
+          {
+            actionTime: 1.5,
+            duration: 25,
+            probabilityPct: 120,
+            stackable: true,
+            statusCode: 4,
+            statusConditionCode: 0,
+            statusIcon: 'afflictionIcon',
+          },
+          {
+            actionTime: 1.5,
+            duration: 50,
+            probabilityPct: 120,
+            stackable: true,
+            statusCode: 5,
+            statusConditionCode: 0,
+            statusIcon: 'afflictionIcon',
+          },
+        ],
+      },
     };
 
-    const entries = calculateEntries(data, inputData, elemBonusData);
-    expect(entries[0].skillEntry.skill.ssSp > entries[1].skillEntry.skill.ssSp);
-    expect(entries[1].skillEntry.skill.ssSp > entries[2].skillEntry.skill.ssSp);
-    expect(entries[2].skillEntry.skill.ssSp > entries[3].skillEntry.skill.ssSp);
-    expect(entries[3].skillEntry.skill.ssSp > entries[4].skillEntry.skill.ssSp);
+    const entry = calculateEntries([dataModified], inputDataTemplate, elemBonusData)[0];
+    expect(entry.efficiency.secPer1KSsp).toStrictEqual({4: 2, 5: 4});
   });
 });
diff --git a/src/components/elements/gameData/skillAtk/out/utils.ts b/src/components/elements/gameData/skillAtk/out/utils.ts
index eea87ae5..85666be5 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.ts
+++ b/src/components/elements/gameData/skillAtk/out/utils.ts
@@ -2,6 +2,7 @@ import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resou
 import {calculateDamage} from '../../../../../utils/game/damage';
 import {InputData} from '../in/types';
 import {sortFunc} from './sorter/lookup';
+import {CalculatedSkillEntry, Efficiency} from './types';
 
 
 export const filterSkillEntries = (inputData: InputData, atkSkillEntries: Array<AttackingSkillData>) => {
@@ -34,10 +35,9 @@ export const filterSkillEntries = (inputData: InputData, atkSkillEntries: Array<
   return atkSkillEntries;
 };
 
-
 export const calculateEntries = (
   atkSkillEntries: Array<AttackingSkillData>, inputData: InputData, elemBonusData: ElementBonusData,
-) => {
+): Array<CalculatedSkillEntry> => {
   return atkSkillEntries
     .map((entry: AttackingSkillData) => {
       // Element bonus rate
@@ -48,9 +48,24 @@ export const calculateEntries = (
 
       // Calculate skill damage
       const skillDamage = calculateDamage(inputData, entry, charaElementRate);
-      // endregion
 
-      return {skillDamage, skillEntry: entry};
+      // Calculate efficiency
+      const efficiency: Efficiency = {
+        spPer1KMod: entry.skill.spMax / (skillDamage.totalMods / 10),
+        sspPer1KMod: entry.skill.ssSp / (skillDamage.totalMods / 10),
+        secPer1KSp: Object.fromEntries(entry.skill.afflictions.map((afflictionUnit) => (
+          [afflictionUnit.statusCode, afflictionUnit.duration / (entry.skill.spMax / 1000)]
+        ))),
+        secPer1KSsp: Object.fromEntries(entry.skill.afflictions.map((afflictionUnit) => (
+          [afflictionUnit.statusCode, afflictionUnit.duration / (entry.skill.ssSp / 1000)]
+        ))),
+      };
+
+      return {
+        skillDamage,
+        skillEntry: entry,
+        efficiency,
+      };
     })
     .filter((calcData) => calcData.skillDamage.expected > 0)
     .sort(sortFunc[inputData.sortBy]);
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 14c956cd..e678700c 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -206,6 +206,15 @@ export const translation: TranslationStruct = {
         },
         warning: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
       },
+      sort: {
+        damageDesc: '傷害 (高 → 低)',
+        spAsc: 'SP (低 → 高)',
+        sspAsc: 'SSP (低 → 高)',
+        spPer1KModDesc: 'SP / 1000% (低 → 高)',
+        sspPer1KModDesc: 'SSP / 1000% (低 → 高)',
+        afflictionLengthPer1KSpAsc: '異常效期 (秒) / 1K SP (高 → 低)',
+        afflictionLengthPer1KSspAsc: '異常效期 (秒) / 1K SSP (高 → 低)',
+      },
     },
     tools: {
       titleSelf: '遊戲工具',
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index e802e6eb..84754929 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -203,6 +203,15 @@ export type TranslationStruct = {
         },
         warning: string,
       },
+      sort: {
+        damageDesc: string,
+        spAsc: string,
+        sspAsc: string,
+        spPer1KModDesc: string,
+        sspPer1KModDesc: string,
+        afflictionLengthPer1KSpAsc: string,
+        afflictionLengthPer1KSspAsc: string,
+      }
     },
     tools: {
       titleSelf: string,
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 41ebbdb9..67013f0e 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -230,6 +230,15 @@ export const translation: TranslationStruct = {
         },
         warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
       },
+      sort: {
+        damageDesc: 'Damage (Hi → Lo)',
+        spAsc: 'SP (Lo → Hi)',
+        sspAsc: 'SSP (Lo → Hi)',
+        spPer1KModDesc: 'SP / 1000% (Lo → Hi)',
+        sspPer1KModDesc: 'SSP / 1000% (Lo → Hi)',
+        afflictionLengthPer1KSpAsc: 'Affliction (sec) / 1K SP (Hi → Lo)',
+        afflictionLengthPer1KSspAsc: 'Affliction (sec) / 1K SSP (Hi → Lo)',
+      },
     },
     tools: {
       titleSelf: 'Game Tools',
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 8c8e87f4..64950f24 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -205,6 +205,15 @@ export const translation: TranslationStruct = {
         },
         warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
       },
+      sort: {
+        damageDesc: '傷害 (高 → 低)',
+        spAsc: 'SP (低 → 高)',
+        sspAsc: 'SSP (低 → 高)',
+        spPer1KModDesc: 'SP / 1000% (低 → 高)',
+        sspPer1KModDesc: 'SSP / 1000% (低 → 高)',
+        afflictionLengthPer1KSpAsc: '異常效期 (秒) / 1K SP (高 → 低)',
+        afflictionLengthPer1KSspAsc: '異常效期 (秒) / 1K SSP (高 → 低)',
+      },
     },
     tools: {
       titleSelf: '他のツール',
diff --git a/test/data/mock/skill.ts b/test/data/mock/skill.ts
index 97103890..3f1df45f 100644
--- a/test/data/mock/skill.ts
+++ b/test/data/mock/skill.ts
@@ -24,12 +24,16 @@ export const generateAttackingSkillEntry = (): AttackingSkillData => ({
       statusConditionCode: 0,
       statusIcon: 'afflictionIcon',
     }],
-    buffCountBoost: [],
+    buffCountBoost: [{
+      each: 0,
+      inEffect: 0,
+      limit: 0,
+    }],
     buffZoneBoost: {
       self: 0,
       ally: 0,
     },
-    crisisMax: [],
+    crisisMax: [0],
     dispelMax: false,
     dispelTimingMax: [],
     hitsMax: 0,

From 26f020788ac3698c1f34e68c52511c8a88a0d0c8 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Mon, 28 Jun 2021 23:58:58 -0500
Subject: [PATCH 40/61] ADD - ATK skill entry sorter (#72)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/main.tsx       | 13 +++++++
 .../gameData/skillAtk/out/sorter/lookup.ts    |  6 +--
 .../skillAtk/out/sorter/main.test.tsx         | 39 +++++++++++++++++++
 .../gameData/skillAtk/out/sorter/main.tsx     | 31 +++++++++++++++
 src/i18n/translations/cht/translation.ts      |  5 ++-
 src/i18n/translations/definition.ts           |  5 ++-
 src/i18n/translations/en/translation.ts       |  5 ++-
 src/i18n/translations/jp/translation.ts       |  5 ++-
 8 files changed, 98 insertions(+), 11 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/out/sorter/main.tsx

diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 268bb6c4..b8a2c2e5 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -13,7 +13,9 @@ import {ResourceLoader} from '../../../../utils/services/resources/loader';
 import {useFetchState, useFetchStateProcessed} from '../../common/fetch';
 import {AttackingSkillInput} from './in/main';
 import {InputData} from './in/types';
+import {overwriteInputData} from './in/utils';
 import {AttackingSkillOutput} from './out/main';
+import {AttackingSkillSorter} from './out/sorter/main';
 
 
 export const AttackingSkillLookup = () => {
@@ -83,6 +85,17 @@ export const AttackingSkillLookup = () => {
         />
       </Col>
       <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
+        {
+          inputDataForward &&
+          <Row className="text-right mb-2">
+            <Col>
+              <AttackingSkillSorter
+                inputData={inputDataForward}
+                onOrderPicked={(sortBy) => setInputDataForward(overwriteInputData(inputDataForward, {sortBy}))}
+              />
+            </Col>
+          </Row>
+        }
         <AttackingSkillOutput
           inputData={inputDataForward}
           conditionEnumMap={conditionEnums.data}
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
index 053a5287..fbc19ef1 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
+++ b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
@@ -19,12 +19,12 @@ export const sortFunc: SortFuncLookup = {
   ),
 };
 
-export const sortName: { [sortBy in SortBy]: GetTranslationFunction } = {
+export const orderName: { [sortBy in SortBy]: GetTranslationFunction } = {
   damageDesc: (t) => t.game.skillAtk.sort.damageDesc,
   spAsc: (t) => t.game.skillAtk.sort.spAsc,
   sspAsc: (t) => t.game.skillAtk.sort.sspAsc,
   spPer1KModDesc: (t) => t.game.skillAtk.sort.spPer1KModDesc,
   sspPer1KModDesc: (t) => t.game.skillAtk.sort.sspPer1KModDesc,
-  afflictionLengthPer1KSpDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSpAsc,
-  afflictionLengthPer1KSspDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSspAsc,
+  afflictionLengthPer1KSpDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSpDesc,
+  afflictionLengthPer1KSspDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSspDesc,
 };
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
new file mode 100644
index 00000000..0a1d982a
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {fireEvent, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {renderReact} from '../../../../../../../test/render/main';
+import {translation as translationEN} from '../../../../../../i18n/translations/en/translation';
+import {InputData} from '../../in/types';
+import {generateInputData} from '../../in/utils';
+import {AttackingSkillSorter} from './main';
+
+
+describe('ATK skill entry sorter', () => {
+  const inputData: InputData = generateInputData();
+  let onOrderPicked: jest.Mock;
+
+  beforeEach(() => {
+    onOrderPicked = jest.fn();
+  });
+
+  it('shows the current sort order', async () => {
+    renderReact(() => <AttackingSkillSorter inputData={inputData} onOrderPicked={onOrderPicked}/>);
+
+    expect(screen.getByText(`Order: ${translationEN.game.skillAtk.sort.damageDesc}`)).toBeInTheDocument();
+  });
+
+  it('dispatches on order picked event', async () => {
+    renderReact(() => <AttackingSkillSorter inputData={inputData} onOrderPicked={onOrderPicked}/>);
+
+    const dropdownButton = screen.getByText(/Order/);
+    userEvent.click(dropdownButton);
+
+    const orderButton = screen.getByText(translationEN.game.skillAtk.sort.afflictionLengthPer1KSpDesc);
+    fireEvent.click(orderButton);
+
+    expect(onOrderPicked).toHaveBeenCalledTimes(1);
+    expect(onOrderPicked).toHaveBeenLastCalledWith('afflictionLengthPer1KSpDesc');
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/main.tsx b/src/components/elements/gameData/skillAtk/out/sorter/main.tsx
new file mode 100644
index 00000000..d8a45b88
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sorter/main.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+
+import {useI18n} from '../../../../../../i18n/hook';
+import {InputData, SortBy} from '../../in/types';
+import {orderName} from './lookup';
+
+
+type Props = {
+  inputData: InputData,
+  onOrderPicked: (order: SortBy) => void,
+}
+
+export const AttackingSkillSorter = ({inputData, onOrderPicked}: Props) => {
+  const {t} = useI18n();
+
+  const sortBy = t(orderName[inputData.sortBy]);
+  const title = t((t) => t.game.skillAtk.sort.text, {sortBy});
+
+  return (
+    <DropdownButton title={title} variant="outline-light">
+      {Object.entries(orderName).map(([sortBy, getNameFunc], idx) => (
+        <Dropdown.Item key={idx} onClick={() => onOrderPicked(sortBy as SortBy)}>
+          {t(getNameFunc)}
+        </Dropdown.Item>
+      ))}
+    </DropdownButton>
+  );
+};
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index e678700c..85c19304 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -207,13 +207,14 @@ export const translation: TranslationStruct = {
         warning: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
       },
       sort: {
+        text: '排序: {{sortBy}}',
         damageDesc: '傷害 (高 → 低)',
         spAsc: 'SP (低 → 高)',
         sspAsc: 'SSP (低 → 高)',
         spPer1KModDesc: 'SP / 1000% (低 → 高)',
         sspPer1KModDesc: 'SSP / 1000% (低 → 高)',
-        afflictionLengthPer1KSpAsc: '異常效期 (秒) / 1K SP (高 → 低)',
-        afflictionLengthPer1KSspAsc: '異常效期 (秒) / 1K SSP (高 → 低)',
+        afflictionLengthPer1KSpDesc: '異常效期 (秒) / 1K SP (高 → 低)',
+        afflictionLengthPer1KSspDesc: '異常效期 (秒) / 1K SSP (高 → 低)',
       },
     },
     tools: {
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index 84754929..671bb0ec 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -204,13 +204,14 @@ export type TranslationStruct = {
         warning: string,
       },
       sort: {
+        text: string,
         damageDesc: string,
         spAsc: string,
         sspAsc: string,
         spPer1KModDesc: string,
         sspPer1KModDesc: string,
-        afflictionLengthPer1KSpAsc: string,
-        afflictionLengthPer1KSspAsc: string,
+        afflictionLengthPer1KSpDesc: string,
+        afflictionLengthPer1KSspDesc: string,
       }
     },
     tools: {
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 67013f0e..2e5514a3 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -231,13 +231,14 @@ export const translation: TranslationStruct = {
         warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
       },
       sort: {
+        text: 'Order: {{sortBy}}',
         damageDesc: 'Damage (Hi → Lo)',
         spAsc: 'SP (Lo → Hi)',
         sspAsc: 'SSP (Lo → Hi)',
         spPer1KModDesc: 'SP / 1000% (Lo → Hi)',
         sspPer1KModDesc: 'SSP / 1000% (Lo → Hi)',
-        afflictionLengthPer1KSpAsc: 'Affliction (sec) / 1K SP (Hi → Lo)',
-        afflictionLengthPer1KSspAsc: 'Affliction (sec) / 1K SSP (Hi → Lo)',
+        afflictionLengthPer1KSpDesc: 'Affliction (sec) / 1K SP (Hi → Lo)',
+        afflictionLengthPer1KSspDesc: 'Affliction (sec) / 1K SSP (Hi → Lo)',
       },
     },
     tools: {
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 64950f24..8a8a5216 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -206,13 +206,14 @@ export const translation: TranslationStruct = {
         warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
       },
       sort: {
+        text: '排序: {{sortBy}}',
         damageDesc: '傷害 (高 → 低)',
         spAsc: 'SP (低 → 高)',
         sspAsc: 'SSP (低 → 高)',
         spPer1KModDesc: 'SP / 1000% (低 → 高)',
         sspPer1KModDesc: 'SSP / 1000% (低 → 高)',
-        afflictionLengthPer1KSpAsc: '異常效期 (秒) / 1K SP (高 → 低)',
-        afflictionLengthPer1KSspAsc: '異常效期 (秒) / 1K SSP (高 → 低)',
+        afflictionLengthPer1KSpDesc: '異常效期 (秒) / 1K SP (高 → 低)',
+        afflictionLengthPer1KSspDesc: '異常效期 (秒) / 1K SSP (高 → 低)',
       },
     },
     tools: {

From d12a99ca4d10c55b743152c01d422145328a78b1 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 00:08:03 -0500
Subject: [PATCH 41/61] IMP - SP info translation

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/i18n/translations/cht/translation.ts | 2 +-
 src/i18n/translations/en/translation.ts  | 2 +-
 src/i18n/translations/jp/translation.ts  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 85c19304..05d51ba5 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -138,7 +138,7 @@ export const translation: TranslationStruct = {
           damageInfo: '傷害資訊',
           damageDistribution: '傷害分布',
           affliction: '異常狀態',
-          spInfo: 'SP 資訊',
+          spInfo: 'SP 效率/資訊',
           animationInfo: '動畫資訊',
         },
       },
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 2e5514a3..3c0cbcbc 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -161,7 +161,7 @@ export const translation: TranslationStruct = {
           damageInfo: 'Damage Info',
           damageDistribution: 'Damage Spread',
           affliction: 'Affliction',
-          spInfo: 'SP Info',
+          spInfo: 'SP Info / Efficiency',
           animationInfo: 'Animation',
         },
       },
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 8a8a5216..b906bd09 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -137,7 +137,7 @@ export const translation: TranslationStruct = {
           damageInfo: '傷害資訊',
           damageDistribution: '傷害分布',
           affliction: '異常狀態',
-          spInfo: 'SP 資訊',
+          spInfo: 'SP 效率/資訊',
           animationInfo: '動畫資訊',
         },
       },

From 0bbfe3fa5d197c2202fab00067867eb0601c7374 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 03:08:47 -0500
Subject: [PATCH 42/61] ADD - SP info section (#77)

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/main.test.tsx  |   2 +-
 .../elements/gameData/skillAtk/main.tsx       |  12 +-
 .../elements/gameData/skillAtk/out/entry.tsx  |   8 +-
 .../elements/gameData/skillAtk/out/main.tsx   |  13 +-
 .../elements/gameData/skillAtk/out/props.ts   |   9 +-
 .../skillAtk/out/sections/affliction.test.tsx |  16 +-
 .../skillAtk/out/sections/affliction.tsx      |  19 +-
 .../out/sections/animation.module.css         |  28 ---
 .../out/sections/animation.module.css.map     |   1 -
 .../skillAtk/out/sections/animation.tsx       |  12 +-
 .../skillAtk/out/sections/section.module.css  |  46 ++++
 .../out/sections/section.module.css.map       |   1 +
 ...mation.module.scss => section.module.scss} |  28 ++-
 .../skillAtk/out/sections/sp/efficiency.tsx   | 102 +++++++++
 .../skillAtk/out/sections/sp/info.tsx         |  37 ++++
 .../skillAtk/out/sections/sp/main.test.tsx    | 196 ++++++++++++++++++
 .../skillAtk/out/sections/sp/main.tsx         |  30 +++
 .../gameData/skillAtk/out/sorter/lookup.ts    |  12 +-
 .../skillAtk/out/sorter/main.test.tsx         |   2 +-
 src/i18n/translations/cht/translation.ts      |  22 +-
 src/i18n/translations/definition.ts           |  17 +-
 src/i18n/translations/en/translation.ts       |  22 +-
 src/i18n/translations/jp/translation.ts       |  22 +-
 test/data/mock/skill.ts                       |  23 ++
 24 files changed, 572 insertions(+), 108 deletions(-)
 delete mode 100644 src/components/elements/gameData/skillAtk/out/sections/animation.module.css
 delete mode 100644 src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/section.module.css
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/section.module.css.map
 rename src/components/elements/gameData/skillAtk/out/sections/{animation.module.scss => section.module.scss} (64%)
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/sp/info.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/out/sections/sp/main.tsx

diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
index 4d773525..679bc4ff 100644
--- a/src/components/elements/gameData/skillAtk/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -82,7 +82,7 @@ describe('ATK skill lookup', () => {
     // Actual damage from S!Julietta
     expect(screen.queryByText('161,524')).not.toBeInTheDocument();
     // Affliction from S!Julietta
-    await waitFor(() => expect(screen.getByAltText('Bog')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getAllByAltText('Bog').length).toBeGreaterThan(0));
     // Affliction from S!Julietta
     expect(screen.queryByText('', {selector: 'svg > rect'})).not.toBeInTheDocument();
   });
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index b8a2c2e5..bc8f9aa5 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {ConditionEnumMap, SkillEnums} from '../../../../api-def/resources/types/export/enums';
+import {ConditionEnumMap, SkillEnums, StatusEnums} from '../../../../api-def/resources/types/export/enums';
 import {ElementBonus, ElementBonusData} from '../../../../api-def/resources/types/export/misc';
 import {AttackingSkillData} from '../../../../api-def/resources/types/skillAtk';
 import {SkillIdentifierInfo} from '../../../../api-def/resources/types/skillIdentifier';
@@ -60,12 +60,21 @@ export const AttackingSkillLookup = () => {
     ResourceLoader.getEnumSkill,
     'Failed to fetch skill enums.',
   );
+  const {
+    fetchStatus: statusEnums,
+    fetchFunction: fetchStatusEnums,
+  } = useFetchState<StatusEnums>(
+    {status: []},
+    ResourceLoader.getEnumAfflictionStatus,
+    'Failed to fetch affliction status enums.',
+  );
 
   fetchElementBonuses();
   fetchConditionEnums();
   fetchSkillIdentifiers();
   fetchAttackingSkillEntries();
   fetchSkillEnums();
+  fetchStatusEnums();
 
   React.useEffect(() => {
     if (inputDataForward) {
@@ -103,6 +112,7 @@ export const AttackingSkillLookup = () => {
           skillIdentifierInfo={skillIdentifiers.data}
           atkSkillEntries={attackingSkillEntries.data}
           skillEnums={skillEnums.data}
+          statusEnums={statusEnums.data}
         />
       </Col>
     </Row>
diff --git a/src/components/elements/gameData/skillAtk/out/entry.tsx b/src/components/elements/gameData/skillAtk/out/entry.tsx
index 604956ab..80f325a3 100644
--- a/src/components/elements/gameData/skillAtk/out/entry.tsx
+++ b/src/components/elements/gameData/skillAtk/out/entry.tsx
@@ -14,6 +14,7 @@ import {SectionImageIcon} from './sections/icon';
 import {SectionSkillDamage} from './sections/skillDamage';
 import {SectionSkillInfo} from './sections/skillInfo';
 import {SectionSkillName} from './sections/skillName';
+import {SectionSpInfo} from './sections/sp/main';
 import {CalculatedSkillEntry} from './types';
 
 
@@ -28,6 +29,7 @@ export const AttackingSkillEntry = ({
   conditionEnumMap,
   skillIdentifierInfo,
   skillEnums,
+  statusEnums,
 }: SkillEntryProps) => {
   const atkSkillEntry = calculatedData.skillEntry;
 
@@ -70,7 +72,7 @@ export const AttackingSkillEntry = ({
       <Row>
         {
           inputData.display.affliction &&
-          <SectionAffliction atkSkillEntry={atkSkillEntry}/>
+          <SectionAffliction atkSkillEntry={atkSkillEntry} statusEnums={statusEnums}/>
         }
         <SectionBadges atkSkillEntry={atkSkillEntry}/>
       </Row>
@@ -78,6 +80,10 @@ export const AttackingSkillEntry = ({
         inputData.display.animationInfo &&
         <SectionAnimation atkSkillEntry={atkSkillEntry} skillEnums={skillEnums} conditionEnumMap={conditionEnumMap}/>
       }
+      {
+        inputData.display.spInfo &&
+        <SectionSpInfo calculatedData={calculatedData} statusEnums={statusEnums}/>
+      }
     </div>
   );
 };
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index b5fe2958..98d15a02 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -16,14 +16,7 @@ type OutputProps = EnumDataPack & {
   atkSkillEntries: Array<AttackingSkillData>,
 }
 
-export const AttackingSkillOutput = ({
-  inputData,
-  elementBonusData,
-  atkSkillEntries,
-  conditionEnumMap,
-  skillIdentifierInfo,
-  skillEnums,
-}: OutputProps) => {
+export const AttackingSkillOutput = ({inputData, elementBonusData, atkSkillEntries, ...enums}: OutputProps) => {
   // Early termination if no input
   if (!inputData) {
     return <></>;
@@ -57,9 +50,7 @@ export const AttackingSkillOutput = ({
           key={index}
           inputData={inputData}
           calculatedData={calculatedData}
-          conditionEnumMap={conditionEnumMap}
-          skillIdentifierInfo={skillIdentifierInfo}
-          skillEnums={skillEnums}
+          {...enums}
         />
       )),
   );
diff --git a/src/components/elements/gameData/skillAtk/out/props.ts b/src/components/elements/gameData/skillAtk/out/props.ts
index 38f06622..c98e719e 100644
--- a/src/components/elements/gameData/skillAtk/out/props.ts
+++ b/src/components/elements/gameData/skillAtk/out/props.ts
@@ -1,4 +1,10 @@
-import {AttackingSkillData, ConditionEnumMap, SkillEnums, SkillIdentifierInfo} from '../../../../../api-def/resources';
+import {
+  AttackingSkillData,
+  ConditionEnumMap,
+  SkillEnums,
+  SkillIdentifierInfo,
+  StatusEnums,
+} from '../../../../../api-def/resources';
 
 
 export type SectionProps = {
@@ -9,4 +15,5 @@ export type EnumDataPack = {
   conditionEnumMap: ConditionEnumMap,
   skillIdentifierInfo: SkillIdentifierInfo,
   skillEnums: SkillEnums,
+  statusEnums: StatusEnums,
 }
diff --git a/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx b/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
index 84838200..7cf90316 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/affliction.test.tsx
@@ -4,18 +4,24 @@ import {screen, waitFor} from '@testing-library/react';
 
 import {generateAttackingSkillEntry} from '../../../../../../../test/data/mock/skill';
 import {renderReact} from '../../../../../../../test/render/main';
-import {AttackingSkillData, DepotPaths} from '../../../../../../api-def/resources';
+import {AttackingSkillData, DepotPaths, StatusEnums} from '../../../../../../api-def/resources';
 import {translation as translationEN} from '../../../../../../i18n/translations/en/translation';
+import {ResourceLoader} from '../../../../../../utils/services/resources/loader';
 import {SectionAffliction} from './affliction';
 
 
 describe('Affliction section', () => {
   const templateEntry: AttackingSkillData = generateAttackingSkillEntry();
+  let statusEnums: StatusEnums;
+
+  beforeAll(async () => {
+    statusEnums = await ResourceLoader.getEnumAfflictionStatus();
+  });
 
   it('shows affliction with name', async () => {
     const entry = {...templateEntry};
 
-    renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+    renderReact(() => <SectionAffliction atkSkillEntry={entry} statusEnums={statusEnums}/>);
 
     await waitFor(() => expect(screen.getByAltText('Blindness')).toBeInTheDocument());
 
@@ -41,7 +47,7 @@ describe('Affliction section', () => {
       },
     };
 
-    renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+    renderReact(() => <SectionAffliction atkSkillEntry={entry} statusEnums={statusEnums}/>);
 
     expect(screen.getByText(translationEN.game.skillAtk.entry.unstackable, {selector: 'span.badge'}))
       .toBeInTheDocument();
@@ -50,7 +56,7 @@ describe('Affliction section', () => {
   it('shows stackable affliction badge', async () => {
     const entry = {...templateEntry};
 
-    renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+    renderReact(() => <SectionAffliction atkSkillEntry={entry} statusEnums={statusEnums}/>);
 
     expect(screen.getByText(translationEN.game.skillAtk.entry.stackable, {selector: 'span.badge'}))
       .toBeInTheDocument();
@@ -65,7 +71,7 @@ describe('Affliction section', () => {
       },
     };
 
-    const {container} = renderReact(() => <SectionAffliction atkSkillEntry={entry}/>);
+    const {container} = renderReact(() => <SectionAffliction atkSkillEntry={entry} statusEnums={statusEnums}/>);
 
     expect(container.firstChild).toBeNull();
   });
diff --git a/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
index bd963027..b84b77d4 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/affliction.tsx
@@ -5,11 +5,9 @@ import Col from 'react-bootstrap/Col';
 
 import {DepotPaths, AfflictionUnit, StatusEnums} from '../../../../../../api-def/resources';
 import {useI18n} from '../../../../../../i18n/hook';
-import {ResourceLoader} from '../../../../../../utils/services/resources/loader';
 import {reverseEnumTransLookup} from '../../../../../../utils/services/resources/utils';
-import {useFetchState} from '../../../../common/fetch';
 import {ImageWithOverlay} from '../../../../common/image';
-import {SectionProps} from '../props';
+import {EnumDataPack, SectionProps} from '../props';
 
 
 type AfflictionEntryProps = {
@@ -53,18 +51,9 @@ const AfflictionEntry = ({affliction, statusEnums}: AfflictionEntryProps) => {
   );
 };
 
-export const SectionAffliction = ({atkSkillEntry}: SectionProps) => {
-  const {
-    fetchStatus: statusEnums,
-    fetchFunction: fetchStatusEnums,
-  } = useFetchState<StatusEnums>(
-    {status: []},
-    ResourceLoader.getEnumAfflictionStatus,
-    'Failed to fetch affliction status enums.',
-  );
-
-  fetchStatusEnums();
+type SectionAfflictionProps = SectionProps & Pick<EnumDataPack, 'statusEnums'>
 
+export const SectionAffliction = ({atkSkillEntry, statusEnums}: SectionAfflictionProps) => {
   if (!atkSkillEntry.skill.afflictions.length) {
     return <></>;
   }
@@ -77,7 +66,7 @@ export const SectionAffliction = ({atkSkillEntry}: SectionProps) => {
             arr.findIndex((afflictionUnit) => afflictionUnit.statusIcon === item.statusIcon) === idx
           ))
           .map((affliction: AfflictionUnit, index: number) => (
-            <AfflictionEntry affliction={affliction} statusEnums={statusEnums.data} key={index}/>
+            <AfflictionEntry affliction={affliction} statusEnums={statusEnums} key={index}/>
           ))
       }
     </Col>
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.module.css b/src/components/elements/gameData/skillAtk/out/sections/animation.module.css
deleted file mode 100644
index 0660535b..00000000
--- a/src/components/elements/gameData/skillAtk/out/sections/animation.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.animation table {
-  width: 100%;
-  padding-right: 30px;
-}
-.animation table tr {
-  background-color: #0e0e0e;
-  border: 1px solid #656565;
-}
-.animation table tr:last-child {
-  margin-bottom: 0;
-}
-.animation table th,
-.animation table td {
-  padding: 0.2rem 1rem;
-  text-align: center;
-  white-space: nowrap;
-}
-.animation table tbody tr:nth-of-type(odd) {
-  background-color: #141414;
-}
-.animation table tbody tr:nth-of-type(even) {
-  background-color: #202020;
-}
-.animation table tbody tr:hover {
-  background-color: #042a3b;
-}
-
-/*# sourceMappingURL=animation.module.css.map */
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map b/src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map
deleted file mode 100644
index 4c78ac54..00000000
--- a/src/components/elements/gameData/skillAtk/out/sections/animation.module.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["animation.module.scss"],"names":[],"mappings":"AAKE;EAGE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE","file":"animation.module.css"}
\ No newline at end of file
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.tsx b/src/components/elements/gameData/skillAtk/out/sections/animation.tsx
index 4c6e36b8..0f3a9fa1 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/animation.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/animation.tsx
@@ -8,7 +8,7 @@ import Form from 'react-bootstrap/Form';
 import {useI18n} from '../../../../../../i18n/hook';
 import {reverseEnumTransLookup} from '../../../../../../utils/services/resources/utils';
 import {EnumDataPack, SectionProps} from '../props';
-import styles from './animation.module.css';
+import styles from './section.module.css';
 
 
 const HitTiming = ({atkSkillEntry}: SectionProps) => {
@@ -19,7 +19,7 @@ const HitTiming = ({atkSkillEntry}: SectionProps) => {
   const earliest = Math.min(...atkSkillEntry.skill.hitTimingSecMax);
 
   return (
-    <div className="text-center">
+    <>
       <Button variant="outline-light" size="sm" className="mt-2" onClick={() => setShow(!show)}>
         <i className="bi bi-arrows-collapse"/>&nbsp;
         {t((t) => t.game.skillAtk.animation.hitTiming)}&nbsp;-&nbsp;
@@ -45,7 +45,7 @@ const HitTiming = ({atkSkillEntry}: SectionProps) => {
           </table>
         </div>
       </Collapse>
-    </div>
+    </>
   );
 };
 
@@ -60,7 +60,7 @@ const CancelAction = ({atkSkillEntry, skillEnums, conditionEnumMap}: SectionAnim
   const isAvailable = earliest !== Infinity;
 
   return (
-    <div className="text-center">
+    <>
       <Button
         variant="outline-light" size="sm" className="mt-2"
         onClick={() => setShow(!show)} disabled={!isAvailable}
@@ -112,7 +112,7 @@ const CancelAction = ({atkSkillEntry, skillEnums, conditionEnumMap}: SectionAnim
           </table>
         </div>
       </Collapse>
-    </div>
+    </>
   );
 };
 
@@ -120,7 +120,7 @@ type SectionAnimationProps = SectionProps & Pick<EnumDataPack, 'skillEnums' | 'c
 
 export const SectionAnimation = ({atkSkillEntry, skillEnums, conditionEnumMap}: SectionAnimationProps) => {
   return (
-    <div className={styles.animation}>
+    <div className={`${styles.section} text-center`}>
       <Form.Row>
         <Col lg={6}>
           <HitTiming atkSkillEntry={atkSkillEntry}/>
diff --git a/src/components/elements/gameData/skillAtk/out/sections/section.module.css b/src/components/elements/gameData/skillAtk/out/sections/section.module.css
new file mode 100644
index 00000000..78eb4274
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/section.module.css
@@ -0,0 +1,46 @@
+.section p {
+  margin: 0;
+}
+.section table {
+  width: 100%;
+  padding-right: 30px;
+}
+.section table tr {
+  background-color: #0e0e0e;
+  border: 1px solid #656565;
+}
+.section table tr:last-child {
+  margin-bottom: 0;
+}
+.section table th,
+.section table td {
+  padding: 0.2rem 1rem;
+  text-align: center;
+  white-space: nowrap;
+}
+.section table th.sp, .section table th.ssp,
+.section table td.sp,
+.section table td.ssp {
+  width: 40%;
+}
+.section table th.ssCost,
+.section table td.ssCost {
+  width: 20%;
+}
+.section table th.sp, .section table th.ssp, .section table th.ssCost,
+.section table td.sp,
+.section table td.ssp,
+.section table td.ssCost {
+  border: 1px solid #656565;
+}
+.section table tbody tr:nth-of-type(odd) {
+  background-color: #141414;
+}
+.section table tbody tr:nth-of-type(even) {
+  background-color: #202020;
+}
+.section table tbody tr:hover {
+  background-color: #042a3b;
+}
+
+/*# sourceMappingURL=section.module.css.map */
diff --git a/src/components/elements/gameData/skillAtk/out/sections/section.module.css.map b/src/components/elements/gameData/skillAtk/out/sections/section.module.css.map
new file mode 100644
index 00000000..448b9d3d
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/section.module.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["section.module.scss"],"names":[],"mappings":"AAQE;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA,QAbS;;AAgBX;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAGE,QAtCO;;AA2CT;EACE;;AAGF;EACE;;AAGF;EACE","file":"section.module.css"}
\ No newline at end of file
diff --git a/src/components/elements/gameData/skillAtk/out/sections/animation.module.scss b/src/components/elements/gameData/skillAtk/out/sections/section.module.scss
similarity index 64%
rename from src/components/elements/gameData/skillAtk/out/sections/animation.module.scss
rename to src/components/elements/gameData/skillAtk/out/sections/section.module.scss
index 6544e279..2cc4cdc7 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/animation.module.scss
+++ b/src/components/elements/gameData/skillAtk/out/sections/section.module.scss
@@ -2,16 +2,21 @@
 
 $item-margin: 0.75rem;
 
-.animation {
-  table {
-    $table-border-color: #656565;
+$table-border-color: #656565;
+$table-border: 1px solid $table-border-color;
+
+.section {
+  p {
+    margin: 0;
+  }
 
+  table {
     width: 100%;
     padding-right: 30px;
 
     tr {
       background-color: #0e0e0e;
-      border: 1px solid $table-border-color;
+      border: $table-border;
     }
 
     tr:last-child {
@@ -23,6 +28,21 @@ $item-margin: 0.75rem;
       padding: 0.2rem 1rem;
       text-align: center;
       white-space: nowrap;
+
+      &.sp,
+      &.ssp {
+        width: 40%;
+      }
+
+      &.ssCost {
+        width: 20%;
+      }
+
+      &.sp,
+      &.ssp,
+      &.ssCost {
+        border: $table-border;
+      }
     }
 
     tbody {
diff --git a/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx b/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
new file mode 100644
index 00000000..188375d7
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+
+import Button from 'react-bootstrap/Button';
+import Collapse from 'react-bootstrap/Collapse';
+
+import {DepotPaths} from '../../../../../../../api-def/resources';
+import {useI18n} from '../../../../../../../i18n/hook';
+import {ImageWithOverlay} from '../../../../../common/image';
+import {EnumDataPack} from '../../props';
+import {SectionSpInfoProps} from './main';
+
+
+type CellProps = Pick<EnumDataPack, 'statusEnums'> & {
+  data: { [StatusCode in number]: number }
+}
+
+export const AfflictionDataCell = ({data, statusEnums}: CellProps) => {
+  const {lang} = useI18n();
+
+  return (
+    <>
+      {Object.entries(data).map(([code, efficiency], idx) => {
+        const efficiencyStr = efficiency.toFixed(2);
+
+        const affliction = statusEnums.status.find((entry) => entry.code === +code);
+        if (!affliction) {
+          return <p key={idx}>(Unknown affliction: {code}): {efficiencyStr}</p>;
+        }
+
+        const afflictionName = affliction.trans[lang];
+        if (!affliction.imagePath) {
+          return <p key={idx}>{afflictionName}: {efficiencyStr}</p>;
+        }
+
+        return (
+          <p key={idx}>
+            <ImageWithOverlay
+              text={afflictionName}
+              src={DepotPaths.getImageURL(affliction.imagePath)}
+              style={{width: '1rem'}}
+            />&nbsp;
+            {afflictionName}: {efficiencyStr}
+          </p>
+        );
+      })}
+    </>
+  );
+};
+
+export const SpEfficiencyTable = ({calculatedData, statusEnums}: SectionSpInfoProps) => {
+  const {t} = useI18n();
+
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="outline-light" size="sm" className="mt-2" onClick={() => setShow(!show)}>
+        <i className="bi bi-arrows-collapse"/>&nbsp;
+        {t((t) => t.game.skillAtk.spInfo.efficiencyIndexes)}
+      </Button>
+      <Collapse in={show}>
+        <div className="mt-2">
+          <table>
+            <tbody>
+              <tr>
+                <td>{t((t) => t.game.skillAtk.spInfo.efficiency.spPer1KMod)}</td>
+                <td>{calculatedData.efficiency.spPer1KMod.toFixed(2)}</td>
+              </tr>
+              {
+                calculatedData.skillEntry.skill.sharable &&
+                <tr>
+                  <td>{t((t) => t.game.skillAtk.spInfo.efficiency.sspPer1KMod)}</td>
+                  <td>{calculatedData.efficiency.sspPer1KMod.toFixed(2)}</td>
+                </tr>
+              }
+              {
+                !!calculatedData.skillEntry.skill.afflictions.length &&
+                <>
+                  <tr>
+                    <td>{t((t) => t.game.skillAtk.spInfo.efficiency.secPer1KSp)}</td>
+                    <td>
+                      <AfflictionDataCell statusEnums={statusEnums} data={calculatedData.efficiency.secPer1KSp}/>
+                    </td>
+                  </tr>
+                  {
+                    calculatedData.skillEntry.skill.sharable &&
+                    <tr>
+                      <td>{t((t) => t.game.skillAtk.spInfo.efficiency.secPer1KSsp)}</td>
+                      <td>
+                        <AfflictionDataCell statusEnums={statusEnums} data={calculatedData.efficiency.secPer1KSp}/>
+                      </td>
+                    </tr>
+                  }
+                </>
+              }
+            </tbody>
+          </table>
+        </div>
+      </Collapse>
+    </>
+  );
+};
diff --git a/src/components/elements/gameData/skillAtk/out/sections/sp/info.tsx b/src/components/elements/gameData/skillAtk/out/sections/sp/info.tsx
new file mode 100644
index 00000000..82541a1a
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/sp/info.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {useI18n} from '../../../../../../../i18n/hook';
+import styles from '../section.module.css';
+import {SectionSpInfoProps} from './main';
+
+
+export const SpInfoTable = ({calculatedData}: Pick<SectionSpInfoProps, 'calculatedData'>) => {
+  const {t} = useI18n();
+
+  return (
+    <div className="mt-2">
+      <table>
+        <tbody>
+          <tr>
+            <td className={styles.sp}>{t((t) => t.game.skillAtk.spInfo.sp)}</td>
+            <td className={styles.ssp}>{t((t) => t.game.skillAtk.spInfo.ssp)}</td>
+            <td className={styles.ssCost}>{t((t) => t.game.skillAtk.spInfo.ssCost)}</td>
+          </tr>
+          <tr>
+            <td className={styles.sp}>{calculatedData.skillEntry.skill.spMax.toFixed(0)}</td>
+            <td className={styles.ssp}>{
+              calculatedData.skillEntry.skill.sharable ?
+                calculatedData.skillEntry.skill.ssSp.toFixed(0) :
+                '-'
+            }</td>
+            <td className={styles.ssCost}>{
+              calculatedData.skillEntry.skill.sharable ?
+                calculatedData.skillEntry.skill.ssCost.toFixed(0) :
+                '-'
+            }</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};
diff --git a/src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx b/src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx
new file mode 100644
index 00000000..476b0b2b
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx
@@ -0,0 +1,196 @@
+import React from 'react';
+
+import {screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {generateCalculatedEntry} from '../../../../../../../../test/data/mock/skill';
+import {renderReact} from '../../../../../../../../test/render/main';
+import {StatusEnums} from '../../../../../../../api-def/resources';
+import {translation as translationEN} from '../../../../../../../i18n/translations/en/translation';
+import {ResourceLoader} from '../../../../../../../utils/services/resources/loader';
+import {CalculatedSkillEntry} from '../../types';
+import {SectionSpInfo} from './main';
+
+
+describe('SP info section', () => {
+  const calculatedDataTemplate: CalculatedSkillEntry = generateCalculatedEntry();
+  let statusEnums: StatusEnums;
+
+  beforeAll(async () => {
+    statusEnums = await ResourceLoader.getEnumAfflictionStatus();
+  });
+
+  it('collapses on load', async () => {
+    renderReact(() => (
+      <SectionSpInfo
+        calculatedData={calculatedDataTemplate}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    expect(screen.queryByText('1200', {selector: '.collapse.show'})).not.toBeInTheDocument();
+  });
+
+  it('shows table on click to expand', async () => {
+    renderReact(() => (
+      <SectionSpInfo
+        calculatedData={calculatedDataTemplate}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    const efficiencyButton = screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiencyIndexes,
+      {selector: 'button'},
+    );
+    userEvent.click(efficiencyButton);
+
+    await waitFor(() => expect(screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      {selector: '.collapse.show *'},
+    )).toBeInTheDocument());
+  });
+
+  it('shows SSP efficiency indexes if sharable', async () => {
+    const calculatedData: CalculatedSkillEntry = {
+      ...calculatedDataTemplate,
+      skillEntry: {
+        ...calculatedDataTemplate.skillEntry,
+        skill: {
+          ...calculatedDataTemplate.skillEntry.skill,
+          sharable: true,
+        },
+      },
+    };
+
+    renderReact(() => (
+      <SectionSpInfo
+        calculatedData={calculatedData}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    const efficiencyButton = screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiencyIndexes,
+      {selector: 'button'},
+    );
+    userEvent.click(efficiencyButton);
+
+    await waitFor(() => expect(screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      {selector: '.collapse.show *'},
+    )).toBeInTheDocument());
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.sspPer1KMod)).toBeInTheDocument();
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSsp)).toBeInTheDocument();
+  });
+
+  it('hides SSP efficiency indexes if not sharable', async () => {
+    renderReact(() => (
+      <SectionSpInfo
+        calculatedData={calculatedDataTemplate}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    const efficiencyButton = screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiencyIndexes,
+      {selector: 'button'},
+    );
+    userEvent.click(efficiencyButton);
+
+    await waitFor(() => expect(screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      {selector: '.collapse.show *'},
+    )).toBeInTheDocument());
+    expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.sspPer1KMod)).not.toBeInTheDocument();
+    expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSsp)).not.toBeInTheDocument();
+  });
+
+  it('hides affliction efficiency if no affliction', async () => {
+    const calculatedData: CalculatedSkillEntry = {
+      ...calculatedDataTemplate,
+      skillEntry: {
+        ...calculatedDataTemplate.skillEntry,
+        skill: {
+          ...calculatedDataTemplate.skillEntry.skill,
+          afflictions: [],
+        },
+      },
+    };
+
+    renderReact(() => (
+      <SectionSpInfo
+        calculatedData={calculatedData}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    const efficiencyButton = screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiencyIndexes,
+      {selector: 'button'},
+    );
+    userEvent.click(efficiencyButton);
+
+    await waitFor(() => expect(screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      {selector: '.collapse.show *'},
+    )).toBeInTheDocument());
+    expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSp)).not.toBeInTheDocument();
+    expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSsp)).not.toBeInTheDocument();
+  });
+
+  it('shows affliction efficiency if there are any afflictions', async () => {
+    renderReact(() => (
+      <SectionSpInfo
+        calculatedData={calculatedDataTemplate}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    const efficiencyButton = screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiencyIndexes,
+      {selector: 'button'},
+    );
+    userEvent.click(efficiencyButton);
+
+    await waitFor(() => expect(screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      {selector: '.collapse.show *'},
+    )).toBeInTheDocument());
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSp)).toBeInTheDocument();
+  });
+
+  it('shows all efficiency indexes if sharable and afflicts', async () => {
+    const calculatedData: CalculatedSkillEntry = {
+      ...calculatedDataTemplate,
+      skillEntry: {
+        ...calculatedDataTemplate.skillEntry,
+        skill: {
+          ...calculatedDataTemplate.skillEntry.skill,
+          sharable: true,
+        },
+      },
+    };
+
+    renderReact(() => (
+      <SectionSpInfo
+        calculatedData={calculatedData}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    const efficiencyButton = screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiencyIndexes,
+      {selector: 'button'},
+    );
+    userEvent.click(efficiencyButton);
+
+    await waitFor(() => expect(screen.getByText(
+      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      {selector: '.collapse.show *'},
+    )).toBeInTheDocument());
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.sspPer1KMod)).toBeInTheDocument();
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSp)).toBeInTheDocument();
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSsp)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/out/sections/sp/main.tsx b/src/components/elements/gameData/skillAtk/out/sections/sp/main.tsx
new file mode 100644
index 00000000..bb23206e
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/sections/sp/main.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+
+import {EnumDataPack} from '../../props';
+import {CalculatedSkillEntry} from '../../types';
+import styles from '../section.module.css';
+import {SpEfficiencyTable} from './efficiency';
+import {SpInfoTable} from './info';
+
+
+export type SectionSpInfoProps = Pick<EnumDataPack, 'statusEnums'> & {
+  calculatedData: CalculatedSkillEntry,
+}
+
+export const SectionSpInfo = ({calculatedData, statusEnums}: SectionSpInfoProps) => {
+  return (
+    <div className={`${styles.section} text-center small`}>
+      <Form.Row className="align-items-center">
+        <Col lg={6}>
+          <SpEfficiencyTable calculatedData={calculatedData} statusEnums={statusEnums}/>
+        </Col>
+        <Col lg={6}>
+          <SpInfoTable calculatedData={calculatedData}/>
+        </Col>
+      </Form.Row>
+    </div>
+  );
+};
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
index fbc19ef1..14c8e29d 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
+++ b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
@@ -21,10 +21,10 @@ export const sortFunc: SortFuncLookup = {
 
 export const orderName: { [sortBy in SortBy]: GetTranslationFunction } = {
   damageDesc: (t) => t.game.skillAtk.sort.damageDesc,
-  spAsc: (t) => t.game.skillAtk.sort.spAsc,
-  sspAsc: (t) => t.game.skillAtk.sort.sspAsc,
-  spPer1KModDesc: (t) => t.game.skillAtk.sort.spPer1KModDesc,
-  sspPer1KModDesc: (t) => t.game.skillAtk.sort.sspPer1KModDesc,
-  afflictionLengthPer1KSpDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSpDesc,
-  afflictionLengthPer1KSspDesc: (t) => t.game.skillAtk.sort.afflictionLengthPer1KSspDesc,
+  spAsc: (t) => t.game.skillAtk.sort.sp,
+  sspAsc: (t) => t.game.skillAtk.sort.ssp,
+  spPer1KModDesc: (t) => t.game.skillAtk.spInfo.efficiency.spPer1KMod,
+  sspPer1KModDesc: (t) => t.game.skillAtk.spInfo.efficiency.sspPer1KMod,
+  afflictionLengthPer1KSpDesc: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSp,
+  afflictionLengthPer1KSspDesc: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSsp,
 };
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
index 0a1d982a..49556eaf 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
@@ -30,7 +30,7 @@ describe('ATK skill entry sorter', () => {
     const dropdownButton = screen.getByText(/Order/);
     userEvent.click(dropdownButton);
 
-    const orderButton = screen.getByText(translationEN.game.skillAtk.sort.afflictionLengthPer1KSpDesc);
+    const orderButton = screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSp);
     fireEvent.click(orderButton);
 
     expect(onOrderPicked).toHaveBeenCalledTimes(1);
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 05d51ba5..99a9d9fe 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -208,13 +208,21 @@ export const translation: TranslationStruct = {
       },
       sort: {
         text: '排序: {{sortBy}}',
-        damageDesc: '傷害 (高 → 低)',
-        spAsc: 'SP (低 → 高)',
-        sspAsc: 'SSP (低 → 高)',
-        spPer1KModDesc: 'SP / 1000% (低 → 高)',
-        sspPer1KModDesc: 'SSP / 1000% (低 → 高)',
-        afflictionLengthPer1KSpDesc: '異常效期 (秒) / 1K SP (高 → 低)',
-        afflictionLengthPer1KSspDesc: '異常效期 (秒) / 1K SSP (高 → 低)',
+        damageDesc: '傷害',
+        sp: 'SP',
+        ssp: 'SSP',
+      },
+      spInfo: {
+        efficiencyIndexes: '效率指標',
+        efficiency: {
+          spPer1KMod: 'SP / 1000%',
+          sspPer1KMod: 'SSP / 1000%',
+          secPer1KSp: '異常效期 (秒) / 1K SP',
+          secPer1KSsp: '異常效期 (秒) / 1K SSP',
+        },
+        sp: 'SP',
+        ssp: 'SSP',
+        ssCost: 'SS Cost',
       },
     },
     tools: {
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index 671bb0ec..38a26c8a 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -1,3 +1,5 @@
+import {Efficiency} from '../../components/elements/gameData/skillAtk/out/types';
+
 export type PageMetaTranslations = {
   title: string,
   description: string,
@@ -206,12 +208,15 @@ export type TranslationStruct = {
       sort: {
         text: string,
         damageDesc: string,
-        spAsc: string,
-        sspAsc: string,
-        spPer1KModDesc: string,
-        sspPer1KModDesc: string,
-        afflictionLengthPer1KSpDesc: string,
-        afflictionLengthPer1KSspDesc: string,
+        sp: string,
+        ssp: string,
+      },
+      spInfo: {
+        efficiencyIndexes: string,
+        efficiency: {[index in keyof Efficiency]: string},
+        sp: string,
+        ssp: string,
+        ssCost: string,
       }
     },
     tools: {
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 3c0cbcbc..bec18dbc 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -232,13 +232,21 @@ export const translation: TranslationStruct = {
       },
       sort: {
         text: 'Order: {{sortBy}}',
-        damageDesc: 'Damage (Hi → Lo)',
-        spAsc: 'SP (Lo → Hi)',
-        sspAsc: 'SSP (Lo → Hi)',
-        spPer1KModDesc: 'SP / 1000% (Lo → Hi)',
-        sspPer1KModDesc: 'SSP / 1000% (Lo → Hi)',
-        afflictionLengthPer1KSpDesc: 'Affliction (sec) / 1K SP (Hi → Lo)',
-        afflictionLengthPer1KSspDesc: 'Affliction (sec) / 1K SSP (Hi → Lo)',
+        damageDesc: 'Damage',
+        sp: 'SP',
+        ssp: 'SSP',
+      },
+      spInfo: {
+        efficiencyIndexes: 'Efficiency Indexes',
+        efficiency: {
+          spPer1KMod: 'SP / 1000%',
+          sspPer1KMod: 'SSP / 1000%',
+          secPer1KSp: 'Affliction (sec) / 1K SP',
+          secPer1KSsp: 'Affliction (sec) / 1K SSP',
+        },
+        sp: 'SP',
+        ssp: 'SSP',
+        ssCost: 'SS Cost',
       },
     },
     tools: {
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index b906bd09..60fb46e1 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -207,13 +207,21 @@ export const translation: TranslationStruct = {
       },
       sort: {
         text: '排序: {{sortBy}}',
-        damageDesc: '傷害 (高 → 低)',
-        spAsc: 'SP (低 → 高)',
-        sspAsc: 'SSP (低 → 高)',
-        spPer1KModDesc: 'SP / 1000% (低 → 高)',
-        sspPer1KModDesc: 'SSP / 1000% (低 → 高)',
-        afflictionLengthPer1KSpDesc: '異常效期 (秒) / 1K SP (高 → 低)',
-        afflictionLengthPer1KSspDesc: '異常效期 (秒) / 1K SSP (高 → 低)',
+        damageDesc: '傷害',
+        sp: 'SP',
+        ssp: 'SSP',
+      },
+      spInfo: {
+        efficiencyIndexes: '效率指標',
+        efficiency: {
+          spPer1KMod: 'SP / 1000%',
+          sspPer1KMod: 'SSP / 1000%',
+          secPer1KSp: '異常效期 (秒) / 1K SP',
+          secPer1KSsp: '異常效期 (秒) / 1K SSP',
+        },
+        sp: 'SP',
+        ssp: 'SSP',
+        ssCost: 'SS Cost',
       },
     },
     tools: {
diff --git a/test/data/mock/skill.ts b/test/data/mock/skill.ts
index 3f1df45f..e64d9a7d 100644
--- a/test/data/mock/skill.ts
+++ b/test/data/mock/skill.ts
@@ -1,5 +1,6 @@
 import {SupportedLanguages} from '../../../src/api-def/api';
 import {AttackingSkillData, Element} from '../../../src/api-def/resources';
+import {CalculatedSkillEntry} from '../../../src/components/elements/gameData/skillAtk/out/types';
 
 
 export const generateAttackingSkillEntry = (): AttackingSkillData => ({
@@ -54,3 +55,25 @@ export const generateAttackingSkillEntry = (): AttackingSkillData => ({
   },
   uniqueHash: 'hash',
 });
+
+export const generateCalculatedEntry = (): CalculatedSkillEntry => ({
+  skillEntry: generateAttackingSkillEntry(),
+  skillDamage: {
+    expected: 12500,
+    highest: 15000,
+    lowest: 10000,
+    totalMods: 7,
+  },
+  efficiency: {
+    spPer1KMod: 1000,
+    sspPer1KMod: 1200,
+    secPer1KSp: {
+      1: 2.5757575757,
+      2: 5.0131313131,
+    },
+    secPer1KSsp: {
+      3: 3.5757575757,
+      4: 6.0131313131,
+    },
+  },
+});

From 154978365f42429f855f63a363c0efc15ea9e265 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 03:21:24 -0500
Subject: [PATCH 43/61] IMP - Refactor ATK skill input data utils

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/in/filter.tsx           |  2 +-
 src/components/elements/gameData/skillAtk/in/limit.tsx |  2 +-
 .../elements/gameData/skillAtk/in/main.test.tsx        |  2 +-
 src/components/elements/gameData/skillAtk/in/main.tsx  |  2 +-
 .../elements/gameData/skillAtk/in/sections/atk.tsx     |  2 +-
 .../elements/gameData/skillAtk/in/sections/buff.tsx    |  2 +-
 .../elements/gameData/skillAtk/in/sections/crt.tsx     |  2 +-
 .../elements/gameData/skillAtk/in/sections/ex.tsx      |  2 +-
 .../elements/gameData/skillAtk/in/sections/other.tsx   |  2 +-
 .../gameData/skillAtk/in/sections/punisher.tsx         |  2 +-
 .../elements/gameData/skillAtk/in/sections/skill.tsx   |  2 +-
 .../elements/gameData/skillAtk/in/sections/target.tsx  |  2 +-
 .../skillAtk/in/{utils.ts => utils/inputData.ts}       | 10 +++++-----
 .../elements/gameData/skillAtk/main.test.tsx           |  4 ++--
 src/components/elements/gameData/skillAtk/main.tsx     |  2 +-
 .../gameData/skillAtk/out/sorter/main.test.tsx         |  2 +-
 .../elements/gameData/skillAtk/out/utils.test.tsx      |  2 +-
 src/utils/game/damage.test.ts                          |  2 +-
 18 files changed, 23 insertions(+), 23 deletions(-)
 rename src/components/elements/gameData/skillAtk/in/{utils.ts => utils/inputData.ts} (94%)

diff --git a/src/components/elements/gameData/skillAtk/in/filter.tsx b/src/components/elements/gameData/skillAtk/in/filter.tsx
index 16cab7f1..6ff25af3 100644
--- a/src/components/elements/gameData/skillAtk/in/filter.tsx
+++ b/src/components/elements/gameData/skillAtk/in/filter.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../i18n/hook';
 import {InputPanel} from '../../../input/main';
 import {SectionProps, SectionPropsCondEnums, SectionPropsElemEnums} from './types';
-import {overwriteInputData} from './utils';
+import {overwriteInputData} from './utils/inputData';
 
 
 type SectionFilterProps =
diff --git a/src/components/elements/gameData/skillAtk/in/limit.tsx b/src/components/elements/gameData/skillAtk/in/limit.tsx
index 5ca4ad6d..f01546fc 100644
--- a/src/components/elements/gameData/skillAtk/in/limit.tsx
+++ b/src/components/elements/gameData/skillAtk/in/limit.tsx
@@ -4,7 +4,7 @@ import {useI18n} from '../../../../../i18n/hook';
 import {InputPanel} from '../../../input/main';
 import {InputPanelCommonProps} from '../../../input/types';
 import {InputData} from './types';
-import {overwriteInputData} from './utils';
+import {overwriteInputData} from './utils/inputData';
 
 
 export const DisplayItemPicker = ({inputData, setInputData}: InputPanelCommonProps<InputData>) => {
diff --git a/src/components/elements/gameData/skillAtk/in/main.test.tsx b/src/components/elements/gameData/skillAtk/in/main.test.tsx
index 21fbe623..7389e528 100644
--- a/src/components/elements/gameData/skillAtk/in/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import {renderReact} from '../../../../../../test/render/main';
 import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
 import {AttackingSkillInput} from './main';
-import {generateInputData, overwriteInputData} from './utils';
+import {generateInputData, overwriteInputData} from './utils/inputData';
 
 
 describe('ATK skill input', () => {
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 3c530310..bf793bd4 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -11,7 +11,7 @@ import {Filter} from './filter';
 import {DisplayItemPicker} from './limit';
 import {InputParameters} from './params';
 import {InputData} from './types';
-import {generateInputData, validateInputData} from './utils';
+import {generateInputData, validateInputData} from './utils/inputData';
 
 
 type InputProps = {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
index 324483dd..4c4fab35 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/atk.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 export const SectionAtk = ({inputData, setInputData}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
index fe8831bc..704b8232 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/buff.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 export const SectionBuff = ({inputData, setInputData}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
index 34de9495..a7f07b25 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/crt.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 export const SectionCrt = ({inputData, setInputData}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
index 7a57b75a..7067ae44 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/ex.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 export const SectionEx = ({inputData, setInputData}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/other.tsx b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
index 5881ada0..0d152b40 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/other.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/other.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 export const SectionOther = ({inputData, setInputData}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
index 83ce7183..c45408db 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/punisher.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 export const SectionPunisher = ({inputData, setInputData}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
index 3e5220e5..d2e090f1 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/skill.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../../../../../i18n/hook';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 export const SectionSkill = ({inputData, setInputData}: SectionProps) => {
diff --git a/src/components/elements/gameData/skillAtk/in/sections/target.tsx b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
index 3b0348e7..cca55528 100644
--- a/src/components/elements/gameData/skillAtk/in/sections/target.tsx
+++ b/src/components/elements/gameData/skillAtk/in/sections/target.tsx
@@ -6,7 +6,7 @@ import {getConditionName} from '../../../../../../utils/game/conditionName';
 import {CheckOption} from '../../../../common/check/types';
 import {InputPanel} from '../../../../input/main';
 import {SectionProps, SectionPropsCondEnums} from '../types';
-import {overwriteInputData} from '../utils';
+import {overwriteInputData} from '../utils/inputData';
 
 
 type SectionTargetProps = SectionProps & SectionPropsCondEnums;
diff --git a/src/components/elements/gameData/skillAtk/in/utils.ts b/src/components/elements/gameData/skillAtk/in/utils/inputData.ts
similarity index 94%
rename from src/components/elements/gameData/skillAtk/in/utils.ts
rename to src/components/elements/gameData/skillAtk/in/utils/inputData.ts
index c5f9ed34..e4e8de33 100644
--- a/src/components/elements/gameData/skillAtk/in/utils.ts
+++ b/src/components/elements/gameData/skillAtk/in/utils/inputData.ts
@@ -1,8 +1,8 @@
-import {SupportedLanguages} from '../../../../../api-def/api/other/lang';
-import {ConditionCodes} from '../../../../../const/gameData';
-import {translations} from '../../../../../i18n/translations/main';
-import {DeepPartial} from '../../../../../utils/types';
-import {InputData} from './types';
+import {SupportedLanguages} from '../../../../../../api-def/api/other/lang';
+import {ConditionCodes} from '../../../../../../const/gameData';
+import {translations} from '../../../../../../i18n/translations/main';
+import {DeepPartial} from '../../../../../../utils/types';
+import {InputData} from '../types';
 
 
 export const overwriteInputData = (original: InputData, overwrite: DeepPartial<InputData>): InputData => ({
diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
index 679bc4ff..388644c2 100644
--- a/src/components/elements/gameData/skillAtk/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -5,8 +5,8 @@ import userEvent from '@testing-library/user-event';
 
 import {renderReact} from '../../../../../test/render/main';
 import {translation as translationEN} from '../../../../i18n/translations/en/translation';
-import {overwriteInputData} from './in/utils';
-import * as utils from './in/utils';
+import {overwriteInputData} from './in/utils/inputData';
+import * as utils from './in/utils/inputData';
 import {AttackingSkillLookup} from './main';
 
 
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index bc8f9aa5..2804f50c 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -13,7 +13,7 @@ import {ResourceLoader} from '../../../../utils/services/resources/loader';
 import {useFetchState, useFetchStateProcessed} from '../../common/fetch';
 import {AttackingSkillInput} from './in/main';
 import {InputData} from './in/types';
-import {overwriteInputData} from './in/utils';
+import {overwriteInputData} from './in/utils/inputData';
 import {AttackingSkillOutput} from './out/main';
 import {AttackingSkillSorter} from './out/sorter/main';
 
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
index 49556eaf..50c492b5 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import {renderReact} from '../../../../../../../test/render/main';
 import {translation as translationEN} from '../../../../../../i18n/translations/en/translation';
 import {InputData} from '../../in/types';
-import {generateInputData} from '../../in/utils';
+import {generateInputData} from '../../in/utils/inputData';
 import {AttackingSkillSorter} from './main';
 
 
diff --git a/src/components/elements/gameData/skillAtk/out/utils.test.tsx b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
index d138f51d..8711b2f4 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
@@ -2,7 +2,7 @@ import {generateAttackingSkillEntry} from '../../../../../../test/data/mock/skil
 import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
 import {ResourceLoader} from '../../../../../utils/services/resources';
 import {InputData} from '../in/types';
-import {generateInputData} from '../in/utils';
+import {generateInputData} from '../in/utils/inputData';
 import {calculateEntries, filterSkillEntries} from './utils';
 
 
diff --git a/src/utils/game/damage.test.ts b/src/utils/game/damage.test.ts
index 679b8402..baff9e9d 100644
--- a/src/utils/game/damage.test.ts
+++ b/src/utils/game/damage.test.ts
@@ -1,7 +1,7 @@
 import {generateAttackingSkillEntry} from '../../../test/data/mock/skill';
 import {AttackingSkillData} from '../../api-def/resources';
 import {InputData} from '../../components/elements/gameData/skillAtk/in/types';
-import {generateInputData} from '../../components/elements/gameData/skillAtk/in/utils';
+import {generateInputData} from '../../components/elements/gameData/skillAtk/in/utils/inputData';
 import {ConditionCodes} from '../../const/gameData';
 import {calculateDamage, CalculateDamageReturn} from './damage';
 

From 2e073f2ed6e8a870531a4589afc8ff59d4049435 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 04:52:58 -0500
Subject: [PATCH 44/61] FIX - ATK skill sort order not persist across search

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/hooks.ts       |  92 ++++++++++++
 .../gameData/skillAtk/in/main.test.tsx        |  39 ++++-
 .../elements/gameData/skillAtk/in/main.tsx    |  11 +-
 .../elements/gameData/skillAtk/in/types.ts    |  14 +-
 .../gameData/skillAtk/in/utils/inputData.ts   |   2 +-
 .../elements/gameData/skillAtk/main.test.tsx  |  53 ++++++-
 .../elements/gameData/skillAtk/main.tsx       | 133 +++++++-----------
 .../elements/gameData/skillAtk/out/entry.tsx  |  21 ++-
 .../elements/gameData/skillAtk/out/main.tsx   |  23 +--
 .../gameData/skillAtk/out/sorter/lookup.ts    |  28 ++--
 .../skillAtk/out/sorter/main.test.tsx         |   2 +-
 .../gameData/skillAtk/out/utils.test.tsx      |  14 +-
 12 files changed, 278 insertions(+), 154 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/hooks.ts

diff --git a/src/components/elements/gameData/skillAtk/hooks.ts b/src/components/elements/gameData/skillAtk/hooks.ts
new file mode 100644
index 00000000..43d457e6
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/hooks.ts
@@ -0,0 +1,92 @@
+import {
+  AttackingSkillData,
+  ConditionEnumMap,
+  ElementBonus,
+  ElementBonusData,
+  SkillEnums,
+  SkillIdentifierInfo,
+  StatusEnums,
+} from '../../../../api-def/resources';
+import {ResourceLoader} from '../../../../utils/services/resources/loader';
+import {useFetchState, useFetchStateProcessed} from '../../common/fetch';
+import {EnumDataPack} from './out/props';
+
+
+export type UseFetchEnumsReturn = EnumDataPack & {
+  attackingSkillEntries: Array<AttackingSkillData>,
+  elementBonuses: ElementBonusData,
+  isAllFetched: boolean,
+}
+
+export const useFetchEnums = (): UseFetchEnumsReturn => {
+  const {
+    fetchStatus: elementBonuses,
+    fetchFunction: fetchElementBonuses,
+  } = useFetchStateProcessed<ElementBonusData, ElementBonus>(
+    new ElementBonusData(),
+    ResourceLoader.getElementBonusData,
+    'Failed to fetch element bonus data.',
+    (response) => new ElementBonusData(response),
+  );
+  const {
+    fetchStatus: conditionEnums,
+    fetchFunction: fetchConditionEnums,
+  } = useFetchState<ConditionEnumMap>(
+    {},
+    ResourceLoader.getEnumAllConditions,
+    'Failed to fetch condition enums.',
+  );
+  const {
+    fetchStatus: skillIdentifiers,
+    fetchFunction: fetchSkillIdentifiers,
+  } = useFetchState<SkillIdentifierInfo>(
+    {},
+    ResourceLoader.getSkillIdentifierInfo,
+    'Failed to fetch skill identifiers.',
+  );
+  const {
+    fetchStatus: attackingSkillEntries,
+    fetchFunction: fetchAttackingSkillEntries,
+  } = useFetchState<Array<AttackingSkillData>>(
+    [],
+    ResourceLoader.getAttackingSkillEntries,
+    'Failed to fetch attacking skill entries.',
+  );
+  const {fetchStatus: skillEnums, fetchFunction: fetchSkillEnums} = useFetchState<SkillEnums>(
+    {cancel: []},
+    ResourceLoader.getEnumSkill,
+    'Failed to fetch skill enums.',
+  );
+  const {
+    fetchStatus: statusEnums,
+    fetchFunction: fetchStatusEnums,
+  } = useFetchState<StatusEnums>(
+    {status: []},
+    ResourceLoader.getEnumAfflictionStatus,
+    'Failed to fetch affliction status enums.',
+  );
+
+  fetchElementBonuses();
+  fetchConditionEnums();
+  fetchSkillIdentifiers();
+  fetchAttackingSkillEntries();
+  fetchSkillEnums();
+  fetchStatusEnums();
+
+  return {
+    elementBonuses: elementBonuses.data,
+    conditionEnumMap: conditionEnums.data,
+    skillIdentifierInfo: skillIdentifiers.data,
+    attackingSkillEntries: attackingSkillEntries.data,
+    skillEnums: skillEnums.data,
+    statusEnums: statusEnums.data,
+    isAllFetched: [
+      elementBonuses.fetched,
+      conditionEnums.fetched,
+      skillIdentifiers.fetched,
+      attackingSkillEntries.fetched,
+      skillEnums.fetched,
+      statusEnums.fetched,
+    ].every((fetched) => fetched),
+  };
+};
diff --git a/src/components/elements/gameData/skillAtk/in/main.test.tsx b/src/components/elements/gameData/skillAtk/in/main.test.tsx
index 7389e528..2a9e819b 100644
--- a/src/components/elements/gameData/skillAtk/in/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.test.tsx
@@ -6,18 +6,30 @@ import userEvent from '@testing-library/user-event';
 import {renderReact} from '../../../../../../test/render/main';
 import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
 import {AttackingSkillInput} from './main';
+import {InputData} from './types';
 import {generateInputData, overwriteInputData} from './utils/inputData';
 
 
 describe('ATK skill input', () => {
   let fnOnSearch: jest.Mock;
+  let inputData: InputData;
+  let setInputData: jest.Mock;
 
   beforeEach(() => {
     fnOnSearch = jest.fn();
+    inputData = generateInputData();
+    setInputData = jest.fn().mockImplementation((newData) => inputData = newData);
   });
 
   it('collapsed to summary on load', async () => {
-    renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch}/>);
+    renderReact(() => (
+      <AttackingSkillInput
+        onSearchRequested={fnOnSearch}
+        isAllFetched
+        inputData={inputData}
+        setInputData={setInputData}
+      />
+    ));
 
     const inspireButton = screen.queryByText(
       translationEN.game.skillAtk.name.crtInspired,
@@ -27,7 +39,14 @@ describe('ATK skill input', () => {
   });
 
   it('cannot search if no info to display', async () => {
-    renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch}/>);
+    const {rerender} = renderReact(() => (
+      <AttackingSkillInput
+        onSearchRequested={fnOnSearch}
+        isAllFetched
+        inputData={inputData}
+        setInputData={setInputData}
+      />
+    ));
 
     const displayDamageInfo = screen.getByText(translationEN.game.skillAtk.display.options.damageInfo);
     const displaySpInfo = screen.getByText(translationEN.game.skillAtk.display.options.spInfo);
@@ -36,25 +55,37 @@ describe('ATK skill input', () => {
       {selector: 'span'},
     );
     userEvent.click(displayDamageInfo);
+    rerender();
     userEvent.click(displaySpInfo);
+    rerender();
     userEvent.click(displayAffliction);
+    rerender();
 
     const searchButton = screen.getByText(translationEN.misc.search);
     userEvent.click(searchButton);
+    rerender();
 
     const errorMessage = translationEN.game.skillAtk.error.noInfoToDisplay;
     await waitFor(() => expect(screen.getByText(errorMessage)).toBeInTheDocument());
     expect(fnOnSearch).not.toHaveBeenCalled();
   });
 
-  it('sends correct items to display in input data', async () => {
-    renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch}/>);
+  it('sends correct display config in input data', async () => {
+    const {rerender} = renderReact(() => (
+      <AttackingSkillInput
+        onSearchRequested={fnOnSearch}
+        isAllFetched
+        inputData={inputData}
+        setInputData={setInputData}
+      />
+    ));
 
     const displayAffliction = screen.getByText(
       translationEN.game.skillAtk.display.options.affliction,
       {selector: 'span'},
     );
     userEvent.click(displayAffliction);
+    rerender();
 
     const searchButton = screen.getByText(translationEN.misc.search);
     userEvent.click(searchButton);
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index bf793bd4..48cd7805 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -7,22 +7,23 @@ import {useI18n} from '../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
 import {CommonModal, ModalState} from '../../../common/modal';
+import {InputPanelCommonProps} from '../../../input/types';
+import {UseFetchEnumsReturn} from '../hooks';
 import {Filter} from './filter';
 import {DisplayItemPicker} from './limit';
 import {InputParameters} from './params';
 import {InputData} from './types';
-import {generateInputData, validateInputData} from './utils/inputData';
+import {validateInputData} from './utils/inputData';
 
 
-type InputProps = {
+type InputProps = InputPanelCommonProps<InputData> & Pick<UseFetchEnumsReturn, 'isAllFetched'> & {
   onSearchRequested: (inputData: InputData) => void,
 }
 
-export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
+export const AttackingSkillInput = ({inputData, setInputData, isAllFetched, onSearchRequested}: InputProps) => {
   const {t, lang} = useI18n();
 
   const [collapsed, setCollapsed] = React.useState(true);
-  const [inputData, setInputData] = React.useState<InputData>(generateInputData());
   const [modalState, setModalState] = React.useState<ModalState>({
     show: false,
     title: '',
@@ -59,7 +60,7 @@ export const AttackingSkillInput = ({onSearchRequested}: InputProps) => {
         <Button variant="outline-primary" onClick={() => setCollapsed(!collapsed)} className="mr-2">
           {t((t) => t.game.skillAtk.collapse)}
         </Button>
-        <Button variant="outline-info" onClick={() => {
+        <Button variant="outline-info" disabled={!isAllFetched} onClick={() => {
           const isInputValid = validateInputData(
             inputData,
             lang,
diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index 903c8ed3..069b6eee 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -4,13 +4,13 @@ import {InputPanelCommonProps} from '../../../input/types';
 
 
 export type SortBy =
-  'damageDesc' |
-  'spAsc' |
-  'sspAsc' |
-  'spPer1KModDesc' |
-  'sspPer1KModDesc' |
-  'afflictionLengthPer1KSpDesc' |
-  'afflictionLengthPer1KSspDesc'
+  'damage' |
+  'sp' |
+  'ssp' |
+  'spPer1KMod' |
+  'sspPer1KMod' |
+  'afflictionLengthPer1KSp' |
+  'afflictionLengthPer1KSsp'
 
 export type InputData = {
   params: {
diff --git a/src/components/elements/gameData/skillAtk/in/utils/inputData.ts b/src/components/elements/gameData/skillAtk/in/utils/inputData.ts
index e4e8de33..6bc78636 100644
--- a/src/components/elements/gameData/skillAtk/in/utils/inputData.ts
+++ b/src/components/elements/gameData/skillAtk/in/utils/inputData.ts
@@ -132,7 +132,7 @@ export const generateInputData = (overwrite?: DeepPartial<InputData>): InputData
       spInfo: true,
       animationInfo: false,
     },
-    sortBy: 'damageDesc',
+    sortBy: 'damage',
   },
   overwrite || {},
 );
diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
index 388644c2..3fd513c7 100644
--- a/src/components/elements/gameData/skillAtk/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -35,7 +35,11 @@ describe('ATK skill lookup', () => {
 
     renderReact(() => <AttackingSkillLookup/>);
 
-    const searchButton = screen.getByText(translationEN.misc.search);
+    const searchButton = await screen.findByText(
+      translationEN.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
     userEvent.click(searchButton);
 
     expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
@@ -72,7 +76,11 @@ describe('ATK skill lookup', () => {
 
     renderReact(() => <AttackingSkillLookup/>);
 
-    const searchButton = screen.getByText(translationEN.misc.search);
+    const searchButton = await screen.findByText(
+      translationEN.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
     userEvent.click(searchButton);
 
     expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
@@ -109,7 +117,11 @@ describe('ATK skill lookup', () => {
 
     renderReact(() => <AttackingSkillLookup/>);
 
-    const searchButton = screen.getByText(translationEN.misc.search);
+    const searchButton = await screen.findByText(
+      translationEN.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
     userEvent.click(searchButton);
 
     expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
@@ -146,7 +158,11 @@ describe('ATK skill lookup', () => {
 
     renderReact(() => <AttackingSkillLookup/>);
 
-    const searchButton = screen.getByText(translationEN.misc.search);
+    const searchButton = await screen.findByText(
+      translationEN.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
     userEvent.click(searchButton);
 
     expect(await screen.findByText('Summer Julietta', undefined, {timeout: 2000})).toBeInTheDocument();
@@ -161,4 +177,33 @@ describe('ATK skill lookup', () => {
     // Affliction from S!Julietta
     expect(screen.queryByText('', {selector: 'svg > rect'})).not.toBeInTheDocument();
   });
+
+  it('does not change the sort order if search again', async () => {
+    jest.spyOn(utils, 'generateInputData').mockImplementation(() => (
+      overwriteInputData(inputDataTemplate, {sortBy: 'sp'})
+    ));
+
+    const {rerender} = renderReact(() => <AttackingSkillLookup/>);
+
+    // Initial search
+    const searchButton = await screen.findByText(
+      translationEN.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
+    userEvent.click(searchButton);
+    rerender();
+
+    const dispelOnly = screen.getByText(translationEN.game.skillAtk.name.filterDispelOnly);
+    userEvent.click(dispelOnly);
+    rerender();
+    userEvent.click(searchButton);
+    rerender();
+
+    // No ideas for checking if the order is really unchanged
+    // - Spy on scroll top won't work because the change is not immediately reflected
+    await new Promise((r) => setTimeout(r, 1000));
+
+    expect(screen.getByText('Order: SP', {selector: 'button'})).toBeInTheDocument();
+  }, 10000);
 });
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 2804f50c..75aaab1e 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -3,116 +3,85 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {ConditionEnumMap, SkillEnums, StatusEnums} from '../../../../api-def/resources/types/export/enums';
-import {ElementBonus, ElementBonusData} from '../../../../api-def/resources/types/export/misc';
-import {AttackingSkillData} from '../../../../api-def/resources/types/skillAtk';
-import {SkillIdentifierInfo} from '../../../../api-def/resources/types/skillIdentifier';
+import {ElementBonusData} from '../../../../api-def/resources';
 import {scrollRefToTop} from '../../../../utils/scroll';
 import {GoogleAnalytics} from '../../../../utils/services/ga';
-import {ResourceLoader} from '../../../../utils/services/resources/loader';
-import {useFetchState, useFetchStateProcessed} from '../../common/fetch';
+import {useFetchEnums, UseFetchEnumsReturn} from './hooks';
 import {AttackingSkillInput} from './in/main';
 import {InputData} from './in/types';
-import {overwriteInputData} from './in/utils/inputData';
+import {generateInputData, overwriteInputData} from './in/utils/inputData';
 import {AttackingSkillOutput} from './out/main';
 import {AttackingSkillSorter} from './out/sorter/main';
+import {CalculatedSkillEntry} from './out/types';
+import {calculateEntries, filterSkillEntries} from './out/utils';
 
 
+const getCalculatedEntries = (
+  inputData: InputData,
+  atkSkillEntries: UseFetchEnumsReturn['attackingSkillEntries'],
+  elementBonusData: ElementBonusData,
+): Array<CalculatedSkillEntry> => (
+  calculateEntries(
+    filterSkillEntries(inputData, atkSkillEntries),
+    inputData,
+    elementBonusData,
+  )
+);
+
 export const AttackingSkillLookup = () => {
-  const [inputDataForward, setInputDataForward] = React.useState<InputData>();
+  const [inputData, setInputData] = React.useState<InputData>(generateInputData());
+  const [atkSkillOutput, setAtkSkillOutput] = React.useState<Array<CalculatedSkillEntry> | undefined>();
+
   const entryCol = React.useRef<HTMLDivElement>(null);
 
   const {
-    fetchStatus: elementBonuses,
-    fetchFunction: fetchElementBonuses,
-  } = useFetchStateProcessed<ElementBonusData, ElementBonus>(
-    new ElementBonusData(),
-    ResourceLoader.getElementBonusData,
-    'Failed to fetch element bonus data.',
-    (response) => new ElementBonusData(response),
-  );
-  const {
-    fetchStatus: conditionEnums,
-    fetchFunction: fetchConditionEnums,
-  } = useFetchState<ConditionEnumMap>(
-    {},
-    ResourceLoader.getEnumAllConditions,
-    'Failed to fetch condition enums.',
-  );
-  const {
-    fetchStatus: skillIdentifiers,
-    fetchFunction: fetchSkillIdentifiers,
-  } = useFetchState<SkillIdentifierInfo>(
-    {},
-    ResourceLoader.getSkillIdentifierInfo,
-    'Failed to fetch skill identifiers.',
-  );
-  const {
-    fetchStatus: attackingSkillEntries,
-    fetchFunction: fetchAttackingSkillEntries,
-  } = useFetchState<Array<AttackingSkillData>>(
-    [],
-    ResourceLoader.getAttackingSkillEntries,
-    'Failed to fetch attacking skill entries.',
-  );
-  const {fetchStatus: skillEnums, fetchFunction: fetchSkillEnums} = useFetchState<SkillEnums>(
-    {cancel: []},
-    ResourceLoader.getEnumSkill,
-    'Failed to fetch skill enums.',
-  );
-  const {
-    fetchStatus: statusEnums,
-    fetchFunction: fetchStatusEnums,
-  } = useFetchState<StatusEnums>(
-    {status: []},
-    ResourceLoader.getEnumAfflictionStatus,
-    'Failed to fetch affliction status enums.',
-  );
-
-  fetchElementBonuses();
-  fetchConditionEnums();
-  fetchSkillIdentifiers();
-  fetchAttackingSkillEntries();
-  fetchSkillEnums();
-  fetchStatusEnums();
+    elementBonuses,
+    conditionEnumMap,
+    skillIdentifierInfo,
+    attackingSkillEntries,
+    skillEnums,
+    statusEnums,
+    isAllFetched,
+  } = useFetchEnums();
 
   React.useEffect(() => {
-    if (inputDataForward) {
-      scrollRefToTop(entryCol);
+    if (!atkSkillOutput) {
+      return;
     }
-  }, [inputDataForward]);
+    scrollRefToTop(entryCol);
+  }, [atkSkillOutput]);
 
   return (
     <Row>
       <Col lg={4} className="rounded bg-black-32 p-3 mb-3">
         <AttackingSkillInput
+          inputData={inputData}
+          setInputData={setInputData}
+          isAllFetched={isAllFetched}
           onSearchRequested={(inputData: InputData) => {
             GoogleAnalytics.damageCalc('search', inputData);
 
-            setInputDataForward(inputData);
+            setAtkSkillOutput(getCalculatedEntries(inputData, attackingSkillEntries, elementBonuses));
           }}
         />
       </Col>
       <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
-        {
-          inputDataForward &&
-          <Row className="text-right mb-2">
-            <Col>
-              <AttackingSkillSorter
-                inputData={inputDataForward}
-                onOrderPicked={(sortBy) => setInputDataForward(overwriteInputData(inputDataForward, {sortBy}))}
-              />
-            </Col>
-          </Row>
-        }
+        <Row className="text-right mb-2">
+          <Col>
+            <AttackingSkillSorter
+              inputData={inputData}
+              onOrderPicked={(sortBy) => setInputData(overwriteInputData(inputData, {sortBy}))}
+            />
+          </Col>
+        </Row>
         <AttackingSkillOutput
-          inputData={inputDataForward}
-          conditionEnumMap={conditionEnums.data}
-          elementBonusData={elementBonuses.data}
-          skillIdentifierInfo={skillIdentifiers.data}
-          atkSkillEntries={attackingSkillEntries.data}
-          skillEnums={skillEnums.data}
-          statusEnums={statusEnums.data}
+          displayConfig={inputData.display}
+          calculatedEntries={atkSkillOutput || []}
+          conditionEnumMap={conditionEnumMap}
+          skillIdentifierInfo={skillIdentifierInfo}
+          atkSkillEntries={attackingSkillEntries}
+          skillEnums={skillEnums}
+          statusEnums={statusEnums}
         />
       </Col>
     </Row>
diff --git a/src/components/elements/gameData/skillAtk/out/entry.tsx b/src/components/elements/gameData/skillAtk/out/entry.tsx
index 80f325a3..79e69af6 100644
--- a/src/components/elements/gameData/skillAtk/out/entry.tsx
+++ b/src/components/elements/gameData/skillAtk/out/entry.tsx
@@ -19,12 +19,12 @@ import {CalculatedSkillEntry} from './types';
 
 
 type SkillEntryProps = EnumDataPack & {
-  inputData?: InputData,
+  displayConfig: InputData['display'],
   calculatedData: CalculatedSkillEntry,
 }
 
 export const AttackingSkillEntry = ({
-  inputData,
+  displayConfig,
   calculatedData,
   conditionEnumMap,
   skillIdentifierInfo,
@@ -33,11 +33,6 @@ export const AttackingSkillEntry = ({
 }: SkillEntryProps) => {
   const atkSkillEntry = calculatedData.skillEntry;
 
-  // Early terminate if no input data
-  if (!inputData) {
-    return <></>;
-  }
-
   return (
     <div className="rounded bg-black-32 p-2 mb-2">
       <Row noGutters>
@@ -48,13 +43,13 @@ export const AttackingSkillEntry = ({
           <SectionSkillName atkSkillEntry={atkSkillEntry} skillIdentifierInfo={skillIdentifierInfo}/>
         </Col>
         {
-          inputData.display.damageInfo &&
+          displayConfig.damageInfo &&
           <Col xs="auto" sm="auto" className="text-right my-auto">
             <SectionSkillInfo atkSkillEntry={atkSkillEntry} calculatedData={calculatedData}/>
           </Col>
         }
         {
-          inputData.display.actualDamage &&
+          displayConfig.actualDamage &&
           <Col className="text-center my-auto" lg={5}>
             <SectionSkillDamage calculatedData={calculatedData}/>
             <ConditionBadges conditionCodes={calculatedData.skillEntry.condition} conditionEnums={conditionEnumMap}/>
@@ -62,7 +57,7 @@ export const AttackingSkillEntry = ({
         }
       </Row>
       {
-        inputData.display.damageDist &&
+        displayConfig.damageDist &&
         <Row className="text-center">
           <Col>
             <DistributionBar data={atkSkillEntry.skill.modsMax} padding={0} height="0.5rem" displayText={false}/>
@@ -71,17 +66,17 @@ export const AttackingSkillEntry = ({
       }
       <Row>
         {
-          inputData.display.affliction &&
+          displayConfig.affliction &&
           <SectionAffliction atkSkillEntry={atkSkillEntry} statusEnums={statusEnums}/>
         }
         <SectionBadges atkSkillEntry={atkSkillEntry}/>
       </Row>
       {
-        inputData.display.animationInfo &&
+        displayConfig.animationInfo &&
         <SectionAnimation atkSkillEntry={atkSkillEntry} skillEnums={skillEnums} conditionEnumMap={conditionEnumMap}/>
       }
       {
-        inputData.display.spInfo &&
+        displayConfig.spInfo &&
         <SectionSpInfo calculatedData={calculatedData} statusEnums={statusEnums}/>
       }
     </div>
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index 98d15a02..f7039b9f 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -1,35 +1,26 @@
 import React from 'react';
 
-import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
+import {AttackingSkillData} from '../../../../../api-def/resources';
 import {AnimationInfoWarning} from '../../warnings/animation';
 import {overLengthWarningCheck} from '../../warnings/overLength';
 import {InputData} from '../in/types';
 import {AttackingSkillEntry} from './entry';
 import {EnumDataPack} from './props';
 import {CalculatedSkillEntry} from './types';
-import {calculateEntries, filterSkillEntries} from './utils';
 
 
 type OutputProps = EnumDataPack & {
-  inputData?: InputData,
-  elementBonusData: ElementBonusData,
+  displayConfig: InputData['display'],
   atkSkillEntries: Array<AttackingSkillData>,
+  calculatedEntries: Array<CalculatedSkillEntry>,
 }
 
-export const AttackingSkillOutput = ({inputData, elementBonusData, atkSkillEntries, ...enums}: OutputProps) => {
+export const AttackingSkillOutput = ({displayConfig, atkSkillEntries, calculatedEntries, ...enums}: OutputProps) => {
   // Early termination if no input
-  if (!inputData) {
+  if (!calculatedEntries.length) {
     return <></>;
   }
 
-  // Filter entries
-  const atkSkillEntriesFiltered = filterSkillEntries(inputData, atkSkillEntries);
-
-  // Calculate entries
-  const calculatedEntries: Array<CalculatedSkillEntry> = calculateEntries(
-    atkSkillEntriesFiltered, inputData, elementBonusData,
-  );
-
   const entries: Array<React.ReactElement> = [];
 
   // Check over-length
@@ -38,7 +29,7 @@ export const AttackingSkillOutput = ({inputData, elementBonusData, atkSkillEntri
     entries.push(warning);
   }
   // Check if animation info warning should be displayed
-  if (inputData.display.animationInfo) {
+  if (displayConfig.animationInfo) {
     entries.push(<AnimationInfoWarning/>);
   }
 
@@ -48,7 +39,7 @@ export const AttackingSkillOutput = ({inputData, elementBonusData, atkSkillEntri
       .map((calculatedData: CalculatedSkillEntry, index: number) => (
         <AttackingSkillEntry
           key={index}
-          inputData={inputData}
+          displayConfig={displayConfig}
           calculatedData={calculatedData}
           {...enums}
         />
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
index 14c8e29d..80d05464 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
+++ b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
@@ -6,25 +6,25 @@ import {CalculatedSkillEntry} from '../types';
 type SortFuncLookup = { [sortBy in SortBy]: (entryA: CalculatedSkillEntry, entryB: CalculatedSkillEntry) => number }
 
 export const sortFunc: SortFuncLookup = {
-  damageDesc: (a, b) => b.skillDamage.expected - a.skillDamage.expected,
-  spAsc: (a, b) => a.skillEntry.skill.spMax - b.skillEntry.skill.spMax,
-  sspAsc: (a, b) => a.skillEntry.skill.ssSp - b.skillEntry.skill.ssSp,
-  spPer1KModDesc: (a, b) => b.efficiency.spPer1KMod - a.efficiency.spPer1KMod,
-  sspPer1KModDesc: (a, b) => b.efficiency.sspPer1KMod - a.efficiency.sspPer1KMod,
-  afflictionLengthPer1KSpDesc: (a, b) => (
+  damage: (a, b) => b.skillDamage.expected - a.skillDamage.expected,
+  sp: (a, b) => a.skillEntry.skill.spMax - b.skillEntry.skill.spMax,
+  ssp: (a, b) => a.skillEntry.skill.ssSp - b.skillEntry.skill.ssSp,
+  spPer1KMod: (a, b) => b.efficiency.spPer1KMod - a.efficiency.spPer1KMod,
+  sspPer1KMod: (a, b) => b.efficiency.sspPer1KMod - a.efficiency.sspPer1KMod,
+  afflictionLengthPer1KSp: (a, b) => (
     Math.min(...Object.values(b.efficiency.secPer1KSp)) - Math.min(...Object.values(a.efficiency.secPer1KSp))
   ),
-  afflictionLengthPer1KSspDesc: (a, b) => (
+  afflictionLengthPer1KSsp: (a, b) => (
     Math.min(...Object.values(b.efficiency.secPer1KSsp)) - Math.min(...Object.values(a.efficiency.secPer1KSsp))
   ),
 };
 
 export const orderName: { [sortBy in SortBy]: GetTranslationFunction } = {
-  damageDesc: (t) => t.game.skillAtk.sort.damageDesc,
-  spAsc: (t) => t.game.skillAtk.sort.sp,
-  sspAsc: (t) => t.game.skillAtk.sort.ssp,
-  spPer1KModDesc: (t) => t.game.skillAtk.spInfo.efficiency.spPer1KMod,
-  sspPer1KModDesc: (t) => t.game.skillAtk.spInfo.efficiency.sspPer1KMod,
-  afflictionLengthPer1KSpDesc: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSp,
-  afflictionLengthPer1KSspDesc: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSsp,
+  damage: (t) => t.game.skillAtk.sort.damageDesc,
+  sp: (t) => t.game.skillAtk.sort.sp,
+  ssp: (t) => t.game.skillAtk.sort.ssp,
+  spPer1KMod: (t) => t.game.skillAtk.spInfo.efficiency.spPer1KMod,
+  sspPer1KMod: (t) => t.game.skillAtk.spInfo.efficiency.sspPer1KMod,
+  afflictionLengthPer1KSp: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSp,
+  afflictionLengthPer1KSsp: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSsp,
 };
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
index 50c492b5..e8c1a53e 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
@@ -34,6 +34,6 @@ describe('ATK skill entry sorter', () => {
     fireEvent.click(orderButton);
 
     expect(onOrderPicked).toHaveBeenCalledTimes(1);
-    expect(onOrderPicked).toHaveBeenLastCalledWith('afflictionLengthPer1KSpDesc');
+    expect(onOrderPicked).toHaveBeenLastCalledWith('afflictionLengthPer1KSp');
   });
 });
diff --git a/src/components/elements/gameData/skillAtk/out/utils.test.tsx b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
index 8711b2f4..771abcf7 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
@@ -110,7 +110,7 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by damage DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'damageDesc',
+      sortBy: 'damage',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
@@ -125,7 +125,7 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by SP ASC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'spAsc',
+      sortBy: 'sp',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
@@ -140,7 +140,7 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by SSP ASC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'sspAsc',
+      sortBy: 'ssp',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
@@ -155,7 +155,7 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by SP efficiency DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'spPer1KModDesc',
+      sortBy: 'spPer1KMod',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
@@ -170,7 +170,7 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by SSP efficiency DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'sspPer1KModDesc',
+      sortBy: 'sspPer1KMod',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
@@ -185,7 +185,7 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by affliction duration SP efficiency DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'afflictionLengthPer1KSpDesc',
+      sortBy: 'afflictionLengthPer1KSp',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
@@ -200,7 +200,7 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by affliction duration SSP efficiency DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'afflictionLengthPer1KSspDesc',
+      sortBy: 'afflictionLengthPer1KSsp',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)

From 9765ab512c4c885875026e6232b056b03a180f09 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 05:59:28 -0500
Subject: [PATCH 45/61] IMP - Refactor get ATK skill calculated entries

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/in/main.tsx    |  8 ++---
 .../gameData/skillAtk/in/utils/calculate.ts   | 18 ++++++++++++
 .../elements/gameData/skillAtk/main.tsx       | 29 +++++--------------
 3 files changed, 30 insertions(+), 25 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/in/utils/calculate.ts

diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 48cd7805..d55edf26 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -8,7 +8,6 @@ import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
 import {CommonModal, ModalState} from '../../../common/modal';
 import {InputPanelCommonProps} from '../../../input/types';
-import {UseFetchEnumsReturn} from '../hooks';
 import {Filter} from './filter';
 import {DisplayItemPicker} from './limit';
 import {InputParameters} from './params';
@@ -16,11 +15,12 @@ import {InputData} from './types';
 import {validateInputData} from './utils/inputData';
 
 
-type InputProps = InputPanelCommonProps<InputData> & Pick<UseFetchEnumsReturn, 'isAllFetched'> & {
+type InputProps = InputPanelCommonProps<InputData> & {
   onSearchRequested: (inputData: InputData) => void,
+  isSearchAllowed: boolean,
 }
 
-export const AttackingSkillInput = ({inputData, setInputData, isAllFetched, onSearchRequested}: InputProps) => {
+export const AttackingSkillInput = ({inputData, setInputData, isSearchAllowed, onSearchRequested}: InputProps) => {
   const {t, lang} = useI18n();
 
   const [collapsed, setCollapsed] = React.useState(true);
@@ -60,7 +60,7 @@ export const AttackingSkillInput = ({inputData, setInputData, isAllFetched, onSe
         <Button variant="outline-primary" onClick={() => setCollapsed(!collapsed)} className="mr-2">
           {t((t) => t.game.skillAtk.collapse)}
         </Button>
-        <Button variant="outline-info" disabled={!isAllFetched} onClick={() => {
+        <Button variant="outline-info" disabled={!isSearchAllowed} onClick={() => {
           const isInputValid = validateInputData(
             inputData,
             lang,
diff --git a/src/components/elements/gameData/skillAtk/in/utils/calculate.ts b/src/components/elements/gameData/skillAtk/in/utils/calculate.ts
new file mode 100644
index 00000000..2e728687
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/in/utils/calculate.ts
@@ -0,0 +1,18 @@
+import {ElementBonusData} from '../../../../../../api-def/resources';
+import {UseFetchEnumsReturn} from '../../hooks';
+import {CalculatedSkillEntry} from '../../out/types';
+import {calculateEntries, filterSkillEntries} from '../../out/utils';
+import {InputData} from '../types';
+
+
+export const getCalculatedEntries = (
+  inputData: InputData,
+  atkSkillEntries: UseFetchEnumsReturn['attackingSkillEntries'],
+  elementBonusData: ElementBonusData,
+): Array<CalculatedSkillEntry> => (
+  calculateEntries(
+    filterSkillEntries(inputData, atkSkillEntries),
+    inputData,
+    elementBonusData,
+  )
+);
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 75aaab1e..3ea6528c 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -3,34 +3,21 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
-import {ElementBonusData} from '../../../../api-def/resources';
 import {scrollRefToTop} from '../../../../utils/scroll';
 import {GoogleAnalytics} from '../../../../utils/services/ga';
-import {useFetchEnums, UseFetchEnumsReturn} from './hooks';
+import {useFetchEnums} from './hooks';
 import {AttackingSkillInput} from './in/main';
 import {InputData} from './in/types';
+import {getCalculatedEntries} from './in/utils/calculate';
 import {generateInputData, overwriteInputData} from './in/utils/inputData';
 import {AttackingSkillOutput} from './out/main';
 import {AttackingSkillSorter} from './out/sorter/main';
 import {CalculatedSkillEntry} from './out/types';
-import {calculateEntries, filterSkillEntries} from './out/utils';
 
 
-const getCalculatedEntries = (
-  inputData: InputData,
-  atkSkillEntries: UseFetchEnumsReturn['attackingSkillEntries'],
-  elementBonusData: ElementBonusData,
-): Array<CalculatedSkillEntry> => (
-  calculateEntries(
-    filterSkillEntries(inputData, atkSkillEntries),
-    inputData,
-    elementBonusData,
-  )
-);
-
 export const AttackingSkillLookup = () => {
   const [inputData, setInputData] = React.useState<InputData>(generateInputData());
-  const [atkSkillOutput, setAtkSkillOutput] = React.useState<Array<CalculatedSkillEntry> | undefined>();
+  const [calculatedEntries, setCalculatedEntries] = React.useState<Array<CalculatedSkillEntry> | undefined>();
 
   const entryCol = React.useRef<HTMLDivElement>(null);
 
@@ -45,11 +32,11 @@ export const AttackingSkillLookup = () => {
   } = useFetchEnums();
 
   React.useEffect(() => {
-    if (!atkSkillOutput) {
+    if (!calculatedEntries) {
       return;
     }
     scrollRefToTop(entryCol);
-  }, [atkSkillOutput]);
+  }, [calculatedEntries]);
 
   return (
     <Row>
@@ -57,11 +44,11 @@ export const AttackingSkillLookup = () => {
         <AttackingSkillInput
           inputData={inputData}
           setInputData={setInputData}
-          isAllFetched={isAllFetched}
+          isSearchAllowed={isAllFetched}
           onSearchRequested={(inputData: InputData) => {
             GoogleAnalytics.damageCalc('search', inputData);
 
-            setAtkSkillOutput(getCalculatedEntries(inputData, attackingSkillEntries, elementBonuses));
+            setCalculatedEntries(getCalculatedEntries(inputData, attackingSkillEntries, elementBonuses));
           }}
         />
       </Col>
@@ -76,7 +63,7 @@ export const AttackingSkillLookup = () => {
         </Row>
         <AttackingSkillOutput
           displayConfig={inputData.display}
-          calculatedEntries={atkSkillOutput || []}
+          calculatedEntries={calculatedEntries || []}
           conditionEnumMap={conditionEnumMap}
           skillIdentifierInfo={skillIdentifierInfo}
           atkSkillEntries={attackingSkillEntries}

From b0d92fc6cc0e771575423d5fb661b72c444a646e Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 06:08:20 -0500
Subject: [PATCH 46/61] IMP - Refactor ATK skill hooks

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../gameData/skillAtk/{hooks.ts => hooks/enums.ts}        | 8 ++++----
 .../elements/gameData/skillAtk/in/utils/calculate.ts      | 2 +-
 src/components/elements/gameData/skillAtk/main.tsx        | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename src/components/elements/gameData/skillAtk/{hooks.ts => hooks/enums.ts} (91%)

diff --git a/src/components/elements/gameData/skillAtk/hooks.ts b/src/components/elements/gameData/skillAtk/hooks/enums.ts
similarity index 91%
rename from src/components/elements/gameData/skillAtk/hooks.ts
rename to src/components/elements/gameData/skillAtk/hooks/enums.ts
index 43d457e6..9cab593e 100644
--- a/src/components/elements/gameData/skillAtk/hooks.ts
+++ b/src/components/elements/gameData/skillAtk/hooks/enums.ts
@@ -6,10 +6,10 @@ import {
   SkillEnums,
   SkillIdentifierInfo,
   StatusEnums,
-} from '../../../../api-def/resources';
-import {ResourceLoader} from '../../../../utils/services/resources/loader';
-import {useFetchState, useFetchStateProcessed} from '../../common/fetch';
-import {EnumDataPack} from './out/props';
+} from '../../../../../api-def/resources';
+import {ResourceLoader} from '../../../../../utils/services/resources/loader';
+import {useFetchState, useFetchStateProcessed} from '../../../common/fetch';
+import {EnumDataPack} from '../out/props';
 
 
 export type UseFetchEnumsReturn = EnumDataPack & {
diff --git a/src/components/elements/gameData/skillAtk/in/utils/calculate.ts b/src/components/elements/gameData/skillAtk/in/utils/calculate.ts
index 2e728687..df77ba7f 100644
--- a/src/components/elements/gameData/skillAtk/in/utils/calculate.ts
+++ b/src/components/elements/gameData/skillAtk/in/utils/calculate.ts
@@ -1,5 +1,5 @@
 import {ElementBonusData} from '../../../../../../api-def/resources';
-import {UseFetchEnumsReturn} from '../../hooks';
+import {UseFetchEnumsReturn} from '../../hooks/enums';
 import {CalculatedSkillEntry} from '../../out/types';
 import {calculateEntries, filterSkillEntries} from '../../out/utils';
 import {InputData} from '../types';
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 3ea6528c..38481a3a 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -5,7 +5,7 @@ import Row from 'react-bootstrap/Row';
 
 import {scrollRefToTop} from '../../../../utils/scroll';
 import {GoogleAnalytics} from '../../../../utils/services/ga';
-import {useFetchEnums} from './hooks';
+import {useFetchEnums} from './hooks/enums';
 import {AttackingSkillInput} from './in/main';
 import {InputData} from './in/types';
 import {getCalculatedEntries} from './in/utils/calculate';

From 3c82b9b041ce2584ed55972562026e1c0a1f1182 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 08:25:38 -0500
Subject: [PATCH 47/61] ADD - Hook for handling input data preset

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../gameData/skillAtk/hooks/preset.test.ts    | 116 ++++++++++++++++++
 .../gameData/skillAtk/hooks/preset.ts         |  76 ++++++++++++
 .../elements/gameData/skillAtk/main.tsx       |  87 ++++++++-----
 src/i18n/translations/cht/translation.ts      |   1 +
 src/i18n/translations/definition.ts           |   1 +
 src/i18n/translations/en/translation.ts       |   1 +
 src/i18n/translations/jp/translation.ts       |   1 +
 src/utils/services/api/requestSender.ts       |  45 ++++++-
 src/utils/services/ga.ts                      |  16 +++
 9 files changed, 307 insertions(+), 37 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/hooks/preset.test.ts
 create mode 100644 src/components/elements/gameData/skillAtk/hooks/preset.ts

diff --git a/src/components/elements/gameData/skillAtk/hooks/preset.test.ts b/src/components/elements/gameData/skillAtk/hooks/preset.test.ts
new file mode 100644
index 00000000..977065d7
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/hooks/preset.test.ts
@@ -0,0 +1,116 @@
+import {waitFor} from '@testing-library/react';
+
+import {renderReactHook} from '../../../../../../test/render/main';
+import {ApiResponseCode} from '../../../../../api-def/api';
+import {ApiRequestSender} from '../../../../../utils/services/api/requestSender';
+import {GoogleAnalytics} from '../../../../../utils/services/ga';
+import {generateInputData} from '../in/utils/inputData';
+import {PRESET_QUERY_NAME, useAtkSkillInput} from './preset';
+
+
+describe('Input preset hook', () => {
+  let fnOnNotLoggedIn: jest.Mock;
+
+  beforeEach(() => {
+    fnOnNotLoggedIn = jest.fn();
+  });
+
+  it('does not invoke callback if the user is anonymous but not using preset', async () => {
+    renderReactHook(() => useAtkSkillInput(fnOnNotLoggedIn));
+
+    expect(fnOnNotLoggedIn).not.toHaveBeenCalled();
+  });
+
+  it('invokes callback if the user is anonymous and attempt to use preset', async () => {
+    renderReactHook(
+      () => useAtkSkillInput(fnOnNotLoggedIn),
+      {routerOptions: {query: {[PRESET_QUERY_NAME]: 'preset'}}},
+    );
+
+    expect(fnOnNotLoggedIn).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns the input data with preset applied', async () => {
+    jest.spyOn(ApiRequestSender, 'getPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      preset: generateInputData({display: {damageDist: true}}),
+    });
+
+    const {result} = renderReactHook(
+      () => useAtkSkillInput(fnOnNotLoggedIn),
+      {
+        hasSession: true,
+        routerOptions: {query: {[PRESET_QUERY_NAME]: 'preset'}},
+      },
+    );
+
+    await waitFor(() => expect(result.current.getPresetStatus.fetched).toBeTruthy());
+    expect(result.current.inputData.display.damageDist).toBeTruthy();
+  });
+
+  it('applies preset where only part of it matches', async () => {
+    jest.spyOn(ApiRequestSender, 'getPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      preset: {display: {actualDamage: true}},
+    });
+
+    const {result} = renderReactHook(
+      () => useAtkSkillInput(fnOnNotLoggedIn),
+      {
+        hasSession: true,
+        routerOptions: {query: {[PRESET_QUERY_NAME]: 'preset'}},
+      },
+    );
+
+    await waitFor(() => expect(result.current.getPresetStatus.fetched).toBeTruthy());
+    expect(result.current.inputData.display.actualDamage).toBeTruthy();
+  });
+
+  it('does not apply preset if none of the key match', async () => {
+    jest.spyOn(ApiRequestSender, 'getPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      preset: {a: true},
+    });
+
+    const {result} = renderReactHook(
+      () => useAtkSkillInput(fnOnNotLoggedIn),
+      {
+        hasSession: true,
+        routerOptions: {query: {[PRESET_QUERY_NAME]: 'preset'}},
+      },
+    );
+
+    await waitFor(() => expect(result.current.getPresetStatus.fetched).toBeTruthy());
+    expect(result.current.inputData).toStrictEqual(generateInputData());
+  });
+
+  it('returns template input data if preset ID not specified', async () => {
+    const {result} = renderReactHook(() => useAtkSkillInput(fnOnNotLoggedIn));
+
+    await waitFor(() => expect(result.current.getPresetStatus.fetched).toBeTruthy());
+    expect(result.current.inputData).toStrictEqual(generateInputData());
+  });
+
+  it('records via GA that an user tried to use a preset', async () => {
+    jest.spyOn(ApiRequestSender, 'getPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      preset: {a: true},
+    });
+    const gaEvent = jest.spyOn(GoogleAnalytics, 'presetLoaded');
+
+    const {result} = renderReactHook(
+      () => useAtkSkillInput(fnOnNotLoggedIn),
+      {
+        hasSession: true,
+        routerOptions: {query: {[PRESET_QUERY_NAME]: 'preset'}},
+      },
+    );
+
+    await waitFor(() => expect(result.current.getPresetStatus.fetched).toBeTruthy());
+    expect(gaEvent).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/hooks/preset.ts b/src/components/elements/gameData/skillAtk/hooks/preset.ts
new file mode 100644
index 00000000..4d36303f
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/hooks/preset.ts
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import {AppReactContext} from '../../../../../context/app/main';
+import {useNextRouter} from '../../../../../utils/router';
+import {ApiRequestSender} from '../../../../../utils/services/api/requestSender';
+import {GoogleAnalytics} from '../../../../../utils/services/ga';
+import {FetchStatus, FetchStatusSimple, isNotFetched} from '../../../common/fetch';
+import {InputPanelCommonProps} from '../../../input/types';
+import {InputData} from '../in/types';
+import {generateInputData, overwriteInputData} from '../in/utils/inputData';
+
+
+export const PRESET_QUERY_NAME = 'preset';
+
+type UseAtkSkillInputReturn = InputPanelCommonProps<InputData> & {
+  getPresetStatus: FetchStatusSimple,
+  setPresetStatus: FetchStatusSimple,
+  makePreset: (inputData: InputData) => void,
+}
+
+export const useAtkSkillInput = (onNotLoggedIn: () => void): UseAtkSkillInputReturn => {
+  const {query} = useNextRouter();
+  const presetId = query[PRESET_QUERY_NAME];
+
+  const context = React.useContext(AppReactContext);
+
+  const [fetchStatus, setFetchStatus] = React.useState<FetchStatus<InputData>>({
+    fetched: !presetId,
+    fetching: false,
+    data: generateInputData(),
+  });
+  const [makePresetStatus, setMakePresetStatus] = React.useState<FetchStatus<string | null>>({
+    fetched: false,
+    fetching: false,
+    data: null,
+  });
+
+  if (isNotFetched(fetchStatus)) {
+    if (context?.session) {
+      setFetchStatus({...fetchStatus, fetching: true});
+      ApiRequestSender.getPresetAtkSkill(context.session.user.id.toString(), presetId as string)
+        .then((response) => {
+          setFetchStatus({
+            fetched: true,
+            fetching: false,
+            data: overwriteInputData(fetchStatus.data, response.preset),
+          });
+        });
+      GoogleAnalytics.presetLoaded('atkSkill');
+    } else {
+      setFetchStatus({...fetchStatus, fetched: true, fetching: false});
+      onNotLoggedIn();
+    }
+  }
+
+  const makePreset = (inputData: InputData) => {
+    setMakePresetStatus({...makePresetStatus, fetched: false, fetching: true});
+    if (context?.session) {
+      ApiRequestSender.setPresetAtkSkill(context.session.user.id.toString(), inputData)
+        .then((response) => {
+          setMakePresetStatus({fetched: true, fetching: false, data: response.presetId});
+        });
+    } else {
+      onNotLoggedIn();
+      setMakePresetStatus({...makePresetStatus, fetched: true, fetching: false});
+    }
+  };
+
+  return {
+    inputData: fetchStatus.data,
+    setInputData: (newData: InputData) => setFetchStatus({...fetchStatus, data: newData}),
+    getPresetStatus: fetchStatus,
+    setPresetStatus: makePresetStatus,
+    makePreset,
+  };
+};
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 38481a3a..10f3b52b 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -3,20 +3,36 @@ import React from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
+import {useI18n} from '../../../../i18n/hook';
 import {scrollRefToTop} from '../../../../utils/scroll';
 import {GoogleAnalytics} from '../../../../utils/services/ga';
+import {CommonModal, ModalState} from '../../common/modal';
 import {useFetchEnums} from './hooks/enums';
+import {useAtkSkillInput} from './hooks/preset';
 import {AttackingSkillInput} from './in/main';
 import {InputData} from './in/types';
 import {getCalculatedEntries} from './in/utils/calculate';
-import {generateInputData, overwriteInputData} from './in/utils/inputData';
+import {overwriteInputData} from './in/utils/inputData';
 import {AttackingSkillOutput} from './out/main';
 import {AttackingSkillSorter} from './out/sorter/main';
 import {CalculatedSkillEntry} from './out/types';
 
 
 export const AttackingSkillLookup = () => {
-  const [inputData, setInputData] = React.useState<InputData>(generateInputData());
+  const {t} = useI18n();
+  const {inputData, setInputData, getPresetStatus} = useAtkSkillInput(() => {
+    setModalState({
+      ...modalState,
+      show: true,
+      message: t((t) => t.game.skillAtk.error.presetMustLogin),
+    });
+  });
+
+  const [modalState, setModalState] = React.useState<ModalState>({
+    show: false,
+    title: '',
+    message: '',
+  });
   const [calculatedEntries, setCalculatedEntries] = React.useState<Array<CalculatedSkillEntry> | undefined>();
 
   const entryCol = React.useRef<HTMLDivElement>(null);
@@ -39,38 +55,41 @@ export const AttackingSkillLookup = () => {
   }, [calculatedEntries]);
 
   return (
-    <Row>
-      <Col lg={4} className="rounded bg-black-32 p-3 mb-3">
-        <AttackingSkillInput
-          inputData={inputData}
-          setInputData={setInputData}
-          isSearchAllowed={isAllFetched}
-          onSearchRequested={(inputData: InputData) => {
-            GoogleAnalytics.damageCalc('search', inputData);
+    <>
+      <CommonModal modalState={modalState} setModalState={setModalState}/>
+      <Row>
+        <Col lg={4} className="rounded bg-black-32 p-3 mb-3">
+          <AttackingSkillInput
+            inputData={inputData}
+            setInputData={setInputData}
+            isSearchAllowed={isAllFetched && getPresetStatus.fetched}
+            onSearchRequested={(inputData: InputData) => {
+              GoogleAnalytics.damageCalc('search', inputData);
 
-            setCalculatedEntries(getCalculatedEntries(inputData, attackingSkillEntries, elementBonuses));
-          }}
-        />
-      </Col>
-      <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
-        <Row className="text-right mb-2">
-          <Col>
-            <AttackingSkillSorter
-              inputData={inputData}
-              onOrderPicked={(sortBy) => setInputData(overwriteInputData(inputData, {sortBy}))}
-            />
-          </Col>
-        </Row>
-        <AttackingSkillOutput
-          displayConfig={inputData.display}
-          calculatedEntries={calculatedEntries || []}
-          conditionEnumMap={conditionEnumMap}
-          skillIdentifierInfo={skillIdentifierInfo}
-          atkSkillEntries={attackingSkillEntries}
-          skillEnums={skillEnums}
-          statusEnums={statusEnums}
-        />
-      </Col>
-    </Row>
+              setCalculatedEntries(getCalculatedEntries(inputData, attackingSkillEntries, elementBonuses));
+            }}
+          />
+        </Col>
+        <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
+          <Row className="text-right mb-2">
+            <Col>
+              <AttackingSkillSorter
+                inputData={inputData}
+                onOrderPicked={(sortBy) => setInputData(overwriteInputData(inputData, {sortBy}))}
+              />
+            </Col>
+          </Row>
+          <AttackingSkillOutput
+            displayConfig={inputData.display}
+            calculatedEntries={calculatedEntries || []}
+            conditionEnumMap={conditionEnumMap}
+            skillIdentifierInfo={skillIdentifierInfo}
+            atkSkillEntries={attackingSkillEntries}
+            skillEnums={skillEnums}
+            statusEnums={statusEnums}
+          />
+        </Col>
+      </Row>
+    </>
   );
 };
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 99a9d9fe..5846169d 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -192,6 +192,7 @@ export const translation: TranslationStruct = {
       collapse: '摺疊/展開',
       error: {
         noInfoToDisplay: '請選擇至少一項顯示資訊。',
+        presetMustLogin: '請先登入再使用預設參數功能。',
       },
       animation: {
         earliest: '最早於 {{time}} 秒',
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index 38a26c8a..f9af30bf 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -191,6 +191,7 @@ export type TranslationStruct = {
       collapse: string,
       error: {
         noInfoToDisplay: string,
+        presetMustLogin: string,
       },
       animation: {
         earliest: string,
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index bec18dbc..7d470ac9 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -216,6 +216,7 @@ export const translation: TranslationStruct = {
       collapse: 'Collapse/Expand',
       error: {
         noInfoToDisplay: 'Please select at least 1 info to display.',
+        presetMustLogin: 'You must login to use the input parameter preset via link.',
       },
       animation: {
         earliest: '{{time}} sec @ Earliest',
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 60fb46e1..1c3efce3 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -191,6 +191,7 @@ export const translation: TranslationStruct = {
       collapse: '展開 / 折り畳み',
       error: {
         noInfoToDisplay: 'Please select at least 1 info to display.',
+        presetMustLogin: 'You must login to use the input parameter preset via link.',
       },
       animation: {
         earliest: '{{time}} sec @ Earliest',
diff --git a/src/utils/services/api/requestSender.ts b/src/utils/services/api/requestSender.ts
index f4b1e8af..82d705cc 100644
--- a/src/utils/services/api/requestSender.ts
+++ b/src/utils/services/api/requestSender.ts
@@ -21,6 +21,8 @@ import {
   DragonAnalysisGetResponse,
   DragonAnalysisPublishPayload,
   FailedResponse,
+  GetAtkSkillPresetPayload,
+  GetAtkSkillPresetResponse,
   PageMetaPayload,
   PageMetaResponse,
   PostPageMetaPayload,
@@ -37,11 +39,14 @@ import {
   QuestPostPublishPayload,
   QuestPostPublishResponse,
   RequestPayloadBase,
+  SetAtkSkillPresetPayload,
+  SetAtkSkillPresetResponse,
   SupportedLanguages,
   UnitNameRefPayload,
   UnitNameRefResponse,
   UnitType,
 } from '../../../api-def/api';
+import {InputData as AtkSkillInput} from '../../../components/elements/gameData/skillAtk/in/types';
 import {FetchPostOptions} from './types';
 import {getFullApiUrl} from './utils';
 
@@ -272,12 +277,12 @@ export class ApiRequestSender {
 
   // endregion
 
-  // region Get page meta
+  // region Page meta
 
   /**
    * Send a request to get the post page meta.
    *
-   * @param {string} uid User ID
+   * @param {string} uid user ID
    * @param {SupportedLanguages} lang post language
    * @param {PostType} postType type of the post
    * @param {number | string} postIdentifier post identifier
@@ -294,7 +299,7 @@ export class ApiRequestSender {
   /**
    * Send a request to get the generic page meta.
    *
-   * @param {string} uid User ID
+   * @param {string} uid user ID
    * @param {SupportedLanguages} lang current page language
    * @return {Promise<PageMetaResponse | FailedResponse>} promise returned from `fetch`
    */
@@ -328,6 +333,40 @@ export class ApiRequestSender {
 
   // endregion
 
+  // region Preset
+
+  /**
+   * Send a request to get an ATK skill input data preset.
+   *
+   * @param {string} uid user ID
+   * @param {string} presetId input preset ID
+   * @return {Promise<UnitNameRefResponse>} promise returned from `fetch`
+   */
+  static getPresetAtkSkill(uid: string, presetId: string) {
+    return ApiRequestSender.sendRequest<GetAtkSkillPresetResponse, GetAtkSkillPresetPayload>(
+      'GET',
+      ApiEndPoints.PRESET_ATK_SKILL_INPUT,
+      {uid, presetId},
+    );
+  }
+
+  /**
+   * Send a request to create an ATK skill input data preset.
+   *
+   * @param {string} uid user ID
+   * @param {AtkSkillInput} preset ATK skill input data
+   * @return {Promise<UnitNameRefResponse>} promise returned from `fetch`
+   */
+  static setPresetAtkSkill(uid: string, preset: AtkSkillInput) {
+    return ApiRequestSender.sendRequest<SetAtkSkillPresetResponse, SetAtkSkillPresetPayload>(
+      'POST',
+      ApiEndPoints.PRESET_ATK_SKILL_INPUT,
+      {uid, preset},
+    );
+  }
+
+  // endregion
+
   /**
    * Base method to send an API request.
    *
diff --git a/src/utils/services/ga.ts b/src/utils/services/ga.ts
index c14bf6a5..9aa37b6b 100644
--- a/src/utils/services/ga.ts
+++ b/src/utils/services/ga.ts
@@ -11,6 +11,7 @@ enum GAEvent {
   ABILITY_SEARCH = 'ability_search',
   ANALYSIS_LOOKUP = 'analysis_lookup',
   OPEN_IMAGE = 'open_image',
+  LOAD_INPUT_PRESET = 'load_preset',
 }
 
 enum GAParameter {
@@ -30,6 +31,7 @@ enum GAParameter {
   WEAPON_WAND = 'weapon_wand',
   WEAPON_STAFF = 'weapon_staff',
   WEAPON_MANACASTER = 'weapon_manacaster',
+  PRESET_TYPE = 'preset_type',
 }
 
 /**
@@ -128,6 +130,20 @@ export class GoogleAnalytics {
     );
   }
 
+  /**
+   * Record that an input preset has been loaded.
+   *
+   * @param {string} type type of the preset loaded
+   */
+  static presetLoaded(type: 'atkSkill') {
+    GoogleAnalytics.sendEvent(
+      GAEvent.LOAD_INPUT_PRESET,
+      {
+        [GAParameter.PRESET_TYPE]: type,
+      },
+    );
+  }
+
   /**
    * Send a Google Analytics event via gtag.js.
    *

From abdf58ea2b86ae33aec2a6d8f49fc9abcf51c948 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 10:16:55 -0500
Subject: [PATCH 48/61] FIX - SP efficiency display error

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/out/sections/sp/efficiency.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx b/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
index 188375d7..8dcae816 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
@@ -87,7 +87,7 @@ export const SpEfficiencyTable = ({calculatedData, statusEnums}: SectionSpInfoPr
                     <tr>
                       <td>{t((t) => t.game.skillAtk.spInfo.efficiency.secPer1KSsp)}</td>
                       <td>
-                        <AfflictionDataCell statusEnums={statusEnums} data={calculatedData.efficiency.secPer1KSp}/>
+                        <AfflictionDataCell statusEnums={statusEnums} data={calculatedData.efficiency.secPer1KSsp}/>
                       </td>
                     </tr>
                   }

From c386652510bce0ef02ab047e4d46943dcc5bf259 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 10:55:11 -0500
Subject: [PATCH 49/61] IMP - Change unit from SP/1K% to %/1K SP

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/api-def                                    |  2 +-
 .../gameData/skillAtk/in/main.test.tsx         |  6 +++---
 .../elements/gameData/skillAtk/in/types.ts     |  4 ++--
 .../skillAtk/out/sections/sp/efficiency.tsx    |  8 ++++----
 .../skillAtk/out/sections/sp/main.test.tsx     | 18 +++++++++---------
 .../gameData/skillAtk/out/sorter/lookup.ts     |  8 ++++----
 .../elements/gameData/skillAtk/out/types.ts    |  4 ++--
 .../gameData/skillAtk/out/utils.test.tsx       | 12 ++++++------
 .../elements/gameData/skillAtk/out/utils.ts    |  4 ++--
 src/i18n/translations/cht/translation.ts       |  4 ++--
 src/i18n/translations/en/translation.ts        |  4 ++--
 src/i18n/translations/jp/translation.ts        |  4 ++--
 test/data/mock/skill.ts                        |  4 ++--
 13 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/api-def b/src/api-def
index 3fc149a2..8923d4c4 160000
--- a/src/api-def
+++ b/src/api-def
@@ -1 +1 @@
-Subproject commit 3fc149a202dee3d57f084fdef0375ab68a436b3e
+Subproject commit 8923d4c4a6335c82a687e0c3dc22a2af5c9bf915
diff --git a/src/components/elements/gameData/skillAtk/in/main.test.tsx b/src/components/elements/gameData/skillAtk/in/main.test.tsx
index 2a9e819b..f1e1a9b0 100644
--- a/src/components/elements/gameData/skillAtk/in/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.test.tsx
@@ -25,7 +25,7 @@ describe('ATK skill input', () => {
     renderReact(() => (
       <AttackingSkillInput
         onSearchRequested={fnOnSearch}
-        isAllFetched
+        isSearchAllowed
         inputData={inputData}
         setInputData={setInputData}
       />
@@ -42,7 +42,7 @@ describe('ATK skill input', () => {
     const {rerender} = renderReact(() => (
       <AttackingSkillInput
         onSearchRequested={fnOnSearch}
-        isAllFetched
+        isSearchAllowed
         inputData={inputData}
         setInputData={setInputData}
       />
@@ -74,7 +74,7 @@ describe('ATK skill input', () => {
     const {rerender} = renderReact(() => (
       <AttackingSkillInput
         onSearchRequested={fnOnSearch}
-        isAllFetched
+        isSearchAllowed
         inputData={inputData}
         setInputData={setInputData}
       />
diff --git a/src/components/elements/gameData/skillAtk/in/types.ts b/src/components/elements/gameData/skillAtk/in/types.ts
index 069b6eee..b1b1e821 100644
--- a/src/components/elements/gameData/skillAtk/in/types.ts
+++ b/src/components/elements/gameData/skillAtk/in/types.ts
@@ -7,8 +7,8 @@ export type SortBy =
   'damage' |
   'sp' |
   'ssp' |
-  'spPer1KMod' |
-  'sspPer1KMod' |
+  'modPer1KSp' |
+  'modPer1KSsp' |
   'afflictionLengthPer1KSp' |
   'afflictionLengthPer1KSsp'
 
diff --git a/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx b/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
index 8dcae816..bdfb8ed8 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/sp/efficiency.tsx
@@ -63,14 +63,14 @@ export const SpEfficiencyTable = ({calculatedData, statusEnums}: SectionSpInfoPr
           <table>
             <tbody>
               <tr>
-                <td>{t((t) => t.game.skillAtk.spInfo.efficiency.spPer1KMod)}</td>
-                <td>{calculatedData.efficiency.spPer1KMod.toFixed(2)}</td>
+                <td>{t((t) => t.game.skillAtk.spInfo.efficiency.modPctPer1KSp)}</td>
+                <td>{calculatedData.efficiency.modPctPer1KSp.toFixed(2)}%</td>
               </tr>
               {
                 calculatedData.skillEntry.skill.sharable &&
                 <tr>
-                  <td>{t((t) => t.game.skillAtk.spInfo.efficiency.sspPer1KMod)}</td>
-                  <td>{calculatedData.efficiency.sspPer1KMod.toFixed(2)}</td>
+                  <td>{t((t) => t.game.skillAtk.spInfo.efficiency.modPctPer1KSsp)}</td>
+                  <td>{calculatedData.efficiency.modPctPer1KSsp.toFixed(2)}%</td>
                 </tr>
               }
               {
diff --git a/src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx b/src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx
index 476b0b2b..90751b5c 100644
--- a/src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/sections/sp/main.test.tsx
@@ -46,7 +46,7 @@ describe('SP info section', () => {
     userEvent.click(efficiencyButton);
 
     await waitFor(() => expect(screen.getByText(
-      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSp,
       {selector: '.collapse.show *'},
     )).toBeInTheDocument());
   });
@@ -77,10 +77,10 @@ describe('SP info section', () => {
     userEvent.click(efficiencyButton);
 
     await waitFor(() => expect(screen.getByText(
-      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSp,
       {selector: '.collapse.show *'},
     )).toBeInTheDocument());
-    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.sspPer1KMod)).toBeInTheDocument();
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSsp)).toBeInTheDocument();
     expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSsp)).toBeInTheDocument();
   });
 
@@ -99,10 +99,10 @@ describe('SP info section', () => {
     userEvent.click(efficiencyButton);
 
     await waitFor(() => expect(screen.getByText(
-      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSp,
       {selector: '.collapse.show *'},
     )).toBeInTheDocument());
-    expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.sspPer1KMod)).not.toBeInTheDocument();
+    expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSsp)).not.toBeInTheDocument();
     expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSsp)).not.toBeInTheDocument();
   });
 
@@ -132,7 +132,7 @@ describe('SP info section', () => {
     userEvent.click(efficiencyButton);
 
     await waitFor(() => expect(screen.getByText(
-      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSp,
       {selector: '.collapse.show *'},
     )).toBeInTheDocument());
     expect(screen.queryByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSp)).not.toBeInTheDocument();
@@ -154,7 +154,7 @@ describe('SP info section', () => {
     userEvent.click(efficiencyButton);
 
     await waitFor(() => expect(screen.getByText(
-      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSp,
       {selector: '.collapse.show *'},
     )).toBeInTheDocument());
     expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSp)).toBeInTheDocument();
@@ -186,10 +186,10 @@ describe('SP info section', () => {
     userEvent.click(efficiencyButton);
 
     await waitFor(() => expect(screen.getByText(
-      translationEN.game.skillAtk.spInfo.efficiency.spPer1KMod,
+      translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSp,
       {selector: '.collapse.show *'},
     )).toBeInTheDocument());
-    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.sspPer1KMod)).toBeInTheDocument();
+    expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.modPctPer1KSsp)).toBeInTheDocument();
     expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSp)).toBeInTheDocument();
     expect(screen.getByText(translationEN.game.skillAtk.spInfo.efficiency.secPer1KSsp)).toBeInTheDocument();
   });
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
index 80d05464..7b67d961 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
+++ b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
@@ -9,8 +9,8 @@ export const sortFunc: SortFuncLookup = {
   damage: (a, b) => b.skillDamage.expected - a.skillDamage.expected,
   sp: (a, b) => a.skillEntry.skill.spMax - b.skillEntry.skill.spMax,
   ssp: (a, b) => a.skillEntry.skill.ssSp - b.skillEntry.skill.ssSp,
-  spPer1KMod: (a, b) => b.efficiency.spPer1KMod - a.efficiency.spPer1KMod,
-  sspPer1KMod: (a, b) => b.efficiency.sspPer1KMod - a.efficiency.sspPer1KMod,
+  modPer1KSp: (a, b) => b.efficiency.modPctPer1KSp - a.efficiency.modPctPer1KSp,
+  modPer1KSsp: (a, b) => b.efficiency.modPctPer1KSsp - a.efficiency.modPctPer1KSsp,
   afflictionLengthPer1KSp: (a, b) => (
     Math.min(...Object.values(b.efficiency.secPer1KSp)) - Math.min(...Object.values(a.efficiency.secPer1KSp))
   ),
@@ -23,8 +23,8 @@ export const orderName: { [sortBy in SortBy]: GetTranslationFunction } = {
   damage: (t) => t.game.skillAtk.sort.damageDesc,
   sp: (t) => t.game.skillAtk.sort.sp,
   ssp: (t) => t.game.skillAtk.sort.ssp,
-  spPer1KMod: (t) => t.game.skillAtk.spInfo.efficiency.spPer1KMod,
-  sspPer1KMod: (t) => t.game.skillAtk.spInfo.efficiency.sspPer1KMod,
+  modPer1KSp: (t) => t.game.skillAtk.spInfo.efficiency.modPctPer1KSp,
+  modPer1KSsp: (t) => t.game.skillAtk.spInfo.efficiency.modPctPer1KSsp,
   afflictionLengthPer1KSp: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSp,
   afflictionLengthPer1KSsp: (t) => t.game.skillAtk.spInfo.efficiency.secPer1KSsp,
 };
diff --git a/src/components/elements/gameData/skillAtk/out/types.ts b/src/components/elements/gameData/skillAtk/out/types.ts
index ee5f90a5..6710d933 100644
--- a/src/components/elements/gameData/skillAtk/out/types.ts
+++ b/src/components/elements/gameData/skillAtk/out/types.ts
@@ -3,8 +3,8 @@ import {CalculateDamageReturn} from '../../../../../utils/game/damage';
 
 
 export type Efficiency = {
-  spPer1KMod: number,
-  sspPer1KMod: number,
+  modPctPer1KSp: number,
+  modPctPer1KSsp: number,
   secPer1KSp: {[StatusCode in number]: number},
   secPer1KSsp: {[StatusCode in number]: number},
 }
diff --git a/src/components/elements/gameData/skillAtk/out/utils.test.tsx b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
index 771abcf7..cbddd61c 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
@@ -155,11 +155,11 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by SP efficiency DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'spPer1KMod',
+      sortBy: 'modPer1KSp',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
-      .map((entry) => entry.efficiency.spPer1KMod)
+      .map((entry) => entry.efficiency.modPctPer1KSp)
       .filter((x, i, a) => !i || x !== a[i - 1]);
     expect(entries[0]).toBeGreaterThan(entries[1]);
     expect(entries[1]).toBeGreaterThan(entries[2]);
@@ -170,11 +170,11 @@ describe('Sort ATK skill entries', () => {
   it('sorts entries by SSP efficiency DESC', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
-      sortBy: 'sspPer1KMod',
+      sortBy: 'modPer1KSsp',
     };
 
     const entries = calculateEntries(data, inputData, elemBonusData)
-      .map((entry) => entry.efficiency.sspPer1KMod)
+      .map((entry) => entry.efficiency.modPctPer1KSsp)
       .filter((x, i, a) => !i || x !== a[i - 1]);
     expect(entries[0]).toBeGreaterThan(entries[1]);
     expect(entries[1]).toBeGreaterThan(entries[2]);
@@ -245,7 +245,7 @@ describe('Entry calculation', () => {
     };
 
     const entry = calculateEntries([dataModified], inputDataTemplate, elemBonusData)[0];
-    expect(entry.efficiency.spPer1KMod).toBe(2000);
+    expect(entry.efficiency.modPctPer1KSp).toBe(500);
   });
 
   it('calculates SSP efficiency', async () => {
@@ -272,7 +272,7 @@ describe('Entry calculation', () => {
     };
 
     const entry = calculateEntries([dataModified], inputDataTemplate, elemBonusData)[0];
-    expect(entry.efficiency.sspPer1KMod).toBe(10000);
+    expect(entry.efficiency.modPctPer1KSsp).toBe(100);
   });
 
   it('calculates affliction duration SP efficiency', async () => {
diff --git a/src/components/elements/gameData/skillAtk/out/utils.ts b/src/components/elements/gameData/skillAtk/out/utils.ts
index 85666be5..227fe87a 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.ts
+++ b/src/components/elements/gameData/skillAtk/out/utils.ts
@@ -51,8 +51,8 @@ export const calculateEntries = (
 
       // Calculate efficiency
       const efficiency: Efficiency = {
-        spPer1KMod: entry.skill.spMax / (skillDamage.totalMods / 10),
-        sspPer1KMod: entry.skill.ssSp / (skillDamage.totalMods / 10),
+        modPctPer1KSp: (skillDamage.totalMods * 100) / (entry.skill.spMax / 1000),
+        modPctPer1KSsp: (skillDamage.totalMods * 100) / (entry.skill.ssSp / 1000),
         secPer1KSp: Object.fromEntries(entry.skill.afflictions.map((afflictionUnit) => (
           [afflictionUnit.statusCode, afflictionUnit.duration / (entry.skill.spMax / 1000)]
         ))),
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 5846169d..d595ba59 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -216,8 +216,8 @@ export const translation: TranslationStruct = {
       spInfo: {
         efficiencyIndexes: '效率指標',
         efficiency: {
-          spPer1KMod: 'SP / 1000%',
-          sspPer1KMod: 'SSP / 1000%',
+          modPctPer1KSp: '% / 1K SP',
+          modPctPer1KSsp: '% / 1K SSP',
           secPer1KSp: '異常效期 (秒) / 1K SP',
           secPer1KSsp: '異常效期 (秒) / 1K SSP',
         },
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 7d470ac9..c0f13c45 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -240,8 +240,8 @@ export const translation: TranslationStruct = {
       spInfo: {
         efficiencyIndexes: 'Efficiency Indexes',
         efficiency: {
-          spPer1KMod: 'SP / 1000%',
-          sspPer1KMod: 'SSP / 1000%',
+          modPctPer1KSp: '% / 1K SP',
+          modPctPer1KSsp: '% / 1K SSP',
           secPer1KSp: 'Affliction (sec) / 1K SP',
           secPer1KSsp: 'Affliction (sec) / 1K SSP',
         },
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 1c3efce3..8ff8ad21 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -215,8 +215,8 @@ export const translation: TranslationStruct = {
       spInfo: {
         efficiencyIndexes: '效率指標',
         efficiency: {
-          spPer1KMod: 'SP / 1000%',
-          sspPer1KMod: 'SSP / 1000%',
+          modPctPer1KSp: '% / 1K SP',
+          modPctPer1KSsp: '% / 1K SSP',
           secPer1KSp: '異常效期 (秒) / 1K SP',
           secPer1KSsp: '異常效期 (秒) / 1K SSP',
         },
diff --git a/test/data/mock/skill.ts b/test/data/mock/skill.ts
index e64d9a7d..764b1e6f 100644
--- a/test/data/mock/skill.ts
+++ b/test/data/mock/skill.ts
@@ -65,8 +65,8 @@ export const generateCalculatedEntry = (): CalculatedSkillEntry => ({
     totalMods: 7,
   },
   efficiency: {
-    spPer1KMod: 1000,
-    sspPer1KMod: 1200,
+    modPctPer1KSp: 1000,
+    modPctPer1KSsp: 1200,
     secPer1KSp: {
       1: 2.5757575757,
       2: 5.0131313131,

From b4d6a00fc70dbc9816ec0451c0072249adb07183 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 11:44:48 -0500
Subject: [PATCH 50/61] ADD - Show spinner on loading

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/gameData/skillAtk/in/main.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index d55edf26..8a1089b3 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Button from 'react-bootstrap/Button';
+import Spinner from 'react-bootstrap/Spinner';
 
 import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/resources';
 import {useI18n} from '../../../../../i18n/hook';
@@ -73,6 +74,7 @@ export const AttackingSkillInput = ({inputData, setInputData, isSearchAllowed, o
 
           onSearchRequested(inputData);
         }}>
+          {!isSearchAllowed && <Spinner animation="grow" size="sm" as="span" className="mr-1"/>}
           {t((t) => t.misc.search)}
         </Button>
       </div>

From dd562d520c6d08e41c14b1e6712da0992562aa9f Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 12:15:52 -0500
Subject: [PATCH 51/61] FIX - Re-sort not immediately performed on order
 changed

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/gameData/skillAtk/main.test.tsx | 2 ++
 src/components/elements/gameData/skillAtk/main.tsx      | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
index 3fd513c7..2386ce71 100644
--- a/src/components/elements/gameData/skillAtk/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -206,4 +206,6 @@ describe('ATK skill lookup', () => {
 
     expect(screen.getByText('Order: SP', {selector: 'button'})).toBeInTheDocument();
   }, 10000);
+
+  it.todo('sorts on order changed');
 });
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 10f3b52b..1eb4e934 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -75,7 +75,11 @@ export const AttackingSkillLookup = () => {
             <Col>
               <AttackingSkillSorter
                 inputData={inputData}
-                onOrderPicked={(sortBy) => setInputData(overwriteInputData(inputData, {sortBy}))}
+                onOrderPicked={(sortBy) => {
+                  const newInputData = overwriteInputData(inputData, {sortBy});
+                  setInputData(newInputData);
+                  setCalculatedEntries(getCalculatedEntries(newInputData, attackingSkillEntries, elementBonuses));
+                }}
               />
             </Col>
           </Row>

From c959f27f316e14bf286f5f6601aa541f96398995 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 12:40:02 -0500
Subject: [PATCH 52/61] ADD - Affliction info note

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/main.tsx          |  1 -
 .../elements/gameData/skillAtk/out/main.tsx      | 12 ++++++++----
 .../elements/gameData/warnings/affliction.tsx    | 16 ++++++++++++++++
 .../elements/gameData/warnings/animation.tsx     |  4 ++--
 src/i18n/translations/cht/translation.ts         |  5 ++++-
 src/i18n/translations/definition.ts              |  7 +++++--
 src/i18n/translations/en/translation.ts          |  6 +++++-
 src/i18n/translations/jp/translation.ts          |  5 ++++-
 8 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 src/components/elements/gameData/warnings/affliction.tsx

diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 1eb4e934..c379c838 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -88,7 +88,6 @@ export const AttackingSkillLookup = () => {
             calculatedEntries={calculatedEntries || []}
             conditionEnumMap={conditionEnumMap}
             skillIdentifierInfo={skillIdentifierInfo}
-            atkSkillEntries={attackingSkillEntries}
             skillEnums={skillEnums}
             statusEnums={statusEnums}
           />
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index f7039b9f..fa3a15ad 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {AttackingSkillData} from '../../../../../api-def/resources';
+import {AfflictionWarning} from '../../warnings/affliction';
 import {AnimationInfoWarning} from '../../warnings/animation';
 import {overLengthWarningCheck} from '../../warnings/overLength';
 import {InputData} from '../in/types';
@@ -11,11 +11,10 @@ import {CalculatedSkillEntry} from './types';
 
 type OutputProps = EnumDataPack & {
   displayConfig: InputData['display'],
-  atkSkillEntries: Array<AttackingSkillData>,
   calculatedEntries: Array<CalculatedSkillEntry>,
 }
 
-export const AttackingSkillOutput = ({displayConfig, atkSkillEntries, calculatedEntries, ...enums}: OutputProps) => {
+export const AttackingSkillOutput = ({displayConfig, calculatedEntries, ...enums}: OutputProps) => {
   // Early termination if no input
   if (!calculatedEntries.length) {
     return <></>;
@@ -28,10 +27,15 @@ export const AttackingSkillOutput = ({displayConfig, atkSkillEntries, calculated
   if (warning !== null) {
     entries.push(warning);
   }
-  // Check if animation info warning should be displayed
+  // Check if animation info alert should be displayed
   if (displayConfig.animationInfo) {
     entries.push(<AnimationInfoWarning/>);
   }
+  // Check if affliction info alert should be displayed
+  // - Both affliction and SP info do something with affliction
+  if (displayConfig.affliction || displayConfig.spInfo) {
+    entries.push(<AfflictionWarning/>);
+  }
 
   // Add transformed entries
   entries.push(
diff --git a/src/components/elements/gameData/warnings/affliction.tsx b/src/components/elements/gameData/warnings/affliction.tsx
new file mode 100644
index 00000000..0a4648b9
--- /dev/null
+++ b/src/components/elements/gameData/warnings/affliction.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Alert from 'react-bootstrap/Alert';
+
+import {useI18n} from '../../../../i18n/hook';
+
+
+export const AfflictionWarning = () => {
+  const {t} = useI18n();
+
+  return (
+    <Alert variant="info" className="rounded bg-black-32 p-2 mb-2">
+      {t((t) => t.game.skillAtk.info.affliction)}
+    </Alert>
+  );
+};
diff --git a/src/components/elements/gameData/warnings/animation.tsx b/src/components/elements/gameData/warnings/animation.tsx
index 799e32f6..95336e89 100644
--- a/src/components/elements/gameData/warnings/animation.tsx
+++ b/src/components/elements/gameData/warnings/animation.tsx
@@ -9,8 +9,8 @@ export const AnimationInfoWarning = () => {
   const {t} = useI18n();
 
   return (
-    <Alert variant="warning" className="rounded bg-black-32 p-2 mb-2">
-      {t((t) => t.game.skillAtk.animation.warning)}
+    <Alert variant="info" className="rounded bg-black-32 p-2 mb-2">
+      {t((t) => t.game.skillAtk.info.animation)}
     </Alert>
   );
 };
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index d595ba59..91a811dc 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -205,7 +205,6 @@ export const translation: TranslationStruct = {
           time: '開放時間 (秒)',
           preConditions: '其他條件',
         },
-        warning: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
       },
       sort: {
         text: '排序: {{sortBy}}',
@@ -225,6 +224,10 @@ export const translation: TranslationStruct = {
         ssp: 'SSP',
         ssCost: 'SS Cost',
       },
+      info: {
+        affliction: '部分異常狀態的時效為浮動值 (冰凍、暈眩較為常見)。以下計算中所使用的秒數為最大值。',
+        animation: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
+      },
     },
     tools: {
       titleSelf: '遊戲工具',
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index f9af30bf..886df94f 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -204,7 +204,6 @@ export type TranslationStruct = {
           time: string,
           preConditions: string,
         },
-        warning: string,
       },
       sort: {
         text: string,
@@ -218,7 +217,11 @@ export type TranslationStruct = {
         sp: string,
         ssp: string,
         ssCost: string,
-      }
+      },
+      info: {
+        affliction: string,
+        animation: string,
+      },
     },
     tools: {
       titleSelf: string,
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index c0f13c45..4f24cde4 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -229,7 +229,6 @@ export const translation: TranslationStruct = {
           time: 'Time (sec)',
           preConditions: 'Other Conditions',
         },
-        warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
       },
       sort: {
         text: 'Order: {{sortBy}}',
@@ -249,6 +248,11 @@ export const translation: TranslationStruct = {
         ssp: 'SSP',
         ssCost: 'SS Cost',
       },
+      info: {
+        affliction: 'Duration for some afflictions are variable, especially freeze and stun. ' +
+          'Calculations below are using the maximum duration.',
+        animation: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
+      },
     },
     tools: {
       titleSelf: 'Game Tools',
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 8ff8ad21..a9bd96d0 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -204,7 +204,6 @@ export const translation: TranslationStruct = {
           time: 'Time (sec)',
           preConditions: 'Other Conditions',
         },
-        warning: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
       },
       sort: {
         text: '排序: {{sortBy}}',
@@ -224,6 +223,10 @@ export const translation: TranslationStruct = {
         ssp: 'SSP',
         ssCost: 'SS Cost',
       },
+      info: {
+        affliction: '部分異常狀態的時效為浮動值 (冰凍、暈眩較為常見)。以下計算中所使用的秒數為最大值。',
+        animation: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
+      },
     },
     tools: {
       titleSelf: '他のツール',

From 3f19b1cd0beeef8788a2f2a746d05950bd40da4a Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 18:40:19 -0500
Subject: [PATCH 53/61] FIX - Wrong ATK skill entry sorting order

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../gameData/skillAtk/out/sorter/lookup.ts    | 31 +++++++-----
 .../gameData/skillAtk/out/utils.test.tsx      | 49 ++++++++++++++++---
 src/utils/sort.test.ts                        | 49 +++++++++++++++++++
 src/utils/sort.ts                             | 38 ++++++++++++++
 4 files changed, 149 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/sort.test.ts
 create mode 100644 src/utils/sort.ts

diff --git a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
index 7b67d961..1dcf7357 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
+++ b/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
@@ -1,4 +1,5 @@
 import {GetTranslationFunction} from '../../../../../../i18n/types';
+import {sortAscending, sortDescending} from '../../../../../../utils/sort';
 import {SortBy} from '../../in/types';
 import {CalculatedSkillEntry} from '../types';
 
@@ -6,17 +7,25 @@ import {CalculatedSkillEntry} from '../types';
 type SortFuncLookup = { [sortBy in SortBy]: (entryA: CalculatedSkillEntry, entryB: CalculatedSkillEntry) => number }
 
 export const sortFunc: SortFuncLookup = {
-  damage: (a, b) => b.skillDamage.expected - a.skillDamage.expected,
-  sp: (a, b) => a.skillEntry.skill.spMax - b.skillEntry.skill.spMax,
-  ssp: (a, b) => a.skillEntry.skill.ssSp - b.skillEntry.skill.ssSp,
-  modPer1KSp: (a, b) => b.efficiency.modPctPer1KSp - a.efficiency.modPctPer1KSp,
-  modPer1KSsp: (a, b) => b.efficiency.modPctPer1KSsp - a.efficiency.modPctPer1KSsp,
-  afflictionLengthPer1KSp: (a, b) => (
-    Math.min(...Object.values(b.efficiency.secPer1KSp)) - Math.min(...Object.values(a.efficiency.secPer1KSp))
-  ),
-  afflictionLengthPer1KSsp: (a, b) => (
-    Math.min(...Object.values(b.efficiency.secPer1KSsp)) - Math.min(...Object.values(a.efficiency.secPer1KSsp))
-  ),
+  damage: sortDescending({getComparer: (element) => element.skillDamage.expected}),
+  sp: sortAscending({getComparer: (element) => element.skillEntry.skill.spMax}),
+  ssp: sortAscending({
+    getComparer: (element) => element.skillEntry.skill.ssSp,
+    isToPutLast: (element) => !element.skillEntry.skill.sharable,
+  }),
+  modPer1KSp: sortDescending({getComparer: (element) => element.efficiency.modPctPer1KSp}),
+  modPer1KSsp: sortDescending({
+    getComparer: (element) => element.efficiency.modPctPer1KSsp,
+    isToPutLast: (element) => !element.skillEntry.skill.sharable,
+  }),
+  afflictionLengthPer1KSp: sortDescending({
+    getComparer: (element) => Math.min(...Object.values(element.efficiency.secPer1KSp)),
+    isToPutLast: (element) => !element.skillEntry.skill.afflictions.length,
+  }),
+  afflictionLengthPer1KSsp: sortDescending({
+    getComparer: (element) => Math.min(...Object.values(element.efficiency.secPer1KSsp)),
+    isToPutLast: (element) => !element.skillEntry.skill.sharable || !element.skillEntry.skill.afflictions.length,
+  }),
 };
 
 export const orderName: { [sortBy in SortBy]: GetTranslationFunction } = {
diff --git a/src/components/elements/gameData/skillAtk/out/utils.test.tsx b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
index cbddd61c..23b3060e 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.test.tsx
+++ b/src/components/elements/gameData/skillAtk/out/utils.test.tsx
@@ -107,7 +107,7 @@ describe('Sort ATK skill entries', () => {
     elemBonusData = new ElementBonusData(await ResourceLoader.getElementBonusData());
   });
 
-  it('sorts entries by damage DESC', async () => {
+  it('sorts entries by damage', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
       sortBy: 'damage',
@@ -122,7 +122,7 @@ describe('Sort ATK skill entries', () => {
     expect(entries[3]).toBeGreaterThan(entries[4]);
   });
 
-  it('sorts entries by SP ASC', async () => {
+  it('sorts entries by SP', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
       sortBy: 'sp',
@@ -137,7 +137,7 @@ describe('Sort ATK skill entries', () => {
     expect(entries[3]).toBeLessThan(entries[4]);
   });
 
-  it('sorts entries by SSP ASC', async () => {
+  it('sorts entries by SSP', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
       sortBy: 'ssp',
@@ -152,7 +152,7 @@ describe('Sort ATK skill entries', () => {
     expect(entries[3]).toBeLessThan(entries[4]);
   });
 
-  it('sorts entries by SP efficiency DESC', async () => {
+  it('sorts entries by SP efficiency', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
       sortBy: 'modPer1KSp',
@@ -167,7 +167,7 @@ describe('Sort ATK skill entries', () => {
     expect(entries[3]).toBeGreaterThan(entries[4]);
   });
 
-  it('sorts entries by SSP efficiency DESC', async () => {
+  it('sorts entries by SSP efficiency', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
       sortBy: 'modPer1KSsp',
@@ -182,7 +182,7 @@ describe('Sort ATK skill entries', () => {
     expect(entries[3]).toBeGreaterThan(entries[4]);
   });
 
-  it('sorts entries by affliction duration SP efficiency DESC', async () => {
+  it('sorts entries by affliction duration SP efficiency', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
       sortBy: 'afflictionLengthPer1KSp',
@@ -197,7 +197,7 @@ describe('Sort ATK skill entries', () => {
     expect(entries[3]).toBeGreaterThan(entries[4]);
   });
 
-  it('sorts entries by affliction duration SSP efficiency DESC', async () => {
+  it('sorts entries by affliction duration SSP efficiency', async () => {
     const inputData: InputData = {
       ...inputDataTemplate,
       sortBy: 'afflictionLengthPer1KSsp',
@@ -211,6 +211,41 @@ describe('Sort ATK skill entries', () => {
     expect(entries[2]).toBeGreaterThan(entries[3]);
     expect(entries[3]).toBeGreaterThan(entries[4]);
   });
+
+  it('puts non-SS at last if sort by SSP', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'ssp',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => entry.skillEntry.skill.ssSp);
+    expect(entries[0]).toBeGreaterThan(0);
+  });
+
+  it('puts non-SS/no-affliction skills at last if sort by affliction efficiency in SSP', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'ssp',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => Math.min(...Object.values(entry.efficiency.secPer1KSsp)))
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeGreaterThan(0);
+  });
+
+  it('puts no-affliction skills at last if sort by affliction efficiency in SP', async () => {
+    const inputData: InputData = {
+      ...inputDataTemplate,
+      sortBy: 'ssp',
+    };
+
+    const entries = calculateEntries(data, inputData, elemBonusData)
+      .map((entry) => Math.min(...Object.values(entry.efficiency.secPer1KSp)))
+      .filter((x, i, a) => !i || x !== a[i - 1]);
+    expect(entries[0]).toBeGreaterThan(0);
+  });
 });
 
 describe('Entry calculation', () => {
diff --git a/src/utils/sort.test.ts b/src/utils/sort.test.ts
new file mode 100644
index 00000000..8c6f12ba
--- /dev/null
+++ b/src/utils/sort.test.ts
@@ -0,0 +1,49 @@
+import {sortAscending, sortDescending} from './sort';
+
+
+describe('Sorter functions', () => {
+  type ArrayElement = {
+    val: number,
+  };
+
+  const array: Array<ArrayElement> = [
+    {val: 0},
+    {val: 1},
+    {val: 0},
+    {val: 3},
+  ];
+
+  it('sorts ASC', async () => {
+    const arr = array.sort(sortAscending({getComparer: (element) => element.val}))
+      .map((element) => element.val);
+
+    expect(arr).toStrictEqual([0, 0, 1, 3]);
+  });
+
+  it('sorts DESC', async () => {
+    const arr = array.sort(sortDescending({getComparer: (element) => element.val}))
+      .map((element) => element.val);
+
+    expect(arr).toStrictEqual([3, 1, 0, 0]);
+  });
+
+  it('sorts ASC and put elements to last', async () => {
+    const arr = array.sort(sortAscending({
+      getComparer: (element) => element.val,
+      isToPutLast: (element) => element.val === 0,
+    }))
+      .map((element) => element.val);
+
+    expect(arr).toStrictEqual([1, 3, 0, 0]);
+  });
+
+  it('sorts DESC and put elements to last', async () => {
+    const arr = array.sort(sortDescending({
+      getComparer: (element) => element.val,
+      isToPutLast: (element) => element.val === 3,
+    }))
+      .map((element) => element.val);
+
+    expect(arr).toStrictEqual([1, 0, 0, 3]);
+  });
+});
diff --git a/src/utils/sort.ts b/src/utils/sort.ts
new file mode 100644
index 00000000..ca9628d9
--- /dev/null
+++ b/src/utils/sort.ts
@@ -0,0 +1,38 @@
+type SortOptions<T> = {
+  getComparer: (element: T) => number,
+  isToPutLast?: (element: T) => boolean,
+};
+
+// Source code for putting last: https://stackoverflow.com/a/50933148/11571888
+const putLast = <T>(a: T, b: T, isToPutLast: SortOptions<T>['isToPutLast'] | undefined) => {
+  if (!isToPutLast) {
+    return null;
+  }
+
+  if (isToPutLast(a)) {
+    return 1;
+  }
+  if (isToPutLast(b)) {
+    return -1;
+  }
+
+  return null;
+};
+
+export const sortAscending = <T>({getComparer, isToPutLast}: SortOptions<T>) => (a: T, b: T) => {
+  const putLastReturn = putLast(a, b, isToPutLast);
+  if (putLastReturn) {
+    return putLastReturn;
+  }
+
+  return getComparer(a) - getComparer(b);
+};
+
+export const sortDescending = <T>({getComparer, isToPutLast}: SortOptions<T>) => (a: T, b: T) => {
+  const putLastReturn = putLast(a, b, isToPutLast);
+  if (putLastReturn) {
+    return putLastReturn;
+  }
+
+  return getComparer(b) - getComparer(a);
+};

From 8ff5cea32cff7db9a0e4ddb11760bb246263e662 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 18:41:05 -0500
Subject: [PATCH 54/61] IMP - Refactor `.sort()` calls

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/utils/process/transformers/quickReference.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/utils/process/transformers/quickReference.ts b/src/utils/process/transformers/quickReference.ts
index ddbeae61..28687cbe 100644
--- a/src/utils/process/transformers/quickReference.ts
+++ b/src/utils/process/transformers/quickReference.ts
@@ -2,6 +2,7 @@ import {PostPath} from '../../../const/path/definitions';
 import {translations} from '../../../i18n/translations/main';
 import {makePostPath} from '../../path/make';
 import {getImageURL, getUnitNameInfoMap} from '../../services/resources/unitInfo/utils';
+import {sortDescending} from '../../sort';
 import {TextTransformer} from '../type';
 
 
@@ -24,7 +25,9 @@ const transformAnalysis: TextTransformer = async ({text, lang}) => {
   }
 
   // Sort the keys by its length descending for greedy match
-  const nameRegex = [...unitNameIdMap.keys()].sort((a, b) => b.length - a.length).join('|');
+  const nameRegex = [...unitNameIdMap.keys()]
+    .sort(sortDescending({getComparer: (element) => element.length}))
+    .join('|');
   // Source: https://stackoverflow.com/a/15604206/11571888
   const regex = new RegExp(`([^\\[]|:|^)(${nameRegex})([^\\]]|:|$)`, 'g');
   text = text.replace(

From 0dc1f641e05d6e0fb738db14cc8722124fe6befa Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 19:13:04 -0500
Subject: [PATCH 55/61] ADD - Shows no result for ATK skill output

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 public/bootstrap.css                          | 132 +++++++++---------
 public/bootstrap.css.map                      |   2 +-
 public/bootstrap.scss                         |   2 +
 public/colors.scss                            |   1 +
 .../gameData/skillAtk/out/main.test.tsx       |  56 ++++++++
 .../elements/gameData/skillAtk/out/main.tsx   |   4 +-
 .../elements/gameData/warnings/noResult.tsx   |  16 +++
 src/i18n/translations/cht/translation.ts      |   1 +
 src/i18n/translations/definition.ts           |   1 +
 src/i18n/translations/en/translation.ts       |   1 +
 src/i18n/translations/jp/translation.ts       |   1 +
 11 files changed, 148 insertions(+), 69 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/out/main.test.tsx
 create mode 100644 src/components/elements/gameData/warnings/noResult.tsx

diff --git a/public/bootstrap.css b/public/bootstrap.css
index e5c38747..40a19105 100644
--- a/public/bootstrap.css
+++ b/public/bootstrap.css
@@ -37,7 +37,7 @@ div.btn-group-toggle > label.btn-outline-secondary:hover {
   --indigo: #6610f2;
   --purple: #6f42c1;
   --pink: #e83e8c;
-  --red: #dc3545;
+  --red: #ff4457;
   --orange: #fd7e14;
   --yellow: #ffc107;
   --green: #28a745;
@@ -51,7 +51,7 @@ div.btn-group-toggle > label.btn-outline-secondary:hover {
   --success: #28a745;
   --info: #17a2b8;
   --warning: #ffc107;
-  --danger: #dc3545;
+  --danger: #ff4457;
   --light: #f8f9fa;
   --dark: #343a40;
   --om-dark: #02152a;
@@ -1831,21 +1831,21 @@ pre code {
 .table-danger,
 .table-danger > th,
 .table-danger > td {
-  background-color: #f5c6cb;
+  background-color: #ffcbd0;
 }
 .table-danger th,
 .table-danger td,
 .table-danger thead th,
 .table-danger tbody + tbody {
-  border-color: #ed969e;
+  border-color: #ff9ea8;
 }
 
 .table-hover .table-danger:hover {
-  background-color: #f1b0b7;
+  background-color: #ffb2b9;
 }
 .table-hover .table-danger:hover > td,
 .table-hover .table-danger:hover > th {
-  background-color: #f1b0b7;
+  background-color: #ffb2b9;
 }
 
 .table-light,
@@ -2386,7 +2386,7 @@ textarea.form-control {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 80%;
-  color: #dc3545;
+  color: #ff4457;
 }
 
 .invalid-tooltip {
@@ -2401,7 +2401,7 @@ textarea.form-control {
   font-size: 0.875rem;
   line-height: 1.5;
   color: #fff;
-  background-color: rgba(220, 53, 69, 0.9);
+  background-color: rgba(255, 68, 87, 0.9);
   border-radius: 0.25rem;
 }
 .form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip {
@@ -2416,16 +2416,16 @@ textarea.form-control {
 }
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
-  border-color: #dc3545;
+  border-color: #ff4457;
   padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ff4457' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff4457' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  border-color: #ff4457;
+  box-shadow: 0 0 0 0.2rem rgba(255, 68, 87, 0.25);
 }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
@@ -2434,17 +2434,17 @@ textarea.form-control {
 }
 
 .was-validated .custom-select:invalid, .custom-select.is-invalid {
-  border-color: #dc3545;
+  border-color: #ff4457;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ff4457' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff4457' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
 }
 .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  border-color: #ff4457;
+  box-shadow: 0 0 0 0.2rem rgba(255, 68, 87, 0.25);
 }
 
 .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
-  color: #dc3545;
+  color: #ff4457;
 }
 .was-validated .form-check-input:invalid ~ .invalid-feedback,
 .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
@@ -2453,28 +2453,28 @@ textarea.form-control {
 }
 
 .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
-  color: #dc3545;
+  color: #ff4457;
 }
 .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
-  border-color: #dc3545;
+  border-color: #ff4457;
 }
 .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
-  border-color: #e4606d;
-  background-color: #e4606d;
+  border-color: #ff7785;
+  background-color: #ff7785;
 }
 .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(255, 68, 87, 0.25);
 }
 .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #dc3545;
+  border-color: #ff4457;
 }
 
 .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
-  border-color: #dc3545;
+  border-color: #ff4457;
 }
 .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  border-color: #ff4457;
+  box-shadow: 0 0 0 0.2rem rgba(255, 68, 87, 0.25);
 }
 
 .form-inline {
@@ -2725,32 +2725,32 @@ fieldset:disabled a.btn {
 
 .btn-danger {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #ff4457;
+  border-color: #ff4457;
 }
 .btn-danger:hover {
   color: #fff;
-  background-color: #c82333;
-  border-color: #bd2130;
+  background-color: #ff1e35;
+  border-color: #ff1129;
 }
 .btn-danger:focus, .btn-danger.focus {
   color: #fff;
-  background-color: #c82333;
-  border-color: #bd2130;
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+  background-color: #ff1e35;
+  border-color: #ff1129;
+  box-shadow: 0 0 0 0.2rem rgba(255, 96, 112, 0.5);
 }
 .btn-danger.disabled, .btn-danger:disabled {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #ff4457;
+  border-color: #ff4457;
 }
 .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle {
   color: #fff;
-  background-color: #bd2130;
-  border-color: #b21f2d;
+  background-color: #ff1129;
+  border-color: #ff041e;
 }
 .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(255, 96, 112, 0.5);
 }
 
 .btn-light {
@@ -3119,28 +3119,28 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-danger {
-  color: #dc3545;
-  border-color: #dc3545;
+  color: #ff4457;
+  border-color: #ff4457;
 }
 .btn-outline-danger:hover {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #ff4457;
+  border-color: #ff4457;
 }
 .btn-outline-danger:focus, .btn-outline-danger.focus {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(255, 68, 87, 0.5);
 }
 .btn-outline-danger.disabled, .btn-outline-danger:disabled {
-  color: #dc3545;
+  color: #ff4457;
   background-color: transparent;
 }
 .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #ff4457;
+  border-color: #ff4457;
 }
 .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(255, 68, 87, 0.5);
 }
 
 .btn-outline-light {
@@ -5220,15 +5220,15 @@ a.badge-warning:focus, a.badge-warning.focus {
 
 .badge-danger {
   color: #fff;
-  background-color: #dc3545;
+  background-color: #ff4457;
 }
 a.badge-danger:hover, a.badge-danger:focus {
   color: #fff;
-  background-color: #bd2130;
+  background-color: #ff1129;
 }
 a.badge-danger:focus, a.badge-danger.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(255, 68, 87, 0.5);
 }
 
 .badge-light {
@@ -5442,15 +5442,15 @@ a.badge-black-50:focus, a.badge-black-50.focus {
 }
 
 .alert-danger {
-  color: #dc3545;
-  background-color: #3e0f13;
-  border-color: #2c0b0e;
+  color: #ff4457;
+  background-color: #471318;
+  border-color: #330e11;
 }
 .alert-danger hr {
-  border-top-color: #180608;
+  border-top-color: #1f090a;
 }
 .alert-danger .alert-link {
-  color: #bd2130;
+  color: #ff1129;
 }
 
 .alert-light {
@@ -5865,17 +5865,17 @@ a.badge-black-50:focus, a.badge-black-50.focus {
 }
 
 .list-group-item-danger {
-  color: #721c24;
-  background-color: #f5c6cb;
+  color: #85232d;
+  background-color: #ffcbd0;
 }
 .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
-  color: #721c24;
-  background-color: #f1b0b7;
+  color: #85232d;
+  background-color: #ffb2b9;
 }
 .list-group-item-danger.list-group-item-action.active {
   color: #fff;
-  background-color: #721c24;
-  border-color: #721c24;
+  background-color: #85232d;
+  border-color: #85232d;
 }
 
 .list-group-item-light {
@@ -6803,13 +6803,13 @@ button.bg-warning:focus {
 }
 
 .bg-danger {
-  background-color: #dc3545 !important;
+  background-color: #ff4457 !important;
 }
 
 a.bg-danger:hover, a.bg-danger:focus,
 button.bg-danger:hover,
 button.bg-danger:focus {
-  background-color: #bd2130 !important;
+  background-color: #ff1129 !important;
 }
 
 .bg-light {
@@ -6961,7 +6961,7 @@ button.bg-black-50:focus {
 }
 
 .border-danger {
-  border-color: #dc3545 !important;
+  border-color: #ff4457 !important;
 }
 
 .border-light {
@@ -10568,11 +10568,11 @@ a.text-warning:hover, a.text-warning:focus {
 }
 
 .text-danger {
-  color: #dc3545 !important;
+  color: #ff4457 !important;
 }
 
 a.text-danger:hover, a.text-danger:focus {
-  color: #a71d2a !important;
+  color: #f70019 !important;
 }
 
 .text-light {
diff --git a/public/bootstrap.css.map b/public/bootstrap.css.map
index f47db2df..4d7f6c75 100644
--- a/public/bootstrap.css.map
+++ b/public/bootstrap.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["bootstrap.scss","../node_modules/bootstrap/scss/bootstrap.scss","../node_modules/bootstrap/scss/_root.scss","../node_modules/bootstrap/scss/_reboot.scss","../node_modules/bootstrap/scss/_variables.scss","../node_modules/bootstrap/scss/vendor/_rfs.scss","colors.scss","../node_modules/bootstrap/scss/mixins/_hover.scss","../node_modules/bootstrap/scss/_type.scss","../node_modules/bootstrap/scss/mixins/_lists.scss","../node_modules/bootstrap/scss/_images.scss","../node_modules/bootstrap/scss/mixins/_image.scss","../node_modules/bootstrap/scss/mixins/_border-radius.scss","../node_modules/bootstrap/scss/_code.scss","../node_modules/bootstrap/scss/_grid.scss","../node_modules/bootstrap/scss/mixins/_grid.scss","../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../node_modules/bootstrap/scss/mixins/_grid-framework.scss","../node_modules/bootstrap/scss/_tables.scss","../node_modules/bootstrap/scss/mixins/_table-row.scss","../node_modules/bootstrap/scss/_forms.scss","../node_modules/bootstrap/scss/mixins/_transition.scss","../node_modules/bootstrap/scss/mixins/_forms.scss","../node_modules/bootstrap/scss/mixins/_gradients.scss","../node_modules/bootstrap/scss/_buttons.scss","../node_modules/bootstrap/scss/mixins/_buttons.scss","../node_modules/bootstrap/scss/_transitions.scss","../node_modules/bootstrap/scss/_dropdown.scss","../node_modules/bootstrap/scss/mixins/_caret.scss","../node_modules/bootstrap/scss/mixins/_nav-divider.scss","../node_modules/bootstrap/scss/_button-group.scss","../node_modules/bootstrap/scss/_input-group.scss","../node_modules/bootstrap/scss/_custom-forms.scss","../node_modules/bootstrap/scss/_nav.scss","../node_modules/bootstrap/scss/_navbar.scss","../node_modules/bootstrap/scss/_card.scss","../node_modules/bootstrap/scss/_breadcrumb.scss","../node_modules/bootstrap/scss/_pagination.scss","../node_modules/bootstrap/scss/mixins/_pagination.scss","../node_modules/bootstrap/scss/_badge.scss","../node_modules/bootstrap/scss/mixins/_badge.scss","../node_modules/bootstrap/scss/_jumbotron.scss","../node_modules/bootstrap/scss/_alert.scss","../node_modules/bootstrap/scss/mixins/_alert.scss","../node_modules/bootstrap/scss/_progress.scss","../node_modules/bootstrap/scss/_media.scss","../node_modules/bootstrap/scss/_list-group.scss","../node_modules/bootstrap/scss/mixins/_list-group.scss","../node_modules/bootstrap/scss/_close.scss","../node_modules/bootstrap/scss/_toasts.scss","../node_modules/bootstrap/scss/_modal.scss","../node_modules/bootstrap/scss/_tooltip.scss","../node_modules/bootstrap/scss/mixins/_reset-text.scss","../node_modules/bootstrap/scss/_popover.scss","../node_modules/bootstrap/scss/_carousel.scss","../node_modules/bootstrap/scss/mixins/_clearfix.scss","../node_modules/bootstrap/scss/_spinners.scss","../node_modules/bootstrap/scss/utilities/_align.scss","../node_modules/bootstrap/scss/mixins/_background-variant.scss","../node_modules/bootstrap/scss/utilities/_background.scss","../node_modules/bootstrap/scss/utilities/_borders.scss","../node_modules/bootstrap/scss/utilities/_display.scss","../node_modules/bootstrap/scss/utilities/_embed.scss","../node_modules/bootstrap/scss/utilities/_flex.scss","../node_modules/bootstrap/scss/utilities/_float.scss","../node_modules/bootstrap/scss/utilities/_interactions.scss","../node_modules/bootstrap/scss/utilities/_overflow.scss","../node_modules/bootstrap/scss/utilities/_position.scss","../node_modules/bootstrap/scss/utilities/_screenreaders.scss","../node_modules/bootstrap/scss/mixins/_screen-reader.scss","../node_modules/bootstrap/scss/utilities/_shadows.scss","../node_modules/bootstrap/scss/utilities/_sizing.scss","../node_modules/bootstrap/scss/utilities/_spacing.scss","../node_modules/bootstrap/scss/utilities/_stretched-link.scss","../node_modules/bootstrap/scss/utilities/_text.scss","../node_modules/bootstrap/scss/mixins/_text-truncate.scss","../node_modules/bootstrap/scss/mixins/_text-emphasis.scss","../node_modules/bootstrap/scss/mixins/_text-hide.scss","../node_modules/bootstrap/scss/utilities/_visibility.scss","../node_modules/bootstrap/scss/_print.scss"],"names":[],"mappings":"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;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EA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W;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADcN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW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;EACA;EACA;EACA,O5BwaoC;E4BvapC,Q5BuaoC;E4BtapC;EACA;;;AAUF;EpBlGE;;AoBuGA;EACE;;AAKF;EACE,c5B0HwB;EmBpP1B,kBnBoP0B;;A4BtH1B;EACE;;AAKF;ETpIA,kBnBwhB4C;;A4BjZ5C;ETvIA,kBnBwhB4C;;;A4BtY9C;EAEE,e5ByZ4C;;A4BrZ5C;EACE;;AAKF;ET9JA,kBnBwhB4C;;;A4B/WhD;EACE;;AAGE;EACE;EACA,O5BiY0C;E4BhY1C;EAEA,e5B+X0C;;A4B5X5C;EACE;EACA;EACA,O5B0X0C;E4BzX1C,Q5ByX0C;E4BxX1C,kB5BpLK;E4BsLL,e5BqX0C;EiBviB1C,YWmLA;;AX/KA;EWuKF;IXtKI;;;AWmLJ;EACE,kB5BlMK;E4BmML;;AAKF;ETzMA,kBnBwhB4C;;;A4BlUhD;EACE;EACA;EACA,Q5BoRsC;E4BnRtC;E3BjGI,WAtCa;E2B0IjB,a5B4D4B;E4B3D5B,a5BgE4B;E4B/D5B,O5BvNS;E4BwNT;EACA;EACA;EpBtNE;EoByNF;;AAEA;EACE,c5BuPoC;E4BtPpC;EAKE,Y5BkW8B;;A4B/VhC;EAME,O5B/OK;E4BgPL,kB5BvPK;;A4B2PT;EAEE;EACA,e5B8H0B;E4B7H1B;;AAGF;EACE,O5B7PO;E4B8PP,kB5BlQO;;A4BsQT;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE,Q5ByNsC;E4BxNtC,a5BgH4B;E4B/G5B,gB5B+G4B;E4B9G5B,c5B+G4B;EC9QxB,WAtCa;;;A2ByMnB;EACE,Q5BkNsC;E4BjNtC,a5B6G4B;E4B5G5B,gB5B4G4B;E4B3G5B,c5B4G4B;ECnRxB,WAtCa;;;A2BsNnB;EACE;EACA;EACA;EACA,Q5BgMsC;E4B/LtC;;;AAGF;EACE;EACA;EACA;EACA,Q5BwLsC;E4BvLtC;EACA;EACA;;AAEA;EACE,c5BoKoC;E4BnKpC,Y5BwE0B;;A4BpE5B;EAEE,kB5B/TO;;A4BmUP;EACE,S5B0Ta;;A4BtTjB;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,Q5BuJsC;E4BtJtC;EACA;EAEA,a5BjE4B;E4BkE5B,a5B7D4B;E4B8D5B,O5BpVS;E4BqVT,kB5B5VS;E4B6VT;EpBlVE;;AoBsVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,Q5BgIoC;E4B/HpC;EACA,a5B7E0B;E4B8E1B,O5BpWO;E4BqWP;ET7WA,kBnBGO;E4B4WP;EpBnWA;;;AoB8WJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIA;EAA0B,Y5BmOe;;A4BlOzC;EAA0B,Y5BkOe;;A4BjOzC;EAA0B,Y5BiOe;;A4B9N3C;EACE;;AAGF;EACE,O5BmNyC;E4BlNzC,Q5BkNyC;E4BjNzC;ETlZA,kBnBoP0B;E4BgK1B,Q5BkNyC;EQ1lBzC;ESFE,YW6YF;EACA;;AX1YE;EWiYJ;IXhYM;;;AW2YJ;ET1ZA,kBnB2mByC;;A4B5M3C;EACE,O5B4LgC;E4B3LhC,Q5B4LgC;E4B3LhC;EACA,Q5B2LgC;E4B1LhC,kB5BhaO;E4BiaP;EpBzZA;;AoB8ZF;EACE,O5BwLyC;E4BvLzC,Q5BuLyC;EmBnmBzC,kBnBoP0B;E4B0L1B,Q5BwLyC;EQ1lBzC;ESFE,YWuaF;EACA;;AXpaE;EW4ZJ;IX3ZM;;;AWqaJ;ETpbA,kBnB2mByC;;A4BlL3C;EACE,O5BkKgC;E4BjKhC,Q5BkKgC;E4BjKhC;EACA,Q5BiKgC;E4BhKhC,kB5B1bO;E4B2bP;EpBnbA;;AoBwbF;EACE,O5B8JyC;E4B7JzC,Q5B6JyC;E4B5JzC;EACA,c5BtE0B;E4BuE1B,a5BvE0B;EmBlY1B,kBnBoP0B;E4BuN1B,Q5B2JyC;EQ1lBzC;ESFE,YWocF;EACA;;AXjcE;EWsbJ;IXrbM;;;AWkcJ;ETjdA,kBnB2mByC;;A4BrJ3C;EACE,O5BqIgC;E4BpIhC,Q5BqIgC;E4BpIhC;EACA,Q5BoIgC;E4BnIhC;EACA;EACA;;AAIF;EACE,kB5B9dO;EQQP;;AoB0dF;EACE;EACA,kB5BpeO;EQQP;;AoBieA;EACE,kB5BxeK;;A4B2eP;EACE;;AAGF;EACE,kB5BhfK;;A4BmfP;EACE;;AAGF;EACE,kB5BxfK;;;A4B6fX;AAAA;AAAA;EXzfM,YW4fJ;;AXxfI;EWqfN;AAAA;AAAA;IXpf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,ehCmhC8B;EgClhC9B,OhCNK;EgCOL;;AAUJ;EACE;;AAGF;EACE;;AAGF;EACE,OhC1BO;;;AiCbX;EACE;E5BGA;EACA;EGaE;;;AyBZJ;EACE;EACA;EACA;EACA;EACA,ajCmxBkC;EiClxBlC,OrCQW;EqCNX,kB/BTe;E+BUf;;AAEA;EACE;EACA,OrCGe;EqCFf;EACA,kB/Bda;E+Beb,c/Bfa;;A+BkBf;EACE;EACA,SjC2wBgC;EiC1wBhC,YjC8W0B;;;AiCxW1B;EACE;EzBaF;EACA;;AyBTA;EzBNA;EACA;;AyBUF;EACE;EACA,O/BtCe;E+BuCf,kB/B/Ca;E+BgDb,c/BhDa;;A+BmDf;EACE,O/B7Ce;E+B8Cf;EAEA;EACA,kB/BtDa;E+BuDb,c/BvDa;;;AgCAf;EACE;EjC2HE,WAtCa;EiCnFf,alCmO0B;;AkC9NxB;E1BqCF;EACA;;A0BjCE;E1BkBF;EACA;;;A0BhCF;EACE;EjC2HE,WAtCa;EiCnFf,alCoO0B;;AkC/NxB;E1BqCF;EACA;;A0BjCE;E1BkBF;EACA;;;A2B9BJ;EACE;EACA;ElCiEE;EkC/DF,anCuR4B;EmCtR5B;EACA;EACA;EACA;E3BKE;ESFE,YkBDJ;;AlBKI;EkBfN;IlBgBQ;;;AdLN;EgCGI;;;AAKJ;EACE;;;AAKJ;EACE;EACA;;;AAOF;EACE,enC+3BkC;EmC93BlC,cnC83BkC;EQr5BhC;;;A2BgCF;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ACbN;EACE;EACA,erCuzBkC;EqCrzBlC,kBnCCe;EMab;;AI0CA;EyB5DJ;IAQI;;;;AAIJ;EACE;EACA;E7BIE;;;A8BdJ;EACE;EACA;EACA,etCu9BkC;EsCt9BlC;E9BUE;;;A8BLJ;EAEE;;;AAIF;EACE,atC4Q4B;;;AsCpQ9B;EACE;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAUF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ACRF;EACE;IAAO;;EACP;IAAK;;;AAIT;EACE;EACA,QxCg+BkC;EwC/9BlC;EACA;EvCmHI,WAtCa;EuC3EjB,kBxCLS;EQSP;;;AgCCJ;EACE;EACA;EACA;EACA;EACA,OxCjBS;EwCkBT;EACA;EACA,kBxCq9BkC;EiBh+B9B,YuBYJ;;AvBRI;EuBDN;IvBEQ;;;;AuBUR;ErBYE;EqBVA;;;AAIA;EACE;;AAGE;EAJJ;IAKM;;;;AC1CR;EACE;EACA;;;AAGF;EACE;;;ACFF;EACE;EACA;EAGA;EACA;ElCQE;;;AkCEJ;EACE;EACA,O1CRS;E0CST;;AvCPA;EuCWE;EACA,O1CdO;E0CeP;EACA,kB1CtBO;;A0CyBT;EACE,OxCzBe;EwC0Bf,kB1C1BO;;;A0CmCX;EACE;EACA;EACA;EAGA,kB1C3CS;E0C4CT;;AAEA;ElC1BE;EACA;;AkC6BF;ElChBE;EACA;;AkCmBF;EAEE,O1ClDO;E0CmDP;EACA,kB1C1DO;;A0C8DT;EACE;EACA,O1ChEO;E0CiEP,kB1CkL0B;E0CjL1B,c1CiL0B;;A0C9K5B;EACE;;AAEA;EACE;EACA,kB1C2JwB;;;A0C7I1B;EACE;;AAGE;ElC1BJ;EAZA;;AkC2CI;ElC3CJ;EAYA;;AkCoCI;EACE;;AAGF;EACE,kB1C0HoB;E0CzHpB;;AAEA;EACE;EACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;A0CvG9B;ElCnHI;;AkCsHF;EACE;;AAEA;EACE;;;ACzIJ;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;AExJ1E;EACE;E3C8HI,WAtCa;E2CtFjB,a5C6R4B;E4C5R5B;EACA,O1CIiB;E0CHjB,ahD6FkB;EgD5FlB;;AzCKA;EyCDE,O1CFe;E0CGf;;AzCIF;EyCCI;;;AAWN;EACE;EACA;EACA;;;AAMF;EACE;;;ACtCF;EAGE,Y7Cy4BkC;E6Cx4BlC,W7Cw4BkC;EC7wB9B,WAtCa;E4ClFjB,kB7C04BkC;E6Cz4BlC;EACA;EACA,Y7C24BkC;E6C14BlC;ErCOE;;AqCJF;EACE,e7C83BgC;;A6C33BlC;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA,O7CvBS;E6CwBT,kB7Cm3BkC;E6Cl3BlC;EACA;ErCZE;EACA;;;AqCeJ;EACE,S7Ci2BkC;;;A8Cv4BpC;EAEE;;AAEA;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA,S9C2pBkC;E8C1pBlC;EACA;EACA;EACA;EAGA;;;AAOF;EACE;EACA;EACA,Q9C+4BkC;E8C74BlC;;AAGA;E7B3BI,Y6B4BF;EACA,W9Cq6BgC;;AiB97B9B;E6BuBJ;I7BtBM;;;A6B0BN;EACE,W9Cm6BgC;;A8C/5BlC;EACE,W9Cg6BgC;;;A8C55BpC;EACE;EACA;;AAEA;EACE;EACA;;AAGF;AAAA;EAEE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAMN;EACE;EACA;EACA;EACA;EAGA;EACA,kB5C9Ge;E4C+Gf;EACA;EtClGE;EsCsGF;;;AAIF;EACE;EACA;EACA;EACA,S9C+iBkC;E8C9iBlC;EACA;EACA,kB9ClHS;;A8CqHT;EAAS;;AACT;EAAS,S9C6zByB;;;A8CxzBpC;EACE;EACA;EACA;EACA,S9C2zBkC;E8C1zBlC;EtCtHE;EACA;;AsCwHF;EACE,S9CszBgC;E8CpzBhC;;;AAKJ;EACE;EACA,a9CsI4B;;;A8CjI9B;EACE;EAGA;EACA,S9CwwBkC;;;A8CpwBpC;EACE;EACA;EACA;EACA;EACA;EACA;EtCzIE;EACA;;AsC8IF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;;AlCvIE;EkC6IF;IACE,W9CqwBgC;I8CpwBhC;;;EAGF;IACE;;EAEA;IACE;;;EAIJ;IACE;;EAEA;IACE;IACA;;;EAQJ;IAAY,W9C6uBsB;;;AYp5BhC;EkC2KF;AAAA;IAEE,W9CquBgC;;;AYl5BhC;EkCkLF;IAAY,W9C+tBsB;;;A+C58BpC;EACE;EACA,S/C+qBkC;E+C9qBlC;EACA,Q/C21BkC;EgD/1BlC,ahDmR4B;EgDjR5B;EACA,ahD2R4B;EgD1R5B,ahD+R4B;EgD9R5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E/CgHI,WAtCa;E8C9EjB;EACA;;AAEA;EAAS,S/C+0ByB;;A+C70BlC;EACE;EACA;EACA,O/C+0BgC;E+C90BhC,Q/C+0BgC;;A+C70BhC;EACE;EACA;EACA;EACA;;;AAKN;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA,kB/CvBK;;;A+C4BX;EACE;;AAEA;EACE;EACA,O/CizBgC;E+ChzBhC,Q/C+yBgC;;A+C7yBhC;EACE;EACA;EACA,oB/CvCK;;;A+C4CX;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA,qB/CrDK;;;A+C0DX;EACE;;AAEA;EACE;EACA,O/CmxBgC;E+ClxBhC,Q/CixBgC;;A+C/wBhC;EACE;EACA;EACA,mB/CrEK;;;A+C0FX;EACE,W/C6uBkC;E+C5uBlC;EACA,O/CvGS;E+CwGT;EACA,kB/C/FS;EQCP;;;AyClBJ;EACE;EACA;EACA;EACA,SjD6qBkC;EiD5qBlC;EACA,WjD62BkC;EgDl3BlC,ahDmR4B;EgDjR5B;EACA,ahD2R4B;EgD1R5B,ahD+R4B;EgD9R5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E/CgHI,WAtCa;EgD7EjB;EACA,kBjDNS;EiDOT;EACA;EzCGE;;AyCCF;EACE;EACA;EACA,OjD62BgC;EiD52BhC,QjD62BgC;EiD52BhC;;AAEA;EAEE;EACA;EACA;EACA;EACA;;;AAKN;EACE,ejD81BkC;;AiD51BlC;EACE;;AAEA;EACE;EACA;EACA,kBjDy1B8B;;AiDt1BhC;EACE,QjD0LwB;EiDzLxB;EACA,kBjD7CK;;;AiDkDX;EACE,ajD00BkC;;AiDx0BlC;EACE;EACA,OjDs0BgC;EiDr0BhC,QjDo0BgC;EiDn0BhC;;AAEA;EACE;EACA;EACA,oBjDk0B8B;;AiD/zBhC;EACE,MjDmKwB;EiDlKxB;EACA,oBjDpE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EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAQF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAMN;EAAmB;;;AACnB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AxDTF;EwDlDI;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAQF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAMN;IAAmB;;;EACnB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;AxDTF;EwDlDI;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAQF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAMN;IAAmB;;;EACnB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;AxDTF;EwDlDI;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAQF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAMN;IAAmB;;;EACnB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;AxDTF;EwDlDI;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAgC;;;EAChC;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAQF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAfF;IAAwB;;;EACxB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAMN;IAAmB;;;EACnB;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;EAEF;AAAA;IAEE;;;AChEJ;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;;ACVJ;EAAkB;;;AAIlB;EAAiB;;;AACjB;EAAiB;;;AACjB;EAAiB;;;AACjB;ECTE;EACA;EACA;;;ADeE;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAwB;;;A1DqCxB;E0DvCA;IAAwB;;;EACxB;IAAwB;;;EACxB;IAAwB;;;A1DqCxB;E0DvCA;IAAwB;;;EACxB;IAAwB;;;EACxB;IAAwB;;;A1DqCxB;E0DvCA;IAAwB;;;EACxB;IAAwB;;;EACxB;IAAwB;;;A1DqCxB;E0DvCA;IAAwB;;;EACxB;IAAwB;;;EACxB;IAAwB;;;AAM5B;EAAmB;;;AACnB;EAAmB;;;AACnB;EAAmB;;;AAInB;EAAuB;;;AACvB;EAAuB;;;AACvB;EAAuB;;;AACvB;EAAuB;;;AACvB;EAAuB;;;AACvB;EAAuB;;;AAIvB;EAAc;;;AEvCZ;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AANN;EACE;;;ArEUF;EqELM;;;AFuCR;EAAa;;;AACb;EAAc;;;AAEd;EAAiB;;;AACjB;EAAiB;;;AAIjB;EGvDE;EACA;EACA;EACA;EACA;;;AHuDF;EAAwB;;;AAExB;EACE;EACA;;;AAKF;EAAc;;;AIjEd;EACE;;;AAGF;EACE;;;ACAA;EACE;AAAA;AAAA;IAKE;IAEA;;;EAIA;IACE;;;EASJ;IACE;;;EAcF;IACE;;;EAEF;AAAA;IAEE;IACA;;;EAQF;IACE;;;EAGF;AAAA;IAEE;;;EAGF;AAAA;AAAA;IAGE;IACA;;;EAGF;AAAA;IAEE;;;EAQF;IACE,M3E+hC8B;;E2E7hChC;IACE;;;EAEF;IACE;;;EAIF;IACE;;;EAEF;IACE;;;EAGF;IACE;;EAEA;AAAA;IAEE;;;EAKF;AAAA;IAEE;;;EAIJ;IACE;;EAEA;AAAA;AAAA;AAAA;IAIE,czEzHW;;;EyE6Hf;IACE;IACA,czE/Ha;;;AN2JnB;EACE;;;AgB3FE;EhB8FJ;IAEI","file":"bootstrap.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["bootstrap.scss","../node_modules/bootstrap/scss/bootstrap.scss","../node_modules/bootstrap/scss/_root.scss","../node_modules/bootstrap/scss/_reboot.scss","../node_modules/bootstrap/scss/_variables.scss","../node_modules/bootstrap/scss/vendor/_rfs.scss","colors.scss","../node_modules/bootstrap/scss/mixins/_hover.scss","../node_modules/bootstrap/scss/_type.scss","../node_modules/bootstrap/scss/mixins/_lists.scss","../node_modules/bootstrap/scss/_images.scss","../node_modules/bootstrap/scss/mixins/_image.scss","../node_modules/bootstrap/scss/mixins/_border-radius.scss","../node_modules/bootstrap/scss/_code.scss","../node_modules/bootstrap/scss/_grid.scss","../node_modules/bootstrap/scss/mixins/_grid.scss","../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../node_modules/bootstrap/scss/mixins/_grid-framework.scss","../node_modules/bootstrap/scss/_tables.scss","../node_modules/bootstrap/scss/mixins/_table-row.scss","../node_modules/bootstrap/scss/_forms.scss","../node_modules/bootstrap/scss/mixins/_transition.scss","../node_modules/bootstrap/scss/mixins/_forms.scss","../node_modules/bootstrap/scss/mixins/_gradients.scss","../node_modules/bootstrap/scss/_buttons.scss","../node_modules/bootstrap/scss/mixins/_buttons.scss","../node_modules/bootstrap/scss/_transitions.scss","../node_modules/bootstrap/scss/_dropdown.scss","../node_modules/bootstrap/scss/mixins/_caret.scss","../node_modules/bootstrap/scss/mixins/_nav-divider.scss","../node_modules/bootstrap/scss/_button-group.scss","../node_modules/bootstrap/scss/_input-group.scss","../node_modules/bootstrap/scss/_custom-forms.scss","../node_modules/bootstrap/scss/_nav.scss","../node_modules/bootstrap/scss/_navbar.scss","../node_modules/bootstrap/scss/_card.scss","../node_modules/bootstrap/scss/_breadcrumb.scss","../node_modules/bootstrap/scss/_pagination.scss","../node_modules/bootstrap/scss/mixins/_pagination.scss","../node_modules/bootstrap/scss/_badge.scss","../node_modules/bootstrap/scss/mixins/_badge.scss","../node_modules/bootstrap/scss/_jumbotron.scss","../node_modules/bootstrap/scss/_alert.scss","../node_modules/bootstrap/scss/mixins/_alert.scss","../node_modules/bootstrap/scss/_progress.scss","../node_modules/bootstrap/scss/_media.scss","../node_modules/bootstrap/scss/_list-group.scss","../node_modules/bootstrap/scss/mixins/_list-group.scss","../node_modules/bootstrap/scss/_close.scss","../node_modules/bootstrap/scss/_toasts.scss","../node_modules/bootstrap/scss/_modal.scss","../node_modules/bootstrap/scss/_tooltip.scss","../node_modules/bootstrap/scss/mixins/_reset-text.scss","../node_modules/bootstrap/scss/_popover.scss","../node_modules/bootstrap/scss/_carousel.scss","../node_modules/bootstrap/scss/mixins/_clearfix.scss","../node_modules/bootstrap/scss/_spinners.scss","../node_modules/bootstrap/scss/utilities/_align.scss","../node_modules/bootstrap/scss/mixins/_background-variant.scss","../node_modules/bootstrap/scss/utilities/_background.scss","../node_modules/bootstrap/scss/utilities/_borders.scss","../node_modules/bootstrap/scss/utilities/_display.scss","../node_modules/bootstrap/scss/utilities/_embed.scss","../node_modules/bootstrap/scss/utilities/_flex.scss","../node_modules/bootstrap/scss/utilities/_float.scss","../node_modules/bootstrap/scss/utilities/_interactions.scss","../node_modules/bootstrap/scss/utilities/_overflow.scss","../node_modules/bootstrap/scss/utilities/_position.scss","../node_modules/bootstrap/scss/utilities/_screenreaders.scss","../node_modules/bootstrap/scss/mixins/_screen-reader.scss","../node_modules/bootstrap/scss/utilities/_shadows.scss","../node_modules/bootstrap/scss/utilities/_sizing.scss","../node_modules/bootstrap/scss/utilities/_spacing.scss","../node_modules/bootstrap/scss/utilities/_stretched-link.scss","../node_modules/bootstrap/scss/utilities/_text.scss","../node_modules/bootstrap/scss/mixins/_text-truncate.scss","../node_modules/bootstrap/scss/mixins/_text-emphasis.scss","../node_modules/bootstrap/scss/mixins/_text-hide.scss","../node_modules/bootstrap/scss/utilities/_visibility.scss","../node_modules/bootstrap/scss/_print.scss"],"names":[],"mappings":"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;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EAEE,kBARa;;;AAnBnB;AAAA;AAAA;EAGE,kBD2F+B;;ACvF/B;AAAA;AAAA;AAAA;EAIE,cDmFyE;;;AXxF/E;EYiBM,kBAJe;;AAMf;AAAA;EA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W;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADQN;EC3DA;EFAE,kBnBsEW;EqBpEb,crBoEa;;AGhEb;EkBAE;EFNA,kBED2D;EAS3D,cATqG;;AAYvG;EAEE;EFbA,kBED2D;EAgB3D,cAhBqG;EAqBnG;;AAKJ;EAEE;EACA,kBrB0CW;EqBzCX,crByCW;;AqBlCb;EAGE;EACA,kBAzC+I;EA6C/I,cA7CyL;;AA+CzL;EAKI;;;ADcN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW;;AqBeX;EAKI;;;ADzBN;ECPA,OrBYa;EqBXb,crBWa;;AGhEb;EkBwDE,OALgD;EAMhD,kBrBOW;EqBNX,crBMW;;AqBHb;EAEE;;AAGF;EAEE,OrBJW;EqBKX;;AAGF;EAGE;EACA,kBrBZW;EqBaX,crBbW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;EACA;EACA;EACA,O5BwaoC;E4BvapC,Q5BuaoC;E4BtapC;EACA;;;AAUF;EpBlGE;;AoBuGA;EACE;;AAKF;EACE,c5B0HwB;EmBpP1B,kBnBoP0B;;A4BtH1B;EACE;;AAKF;ETpIA,kBnBwhB4C;;A4BjZ5C;ETvIA,kBnBwhB4C;;;A4BtY9C;EAEE,e5ByZ4C;;A4BrZ5C;EACE;;AAKF;ET9JA,kBnBwhB4C;;;A4B/WhD;EACE;;AAGE;EACE;EACA,O5BiY0C;E4BhY1C;EAEA,e5B+X0C;;A4B5X5C;EACE;EACA;EACA,O5B0X0C;E4BzX1C,Q5ByX0C;E4BxX1C,kB5BpLK;E4BsLL,e5BqX0C;EiBviB1C,YWmLA;;AX/KA;EWuKF;IXtKI;;;AWmLJ;EACE,kB5BlMK;E4BmML;;AAKF;ETzMA,kBnBwhB4C;;;A4BlUhD;EACE;EACA;EACA,Q5BoRsC;E4BnRtC;E3BjGI,WAtCa;E2B0IjB,a5B4D4B;E4B3D5B,a5BgE4B;E4B/D5B,O5BvNS;E4BwNT;EACA;EACA;EpBtNE;EoByNF;;AAEA;EACE,c5BuPoC;E4BtPpC;EAKE,Y5BkW8B;;A4B/VhC;EAME,O5B/OK;E4BgPL,kB5BvPK;;A4B2PT;EAEE;EACA,e5B8H0B;E4B7H1B;;AAGF;EACE,O5B7PO;E4B8PP,kB5BlQO;;A4BsQT;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE,Q5ByNsC;E4BxNtC,a5BgH4B;E4B/G5B,gB5B+G4B;E4B9G5B,c5B+G4B;EC9QxB,WAtCa;;;A2ByMnB;EACE,Q5BkNsC;E4BjNtC,a5B6G4B;E4B5G5B,gB5B4G4B;E4B3G5B,c5B4G4B;ECnRxB,WAtCa;;;A2BsNnB;EACE;EACA;EACA;EACA,Q5BgMsC;E4B/LtC;;;AAGF;EACE;EACA;EACA;EACA,Q5BwLsC;E4BvLtC;EACA;EACA;;AAEA;EACE,c5BoKoC;E4BnKpC,Y5BwE0B;;A4BpE5B;EAEE,kB5B/TO;;A4BmUP;EACE,S5B0Ta;;A4BtTjB;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,Q5BuJsC;E4BtJtC;EACA;EAEA,a5BjE4B;E4BkE5B,a5B7D4B;E4B8D5B,O5BpVS;E4BqVT,kB5B5VS;E4B6VT;EpBlVE;;AoBsVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,Q5BgIoC;E4B/HpC;EACA,a5B7E0B;E4B8E1B,O5BpWO;E4BqWP;ET7WA,kBnBGO;E4B4WP;EpBnWA;;;AoB8WJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIA;EAA0B,Y5BmOe;;A4BlOzC;EAA0B,Y5BkOe;;A4BjOzC;EAA0B,Y5BiOe;;A4B9N3C;EACE;;AAGF;EACE,O5BmNyC;E4BlNzC,Q5BkNyC;E4BjNzC;ETlZA,kBnBoP0B;E4BgK1B,Q5BkNyC;EQ1lBzC;ESFE,YW6YF;EACA;;AX1YE;EWiYJ;IXhYM;;;AW2YJ;ET1ZA,kBnB2mByC;;A4B5M3C;EACE,O5B4LgC;E4B3LhC,Q5B4LgC;E4B3LhC;EACA,Q5B2LgC;E4B1LhC,kB5BhaO;E4BiaP;EpBzZA;;AoB8ZF;EACE,O5BwLyC;E4BvLzC,Q5BuLyC;EmBnmBzC,kBnBoP0B;E4B0L1B,Q5BwLyC;EQ1lBzC;ESFE,YWuaF;EACA;;AXpaE;EW4ZJ;IX3ZM;;;AWqaJ;ETpbA,kBnB2mByC;;A4BlL3C;EACE,O5BkKgC;E4BjKhC,Q5BkKgC;E4BjKhC;EACA,Q5BiKgC;E4BhKhC,kB5B1bO;E4B2bP;EpBnbA;;AoBwbF;EACE,O5B8JyC;E4B7JzC,Q5B6JyC;E4B5JzC;EACA,c5BtE0B;E4BuE1B,a5BvE0B;EmBlY1B,kBnBoP0B;E4BuN1B,Q5B2JyC;EQ1lBzC;ESFE,YWocF;EACA;;AXjcE;EWsbJ;IXrbM;;;AWkcJ;ETjdA,kBnB2mByC;;A4BrJ3C;EACE,O5BqIgC;E4BpIhC,Q5BqIgC;E4BpIhC;EACA,Q5BoIgC;E4BnIhC;EACA;EACA;;AAIF;EACE,kB5B9dO;EQQP;;AoB0dF;EACE;EACA,kB5BpeO;EQQP;;AoBieA;EACE,kB5BxeK;;A4B2eP;EACE;;AAGF;EACE,kB5BhfK;;A4BmfP;EACE;;AAGF;EACE,kB5BxfK;;;A4B6fX;AAAA;AAAA;EXzfM,YW4fJ;;AXxfI;EWqfN;AAAA;AAAA;IXpf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,ehCmhC8B;EgClhC9B,OhCNK;EgCOL;;AAUJ;EACE;;AAGF;EACE;;AAGF;EACE,OhC1BO;;;AiCbX;EACE;E5BGA;EACA;EGaE;;;AyBZJ;EACE;EACA;EACA;EACA;EACA,ajCmxBkC;EiClxBlC,OrCQW;EqCNX,kB/BTe;E+BUf;;AAEA;EACE;EACA,OrCGe;EqCFf;EACA,kB/Bda;E+Beb,c/Bfa;;A+BkBf;EACE;EACA,SjC2wBgC;EiC1wBhC,YjC8W0B;;;AiCxW1B;EACE;EzBaF;EACA;;AyBTA;EzBNA;EACA;;AyBUF;EACE;EACA,O/BtCe;E+BuCf,kB/B/Ca;E+BgDb,c/BhDa;;A+BmDf;EACE,O/B7Ce;E+B8Cf;EAEA;EACA,kB/BtDa;E+BuDb,c/BvDa;;;AgCAf;EACE;EjC2HE,WAtCa;EiCnFf,alCmO0B;;AkC9NxB;E1BqCF;EACA;;A0BjCE;E1BkBF;EACA;;;A0BhCF;EACE;EjC2HE,WAtCa;EiCnFf,alCoO0B;;AkC/NxB;E1BqCF;EACA;;A0BjCE;E1BkBF;EACA;;;A2B9BJ;EACE;EACA;ElCiEE;EkC/DF,anCuR4B;EmCtR5B;EACA;EACA;EACA;E3BKE;ESFE,YkBDJ;;AlBKI;EkBfN;IlBgBQ;;;AdLN;EgCGI;;;AAKJ;EACE;;;AAKJ;EACE;EACA;;;AAOF;EACE,enC+3BkC;EmC93BlC,cnC83BkC;EQr5BhC;;;A2BgCF;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ADqCJ;ECjDA;EACA,kBpC0Ea;;AG5Db;EiCVI;EACA;;AAGF;EAEE;EACA;;;ACbN;EACE;EACA,erCuzBkC;EqCrzBlC,kBnCCe;EMab;;AI0CA;EyB5DJ;IAQI;;;;AAIJ;EACE;EACA;E7BIE;;;A8BdJ;EACE;EACA;EACA,etCu9BkC;EsCt9BlC;E9BUE;;;A8BLJ;EAEE;;;AAIF;EACE,atC4Q4B;;;AsCpQ9B;EACE;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAUF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ADsCF;EC/CA,ODgDqH;EnB3CnH,kBmB2CuB;EC9CzB,cD8CqE;;AC5CrE;EACE;;AAGF;EACE;;;ACRF;EACE;IAAO;;EACP;IAAK;;;AAIT;EACE;EACA,QxCg+BkC;EwC/9BlC;EACA;EvCmHI,WAtCa;EuC3EjB,kBxCLS;EQSP;;;AgCCJ;EACE;EACA;EACA;EACA;EACA,OxCjBS;EwCkBT;EACA;EACA,kBxCq9BkC;EiBh+B9B,YuBYJ;;AvBRI;EuBDN;IvBEQ;;;;AuBUR;ErBYE;EqBVA;;;AAIA;EACE;;AAGE;EAJJ;IAKM;;;;AC1CR;EACE;EACA;;;AAGF;EACE;;;ACFF;EACE;EACA;EAGA;EACA;ElCQE;;;AkCEJ;EACE;EACA,O1CRS;E0CST;;AvCPA;EuCWE;EACA,O1CdO;E0CeP;EACA,kB1CtBO;;A0CyBT;EACE,OxCzBe;EwC0Bf,kB1C1BO;;;A0CmCX;EACE;EACA;EACA;EAGA,kB1C3CS;E0C4CT;;AAEA;ElC1BE;EACA;;AkC6BF;ElChBE;EACA;;AkCmBF;EAEE,O1ClDO;E0CmDP;EACA,kB1C1DO;;A0C8DT;EACE;EACA,O1ChEO;E0CiEP,kB1CkL0B;E0CjL1B,c1CiL0B;;A0C9K5B;EACE;;AAEA;EACE;EACA,kB1C2JwB;;;A0C7I1B;EACE;;AAGE;ElC1BJ;EAZA;;AkC2CI;ElC3CJ;EAYA;;AkCoCI;EACE;;AAGF;EACE,kB1C0HoB;E0CzHpB;;AAEA;EACE;EACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;AYhL1B;E8BmCA;IACE;;EAGE;IlC1BJ;IAZA;;EkC2CI;IlC3CJ;IAYA;;EkCoCI;IACE;;EAGF;IACE,kB1C0HoB;I0CzHpB;;EAEA;IACE;IACA,mB1CqHkB;;;A0CvG9B;ElCnHI;;AkCsHF;EACE;;AAEA;EACE;;;ACzIJ;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;ACrJxE;EACE,ODoJsE;ECnJtE,kBDmJuC;;AvCxIzC;EwCPM,OD+IkE;EC9IlE;;AAGF;EACE,O3CPG;E2CQH,kBDyIkE;ECxIlE,cDwIkE;;;AExJ1E;EACE;E3C8HI,WAtCa;E2CtFjB,a5C6R4B;E4C5R5B;EACA,O1CIiB;E0CHjB,ahD+FkB;EgD9FlB;;AzCKA;EyCDE,O1CFe;E0CGf;;AzCIF;EyCCI;;;AAWN;EACE;EACA;EACA;;;AAMF;EACE;;;ACtCF;EAGE,Y7Cy4BkC;E6Cx4BlC,W7Cw4BkC;EC7wB9B,WAtCa;E4ClFjB,kB7C04BkC;E6Cz4BlC;EACA;EACA,Y7C24BkC;E6C14BlC;ErCOE;;AqCJF;EACE,e7C83BgC;;A6C33BlC;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA,O7CvBS;E6CwBT,kB7Cm3BkC;E6Cl3BlC;EACA;ErCZE;EACA;;;AqCeJ;EACE,S7Ci2BkC;;;A8Cv4BpC;EAEE;;AAEA;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA,S9C2pBkC;E8C1pBlC;EACA;EACA;EACA;EAGA;;;AAOF;EACE;EACA;EACA,Q9C+4BkC;E8C74BlC;;AAGA;E7B3BI,Y6B4BF;EACA,W9Cq6BgC;;AiB97B9B;E6BuBJ;I7BtBM;;;A6B0BN;EACE,W9Cm6BgC;;A8C/5BlC;EACE,W9Cg6BgC;;;A8C55BpC;EACE;EACA;;AAEA;EACE;EACA;;AAGF;AAAA;EAEE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAMN;EACE;EACA;EACA;EACA;EAGA;EACA,kB5C9Ge;E4C+Gf;EACA;EtClGE;EsCsGF;;;AAIF;EACE;EACA;EACA;EACA,S9C+iBkC;E8C9iBlC;EACA;EACA,kB9ClHS;;A8CqHT;EAAS;;AACT;EAAS,S9C6zByB;;;A8CxzBpC;EACE;EACA;EACA;EACA,S9C2zBkC;E8C1zBlC;EtCtHE;EACA;;AsCwHF;EACE,S9CszBgC;E8CpzBhC;;;AAKJ;EACE;EACA,a9CsI4B;;;A8CjI9B;EACE;EAGA;EACA,S9CwwBkC;;;A8CpwBpC;EACE;EACA;EACA;EACA;EACA;EACA;EtCzIE;EACA;;AsC8IF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;;AlCvIE;EkC6IF;IACE,W9CqwBgC;I8CpwBhC;;;EAGF;IACE;;EAEA;IACE;;;EAIJ;IACE;;EAEA;IACE;IACA;;;EAQJ;IAAY,W9C6uBsB;;;AYp5BhC;EkC2KF;AAAA;IAEE,W9CquBgC;;;AYl5BhC;EkCkLF;IAAY,W9C+tBsB;;;A+C58BpC;EACE;EACA,S/C+qBkC;E+C9qBlC;EACA,Q/C21BkC;EgD/1BlC,ahDmR4B;EgDjR5B;EACA,ahD2R4B;EgD1R5B,ahD+R4B;EgD9R5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E/CgHI,WAtCa;E8C9EjB;EACA;;AAEA;EAAS,S/C+0ByB;;A+C70BlC;EACE;EACA;EACA,O/C+0BgC;E+C90BhC,Q/C+0BgC;;A+C70BhC;EACE;EACA;EACA;EACA;;;AAKN;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA,kB/CvBK;;;A+C4BX;EACE;;AAEA;EACE;EACA,O/CizBgC;E+ChzBhC,Q/C+yBgC;;A+C7yBhC;EACE;EACA;EACA,oB/CvCK;;;A+C4CX;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA,qB/CrDK;;;A+C0DX;EACE;;AAEA;EACE;EACA,O/CmxBgC;E+ClxBhC,Q/CixBgC;;A+C/wBhC;EACE;EACA;EACA,mB/CrEK;;;A+C0FX;EACE,W/C6uBkC;E+C5uBlC;EACA,O/CvGS;E+CwGT;EACA,kB/C/FS;EQCP;;;AyClBJ;EACE;EACA;EACA;EACA,SjD6qBkC;EiD5qBlC;EACA,WjD62BkC;EgDl3BlC,ahDmR4B;EgDjR5B;EACA,ahD2R4B;EgD1R5B,ahD+R4B;EgD9R5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E/CgHI,WAtCa;EgD7EjB;EACA,kBjDNS;EiDOT;EACA;EzCGE;;AyCCF;EACE;EACA;EACA,OjD62BgC;EiD52BhC,QjD62BgC;EiD52BhC;;AAEA;EAEE;EACA;EACA;EACA;EACA;;;AAKN;EACE,ejD81BkC;;AiD51BlC;EACE;;AAEA;EACE;EACA;EACA,kBjDy1B8B;;AiDt1BhC;EACE,QjD0LwB;EiDzLxB;EACA,kBjD7CK;;;AiDkDX;EACE,ajD00BkC;;AiDx0BlC;EACE;EACA,OjDs0BgC;EiDr0BhC,QjDo0BgC;EiDn0BhC;;AAEA;EACE;EACA;EACA,oBjDk0B8B;;AiD/zBhC;EACE,MjDmKwB;EiDlKxB;EACA,oBjDpE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EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAgC;;;AAChC;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAQF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAfF;EAAwB;;;AACxB;AAAA;EAEE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","file":"bootstrap.css"}
\ No newline at end of file
diff --git a/public/bootstrap.scss b/public/bootstrap.scss
index b21b5e7a..c7b24f77 100644
--- a/public/bootstrap.scss
+++ b/public/bootstrap.scss
@@ -45,6 +45,8 @@ $jumbotron-bg: colors.$color-black-32;
 
 // region Color themes
 
+$red: colors.$color-red;
+
 $theme-colors: (
   "om-dark": colors.$color-om-dark,
   "om-light": colors.$color-om-light,
diff --git a/public/colors.scss b/public/colors.scss
index 4da42055..903f7ab5 100644
--- a/public/colors.scss
+++ b/public/colors.scss
@@ -8,5 +8,6 @@ $color-black-50: #323232;
 $color-black-80: #505050;
 $color-light-gray: #aaa;
 $color-white-pure: #fff;
+$color-red: #ff4457;
 
 $hr-color: rgba($color-light-gray, 0.5);
diff --git a/src/components/elements/gameData/skillAtk/out/main.test.tsx b/src/components/elements/gameData/skillAtk/out/main.test.tsx
new file mode 100644
index 00000000..8cd6e94d
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/out/main.test.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {screen} from '@testing-library/react';
+
+import {renderReact} from '../../../../../../test/render/main';
+import {ConditionEnumMap, SkillEnums, SkillIdentifierInfo, StatusEnums} from '../../../../../api-def/resources';
+import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
+import {ResourceLoader} from '../../../../../utils/services/resources/loader';
+import {InputData} from '../in/types';
+import {AttackingSkillOutput} from './main';
+
+
+describe('ATK skill entry output', () => {
+  const displayConfig: InputData['display'] = {
+    actualDamage: false,
+    damageInfo: true,
+    damageDist: false,
+    affliction: true,
+    spInfo: true,
+    animationInfo: false,
+  };
+  let conditionEnumMap: ConditionEnumMap;
+  let skillIdentifierInfo: SkillIdentifierInfo;
+  let skillEnums: SkillEnums;
+  let statusEnums: StatusEnums;
+
+  beforeAll(async () => {
+    conditionEnumMap = await ResourceLoader.getEnumAllConditions();
+    skillIdentifierInfo = await ResourceLoader.getSkillIdentifierInfo();
+    skillEnums = await ResourceLoader.getEnumSkill();
+    statusEnums = await ResourceLoader.getEnumAfflictionStatus();
+  });
+
+  it('shows no result if no entries to display', async () => {
+    renderReact(() => (
+      <AttackingSkillOutput
+        displayConfig={displayConfig}
+        calculatedEntries={[]}
+        conditionEnumMap={conditionEnumMap}
+        skillIdentifierInfo={skillIdentifierInfo}
+        skillEnums={skillEnums}
+        statusEnums={statusEnums}
+      />
+    ));
+
+    expect(screen.getByText(translationEN.game.skillAtk.error.noResult)).toBeInTheDocument();
+  });
+
+  it.todo('shows animation info warning');
+
+  it.todo('shows affliction warning');
+
+  it.todo('renders actual skill entries');
+
+  it.todo('shows actual damage if specified');
+});
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index fa3a15ad..e384d9fd 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {AfflictionWarning} from '../../warnings/affliction';
 import {AnimationInfoWarning} from '../../warnings/animation';
+import {NoResultWarning} from '../../warnings/noResult';
 import {overLengthWarningCheck} from '../../warnings/overLength';
 import {InputData} from '../in/types';
 import {AttackingSkillEntry} from './entry';
@@ -15,9 +16,8 @@ type OutputProps = EnumDataPack & {
 }
 
 export const AttackingSkillOutput = ({displayConfig, calculatedEntries, ...enums}: OutputProps) => {
-  // Early termination if no input
   if (!calculatedEntries.length) {
-    return <></>;
+    return <NoResultWarning/>;
   }
 
   const entries: Array<React.ReactElement> = [];
diff --git a/src/components/elements/gameData/warnings/noResult.tsx b/src/components/elements/gameData/warnings/noResult.tsx
new file mode 100644
index 00000000..948bd6da
--- /dev/null
+++ b/src/components/elements/gameData/warnings/noResult.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Alert from 'react-bootstrap/Alert';
+
+import {useI18n} from '../../../../i18n/hook';
+
+
+export const NoResultWarning = () => {
+  const {t} = useI18n();
+
+  return (
+    <Alert variant="danger" className="rounded bg-black-32 p-2 mb-2">
+      {t((t) => t.game.skillAtk.error.noResult)}
+    </Alert>
+  );
+};
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 91a811dc..061ecd8b 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -192,6 +192,7 @@ export const translation: TranslationStruct = {
       collapse: '摺疊/展開',
       error: {
         noInfoToDisplay: '請選擇至少一項顯示資訊。',
+        noResult: '無可用結果。',
         presetMustLogin: '請先登入再使用預設參數功能。',
       },
       animation: {
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index 886df94f..2b658925 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -191,6 +191,7 @@ export type TranslationStruct = {
       collapse: string,
       error: {
         noInfoToDisplay: string,
+        noResult: string,
         presetMustLogin: string,
       },
       animation: {
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 4f24cde4..03558695 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -216,6 +216,7 @@ export const translation: TranslationStruct = {
       collapse: 'Collapse/Expand',
       error: {
         noInfoToDisplay: 'Please select at least 1 info to display.',
+        noResult: 'No available results.',
         presetMustLogin: 'You must login to use the input parameter preset via link.',
       },
       animation: {
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index a9bd96d0..1d0b7f00 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -191,6 +191,7 @@ export const translation: TranslationStruct = {
       collapse: '展開 / 折り畳み',
       error: {
         noInfoToDisplay: 'Please select at least 1 info to display.',
+        noResult: 'No available results.',
         presetMustLogin: 'You must login to use the input parameter preset via link.',
       },
       animation: {

From e51960dcc9a46c6e87caa0eac52c9b353599f74b Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 19:23:16 -0500
Subject: [PATCH 56/61] IMP - Refactor ATK skill sorter file structure

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/gameData/skillAtk/main.tsx        | 3 ++-
 src/components/elements/gameData/skillAtk/out/utils.ts    | 2 +-
 .../elements/gameData/skillAtk/{out => }/sorter/lookup.ts | 8 ++++----
 .../gameData/skillAtk/{out => }/sorter/main.test.tsx      | 8 ++++----
 .../elements/gameData/skillAtk/{out => }/sorter/main.tsx  | 4 ++--
 5 files changed, 13 insertions(+), 12 deletions(-)
 rename src/components/elements/gameData/skillAtk/{out => }/sorter/lookup.ts (88%)
 rename src/components/elements/gameData/skillAtk/{out => }/sorter/main.test.tsx (81%)
 rename src/components/elements/gameData/skillAtk/{out => }/sorter/main.tsx (88%)

diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index c379c838..76382e22 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';
 
 import {useI18n} from '../../../../i18n/hook';
@@ -14,8 +15,8 @@ import {InputData} from './in/types';
 import {getCalculatedEntries} from './in/utils/calculate';
 import {overwriteInputData} from './in/utils/inputData';
 import {AttackingSkillOutput} from './out/main';
-import {AttackingSkillSorter} from './out/sorter/main';
 import {CalculatedSkillEntry} from './out/types';
+import {AttackingSkillSorter} from './sorter/main';
 
 
 export const AttackingSkillLookup = () => {
diff --git a/src/components/elements/gameData/skillAtk/out/utils.ts b/src/components/elements/gameData/skillAtk/out/utils.ts
index 227fe87a..d799755f 100644
--- a/src/components/elements/gameData/skillAtk/out/utils.ts
+++ b/src/components/elements/gameData/skillAtk/out/utils.ts
@@ -1,7 +1,7 @@
 import {AttackingSkillData, ElementBonusData} from '../../../../../api-def/resources';
 import {calculateDamage} from '../../../../../utils/game/damage';
 import {InputData} from '../in/types';
-import {sortFunc} from './sorter/lookup';
+import {sortFunc} from '../sorter/lookup';
 import {CalculatedSkillEntry, Efficiency} from './types';
 
 
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/sorter/lookup.ts
similarity index 88%
rename from src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
rename to src/components/elements/gameData/skillAtk/sorter/lookup.ts
index 1dcf7357..5817ce88 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/lookup.ts
+++ b/src/components/elements/gameData/skillAtk/sorter/lookup.ts
@@ -1,7 +1,7 @@
-import {GetTranslationFunction} from '../../../../../../i18n/types';
-import {sortAscending, sortDescending} from '../../../../../../utils/sort';
-import {SortBy} from '../../in/types';
-import {CalculatedSkillEntry} from '../types';
+import {GetTranslationFunction} from '../../../../../i18n/types';
+import {sortAscending, sortDescending} from '../../../../../utils/sort';
+import {SortBy} from '../in/types';
+import {CalculatedSkillEntry} from '../out/types';
 
 
 type SortFuncLookup = { [sortBy in SortBy]: (entryA: CalculatedSkillEntry, entryB: CalculatedSkillEntry) => number }
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx b/src/components/elements/gameData/skillAtk/sorter/main.test.tsx
similarity index 81%
rename from src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
rename to src/components/elements/gameData/skillAtk/sorter/main.test.tsx
index e8c1a53e..df1079d7 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/sorter/main.test.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import {fireEvent, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {renderReact} from '../../../../../../../test/render/main';
-import {translation as translationEN} from '../../../../../../i18n/translations/en/translation';
-import {InputData} from '../../in/types';
-import {generateInputData} from '../../in/utils/inputData';
+import {renderReact} from '../../../../../../test/render/main';
+import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
+import {InputData} from '../in/types';
+import {generateInputData} from '../in/utils/inputData';
 import {AttackingSkillSorter} from './main';
 
 
diff --git a/src/components/elements/gameData/skillAtk/out/sorter/main.tsx b/src/components/elements/gameData/skillAtk/sorter/main.tsx
similarity index 88%
rename from src/components/elements/gameData/skillAtk/out/sorter/main.tsx
rename to src/components/elements/gameData/skillAtk/sorter/main.tsx
index d8a45b88..96bf1351 100644
--- a/src/components/elements/gameData/skillAtk/out/sorter/main.tsx
+++ b/src/components/elements/gameData/skillAtk/sorter/main.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 import DropdownButton from 'react-bootstrap/DropdownButton';
 
-import {useI18n} from '../../../../../../i18n/hook';
-import {InputData, SortBy} from '../../in/types';
+import {useI18n} from '../../../../../i18n/hook';
+import {InputData, SortBy} from '../in/types';
 import {orderName} from './lookup';
 
 

From a428df99a8a27f9278280bd345d7324888b9cbc9 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 19:39:26 -0500
Subject: [PATCH 57/61] IMP - ATK skill to filter outliers

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/sorter/lookup.ts   | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/sorter/lookup.ts b/src/components/elements/gameData/skillAtk/sorter/lookup.ts
index 5817ce88..1ffdce46 100644
--- a/src/components/elements/gameData/skillAtk/sorter/lookup.ts
+++ b/src/components/elements/gameData/skillAtk/sorter/lookup.ts
@@ -4,23 +4,32 @@ import {SortBy} from '../in/types';
 import {CalculatedSkillEntry} from '../out/types';
 
 
+// Unique dragon skills = 30 SP, Tobias S2 = 1 SP
+const isSkillNotCommonSp = (entry: CalculatedSkillEntry) => entry.skillEntry.skill.spMax < 100;
+
 type SortFuncLookup = { [sortBy in SortBy]: (entryA: CalculatedSkillEntry, entryB: CalculatedSkillEntry) => number }
 
 export const sortFunc: SortFuncLookup = {
   damage: sortDescending({getComparer: (element) => element.skillDamage.expected}),
-  sp: sortAscending({getComparer: (element) => element.skillEntry.skill.spMax}),
+  sp: sortAscending({
+    getComparer: (element) => element.skillEntry.skill.spMax,
+    isToPutLast: isSkillNotCommonSp,
+  }),
   ssp: sortAscending({
     getComparer: (element) => element.skillEntry.skill.ssSp,
     isToPutLast: (element) => !element.skillEntry.skill.sharable,
   }),
-  modPer1KSp: sortDescending({getComparer: (element) => element.efficiency.modPctPer1KSp}),
+  modPer1KSp: sortDescending({
+    getComparer: (element) => element.efficiency.modPctPer1KSp,
+    isToPutLast: isSkillNotCommonSp,
+  }),
   modPer1KSsp: sortDescending({
     getComparer: (element) => element.efficiency.modPctPer1KSsp,
     isToPutLast: (element) => !element.skillEntry.skill.sharable,
   }),
   afflictionLengthPer1KSp: sortDescending({
     getComparer: (element) => Math.min(...Object.values(element.efficiency.secPer1KSp)),
-    isToPutLast: (element) => !element.skillEntry.skill.afflictions.length,
+    isToPutLast: (element) => !element.skillEntry.skill.afflictions.length || isSkillNotCommonSp(element),
   }),
   afflictionLengthPer1KSsp: sortDescending({
     getComparer: (element) => Math.min(...Object.values(element.efficiency.secPer1KSsp)),

From 6d3a622264c5c52a3c7edff7ac07276d45e5c800 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 20:18:36 -0500
Subject: [PATCH 58/61] FIX - Performance issue on changing ATK skill input

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../gameData/skillAtk/hooks/preset.ts         | 40 ++++++++++++-------
 .../gameData/skillAtk/in/main.test.tsx        | 32 ++-------------
 .../elements/gameData/skillAtk/in/main.tsx    | 16 ++++++--
 .../elements/gameData/skillAtk/main.tsx       | 28 ++++---------
 .../elements/gameData/skillAtk/out/main.tsx   |  4 +-
 .../gameData/skillAtk/sorter/main.tsx         | 18 +++++++--
 6 files changed, 64 insertions(+), 74 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/hooks/preset.ts b/src/components/elements/gameData/skillAtk/hooks/preset.ts
index 4d36303f..665a0a32 100644
--- a/src/components/elements/gameData/skillAtk/hooks/preset.ts
+++ b/src/components/elements/gameData/skillAtk/hooks/preset.ts
@@ -18,7 +18,10 @@ type UseAtkSkillInputReturn = InputPanelCommonProps<InputData> & {
   makePreset: (inputData: InputData) => void,
 }
 
-export const useAtkSkillInput = (onNotLoggedIn: () => void): UseAtkSkillInputReturn => {
+// This input data is expect to change frequently.
+// Therefore, it should not be used in expensive component, such as ATK skill output,
+// because every change triggers a re-render.
+export const useAtkSkillInput = (onNotLoggedIn?: () => void): UseAtkSkillInputReturn => {
   const {query} = useNextRouter();
   const presetId = query[PRESET_QUERY_NAME];
 
@@ -35,6 +38,26 @@ export const useAtkSkillInput = (onNotLoggedIn: () => void): UseAtkSkillInputRet
     data: null,
   });
 
+  const onNotLoggedInInternal = () => {
+    if (onNotLoggedIn) {
+      onNotLoggedIn();
+    }
+    console.error('User not logged in, action prohibited.');
+  };
+
+  const makePreset = (inputData: InputData) => {
+    setMakePresetStatus({...makePresetStatus, fetched: false, fetching: true});
+    if (context?.session) {
+      ApiRequestSender.setPresetAtkSkill(context.session.user.id.toString(), inputData)
+        .then((response) => {
+          setMakePresetStatus({fetched: true, fetching: false, data: response.presetId});
+        });
+    } else {
+      onNotLoggedInInternal();
+      setMakePresetStatus({...makePresetStatus, fetched: true, fetching: false});
+    }
+  };
+
   if (isNotFetched(fetchStatus)) {
     if (context?.session) {
       setFetchStatus({...fetchStatus, fetching: true});
@@ -49,23 +72,10 @@ export const useAtkSkillInput = (onNotLoggedIn: () => void): UseAtkSkillInputRet
       GoogleAnalytics.presetLoaded('atkSkill');
     } else {
       setFetchStatus({...fetchStatus, fetched: true, fetching: false});
-      onNotLoggedIn();
+      onNotLoggedInInternal();
     }
   }
 
-  const makePreset = (inputData: InputData) => {
-    setMakePresetStatus({...makePresetStatus, fetched: false, fetching: true});
-    if (context?.session) {
-      ApiRequestSender.setPresetAtkSkill(context.session.user.id.toString(), inputData)
-        .then((response) => {
-          setMakePresetStatus({fetched: true, fetching: false, data: response.presetId});
-        });
-    } else {
-      onNotLoggedIn();
-      setMakePresetStatus({...makePresetStatus, fetched: true, fetching: false});
-    }
-  };
-
   return {
     inputData: fetchStatus.data,
     setInputData: (newData: InputData) => setFetchStatus({...fetchStatus, data: newData}),
diff --git a/src/components/elements/gameData/skillAtk/in/main.test.tsx b/src/components/elements/gameData/skillAtk/in/main.test.tsx
index f1e1a9b0..e2217012 100644
--- a/src/components/elements/gameData/skillAtk/in/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.test.tsx
@@ -6,30 +6,18 @@ import userEvent from '@testing-library/user-event';
 import {renderReact} from '../../../../../../test/render/main';
 import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
 import {AttackingSkillInput} from './main';
-import {InputData} from './types';
 import {generateInputData, overwriteInputData} from './utils/inputData';
 
 
 describe('ATK skill input', () => {
   let fnOnSearch: jest.Mock;
-  let inputData: InputData;
-  let setInputData: jest.Mock;
 
   beforeEach(() => {
     fnOnSearch = jest.fn();
-    inputData = generateInputData();
-    setInputData = jest.fn().mockImplementation((newData) => inputData = newData);
   });
 
   it('collapsed to summary on load', async () => {
-    renderReact(() => (
-      <AttackingSkillInput
-        onSearchRequested={fnOnSearch}
-        isSearchAllowed
-        inputData={inputData}
-        setInputData={setInputData}
-      />
-    ));
+    renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch} isAllFetched/>);
 
     const inspireButton = screen.queryByText(
       translationEN.game.skillAtk.name.crtInspired,
@@ -39,14 +27,7 @@ describe('ATK skill input', () => {
   });
 
   it('cannot search if no info to display', async () => {
-    const {rerender} = renderReact(() => (
-      <AttackingSkillInput
-        onSearchRequested={fnOnSearch}
-        isSearchAllowed
-        inputData={inputData}
-        setInputData={setInputData}
-      />
-    ));
+    const {rerender} = renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch} isAllFetched/>);
 
     const displayDamageInfo = screen.getByText(translationEN.game.skillAtk.display.options.damageInfo);
     const displaySpInfo = screen.getByText(translationEN.game.skillAtk.display.options.spInfo);
@@ -71,14 +52,7 @@ describe('ATK skill input', () => {
   });
 
   it('sends correct display config in input data', async () => {
-    const {rerender} = renderReact(() => (
-      <AttackingSkillInput
-        onSearchRequested={fnOnSearch}
-        isSearchAllowed
-        inputData={inputData}
-        setInputData={setInputData}
-      />
-    ));
+    const {rerender} = renderReact(() => <AttackingSkillInput onSearchRequested={fnOnSearch} isAllFetched/>);
 
     const displayAffliction = screen.getByText(
       translationEN.game.skillAtk.display.options.affliction,
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 8a1089b3..df01ef0e 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -8,7 +8,7 @@ import {useI18n} from '../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
 import {CommonModal, ModalState} from '../../../common/modal';
-import {InputPanelCommonProps} from '../../../input/types';
+import {useAtkSkillInput} from '../hooks/preset';
 import {Filter} from './filter';
 import {DisplayItemPicker} from './limit';
 import {InputParameters} from './params';
@@ -16,12 +16,12 @@ import {InputData} from './types';
 import {validateInputData} from './utils/inputData';
 
 
-type InputProps = InputPanelCommonProps<InputData> & {
+type InputProps = {
   onSearchRequested: (inputData: InputData) => void,
-  isSearchAllowed: boolean,
+  isAllFetched: boolean,
 }
 
-export const AttackingSkillInput = ({inputData, setInputData, isSearchAllowed, onSearchRequested}: InputProps) => {
+export const AttackingSkillInput = ({isAllFetched, onSearchRequested}: InputProps) => {
   const {t, lang} = useI18n();
 
   const [collapsed, setCollapsed] = React.useState(true);
@@ -30,6 +30,14 @@ export const AttackingSkillInput = ({inputData, setInputData, isSearchAllowed, o
     title: '',
     message: '',
   });
+  const {inputData, setInputData, getPresetStatus} = useAtkSkillInput(() => {
+    setModalState({
+      ...modalState,
+      show: true,
+      message: t((t) => t.game.skillAtk.error.presetMustLogin),
+    });
+  });
+  const isSearchAllowed = isAllFetched && getPresetStatus.fetched;
 
   const {fetchStatus: conditionEnums, fetchFunction: fetchConditionEnums} = useFetchState<CategorizedConditionEnums>(
     {afflictions: [], elements: []},
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index 76382e22..cdab5376 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -4,31 +4,23 @@ import Col from 'react-bootstrap/Col';
 import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';
 
-import {useI18n} from '../../../../i18n/hook';
 import {scrollRefToTop} from '../../../../utils/scroll';
 import {GoogleAnalytics} from '../../../../utils/services/ga';
 import {CommonModal, ModalState} from '../../common/modal';
 import {useFetchEnums} from './hooks/enums';
-import {useAtkSkillInput} from './hooks/preset';
 import {AttackingSkillInput} from './in/main';
 import {InputData} from './in/types';
 import {getCalculatedEntries} from './in/utils/calculate';
-import {overwriteInputData} from './in/utils/inputData';
+import {generateInputData} from './in/utils/inputData';
 import {AttackingSkillOutput} from './out/main';
 import {CalculatedSkillEntry} from './out/types';
 import {AttackingSkillSorter} from './sorter/main';
 
 
 export const AttackingSkillLookup = () => {
-  const {t} = useI18n();
-  const {inputData, setInputData, getPresetStatus} = useAtkSkillInput(() => {
-    setModalState({
-      ...modalState,
-      show: true,
-      message: t((t) => t.game.skillAtk.error.presetMustLogin),
-    });
-  });
-
+  // Having this reduces state updates when changing input.
+  // Frequent update in this component is not ideal because rendering output is expensive.
+  const [inputDataForward, setInputDataForward] = React.useState(generateInputData());
   const [modalState, setModalState] = React.useState<ModalState>({
     show: false,
     title: '',
@@ -61,13 +53,12 @@ export const AttackingSkillLookup = () => {
       <Row>
         <Col lg={4} className="rounded bg-black-32 p-3 mb-3">
           <AttackingSkillInput
-            inputData={inputData}
-            setInputData={setInputData}
-            isSearchAllowed={isAllFetched && getPresetStatus.fetched}
+            isAllFetched={isAllFetched}
             onSearchRequested={(inputData: InputData) => {
               GoogleAnalytics.damageCalc('search', inputData);
 
               setCalculatedEntries(getCalculatedEntries(inputData, attackingSkillEntries, elementBonuses));
+              setInputDataForward(inputData);
             }}
           />
         </Col>
@@ -75,17 +66,14 @@ export const AttackingSkillLookup = () => {
           <Row className="text-right mb-2">
             <Col>
               <AttackingSkillSorter
-                inputData={inputData}
-                onOrderPicked={(sortBy) => {
-                  const newInputData = overwriteInputData(inputData, {sortBy});
-                  setInputData(newInputData);
+                onOrderPicked={(newInputData) => {
                   setCalculatedEntries(getCalculatedEntries(newInputData, attackingSkillEntries, elementBonuses));
                 }}
               />
             </Col>
           </Row>
           <AttackingSkillOutput
-            displayConfig={inputData.display}
+            displayConfig={inputDataForward.display}
             calculatedEntries={calculatedEntries || []}
             conditionEnumMap={conditionEnumMap}
             skillIdentifierInfo={skillIdentifierInfo}
diff --git a/src/components/elements/gameData/skillAtk/out/main.tsx b/src/components/elements/gameData/skillAtk/out/main.tsx
index e384d9fd..925d66f1 100644
--- a/src/components/elements/gameData/skillAtk/out/main.tsx
+++ b/src/components/elements/gameData/skillAtk/out/main.tsx
@@ -29,12 +29,12 @@ export const AttackingSkillOutput = ({displayConfig, calculatedEntries, ...enums
   }
   // Check if animation info alert should be displayed
   if (displayConfig.animationInfo) {
-    entries.push(<AnimationInfoWarning/>);
+    entries.push(<AnimationInfoWarning key="animationWarning"/>);
   }
   // Check if affliction info alert should be displayed
   // - Both affliction and SP info do something with affliction
   if (displayConfig.affliction || displayConfig.spInfo) {
-    entries.push(<AfflictionWarning/>);
+    entries.push(<AfflictionWarning key="afflictionWarning"/>);
   }
 
   // Add transformed entries
diff --git a/src/components/elements/gameData/skillAtk/sorter/main.tsx b/src/components/elements/gameData/skillAtk/sorter/main.tsx
index 96bf1351..f45eee15 100644
--- a/src/components/elements/gameData/skillAtk/sorter/main.tsx
+++ b/src/components/elements/gameData/skillAtk/sorter/main.tsx
@@ -4,25 +4,35 @@ import Dropdown from 'react-bootstrap/Dropdown';
 import DropdownButton from 'react-bootstrap/DropdownButton';
 
 import {useI18n} from '../../../../../i18n/hook';
+import {useAtkSkillInput} from '../hooks/preset';
 import {InputData, SortBy} from '../in/types';
+import {overwriteInputData} from '../in/utils/inputData';
 import {orderName} from './lookup';
 
 
 type Props = {
-  inputData: InputData,
-  onOrderPicked: (order: SortBy) => void,
+  onOrderPicked: (newInputData: InputData) => void,
 }
 
-export const AttackingSkillSorter = ({inputData, onOrderPicked}: Props) => {
+export const AttackingSkillSorter = ({onOrderPicked}: Props) => {
   const {t} = useI18n();
 
+  const {inputData, setInputData} = useAtkSkillInput();
+
   const sortBy = t(orderName[inputData.sortBy]);
   const title = t((t) => t.game.skillAtk.sort.text, {sortBy});
 
+  const onItemPicked = (sortBy: SortBy) => () => {
+    const newInputData = overwriteInputData(inputData, {sortBy});
+    setInputData(newInputData);
+
+    onOrderPicked(newInputData);
+  };
+
   return (
     <DropdownButton title={title} variant="outline-light">
       {Object.entries(orderName).map(([sortBy, getNameFunc], idx) => (
-        <Dropdown.Item key={idx} onClick={() => onOrderPicked(sortBy as SortBy)}>
+        <Dropdown.Item key={idx} onClick={onItemPicked(sortBy as SortBy)}>
           {t(getNameFunc)}
         </Dropdown.Item>
       ))}

From 98670e663f1bbe4995232f7947d92d4ed4d35734 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Tue, 29 Jun 2021 23:55:59 -0500
Subject: [PATCH 59/61] ADD - ATK skill input preset #160

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../gameData/skillAtk/hooks/preset.test.ts    |  31 ++++++
 .../gameData/skillAtk/hooks/preset.ts         |  39 ++++---
 .../elements/gameData/skillAtk/in/main.tsx    |  11 +-
 .../elements/gameData/skillAtk/main.test.tsx  | 103 ++++++++++++++++--
 .../elements/gameData/skillAtk/main.tsx       |   8 +-
 .../gameData/skillAtk/preset/main.test.tsx    |  35 ++++++
 .../gameData/skillAtk/preset/main.tsx         |  99 +++++++++++++++++
 .../gameData/skillAtk/sorter/main.test.tsx    |   8 +-
 src/i18n/translations/cht/translation.ts      |   2 +
 src/i18n/translations/definition.ts           |   2 +
 src/i18n/translations/en/translation.ts       |   2 +
 src/i18n/translations/jp/translation.ts       |   2 +
 12 files changed, 299 insertions(+), 43 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/preset/main.test.tsx
 create mode 100644 src/components/elements/gameData/skillAtk/preset/main.tsx

diff --git a/src/components/elements/gameData/skillAtk/hooks/preset.test.ts b/src/components/elements/gameData/skillAtk/hooks/preset.test.ts
index 977065d7..40a16431 100644
--- a/src/components/elements/gameData/skillAtk/hooks/preset.test.ts
+++ b/src/components/elements/gameData/skillAtk/hooks/preset.test.ts
@@ -113,4 +113,35 @@ describe('Input preset hook', () => {
     await waitFor(() => expect(result.current.getPresetStatus.fetched).toBeTruthy());
     expect(gaEvent).toHaveBeenCalledTimes(1);
   });
+
+  it('does not have 2 preset IDs in the new link if created twice', async () => {
+    jest.spyOn(ApiRequestSender, 'getPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      preset: {a: true},
+    });
+    jest.spyOn(ApiRequestSender, 'setPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      presetId: 'preset2',
+    });
+    // @ts-ignore
+    delete window.location;
+    // @ts-ignore
+    window.location = {
+      href: `http://localhost/?${PRESET_QUERY_NAME}=preset`,
+    };
+
+    const {result} = renderReactHook(
+      () => useAtkSkillInput(fnOnNotLoggedIn),
+      {
+        hasSession: true,
+        routerOptions: {query: {[PRESET_QUERY_NAME]: 'preset'}},
+      },
+    );
+
+    result.current.makePreset();
+    await waitFor(() => expect(result.current.makePresetLink).not.toBeNull());
+    expect(new URL(result.current.makePresetLink || '').searchParams.getAll(PRESET_QUERY_NAME).length).toBe(1);
+  });
 });
diff --git a/src/components/elements/gameData/skillAtk/hooks/preset.ts b/src/components/elements/gameData/skillAtk/hooks/preset.ts
index 665a0a32..79cd1913 100644
--- a/src/components/elements/gameData/skillAtk/hooks/preset.ts
+++ b/src/components/elements/gameData/skillAtk/hooks/preset.ts
@@ -14,8 +14,8 @@ export const PRESET_QUERY_NAME = 'preset';
 
 type UseAtkSkillInputReturn = InputPanelCommonProps<InputData> & {
   getPresetStatus: FetchStatusSimple,
-  setPresetStatus: FetchStatusSimple,
-  makePreset: (inputData: InputData) => void,
+  makePresetLink: string | null,
+  makePreset: () => void,
 }
 
 // This input data is expect to change frequently.
@@ -27,10 +27,10 @@ export const useAtkSkillInput = (onNotLoggedIn?: () => void): UseAtkSkillInputRe
 
   const context = React.useContext(AppReactContext);
 
-  const [fetchStatus, setFetchStatus] = React.useState<FetchStatus<InputData>>({
+  const [inputData, setInputData] = React.useState<InputData>(generateInputData());
+  const [getPresetStatus, setGetPresetStatus] = React.useState<FetchStatusSimple>({
     fetched: !presetId,
     fetching: false,
-    data: generateInputData(),
   });
   const [makePresetStatus, setMakePresetStatus] = React.useState<FetchStatus<string | null>>({
     fetched: false,
@@ -41,16 +41,23 @@ export const useAtkSkillInput = (onNotLoggedIn?: () => void): UseAtkSkillInputRe
   const onNotLoggedInInternal = () => {
     if (onNotLoggedIn) {
       onNotLoggedIn();
+    } else {
+      console.error('User not logged in, action prohibited.');
     }
-    console.error('User not logged in, action prohibited.');
   };
 
-  const makePreset = (inputData: InputData) => {
+  const makePreset = () => {
     setMakePresetStatus({...makePresetStatus, fetched: false, fetching: true});
     if (context?.session) {
       ApiRequestSender.setPresetAtkSkill(context.session.user.id.toString(), inputData)
         .then((response) => {
-          setMakePresetStatus({fetched: true, fetching: false, data: response.presetId});
+          const link = new URL(window.location.href);
+          link.searchParams.set(PRESET_QUERY_NAME, response.presetId);
+
+          setMakePresetStatus({fetched: true, fetching: false, data: link.href});
+        })
+        .catch(() => {
+          setMakePresetStatus({fetched: true, fetching: false, data: null});
         });
     } else {
       onNotLoggedInInternal();
@@ -58,29 +65,29 @@ export const useAtkSkillInput = (onNotLoggedIn?: () => void): UseAtkSkillInputRe
     }
   };
 
-  if (isNotFetched(fetchStatus)) {
+  if (isNotFetched(getPresetStatus)) {
     if (context?.session) {
-      setFetchStatus({...fetchStatus, fetching: true});
+      setGetPresetStatus({...getPresetStatus, fetching: true});
       ApiRequestSender.getPresetAtkSkill(context.session.user.id.toString(), presetId as string)
         .then((response) => {
-          setFetchStatus({
+          setGetPresetStatus({
             fetched: true,
             fetching: false,
-            data: overwriteInputData(fetchStatus.data, response.preset),
           });
+          setInputData(overwriteInputData(inputData, response.preset));
         });
       GoogleAnalytics.presetLoaded('atkSkill');
     } else {
-      setFetchStatus({...fetchStatus, fetched: true, fetching: false});
+      setGetPresetStatus({...getPresetStatus, fetched: true, fetching: false});
       onNotLoggedInInternal();
     }
   }
 
   return {
-    inputData: fetchStatus.data,
-    setInputData: (newData: InputData) => setFetchStatus({...fetchStatus, data: newData}),
-    getPresetStatus: fetchStatus,
-    setPresetStatus: makePresetStatus,
+    inputData,
+    setInputData,
+    getPresetStatus: getPresetStatus,
+    makePresetLink: makePresetStatus.data,
     makePreset,
   };
 };
diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index df01ef0e..26a038f3 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -7,7 +7,7 @@ import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/re
 import {useI18n} from '../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
-import {CommonModal, ModalState} from '../../../common/modal';
+import {ModalState} from '../../../common/modal';
 import {useAtkSkillInput} from '../hooks/preset';
 import {Filter} from './filter';
 import {DisplayItemPicker} from './limit';
@@ -30,13 +30,7 @@ export const AttackingSkillInput = ({isAllFetched, onSearchRequested}: InputProp
     title: '',
     message: '',
   });
-  const {inputData, setInputData, getPresetStatus} = useAtkSkillInput(() => {
-    setModalState({
-      ...modalState,
-      show: true,
-      message: t((t) => t.game.skillAtk.error.presetMustLogin),
-    });
-  });
+  const {inputData, setInputData, getPresetStatus} = useAtkSkillInput();
   const isSearchAllowed = isAllFetched && getPresetStatus.fetched;
 
   const {fetchStatus: conditionEnums, fetchFunction: fetchConditionEnums} = useFetchState<CategorizedConditionEnums>(
@@ -55,7 +49,6 @@ export const AttackingSkillInput = ({isAllFetched, onSearchRequested}: InputProp
 
   return (
     <>
-      <CommonModal modalState={modalState} setModalState={setModalState}/>
       <Filter
         inputData={inputData}
         setInputData={setInputData}
diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
index 2386ce71..b9a7a61e 100644
--- a/src/components/elements/gameData/skillAtk/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -1,17 +1,34 @@
 import React from 'react';
 
-import {screen, waitFor} from '@testing-library/react';
+import {fireEvent, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {renderReact} from '../../../../../test/render/main';
 import {translation as translationEN} from '../../../../i18n/translations/en/translation';
-import {overwriteInputData} from './in/utils/inputData';
+import * as warnings from '../warnings/overLength';
+import * as calcs from './in/utils/calculate';
 import * as utils from './in/utils/inputData';
+import {overwriteInputData} from './in/utils/inputData';
 import {AttackingSkillLookup} from './main';
+import * as output from './out/main';
 
 
 describe('ATK skill lookup', () => {
   const inputDataTemplate = utils.generateInputData();
+  let fnOverLengthCheck: jest.SpyInstance;
+
+  const waitForEntryProcessed = async () => {
+    await waitFor(() => expect(fnOverLengthCheck).toHaveBeenCalledTimes(1));
+  };
+
+  const waitForResourcesLoaded = async () => {
+    await waitFor(() => expect(screen.getByText(translationEN.misc.search)).not.toBeDisabled());
+  };
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+    fnOverLengthCheck = jest.spyOn(warnings, 'overLengthWarningCheck');
+  });
 
   it('only display damage info', async () => {
     jest.spyOn(utils, 'generateInputData').mockImplementation(() => (
@@ -183,7 +200,7 @@ describe('ATK skill lookup', () => {
       overwriteInputData(inputDataTemplate, {sortBy: 'sp'})
     ));
 
-    const {rerender} = renderReact(() => <AttackingSkillLookup/>);
+    renderReact(() => <AttackingSkillLookup/>);
 
     // Initial search
     const searchButton = await screen.findByText(
@@ -192,20 +209,86 @@ describe('ATK skill lookup', () => {
       {timeout: 2000},
     );
     userEvent.click(searchButton);
-    rerender();
 
+    fnOverLengthCheck.mockClear();
     const dispelOnly = screen.getByText(translationEN.game.skillAtk.name.filterDispelOnly);
     userEvent.click(dispelOnly);
-    rerender();
     userEvent.click(searchButton);
-    rerender();
 
-    // No ideas for checking if the order is really unchanged
-    // - Spy on scroll top won't work because the change is not immediately reflected
-    await new Promise((r) => setTimeout(r, 1000));
+    await waitForEntryProcessed();
 
     expect(screen.getByText('Order: SP', {selector: 'button'})).toBeInTheDocument();
   }, 10000);
 
-  it.todo('sorts on order changed');
+  it('re-search on order changed', async () => {
+    renderReact(() => <AttackingSkillLookup/>);
+
+    // Wait until all resources are loaded
+    await waitForResourcesLoaded();
+
+    const sortOrderButton = screen.getByText('Order: Damage', {selector: 'button'});
+    userEvent.click(sortOrderButton);
+
+    const sspOrderButton = screen.getByText(translationEN.game.skillAtk.spInfo.ssp);
+    fireEvent.click(sspOrderButton);
+
+    await waitForEntryProcessed();
+  });
+
+  it('does not allow creating preset if the user is anonymous', async () => {
+    renderReact(() => <AttackingSkillLookup/>);
+
+    // Wait until all resources are loaded
+    await waitForResourcesLoaded();
+
+    // Initial search
+    const searchButton = await screen.findByText(
+      translationEN.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
+    userEvent.click(searchButton);
+
+    await waitForEntryProcessed();
+
+    const shareButton = screen.getByText('', {selector: 'i.bi-share-fill'});
+    userEvent.click(shareButton);
+
+    const mustLoginWarning = translationEN.game.skillAtk.error.presetMustLogin;
+    await waitFor(() => expect(screen.getByText(mustLoginWarning)).toBeInTheDocument());
+  });
+
+  it('cannot create preset on load', async () => {
+    renderReact(() => <AttackingSkillLookup/>);
+
+    // Wait until all resources are loaded
+    await waitForResourcesLoaded();
+
+    const shareButton = screen.getByText('', {selector: 'i.bi-share-fill'});
+    expect(shareButton.parentNode).toBeDisabled();
+  });
+
+  it('cannot create preset if there are no results', async () => {
+    jest.spyOn(calcs, 'getCalculatedEntries').mockReturnValue([]);
+    const outputComponent = jest.spyOn(output, 'AttackingSkillOutput');
+
+    renderReact(() => <AttackingSkillLookup/>);
+
+    // Wait until all resources are loaded
+    await waitForResourcesLoaded();
+    outputComponent.mockClear();
+
+    // Initial search
+    const searchButton = await screen.findByText(
+      translationEN.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
+    userEvent.click(searchButton);
+
+    await waitFor(() => expect(outputComponent).toHaveBeenCalledTimes(1));
+
+    const shareButton = screen.getByText('', {selector: 'i.bi-share-fill'});
+    expect(shareButton.parentNode).toBeDisabled();
+  });
 });
diff --git a/src/components/elements/gameData/skillAtk/main.tsx b/src/components/elements/gameData/skillAtk/main.tsx
index cdab5376..34cd3948 100644
--- a/src/components/elements/gameData/skillAtk/main.tsx
+++ b/src/components/elements/gameData/skillAtk/main.tsx
@@ -14,6 +14,7 @@ import {getCalculatedEntries} from './in/utils/calculate';
 import {generateInputData} from './in/utils/inputData';
 import {AttackingSkillOutput} from './out/main';
 import {CalculatedSkillEntry} from './out/types';
+import {AttackingSkillPreset} from './preset/main';
 import {AttackingSkillSorter} from './sorter/main';
 
 
@@ -63,15 +64,18 @@ export const AttackingSkillLookup = () => {
           />
         </Col>
         <Col ref={entryCol} lg={8} className="px-0 px-lg-3">
-          <Row className="text-right mb-2">
+          <Form.Row className="text-right mb-1">
             <Col>
+              <AttackingSkillPreset isEnabled={!!calculatedEntries?.length}/>
+            </Col>
+            <Col xs="auto">
               <AttackingSkillSorter
                 onOrderPicked={(newInputData) => {
                   setCalculatedEntries(getCalculatedEntries(newInputData, attackingSkillEntries, elementBonuses));
                 }}
               />
             </Col>
-          </Row>
+          </Form.Row>
           <AttackingSkillOutput
             displayConfig={inputDataForward.display}
             calculatedEntries={calculatedEntries || []}
diff --git a/src/components/elements/gameData/skillAtk/preset/main.test.tsx b/src/components/elements/gameData/skillAtk/preset/main.test.tsx
new file mode 100644
index 00000000..b030cddf
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/preset/main.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {renderReact} from '../../../../../../test/render/main';
+import {ApiResponseCode} from '../../../../../api-def/api';
+import {ApiRequestSender} from '../../../../../utils/services/api/requestSender';
+import {AttackingSkillPreset} from './main';
+
+
+describe('ATK skill input preset manager', () => {
+  let fnMakePreset: jest.SpyInstance;
+
+  beforeEach(() => {
+    window.location.href = 'http://localhost:3000';
+    fnMakePreset = jest.spyOn(ApiRequestSender, 'setPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      presetId: 'presetLink',
+    });
+  });
+
+  it('makes a preset on clicking share', async () => {
+    renderReact(
+      () => <AttackingSkillPreset isEnabled/>,
+      {hasSession: true},
+    );
+
+    const shareButton = screen.getByText('', {selector: 'i.bi-share-fill'});
+    userEvent.click(shareButton);
+
+    await waitFor(() => expect(fnMakePreset).toHaveBeenCalled());
+  });
+});
diff --git a/src/components/elements/gameData/skillAtk/preset/main.tsx b/src/components/elements/gameData/skillAtk/preset/main.tsx
new file mode 100644
index 00000000..ec48e17c
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/preset/main.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+
+import Button from 'react-bootstrap/Button';
+import FormControl from 'react-bootstrap/FormControl';
+import InputGroup from 'react-bootstrap/InputGroup';
+import Spinner from 'react-bootstrap/Spinner';
+
+import {useI18n} from '../../../../../i18n/hook';
+import {CommonModal, ModalState} from '../../../common/modal';
+import {useAtkSkillInput} from '../hooks/preset';
+
+
+type CurrentStatus =
+  'notCreated' |
+  'creating' |
+  'copied' |
+  'createdNotCopied';
+
+const statusButtonIcon: { [status in CurrentStatus]: React.ReactElement } = {
+  notCreated: <i className="bi bi-share-fill"/>,
+  creating: <Spinner animation="grow" size="sm"/>,
+  copied: <i className="bi bi-check2"/>,
+  createdNotCopied: <i className="bi bi-clipboard"/>,
+};
+
+type Props = {
+  isEnabled: boolean,
+}
+
+export const AttackingSkillPreset = ({isEnabled}: Props) => {
+  const {t} = useI18n();
+
+  const [currentStatus, setCurrentStatus] = React.useState<CurrentStatus>('notCreated');
+  const [presetLink, setPresetLink] = React.useState<string>(t((t) => t.game.skillAtk.info.preset));
+  const [modalState, setModalState] = React.useState<ModalState>({
+    show: false,
+    title: '',
+    message: '',
+  });
+  const {inputData, makePreset, makePresetLink} = useAtkSkillInput(() => {
+    setCurrentStatus('notCreated');
+    setModalState({
+      ...modalState,
+      show: true,
+      message: t((t) => t.game.skillAtk.error.presetMustLogin),
+    });
+  });
+
+  const copyAndSetTimeout = (link: string) => {
+    navigator.clipboard.writeText(link).then(() => setCurrentStatus('copied'));
+    return setTimeout(() => setCurrentStatus('createdNotCopied'), 5000);
+  };
+
+  const onClickShareButton = () => {
+    if (currentStatus === 'notCreated') {
+      setCurrentStatus('creating');
+      makePreset();
+    }
+    if (currentStatus === 'createdNotCopied' && makePresetLink) {
+      const timeout: NodeJS.Timeout = copyAndSetTimeout(makePresetLink);
+      return () => clearTimeout(timeout);
+    }
+  };
+
+  React.useEffect(() => {
+    setCurrentStatus('notCreated');
+  }, [inputData]);
+
+  if (currentStatus === 'creating' && makePresetLink) {
+    setPresetLink(makePresetLink);
+    copyAndSetTimeout(makePresetLink);
+    setCurrentStatus('copied');
+  }
+
+  return (
+    <>
+      <CommonModal modalState={modalState} setModalState={setModalState}/>
+      <InputGroup className="mb-2 mr-sm-2">
+        <FormControl
+          className={`bg-black-32 ${currentStatus === 'copied' ? 'text-info' : 'text-light'}`} disabled
+          value={
+            currentStatus === 'copied' ?
+              t((t) => t.game.skillAtk.info.presetExpiry) :
+              presetLink
+          }
+        />
+        <InputGroup.Append>
+          <Button
+            className="d-flex align-items-center"
+            variant="outline-light" onClick={onClickShareButton}
+            disabled={!isEnabled || currentStatus === 'creating' || currentStatus === 'copied'}
+          >
+            {statusButtonIcon[currentStatus]}
+          </Button>
+        </InputGroup.Append>
+      </InputGroup>
+    </>
+  );
+};
diff --git a/src/components/elements/gameData/skillAtk/sorter/main.test.tsx b/src/components/elements/gameData/skillAtk/sorter/main.test.tsx
index df1079d7..1cbdcfd4 100644
--- a/src/components/elements/gameData/skillAtk/sorter/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/sorter/main.test.tsx
@@ -5,13 +5,10 @@ import userEvent from '@testing-library/user-event';
 
 import {renderReact} from '../../../../../../test/render/main';
 import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
-import {InputData} from '../in/types';
-import {generateInputData} from '../in/utils/inputData';
 import {AttackingSkillSorter} from './main';
 
 
 describe('ATK skill entry sorter', () => {
-  const inputData: InputData = generateInputData();
   let onOrderPicked: jest.Mock;
 
   beforeEach(() => {
@@ -19,13 +16,13 @@ describe('ATK skill entry sorter', () => {
   });
 
   it('shows the current sort order', async () => {
-    renderReact(() => <AttackingSkillSorter inputData={inputData} onOrderPicked={onOrderPicked}/>);
+    renderReact(() => <AttackingSkillSorter onOrderPicked={onOrderPicked}/>);
 
     expect(screen.getByText(`Order: ${translationEN.game.skillAtk.sort.damageDesc}`)).toBeInTheDocument();
   });
 
   it('dispatches on order picked event', async () => {
-    renderReact(() => <AttackingSkillSorter inputData={inputData} onOrderPicked={onOrderPicked}/>);
+    renderReact(() => <AttackingSkillSorter onOrderPicked={onOrderPicked}/>);
 
     const dropdownButton = screen.getByText(/Order/);
     userEvent.click(dropdownButton);
@@ -34,6 +31,5 @@ describe('ATK skill entry sorter', () => {
     fireEvent.click(orderButton);
 
     expect(onOrderPicked).toHaveBeenCalledTimes(1);
-    expect(onOrderPicked).toHaveBeenLastCalledWith('afflictionLengthPer1KSp');
   });
 });
diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts
index 061ecd8b..c4ed112f 100644
--- a/src/i18n/translations/cht/translation.ts
+++ b/src/i18n/translations/cht/translation.ts
@@ -228,6 +228,8 @@ export const translation: TranslationStruct = {
       info: {
         affliction: '部分異常狀態的時效為浮動值 (冰凍、暈眩較為常見)。以下計算中所使用的秒數為最大值。',
         animation: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
+        preset: '點選分享按鈕以生成參數網址。',
+        presetExpiry: '網址將於最後使用日期起 30 日後刪除。',
       },
     },
     tools: {
diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts
index 2b658925..0bf8036e 100644
--- a/src/i18n/translations/definition.ts
+++ b/src/i18n/translations/definition.ts
@@ -222,6 +222,8 @@ export type TranslationStruct = {
       info: {
         affliction: string,
         animation: string,
+        preset: string,
+        presetExpiry: string,
       },
     },
     tools: {
diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts
index 03558695..3970c81e 100644
--- a/src/i18n/translations/en/translation.ts
+++ b/src/i18n/translations/en/translation.ts
@@ -253,6 +253,8 @@ export const translation: TranslationStruct = {
         affliction: 'Duration for some afflictions are variable, especially freeze and stun. ' +
           'Calculations below are using the maximum duration.',
         animation: 'Animation info might be inaccurate. Actual animation provided in the analysis if available.',
+        preset: 'Click on the share button to create a preset link.',
+        presetExpiry: 'The link expires 30 days after the last usage.',
       },
     },
     tools: {
diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts
index 1d0b7f00..f3a4eccd 100644
--- a/src/i18n/translations/jp/translation.ts
+++ b/src/i18n/translations/jp/translation.ts
@@ -227,6 +227,8 @@ export const translation: TranslationStruct = {
       info: {
         affliction: '部分異常狀態的時效為浮動值 (冰凍、暈眩較為常見)。以下計算中所使用的秒數為最大值。',
         animation: '動畫資訊和實際可能有所落差。對應角色評測中有實際技能動畫。',
+        preset: '點選分享按鈕以生成參數網址。',
+        presetExpiry: '網址將於最後使用日期起 30 日後刪除。',
       },
     },
     tools: {

From de81f46749f5759a5cae5915f5ff8b4467d62b62 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Wed, 30 Jun 2021 00:38:49 -0500
Subject: [PATCH 60/61] IMP - Minor code refactor

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 .../elements/gameData/skillAtk/main.test.tsx  | 40 +++++++++++++++++--
 .../gameData/skillAtk/preset/main.tsx         | 40 ++++++++-----------
 .../gameData/skillAtk/preset/types.ts         |  5 +++
 3 files changed, 58 insertions(+), 27 deletions(-)
 create mode 100644 src/components/elements/gameData/skillAtk/preset/types.ts

diff --git a/src/components/elements/gameData/skillAtk/main.test.tsx b/src/components/elements/gameData/skillAtk/main.test.tsx
index b9a7a61e..e722aaaa 100644
--- a/src/components/elements/gameData/skillAtk/main.test.tsx
+++ b/src/components/elements/gameData/skillAtk/main.test.tsx
@@ -4,11 +4,15 @@ import {fireEvent, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {renderReact} from '../../../../../test/render/main';
+import {ApiResponseCode} from '../../../../api-def/api';
+import {translation as translationCHT} from '../../../../i18n/translations/cht/translation';
 import {translation as translationEN} from '../../../../i18n/translations/en/translation';
+import {ApiRequestSender} from '../../../../utils/services/api/requestSender';
 import * as warnings from '../warnings/overLength';
-import * as calcs from './in/utils/calculate';
+import {PRESET_QUERY_NAME} from './hooks/preset';
+import * as calc from './in/utils/calculate';
 import * as utils from './in/utils/inputData';
-import {overwriteInputData} from './in/utils/inputData';
+import {generateInputData, overwriteInputData} from './in/utils/inputData';
 import {AttackingSkillLookup} from './main';
 import * as output from './out/main';
 
@@ -269,7 +273,7 @@ describe('ATK skill lookup', () => {
   });
 
   it('cannot create preset if there are no results', async () => {
-    jest.spyOn(calcs, 'getCalculatedEntries').mockReturnValue([]);
+    jest.spyOn(calc, 'getCalculatedEntries').mockReturnValue([]);
     const outputComponent = jest.spyOn(output, 'AttackingSkillOutput');
 
     renderReact(() => <AttackingSkillLookup/>);
@@ -291,4 +295,34 @@ describe('ATK skill lookup', () => {
     const shareButton = screen.getByText('', {selector: 'i.bi-share-fill'});
     expect(shareButton.parentNode).toBeDisabled();
   });
+
+  it('loads input preset', async () => {
+    jest.spyOn(ApiRequestSender, 'getPresetAtkSkill').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+      preset: generateInputData({display: {actualDamage: true}}),
+    });
+
+    renderReact(
+      () => <AttackingSkillLookup/>,
+      {
+        hasSession: true,
+        routerOptions: {query: {[PRESET_QUERY_NAME]: 'preset'}},
+      },
+    );
+
+    const searchButton = await screen.findByText(
+      translationCHT.misc.search,
+      {selector: 'button:enabled'},
+      {timeout: 2000},
+    );
+    userEvent.click(searchButton);
+
+    await waitForEntryProcessed();
+    screen.debug(undefined, 100000);
+    // Actual damage from Wedding Aoi
+    expect(await screen.findByText('417,497')).toBeInTheDocument();
+  });
+
+  it.todo('reset preset status on input changed then re-search');
 });
diff --git a/src/components/elements/gameData/skillAtk/preset/main.tsx b/src/components/elements/gameData/skillAtk/preset/main.tsx
index ec48e17c..4034e951 100644
--- a/src/components/elements/gameData/skillAtk/preset/main.tsx
+++ b/src/components/elements/gameData/skillAtk/preset/main.tsx
@@ -8,15 +8,10 @@ import Spinner from 'react-bootstrap/Spinner';
 import {useI18n} from '../../../../../i18n/hook';
 import {CommonModal, ModalState} from '../../../common/modal';
 import {useAtkSkillInput} from '../hooks/preset';
+import {PresetStatus} from './types';
 
 
-type CurrentStatus =
-  'notCreated' |
-  'creating' |
-  'copied' |
-  'createdNotCopied';
-
-const statusButtonIcon: { [status in CurrentStatus]: React.ReactElement } = {
+const statusButtonIcon: { [status in PresetStatus]: React.ReactElement } = {
   notCreated: <i className="bi bi-share-fill"/>,
   creating: <Spinner animation="grow" size="sm"/>,
   copied: <i className="bi bi-check2"/>,
@@ -30,7 +25,7 @@ type Props = {
 export const AttackingSkillPreset = ({isEnabled}: Props) => {
   const {t} = useI18n();
 
-  const [currentStatus, setCurrentStatus] = React.useState<CurrentStatus>('notCreated');
+  const [status, setStatus] = React.useState<PresetStatus>('notCreated');
   const [presetLink, setPresetLink] = React.useState<string>(t((t) => t.game.skillAtk.info.preset));
   const [modalState, setModalState] = React.useState<ModalState>({
     show: false,
@@ -38,7 +33,7 @@ export const AttackingSkillPreset = ({isEnabled}: Props) => {
     message: '',
   });
   const {inputData, makePreset, makePresetLink} = useAtkSkillInput(() => {
-    setCurrentStatus('notCreated');
+    setStatus('notCreated');
     setModalState({
       ...modalState,
       show: true,
@@ -47,29 +42,26 @@ export const AttackingSkillPreset = ({isEnabled}: Props) => {
   });
 
   const copyAndSetTimeout = (link: string) => {
-    navigator.clipboard.writeText(link).then(() => setCurrentStatus('copied'));
-    return setTimeout(() => setCurrentStatus('createdNotCopied'), 5000);
+    navigator.clipboard.writeText(link).then(() => setStatus('copied'));
+    return setTimeout(() => setStatus('createdNotCopied'), 5000);
   };
 
   const onClickShareButton = () => {
-    if (currentStatus === 'notCreated') {
-      setCurrentStatus('creating');
+    console.log('render preset', inputData.display);
+    if (status === 'notCreated') {
+      setStatus('creating');
       makePreset();
     }
-    if (currentStatus === 'createdNotCopied' && makePresetLink) {
+    if (status === 'createdNotCopied' && makePresetLink) {
       const timeout: NodeJS.Timeout = copyAndSetTimeout(makePresetLink);
       return () => clearTimeout(timeout);
     }
   };
 
-  React.useEffect(() => {
-    setCurrentStatus('notCreated');
-  }, [inputData]);
-
-  if (currentStatus === 'creating' && makePresetLink) {
+  if (status === 'creating' && makePresetLink) {
     setPresetLink(makePresetLink);
     copyAndSetTimeout(makePresetLink);
-    setCurrentStatus('copied');
+    setStatus('copied');
   }
 
   return (
@@ -77,9 +69,9 @@ export const AttackingSkillPreset = ({isEnabled}: Props) => {
       <CommonModal modalState={modalState} setModalState={setModalState}/>
       <InputGroup className="mb-2 mr-sm-2">
         <FormControl
-          className={`bg-black-32 ${currentStatus === 'copied' ? 'text-info' : 'text-light'}`} disabled
+          className={`bg-black-32 ${status === 'copied' ? 'text-info' : 'text-light'}`} disabled
           value={
-            currentStatus === 'copied' ?
+            status === 'copied' ?
               t((t) => t.game.skillAtk.info.presetExpiry) :
               presetLink
           }
@@ -88,9 +80,9 @@ export const AttackingSkillPreset = ({isEnabled}: Props) => {
           <Button
             className="d-flex align-items-center"
             variant="outline-light" onClick={onClickShareButton}
-            disabled={!isEnabled || currentStatus === 'creating' || currentStatus === 'copied'}
+            disabled={!isEnabled || status === 'creating' || status === 'copied'}
           >
-            {statusButtonIcon[currentStatus]}
+            {statusButtonIcon[status]}
           </Button>
         </InputGroup.Append>
       </InputGroup>
diff --git a/src/components/elements/gameData/skillAtk/preset/types.ts b/src/components/elements/gameData/skillAtk/preset/types.ts
new file mode 100644
index 00000000..07dcd563
--- /dev/null
+++ b/src/components/elements/gameData/skillAtk/preset/types.ts
@@ -0,0 +1,5 @@
+export type PresetStatus =
+  'notCreated' |
+  'creating' |
+  'copied' |
+  'createdNotCopied';

From facb4d1e9df2e676fe3fa4a5dcd4aacf855164e7 Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Wed, 30 Jun 2021 00:43:38 -0500
Subject: [PATCH 61/61] FIX - ATK skill no info error modal not shown

Signed-off-by: RaenonX <raenonx0710@gmail.com>
---
 src/components/elements/gameData/skillAtk/in/main.tsx     | 3 ++-
 src/components/elements/gameData/skillAtk/preset/main.tsx | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/elements/gameData/skillAtk/in/main.tsx b/src/components/elements/gameData/skillAtk/in/main.tsx
index 26a038f3..1e40e539 100644
--- a/src/components/elements/gameData/skillAtk/in/main.tsx
+++ b/src/components/elements/gameData/skillAtk/in/main.tsx
@@ -7,7 +7,7 @@ import {CategorizedConditionEnums, ElementEnums} from '../../../../../api-def/re
 import {useI18n} from '../../../../../i18n/hook';
 import {ResourceLoader} from '../../../../../utils/services/resources/loader';
 import {useFetchState} from '../../../common/fetch';
-import {ModalState} from '../../../common/modal';
+import {CommonModal, ModalState} from '../../../common/modal';
 import {useAtkSkillInput} from '../hooks/preset';
 import {Filter} from './filter';
 import {DisplayItemPicker} from './limit';
@@ -49,6 +49,7 @@ export const AttackingSkillInput = ({isAllFetched, onSearchRequested}: InputProp
 
   return (
     <>
+      <CommonModal modalState={modalState} setModalState={setModalState}/>
       <Filter
         inputData={inputData}
         setInputData={setInputData}
diff --git a/src/components/elements/gameData/skillAtk/preset/main.tsx b/src/components/elements/gameData/skillAtk/preset/main.tsx
index 4034e951..ebc69fad 100644
--- a/src/components/elements/gameData/skillAtk/preset/main.tsx
+++ b/src/components/elements/gameData/skillAtk/preset/main.tsx
@@ -32,7 +32,7 @@ export const AttackingSkillPreset = ({isEnabled}: Props) => {
     title: '',
     message: '',
   });
-  const {inputData, makePreset, makePresetLink} = useAtkSkillInput(() => {
+  const {makePreset, makePresetLink} = useAtkSkillInput(() => {
     setStatus('notCreated');
     setModalState({
       ...modalState,
@@ -47,7 +47,6 @@ export const AttackingSkillPreset = ({isEnabled}: Props) => {
   };
 
   const onClickShareButton = () => {
-    console.log('render preset', inputData.display);
     if (status === 'notCreated') {
       setStatus('creating');
       makePreset();