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,94 +235,116 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
 
         return (
             <div className={ styles.wrapper }>
-                <div>
+                <div className={ styles.pokemonInfoWrapper }>
-                    <div className={ styles.pokemonInfoWrapper }>
+                    <div className={ styles.pokemonInfoLeftColumn }>
-                        <div className={ styles.pokemonInfoLeftColumn }>
+                        <i className={ pokemonIconCss } />
-                            <i className={ pokemonIconCss } />
+                        <h4 className={ styles.dexHeader }>No.{ dex }</h4>
-                            <h4 className={ styles.dexHeader }>No.{ dex }</h4>
+                        <div className={ styles.pokemonTypeWrapper }>
-                            <div className={ styles.pokemonTypeWrapper }>
+                            { type1 }
-                                { type1 }
+                            { type2 }
-                                { type2 }
-                            </div>
-                            { leaguePokemon.form !== POGOProtos.Enums.Form.FORM_UNSET &&
-                                <h6 className={ styles.formHeader }>{ formatForm(leaguePokemon.form) } Form</h6>
-                            }
-                        </div>
-                        <div className={ styles.pokemonInfoRightColumn }>
-                            <h2 className={ styles.pokemonName }>{ leaguePokemon.name }</h2>
-                            <h5>{ leaguePokemon.genus }</h5>
-                            <section className={ baseStatsCss }>
-                                <h3 className={ containerTitleCss }>Base Stats</h3>
-                                <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>
+                        { leaguePokemon.form !== POGOProtos.Enums.Form.FORM_UNSET &&
+                            <h6 className={ styles.formHeader }>{ formatForm(leaguePokemon.form) } Form</h6>
+                        }
                     </div>
-                    <LeagueSelector
+                    <div className={ styles.pokemonInfoRightColumn }>
-                        activeLeague={ activeLeague }
+                        <h2 className={ styles.pokemonName }>{ leaguePokemon.name }</h2>
-                        handleLeagueSelect={ this.handleLeagueSelect }
+                        <h5>{ leaguePokemon.genus }</h5>
-                    />
+                        <section className={ baseStatsCss }>
-                    <section className={ formContainerCss }>
+                            <h3 className={ containerTitleCss }>Base Stats</h3>
-                        <h5 className={ containerTitleCss }>IVs</h5>
+                            <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>
+                <LeagueSelector
+                    activeLeague={ activeLeague }
+                    handleLeagueSelect={ this.handleLeagueSelect }
+                />
+                <section className={ formContainerCss }>
+                    <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 }
                         />
-                    </section>
+                    }
-                    <section className={ leaugeRankCss }>
+                    { ivDisplayMode === IvDisplayMode.LIST &&
-                        <h5 className={ containerTitleCss }>Rank</h5>
+                        <LeagueStatsList
-                        <div className={ styles.pokemonInfoWraper }>
+                            activePokemonId={ leaguePokemon.id }
-                            <div className={ styles.pokemonInfoLeftColumn }>
+                            activePokemonForm={ leaguePokemon.form }
-                                { rankedPokemon === null || rankedPokemon.cp > MaxCpByLeague[activeLeague] &&
+                            activeIndividualValues={ individualValues }
-                                    <div><h1 className={ styles.pokemonRankValue }>N/A</h1></div>
+                            leagueStatsList={ leaguePokemon.pvp[activeLeague] }
-                                }
+                            handleActivateLeagueStats={ this.handleActivateLeagueStats }
-                                { rankedPokemon !== null && rankedPokemon.cp <= MaxCpByLeague[activeLeague] &&
+                        />
-                                    <div><h1 className={ styles.pokemonRankValue }>{ rankedGrade }</h1> Rank</div>
+                    }
-                                }
+                </section>
-                                <div>CP <h1 className={ styles.pokemonRankValue }>{ rankedCp }</h1></div>
+                <section className={ leaugeRankCss }>
-                            </div>
+                    <h5 className={ containerTitleCss }>Rank</h5>
-                            <div className={ styles.pokemonInfoRightColumn }>
+                    <div className={ styles.pokemonInfoWraper }>
-                                <StatDisplay
+                        <div className={ styles.pokemonInfoLeftColumn }>
-                                    statLabel={ `HP${ String.fromCharCode(160) }` }
+                            { rankedPokemon === null || rankedPokemon.cp > MaxCpByLeague[activeLeague] &&
-                                    statValue={ rankedHp }
+                                <div><h1 className={ styles.pokemonRankValue }>N/A</h1></div>
-                                    statRank={ staminaStatRank }
+                            }
-                                />
+                            { rankedPokemon !== null && rankedPokemon.cp <= MaxCpByLeague[activeLeague] &&
-                                <StatDisplay
+                                <div><h1 className={ styles.pokemonRankValue }>{ rankedGrade }</h1> Rank</div>
-                                    statLabel="ATK"
+                            }
-                                    statValue={ rankedAtk }
+                            <div>CP <h1 className={ styles.pokemonRankValue }>{ rankedCp }</h1></div>
-                                    statRank={ attackStatRank }
-                                />
-                                <StatDisplay
-                                    statLabel="DEF"
-                                    statValue={ rankedDef }
-                                    statRank={ defenseStatRank }
-                                />
-                            </div>
                         </div>
-                    </section>
+                        <div className={ styles.pokemonInfoRightColumn }>
-                </div>
+                            <StatDisplay
-                <LeagueStatsList
+                                statLabel={ `HP${ String.fromCharCode(160) }` }
-                    activePokemonId={ leaguePokemon.id }
+                                statValue={ rankedHp }
-                    activePokemonForm={ leaguePokemon.form }
+                                statRank={ staminaStatRank }
-                    activeIndividualValues={ individualValues }
+                            />
-                    leagueStatsList={ leaguePokemon.pvp[activeLeague] }
+                            <StatDisplay
-                    handleActivateLeagueStats={ this.handleActivateLeagueStats }
+                                statLabel="ATK"
-                />
+                                statValue={ rankedAtk }
+                                statRank={ attackStatRank }
+                            />
+                            <StatDisplay
+                                statLabel="DEF"
+                                statValue={ rankedDef }
+                                statRank={ defenseStatRank }
+                            />
+                        </div>
+                    </div>
+                </section>
             </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;