From 58a17849a4a4bdf0dab8242386c8be65d8a5ab7f Mon Sep 17 00:00:00 2001
From: Jeff Colombo <jeff@colombo.us>
Date: Wed, 6 Feb 2019 22:39:20 -0500
Subject: [PATCH] league functionality, stats list layout

---
 .../PokemonExplorer/LeagueStatsList.tsx       | 19 +++++++++--
 .../PokemonExplorer/PokemonExplorer.tsx       | 34 +++++++++----------
 .../styles/LeagueStatsList.scss               | 16 +++++++++
 .../styles/LeagueStatsList.scss.d.ts          |  1 +
 4 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
index 6f835bf..aa89523 100644
--- a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
+++ b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
@@ -123,11 +123,20 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
         );
     }
 
+    private padString(value : string, length : number) {
+        let output = value;
+        for (let i = value.length - length - 1; i >= 0; i--) {
+            output += String.fromCharCode(160);
+        }
+        return output;
+    }
+
     private rowFactory({ index, style } : IRowFactory) {
         const activeIvs = this.props.activeIndividualValues;
         const stats = this.props.leagueStatsList[index];
         const css = classNames(
-            'list-item',
+            'list-item', // global style
+            styles.listItem,
             {
                 active: activeIvs.level === stats.level &&
                     activeIvs.hp === stats.ivHp &&
@@ -140,6 +149,7 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
             this.props.handleActivateLeagueStats(stats);
             this.setState({ activeIndex: index });
         };
+
         return (
             <a
                 key={ index }
@@ -147,7 +157,12 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
                 className={ css }
                 onClick={ onClick }
             >
-                { `${ Grade[stats.speciesGrade] } ${ stats.cp } ${ stats.level } ${ stats.ivHp } ${ stats.ivAtk } ${ stats.ivDef }` }
+                <span>{ Grade[stats.speciesGrade] }</span>
+                <span>{ this.padString(stats.cp.toString(), 4) }</span>
+                <span>{ this.padString(stats.level.toString(), 4) }</span>
+                <span>{ this.padString(stats.ivHp.toString(), 2) }</span>
+                <span>{ this.padString(stats.ivAtk.toString(), 2) }</span>
+                <span>{ this.padString(stats.ivDef.toString(), 2) }</span>
             </a>
         );
     }
diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
index a21facb..4234e4c 100644
--- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
+++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
@@ -62,7 +62,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             individualValues,
             leaguePokemon
         } = this.props;
-        const league = 'great'; // TODO: this should be a prop
 
         let rankedPokemon : IStats | null = null;
         let placeholderLevel = '';
@@ -79,7 +78,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             individualValues.atk === null &&
             individualValues.def === null
         ) {
-            rankedPokemon = leaguePokemon.pvp[league][0];
+            rankedPokemon = leaguePokemon.pvp[activeLeague][0];
             placeholderLevel = '' + rankedPokemon.level;
             placeholderHp = '' + rankedPokemon.ivHp;
             placeholderAtk = '' + rankedPokemon.ivAtk;
@@ -91,7 +90,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             individualValues.atk !== null &&
             individualValues.def !== null
         ) {
-            leaguePokemon.pvp[league].some((stats) => {
+            leaguePokemon.pvp[activeLeague].some((stats) => {
                 if (individualValueLevel === stats.level &&
                     individualValues.hp === stats.ivHp &&
                     individualValues.atk === stats.ivAtk &&
@@ -134,63 +133,63 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
         const idIvDefInput = 'iv-def-input';
         const containerCss = classNames(
             'nes-container',
-            'with-title'
+            'with-title',
         );
         const containerRoundCss = classNames(
             containerCss,
-            'is-rounded'
+            'is-rounded',
         );
         const pokemonType = classNames(
             containerRoundCss,
-            styles.pokemonType
+            styles.pokemonType,
         );
         const containerTitleCss = classNames(
-            'title'
+            'title',
         );
         const baseStatsCss = classNames(
             styles.pokemonBaseStats,
-            containerCss
+            containerCss,
         );
         const formContainerCss = classNames(
             containerCss,
-            'form'
+            'form',
         );
         const fieldCss = classNames(
-            'nes-field'
+            'nes-field',
         );
         const inlineFieldCss = classNames(
             fieldCss,
             'is-inline',
-            styles.fieldRow
+            styles.fieldRow,
         );
         const inputTextCss = classNames(
             'nes-input',
-            styles.ivInput
+            styles.ivInput,
         );
         const inputTextLevelCss = classNames(
             inputTextCss,
-            styles.levelInput
+            styles.levelInput,
         );
         const leaugeRankCss = classNames(
             styles.leaguePokemonRank,
             containerCss,
             {
                 'with-title': false
-            }
+            },
         );
         const maxButtonCss = classNames(
             'nes-btn',
             {
                 'is-primary': individualValues.hp !== null && individualValues.atk !== null && individualValues.def !== null,
                 'is-disabled': individualValues.hp === null || individualValues.atk === null || individualValues.def === null,
-            }
+            },
         );
 
         const pokemonIconCss = classNames(
             `pokemon-${dex}`,
             {
                 alola: leaguePokemon.form === 'ALOLA'
-            }
+            },
         );
 
         let type1 : JSX.Element | null = null;
@@ -307,6 +306,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                             <button
                                 type="button"
                                 className={ maxButtonCss }
+                                disabled={ individualValues.hp === null || individualValues.atk === null || individualValues.def === null }
                                 onClick={ this.handleClickMaximizeLevel }
                             >
                                 MAX LEAGUE Lv
@@ -343,7 +343,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                 <LeagueStatsList
                     activePokemonId={ leaguePokemon.id }
                     activeIndividualValues={ individualValues }
-                    leagueStatsList={ leaguePokemon.pvp[league] }
+                    leagueStatsList={ leaguePokemon.pvp[activeLeague] }
                     handleActivateLeagueStats={ this.handleActivateLeagueStats }
                 />
             </div>
diff --git a/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss b/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss
index 5ec7e17..98be7b6 100644
--- a/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss
+++ b/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss
@@ -10,3 +10,19 @@
     overflow: auto;
   }
 }
+
+.listItem {
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+
+  &:global(.list-item) {
+    &:global(.active),
+    &:hover {
+      &::before {
+        top: 8px;
+        left: 10px;
+      }
+    }
+  }
+}
diff --git a/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts b/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts
index 9ad81ab..fd8b963 100644
--- a/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts
+++ b/src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts
@@ -1,3 +1,4 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const listItem: string;
 export const selectList: string;