From a1213642b9f0c22301944de5837be32c5d9eac59 Mon Sep 17 00:00:00 2001
From: Jeff Colombo <jeff@colombo.us>
Date: Sun, 3 Feb 2019 23:21:13 -0500
Subject: [PATCH] componentize stat display

---
 src/scss/index.scss                           |   1 -
 .../PokemonExplorer/PokemonExplorer.tsx       | 134 +++++-------------
 .../PokemonExplorer/StatDisplay.tsx           |  54 +++++++
 3 files changed, 88 insertions(+), 101 deletions(-)
 create mode 100644 src/ts/app/components/PokemonExplorer/StatDisplay.tsx

diff --git a/src/scss/index.scss b/src/scss/index.scss
index a9fe872..068ab77 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -43,7 +43,6 @@ a.active:not([href]):not([tabindex]) {
 
 a.list-item {
   position: relative;
-  margin-right: 20px;
 
   // borrowed from @import '~nes.css/scss/elements/radios';
 
diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
index 0e3a3d4..c1a938e 100644
--- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
+++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
@@ -9,6 +9,7 @@ import { formatDexNumber } from 'app/utils/formatter';
 import { IIndividualValues, IndividualValueKey } from './types';
 
 import { LeagueStatsList } from './LeagueStatsList';
+import { StatDisplay } from './StatDisplay';
 
 import * as styles from './styles/PokemonExplorer.scss';
 
@@ -118,9 +119,9 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
 
         const rankedGrade = rankedPokemon !== null ? Grade[rankedPokemon.speciesGrade] : '-';
         const rankedCp = rankedPokemon !== null ? rankedPokemon.cp : '-';
-        const rankedHp = rankedPokemon !== null ? rankedPokemon.hp : '-';
-        const rankedAtk = rankedPokemon !== null ? rankedPokemon.atk : '-';
-        const rankedDef = rankedPokemon !== null ? rankedPokemon.def : '-';
+        const rankedHp = rankedPokemon !== null ? rankedPokemon.hp : 0;
+        const rankedAtk = rankedPokemon !== null ? rankedPokemon.atk : 0;
+        const rankedDef = rankedPokemon !== null ? rankedPokemon.def : 0;
 
         const idIvLevelInput = 'iv-level-input';
         const idIvHpInput = 'iv-hp-input';
@@ -187,37 +188,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             }
         );
 
-        const progressStaminaCss = classNames(
-            'nes-progress',
-            {
-                'is-success': leaguePokemon.statsRank.staminaRank > 66,
-                'is-warning': leaguePokemon.statsRank.staminaRank >= 34 && leaguePokemon.statsRank.staminaRank <= 66,
-                'is-error': leaguePokemon.statsRank.staminaRank < 34,
-            }
-        );
-
-        const progressAttackCss = classNames(
-            'nes-progress',
-            {
-                'is-success': leaguePokemon.statsRank.attackRank > 66,
-                'is-warning': leaguePokemon.statsRank.attackRank >= 34 && leaguePokemon.statsRank.attackRank <= 66,
-                'is-error': leaguePokemon.statsRank.attackRank < 34,
-            }
-        );
-
-        const progressDefenseCss = classNames(
-            'nes-progress',
-            {
-                'is-success': leaguePokemon.statsRank.defenseRank > 66,
-                'is-warning': leaguePokemon.statsRank.defenseRank >= 34 && leaguePokemon.statsRank.defenseRank <= 66,
-                'is-error': leaguePokemon.statsRank.defenseRank < 34,
-            }
-        );
-
-        const baseStamina : number = leaguePokemon.stats.baseStamina;
-        const baseAttack : number = leaguePokemon.stats.baseAttack;
-        const baseDefense : number = leaguePokemon.stats.baseDefense;
-
         let type1 : JSX.Element | null = null;
         if (leaguePokemon.types.type1) {
             type1 = <div className={ `${pokemonType} ${leaguePokemon.types.type1}` }>{ leaguePokemon.types.type1 }</div>;
@@ -248,39 +218,21 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                             <h5>{ leaguePokemon.category }</h5>
                             <section className={ baseStatsCss }>
                                 <h3 className={ containerTitleCss }>Base Stats</h3>
-                                <div className={ styles.baseStatRow }>
-                                    <span>HP &nbsp;{ baseStamina < 100 && String.fromCharCode(160) }{ baseStamina }</span>
-                                    <progress
-                                        className={ progressStaminaCss }
-                                        max={ 100 }
-                                        value={ leaguePokemon.statsRank.staminaRank }
-                                        title={ `${leaguePokemon.statsRank.staminaRank}%` }
-                                    >
-                                        { leaguePokemon.statsRank.staminaRank }%
-                                    </progress>
-                                </div>
-                                <div className={ styles.baseStatRow }>
-                                    <span>ATK { baseAttack < 100 && String.fromCharCode(160) }{ baseAttack }</span>
-                                    <progress
-                                        className={ progressAttackCss }
-                                        max={ 100 }
-                                        value={ leaguePokemon.statsRank.attackRank }
-                                        title={ `${leaguePokemon.statsRank.attackRank}%` }
-                                    >
-                                        { leaguePokemon.statsRank.attackRank }%
-                                    </progress>
-                                </div>
-                                <div className={ styles.baseStatRow }>
-                                    <span>DEF { baseDefense < 100 && String.fromCharCode(160) }{ baseDefense }</span>
-                                    <progress
-                                        className={ progressDefenseCss }
-                                        max={ 100 }
-                                        value={ leaguePokemon.statsRank.defenseRank }
-                                        title={ `${leaguePokemon.statsRank.defenseRank}%` }
-                                    >
-                                        { leaguePokemon.statsRank.defenseRank }%
-                                    </progress>
-                                </div>
+                                <StatDisplay
+                                    statLabel={ `HP${ String.fromCharCode(160) }` }
+                                    statValue={ leaguePokemon.stats.baseStamina }
+                                    statRank={ leaguePokemon.statsRank.staminaRank }
+                                />
+                                <StatDisplay
+                                    statLabel="ATK"
+                                    statValue={ leaguePokemon.stats.baseAttack }
+                                    statRank={ leaguePokemon.statsRank.attackRank }
+                                />
+                                <StatDisplay
+                                    statLabel="DEF"
+                                    statValue={ leaguePokemon.stats.baseDefense }
+                                    statRank={ leaguePokemon.statsRank.defenseRank }
+                                />
                             </section>
                         </div>
                     </div>
@@ -360,39 +312,21 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                                 <div>CP <span>{ rankedCp }</span></div>
                             </div>
                             <div className={ styles.pokemonInfoRightColumn }>
-                                <div className={ styles.baseStatRow }>
-                                    <span>HP &nbsp;{ rankedHp < 100 && String.fromCharCode(160) }{ rankedHp }</span>
-                                    <progress
-                                        className={ progressStaminaCss }
-                                        max={ 100 }
-                                        value={ leaguePokemon.statsRank.staminaRank }
-                                        title={ `${leaguePokemon.statsRank.staminaRank}%` }
-                                    >
-                                        { leaguePokemon.statsRank.staminaRank }%
-                                    </progress>
-                                </div>
-                                <div className={ styles.baseStatRow }>
-                                    <span>ATK { rankedAtk < 100 && String.fromCharCode(160) }{ rankedAtk }</span>
-                                    <progress
-                                        className={ progressAttackCss }
-                                        max={ 100 }
-                                        value={ leaguePokemon.statsRank.attackRank }
-                                        title={ `${leaguePokemon.statsRank.attackRank}%` }
-                                    >
-                                        { leaguePokemon.statsRank.attackRank }%
-                                    </progress>
-                                </div>
-                                <div className={ styles.baseStatRow }>
-                                    <span>DEF { rankedDef < 100 && String.fromCharCode(160) }{ rankedDef }</span>
-                                    <progress
-                                        className={ progressDefenseCss }
-                                        max={ 100 }
-                                        value={ leaguePokemon.statsRank.defenseRank }
-                                        title={ `${leaguePokemon.statsRank.defenseRank}%` }
-                                    >
-                                        { leaguePokemon.statsRank.defenseRank }%
-                                    </progress>
-                                </div>
+                                <StatDisplay
+                                    statLabel={ `HP${ String.fromCharCode(160) }` }
+                                    statValue={ rankedHp }
+                                    statRank={ leaguePokemon.statsRank.staminaRank }
+                                />
+                                <StatDisplay
+                                    statLabel="ATK"
+                                    statValue={ rankedAtk }
+                                    statRank={ leaguePokemon.statsRank.attackRank }
+                                />
+                                <StatDisplay
+                                    statLabel="DEF"
+                                    statValue={ rankedDef }
+                                    statRank={ leaguePokemon.statsRank.defenseRank }
+                                />
                             </div>
                         </div>
                     </section>
diff --git a/src/ts/app/components/PokemonExplorer/StatDisplay.tsx b/src/ts/app/components/PokemonExplorer/StatDisplay.tsx
new file mode 100644
index 0000000..e2e5719
--- /dev/null
+++ b/src/ts/app/components/PokemonExplorer/StatDisplay.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import * as styles from './styles/PokemonExplorer.scss';
+
+export interface IStartDisplayProps {
+    statLabel : string;
+    statValue : number | null;
+    statRank : number;
+}
+
+export class StatDisplay extends React.Component<IStartDisplayProps, object> {
+
+    public render() {
+        const {
+            statLabel,
+            statValue,
+            statRank,
+        } = this.props;
+
+        const progressStatCss = classNames(
+            'nes-progress',
+            {
+                'is-success': statRank > 66,
+                'is-warning': statRank >= 34 && statRank <= 66,
+                'is-error': statRank < 34,
+            }
+        );
+
+        let spacer = ' ';
+        let displayValue : number | string | null = statValue;
+        if (statValue === null) {
+            displayValue = '-';
+            spacer += String.fromCharCode(160) + String.fromCharCode(160);
+        } else if (statValue < 100) {
+            spacer += String.fromCharCode(160);
+        }
+
+        return (
+            <div className={ styles.baseStatRow }>
+                <span>{ statLabel }{ spacer }{ displayValue }</span>
+                <progress
+                    className={ progressStatCss }
+                    max={ 100 }
+                    value={ statRank }
+                    title={ `${statRank}%` }
+                >
+                    { statRank }%
+                </progress>
+            </div>
+        );
+    }
+}