show rank info

src/ts/app/PokemonApp.tsx

@@ -65,6 +65,10 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
         dispatch(ActionsPokemonSelectList.fetchPokemonLeagueStats(pokemonId))
         .then((leaguePokemon) => {
             dispatch(ActionsPokemonSelectList.setActivePokemonIndex(pokemonIndex));
+            dispatch(ActionsPokemonExplorer.setIvLevel(null));
+            dispatch(ActionsPokemonExplorer.setIvHp(null));
+            dispatch(ActionsPokemonExplorer.setIvAtk(null));
+            dispatch(ActionsPokemonExplorer.setIvDef(null));
             dispatch(ActionsPokemonExplorer.setLeaguePokemon(leaguePokemon));
         })
         .catch((error) => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ILeaguePokemon } from 'app/models/Pokemon';
+import { Grade, ILeaguePokemon, IStats } from 'app/models/Pokemon';
 
 import { IIndividualValues, IndividualValueKey } from './types';
 
@@ -13,6 +13,9 @@ export interface IPokemonExplorerProps {
 }
 
 interface IState {
+    form : {
+        level : string;
+    };
 }
 
 export class PokemonExplorer extends React.Component<IPokemonExplorerProps, IState> {
@@ -28,6 +31,12 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
     constructor(props : IPokemonExplorerProps) {
         super(props);
 
+        this.state = {
+            form: {
+                level: '',
+            }
+        };
+
         this.onChangeHp = this.onChangeIvFactory('hp');
         this.onChangeAtk = this.onChangeIvFactory('atk');
         this.onChangeDef = this.onChangeIvFactory('def');
@@ -38,11 +47,57 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             individualValues,
             leaguePokemon
         } = this.props;
+        const league = 'great'; // TODO: this should be a prop
 
-        const placeholderLevel = '40';
+        let rankedPokemon : IStats | null = null;
-        const placeholderHp = '15';
+        let placeholderLevel = '';
-        const placeholderAtk = '15';
+        let placeholderHp = '';
-        const placeholderDef = '15';
+        let placeholderAtk = '';
+        let placeholderDef = '';
+
+        const individualValueLevel = this.state.form.level !== '' ? this.state.form.level : individualValues.level;
+
+        // default to first pokemon (should be S tier)
+        if (individualValueLevel === null &&
+            individualValues.hp === null &&
+            individualValues.atk === null &&
+            individualValues.def === null
+        ) {
+            rankedPokemon = leaguePokemon.pvp[league][0];
+            placeholderLevel = '' + rankedPokemon.level;
+            placeholderHp = '' + rankedPokemon.ivHp;
+            placeholderAtk = '' + rankedPokemon.ivAtk;
+            placeholderDef = '' + rankedPokemon.ivDef;
+
+        // a full spec'd pokemon has been entered
+        } else if (individualValueLevel !== null &&
+            individualValues.hp !== null &&
+            individualValues.atk !== null &&
+            individualValues.def !== null
+        ) {
+            leaguePokemon.pvp[league].some((stats) => {
+                if (individualValueLevel === stats.level &&
+                    individualValues.hp === stats.ivHp &&
+                    individualValues.atk === stats.ivAtk &&
+                    individualValues.def === stats.ivDef
+                ) {
+                    rankedPokemon = stats;
+                    return true;
+                }
+                return false;
+            });
+
+            // we don't have the data for this terrible mon
+            if (rankedPokemon === null) {
+                rankedPokemon = leaguePokemon.pvp[league][leaguePokemon.pvp[league].length - 1];
+            }
+        }
+
+        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 : '-';
 
         return (
             <div id="pokemon-explorer">
@@ -66,9 +121,9 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                             type="number"
                             min={ this.MIN_LEVEL }
                             max={ this.MAX_LEVEL }
-                            maxLength={ 2 }
+                            step={ 0.5 }
                             onChange={ this.onChangeLevel }
-                            value={ individualValues.level || '' }
+                            value={ individualValueLevel || '' }
                             placeholder={ placeholderLevel }
                         />
                     </div>
@@ -113,11 +168,11 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                     </div>
                 </div>
                 <div className="league-pokemon-rank">
-                    <div className="league-pokemon-stat pokemon-rank"><span>{  }</span> Rank</div>
+                    <div className="league-pokemon-stat pokemon-rank"><span>{ rankedGrade }</span> Rank</div>
-                    <div className="league-pokemon-stat pokemon-cp">CP <span>{  }</span></div>
+                    <div className="league-pokemon-stat pokemon-cp">CP <span>{ rankedCp }</span></div>
-                    <div className="league-pokemon-stat"><span>{  }</span> HP</div>
+                    <div className="league-pokemon-stat"><span>{ rankedHp }</span> HP</div>
-                    <div className="league-pokemon-stat"><span>{  }</span> ATK</div>
+                    <div className="league-pokemon-stat"><span>{ rankedAtk }</span> ATK</div>
-                    <div className="league-pokemon-stat"><span>{  }</span> DEF</div>
+                    <div className="league-pokemon-stat"><span>{ rankedDef }</span> DEF</div>
                 </div>
             </div>
         );
@@ -136,11 +191,15 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
 
     private readonly onChangeLevel = (event : React.ChangeEvent<HTMLInputElement>) => {
         const raw = event.currentTarget.value;
-        const value = parseInt(raw, 10);
+        const value = parseFloat(raw);
-        if (raw === '' + value && value >= this.MIN_LEVEL && value <= this.MAX_LEVEL) {
+
+        this.setState({ form: { level: '' } });
+        if (raw === '' + value && value >= this.MIN_LEVEL && value <= this.MAX_LEVEL && value % 0.5 === 0) {
             this.props.handleChangeIndividualValue('level', value);
         } else if (raw === '') {
             this.props.handleChangeIndividualValue('level', null);
+        } else if (raw.charAt(raw.length) === '.') {
+            this.setState({ form: { level: raw } });
         }
     }