league functionality, stats list layout

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>
         );
     }

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>

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;
+      }
+    }
+  }
+}

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;