add iv display radio for list/manual

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -29,10 +29,12 @@ export interface IPokemonExplorerProps {
     handleChangeLeague : (league : League) => void;
 }
 
+enum IvDisplayMode {
+    MANUAL = 'manual',
+    LIST = 'list',
+}
 interface IState {
-    form : {
+    ivDisplayMode : IvDisplayMode;
-        level : string;
-    };
 }
 
 export class PokemonExplorer extends React.Component<IPokemonExplorerProps, IState> {
@@ -63,9 +65,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
         super(props);
 
         this.state = {
-            form: {
+            ivDisplayMode: IvDisplayMode.MANUAL,
-                level: '',
-            }
         };
     }
 
@@ -78,6 +78,10 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             handleMaximizeLevel,
         } = this.props;
 
+        const {
+            ivDisplayMode,
+        } = this.state;
+
         let rankedPokemon : IStats | null = null;
 
         const dex = formatDexNumber(leaguePokemon.dex);
@@ -153,13 +157,21 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
         const containerTitleCss = classNames(
             'title',
         );
+        const ivContainerTitleCss = classNames(
+            containerTitleCss,
+            styles.ivContainerTitle
+        );
         const baseStatsCss = classNames(
             styles.pokemonBaseStats,
             containerCss,
         );
         const formContainerCss = classNames(
             containerCss,
+            styles.ivsContainer,
             'form',
+            {
+                [ styles.diplayingIvList ]: ivDisplayMode === IvDisplayMode.LIST,
+            }
         );
         const leaugeRankCss = classNames(
             styles.leaguePokemonRank,
@@ -223,7 +235,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
 
         return (
             <div className={ styles.wrapper }>
-                <div>
                 <div className={ styles.pokemonInfoWrapper }>
                     <div className={ styles.pokemonInfoLeftColumn }>
                         <i className={ pokemonIconCss } />
@@ -264,13 +275,44 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                     handleLeagueSelect={ this.handleLeagueSelect }
                 />
                 <section className={ formContainerCss }>
-                        <h5 className={ containerTitleCss }>IVs</h5>
+                    <h5 className={ ivContainerTitleCss }>
+                        <span>IVs</span>
+                        <label>
+                            <input
+                                className="nes-radio"
+                                type="radio"
+                                value="manual"
+                                checked={ ivDisplayMode === IvDisplayMode.MANUAL }
+                                onChange={ this.handleIvDisplayModeManual }
+                            /> <span>Manual</span>
+                        </label>
+                        <label>
+                            <input
+                                className="nes-radio"
+                                type="radio"
+                                value="list"
+                                checked={ ivDisplayMode === IvDisplayMode.LIST }
+                                onChange={ this.handleIvDisplayModeList }
+                            /> <span>List</span>
+                        </label>
+                    </h5>
+                    { ivDisplayMode === IvDisplayMode.MANUAL &&
                         <IvForm
                             ivs={ individualValues }
                             placeholder={ leaguePokemon.pvp[activeLeague][0] }
                             handleChangeIndividualValue={ handleChangeIndividualValue }
                             handleMaximizeLevel={ handleMaximizeLevel }
                         />
+                    }
+                    { ivDisplayMode === IvDisplayMode.LIST &&
+                        <LeagueStatsList
+                            activePokemonId={ leaguePokemon.id }
+                            activePokemonForm={ leaguePokemon.form }
+                            activeIndividualValues={ individualValues }
+                            leagueStatsList={ leaguePokemon.pvp[activeLeague] }
+                            handleActivateLeagueStats={ this.handleActivateLeagueStats }
+                        />
+                    }
                 </section>
                 <section className={ leaugeRankCss }>
                     <h5 className={ containerTitleCss }>Rank</h5>
@@ -304,14 +346,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                     </div>
                 </section>
             </div>
-                <LeagueStatsList
-                    activePokemonId={ leaguePokemon.id }
-                    activePokemonForm={ leaguePokemon.form }
-                    activeIndividualValues={ individualValues }
-                    leagueStatsList={ leaguePokemon.pvp[activeLeague] }
-                    handleActivateLeagueStats={ this.handleActivateLeagueStats }
-                />
-            </div>
         );
     }
 
@@ -327,4 +361,12 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
     private readonly handleLeagueSelect = (league : League) => {
         this.props.handleChangeLeague(league);
     }
+
+    private readonly handleIvDisplayModeManual = () => {
+        this.setState({ ivDisplayMode: IvDisplayMode.MANUAL });
+    }
+
+    private readonly handleIvDisplayModeList = () => {
+        this.setState({ ivDisplayMode: IvDisplayMode.LIST });
+    }
 }

src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss

@@ -1,7 +1,12 @@
 @import 'styles/Variables.scss';
 
 .selectList {
-  flex: 1;
+  height: 100%;
+  flex-grow: 1;
+
+  /* for Firefox */
+  // min-height: 0;
+
   display: flex;
   overflow: hidden;
 

src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss

@@ -3,7 +3,7 @@
 .wrapper {
   height: 100vh;
   margin: 0 auto;
-  flex-basis: 15rem;
+  flex-basis: 30rem;
   display: flex;
   flex-flow: column nowrap;
 }
@@ -106,3 +106,44 @@
   align-items: start;
   align-self: stretch;
 }
+
+.ivsContainer {
+  flex: 0 2 auto;
+  display: flex;
+  flex-flow: column nowrap;
+
+  /* for Firefox */
+  // min-height: 0;
+
+  :global(.title).ivContainerTitle {
+    display: flex;
+    justify-content: flex-end;
+    background-color: transparent;
+
+    & > * {
+      background-color: $main-background-color;
+
+      &:first-child {
+        margin-right: auto;
+        padding: 0 0.5em;
+      }
+
+      &:last-child {
+        padding-right: 0.5em;
+      }
+    }
+  }
+
+  &.diplayingIvList {
+    // .nes-container.title has `padding: 2rem;`
+    $border-offset: 6px;
+    padding: 2rem $border-offset $border-offset;
+
+    :global(.title).ivContainerTitle {
+      margin-bottom: 0;
+      margin-right: -$border-offset;
+      margin-left: -$border-offset;
+      padding: 0 2.5rem;
+    }
+  }
+}

src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts

@@ -1,7 +1,10 @@
 // This file is automatically generated.
 // Please do not change this file!
 export const dexHeader: string;
+export const diplayingIvList: string;
 export const formHeader: string;
+export const ivContainerTitle: string;
+export const ivsContainer: string;
 export const leaguePokemonRank: string;
 export const pokemonBaseStats: string;
 export const pokemonInfoLeftColumn: string;