componentize iv form

This commit is contained in:
Jeff Colombo 2019-02-13 21:36:06 -05:00
parent aaaec295a2
commit 44a734bcac
10 changed files with 278 additions and 222 deletions

View File

@ -0,0 +1,186 @@
import React from 'react';
import classNames from 'classnames';
import { IIndividualValues, IndividualValueKey } from './types';
import * as styles from './styles/IvForm.scss';
export interface IIvFormProps {
ivs : IIndividualValues;
placeholder : IIndividualValues;
handleChangeIndividualValue : (stat : IndividualValueKey, value : number | null) => void;
handleMaximizeLevel : () => void;
}
interface IState {
form : {
level : string;
};
}
export class IvForm extends React.Component<IIvFormProps, IState> {
private readonly MIN_LEVEL = 1;
private readonly MAX_LEVEL = 40;
private readonly MIN_IV = 0;
private readonly MAX_IV = 15;
private handleChangeHp : (event : React.ChangeEvent<HTMLInputElement>) => void;
private handleChangeAtk : (event : React.ChangeEvent<HTMLInputElement>) => void;
private handleChangeDef : (event : React.ChangeEvent<HTMLInputElement>) => void;
constructor(props : IIvFormProps) {
super(props);
this.state = {
form: {
level: '',
}
};
this.handleChangeHp = this.handleChangeIvFactory('hp');
this.handleChangeAtk = this.handleChangeIvFactory('atk');
this.handleChangeDef = this.handleChangeIvFactory('def');
}
public render() {
const {
ivs,
placeholder,
} = this.props;
const idIvLevelInput = 'iv-level-input';
const idIvHpInput = 'iv-hp-input';
const idIvAtkInput = 'iv-atk-input';
const idIvDefInput = 'iv-def-input';
const fieldCss = classNames(
'nes-field',
);
const inlineFieldCss = classNames(
fieldCss,
'is-inline',
styles.fieldRow,
);
const inputTextCss = classNames(
'nes-input',
styles.ivInput,
);
const inputTextLevelCss = classNames(
inputTextCss,
styles.levelInput,
);
const maxButtonCss = classNames(
'nes-btn',
{
'is-primary': ivs.ivHp !== null && ivs.ivAtk !== null && ivs.ivDef !== null,
'is-disabled': ivs.ivHp === null || ivs.ivAtk === null || ivs.ivDef === null,
},
);
const ivLevel = this.state.form.level !== '' ? parseInt(this.state.form.level, 10) : ivs.level;
const showPlaceholder = ivs.level === null && ivs.ivHp === null && ivs.ivAtk === null && ivs.ivDef === null;
return [(
<div key="iv-form-row-1" className={ inlineFieldCss }>
<label htmlFor={ idIvHpInput }>HP</label>
<input
name="hp"
type="number"
id={ idIvHpInput }
className={ inputTextCss }
min={ this.MIN_IV }
max={ this.MAX_IV }
maxLength={ 2 }
onChange={ this.handleChangeHp }
value={ ivs.ivHp !== null ? ivs.ivHp : '' }
placeholder={ showPlaceholder ? '' + placeholder.ivHp : '' }
/>
<label htmlFor={ idIvAtkInput }>ATK</label>
<input
name="atk"
type="number"
id={ idIvAtkInput }
className={ inputTextCss }
min={ this.MIN_IV }
max={ this.MAX_IV }
maxLength={ 2 }
onChange={ this.handleChangeAtk }
value={ ivs.ivAtk !== null ? ivs.ivAtk : '' }
placeholder={ showPlaceholder ? '' + placeholder.ivAtk : '' }
/>
<label htmlFor={ idIvDefInput }>DEF</label>
<input
name="def"
type="number"
id={ idIvDefInput }
className={ inputTextCss }
min={ this.MIN_IV }
max={ this.MAX_IV }
maxLength={ 2 }
onChange={ this.handleChangeDef }
value={ ivs.ivDef !== null ? ivs.ivDef : '' }
placeholder={ showPlaceholder ? '' + placeholder.ivDef : '' }
/>
</div>
), (
<div key="iv-form-row-2" className={ inlineFieldCss }>
<div className={ inlineFieldCss }>
<label htmlFor={ idIvLevelInput }>Lv</label>
<input
name="level"
type="number"
id={ idIvLevelInput }
className={ inputTextLevelCss }
min={ this.MIN_LEVEL }
max={ this.MAX_LEVEL }
step={ 0.5 }
onChange={ this.handleChangeLevel }
value={ ivLevel !== null ? ivLevel : '' }
placeholder={ showPlaceholder ? '' + placeholder.level : '' }
/>
</div>
<button
type="button"
className={ maxButtonCss }
disabled={ ivs.ivHp === null || ivs.ivAtk === null || ivs.ivDef === null }
onClick={ this.handleClickMaximizeLevel }
>
MAX LEAGUE Lv
</button>
</div>
)];
}
private readonly handleChangeLevel = (event : React.ChangeEvent<HTMLInputElement>) => {
const raw = event.currentTarget.value;
const value = parseFloat(raw);
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 } });
}
}
private readonly handleClickMaximizeLevel = () => {
this.props.handleMaximizeLevel();
}
private readonly handleChangeIvFactory = (type : IndividualValueKey) => {
return (event : React.ChangeEvent<HTMLInputElement>) => {
const raw = event.currentTarget.value;
const value = parseInt(raw, 10);
if (raw === '' + value && value >= this.MIN_IV && value <= this.MAX_IV) {
this.props.handleChangeIndividualValue(type, value);
} else if (raw === '') {
this.props.handleChangeIndividualValue(type, null);
}
};
}
}

View File

@ -57,15 +57,15 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
if (this.listRef.current !== null) {
this.listRef.current.scrollToItem(0);
}
} else if (activeIvs.level !== null && activeIvs.hp !== null && activeIvs.atk !== null && activeIvs.def !== null) {
} else if (activeIvs.level !== null && activeIvs.ivHp !== null && activeIvs.ivAtk !== null && activeIvs.ivDef !== null) {
let activeIndex = this.state.activeIndex;
if (activeIndex === -1) {
// there is no current index, wich means the user is entering in the IVs by hand
// now we will look through the list to see if we can find a match
this.props.leagueStatsList.some((stats, index) => {
if (activeIvs.hp === stats.ivHp &&
activeIvs.atk === stats.ivAtk &&
activeIvs.def === stats.ivDef
if (activeIvs.ivHp === stats.ivHp &&
activeIvs.ivAtk === stats.ivAtk &&
activeIvs.ivDef === stats.ivDef
) {
this.setState({ activeIndex: index });
activeIndex = index;
@ -77,7 +77,7 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
if (activeIndex > -1) {
const stateStats = this.props.leagueStatsList[activeIndex];
if (activeIvs.hp === stateStats.ivHp && activeIvs.atk === stateStats.ivAtk && activeIvs.def === stateStats.ivDef) {
if (activeIvs.ivHp === stateStats.ivHp && activeIvs.ivAtk === stateStats.ivAtk && activeIvs.ivDef === stateStats.ivDef) {
// the current IVs belong to the stats at the active index, so scroll to active stats
if (this.listRef.current !== null) {
this.listRef.current.scrollToItem(activeIndex, 'center');
@ -142,9 +142,9 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
styles.listItem,
{
active: activeIvs.level === stats.level &&
activeIvs.hp === stats.ivHp &&
activeIvs.atk === stats.ivAtk &&
activeIvs.def === stats.ivDef,
activeIvs.ivHp === stats.ivHp &&
activeIvs.ivAtk === stats.ivAtk &&
activeIvs.ivDef === stats.ivDef,
highlight: this.state.activeIndex === index,
}
);

View File

@ -4,13 +4,14 @@ import React from 'react';
import classNames from 'classnames';
import { IBestWorstStats, ILeaguePokemon, League } from 'app/models/League';
import { IBestWorstStats, ILeaguePokemon, League, MaxCpByLeague } from 'app/models/League';
import { Grade, IStats, } from 'app/models/Pokemon';
import { calculateCp, calculateStatAtLevel } from 'app/utils/calculator';
import { formatDexNumber, formatForm, formatType, Forms } from 'app/utils/formatter';
import { IIndividualValues, IndividualValueKey } from './types';
import { IvForm } from './IvForm';
import { LeagueSelector } from './LeagueSelector';
import { LeagueStatsList } from './LeagueStatsList';
import { StatDisplay } from './StatDisplay';
@ -58,15 +59,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
};
}
private readonly MIN_LEVEL = 1;
private readonly MAX_LEVEL = 40;
private readonly MIN_IV = 0;
private readonly MAX_IV = 15;
private handleChangeHp : (event : React.ChangeEvent<HTMLInputElement>) => void;
private handleChangeAtk : (event : React.ChangeEvent<HTMLInputElement>) => void;
private handleChangeDef : (event : React.ChangeEvent<HTMLInputElement>) => void;
constructor(props : IPokemonExplorerProps) {
super(props);
@ -75,51 +67,40 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
level: '',
}
};
this.handleChangeHp = this.handleChangeIvFactory('hp');
this.handleChangeAtk = this.handleChangeIvFactory('atk');
this.handleChangeDef = this.handleChangeIvFactory('def');
}
public render() {
const {
activeLeague,
individualValues,
leaguePokemon
leaguePokemon,
handleChangeIndividualValue,
handleMaximizeLevel,
} = this.props;
let rankedPokemon : IStats | null = null;
let placeholderLevel = '';
let placeholderHp = '';
let placeholderAtk = '';
let placeholderDef = '';
const dex = formatDexNumber(leaguePokemon.dex);
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
if (individualValues.level === null &&
individualValues.ivHp === null &&
individualValues.ivAtk === null &&
individualValues.ivDef === null
) {
rankedPokemon = leaguePokemon.pvp[activeLeague][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 && typeof individualValueLevel === 'number' &&
individualValues.hp !== null &&
individualValues.atk !== null &&
individualValues.def !== null
} else if (individualValues.level !== null &&
individualValues.ivHp !== null &&
individualValues.ivAtk !== null &&
individualValues.ivDef !== null
) {
leaguePokemon.pvp[activeLeague].some((stats) => {
if (individualValueLevel === stats.level &&
individualValues.hp === stats.ivHp &&
individualValues.atk === stats.ivAtk &&
individualValues.def === stats.ivDef
if (individualValues.level === stats.level &&
individualValues.ivHp === stats.ivHp &&
individualValues.ivAtk === stats.ivAtk &&
individualValues.ivDef === stats.ivDef
) {
rankedPokemon = stats;
return true;
@ -130,14 +111,14 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
// we don't have the data for this terrible mon
if (rankedPokemon === null) {
rankedPokemon = {
cp: calculateCp(leaguePokemon.stats, individualValueLevel, individualValues.hp, individualValues.atk, individualValues.def),
level: individualValueLevel,
ivHp: individualValues.hp,
ivAtk: individualValues.atk,
ivDef: individualValues.def,
hp: calculateStatAtLevel(individualValueLevel, leaguePokemon.stats.baseStamina, individualValues.hp),
atk: calculateStatAtLevel(individualValueLevel, leaguePokemon.stats.baseAttack, individualValues.atk),
def: calculateStatAtLevel(individualValueLevel, leaguePokemon.stats.baseDefense, individualValues.def),
cp: calculateCp(leaguePokemon.stats, individualValues.level, individualValues.ivHp, individualValues.ivAtk, individualValues.ivDef),
level: individualValues.level,
ivHp: individualValues.ivHp,
ivAtk: individualValues.ivAtk,
ivDef: individualValues.ivDef,
hp: calculateStatAtLevel(individualValues.level, leaguePokemon.stats.baseStamina, individualValues.ivHp),
atk: calculateStatAtLevel(individualValues.level, leaguePokemon.stats.baseAttack, individualValues.ivAtk),
def: calculateStatAtLevel(individualValues.level, leaguePokemon.stats.baseDefense, individualValues.ivDef),
total: 0,
speciesGrade: Grade.F,
metaGrade: Grade.F,
@ -157,10 +138,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
defenseStatRank,
} = PokemonExplorer.calculateStatRanks(rankedPokemon, leaguePokemon.statMax[activeLeague]);
const idIvLevelInput = 'iv-level-input';
const idIvHpInput = 'iv-hp-input';
const idIvAtkInput = 'iv-atk-input';
const idIvDefInput = 'iv-def-input';
const containerCss = classNames(
'nes-container',
'with-title',
@ -184,22 +161,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
containerCss,
'form',
);
const fieldCss = classNames(
'nes-field',
);
const inlineFieldCss = classNames(
fieldCss,
'is-inline',
styles.fieldRow,
);
const inputTextCss = classNames(
'nes-input',
styles.ivInput,
);
const inputTextLevelCss = classNames(
inputTextCss,
styles.levelInput,
);
const leaugeRankCss = classNames(
styles.leaguePokemonRank,
containerCss,
@ -207,13 +168,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
'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}`,
@ -311,78 +265,23 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
/>
<section className={ formContainerCss }>
<h5 className={ containerTitleCss }>IVs</h5>
<div className={ inlineFieldCss }>
<label htmlFor={ idIvHpInput }>HP</label>
<input
name="hp"
type="number"
id={ idIvHpInput }
className={ inputTextCss }
min={ this.MIN_IV }
max={ this.MAX_IV }
maxLength={ 2 }
onChange={ this.handleChangeHp }
value={ individualValues.hp !== null ? individualValues.hp : '' }
placeholder={ placeholderHp }
/>
<label htmlFor={ idIvAtkInput }>ATK</label>
<input
name="atk"
type="number"
id={ idIvAtkInput }
className={ inputTextCss }
min={ this.MIN_IV }
max={ this.MAX_IV }
maxLength={ 2 }
onChange={ this.handleChangeAtk }
value={ individualValues.atk !== null ? individualValues.atk : '' }
placeholder={ placeholderAtk }
/>
<label htmlFor={ idIvDefInput }>DEF</label>
<input
name="def"
type="number"
id={ idIvDefInput }
className={ inputTextCss }
min={ this.MIN_IV }
max={ this.MAX_IV }
maxLength={ 2 }
onChange={ this.handleChangeDef }
value={ individualValues.def !== null ? individualValues.def : '' }
placeholder={ placeholderDef }
/>
</div>
<div className={ inlineFieldCss }>
<div className={ inlineFieldCss }>
<label htmlFor={ idIvLevelInput }>Lv</label>
<input
name="level"
type="number"
id={ idIvLevelInput }
className={ inputTextLevelCss }
min={ this.MIN_LEVEL }
max={ this.MAX_LEVEL }
step={ 0.5 }
onChange={ this.handleChangeLevel }
value={ individualValueLevel !== null ? individualValueLevel : '' }
placeholder={ placeholderLevel }
/>
</div>
<button
type="button"
className={ maxButtonCss }
disabled={ individualValues.hp === null || individualValues.atk === null || individualValues.def === null }
onClick={ this.handleClickMaximizeLevel }
>
MAX LEAGUE Lv
</button>
</div>
<IvForm
ivs={ individualValues }
placeholder={ leaguePokemon.pvp[activeLeague][0] }
handleChangeIndividualValue={ handleChangeIndividualValue }
handleMaximizeLevel={ handleMaximizeLevel }
/>
</section>
<section className={ leaugeRankCss }>
<h5 className={ containerTitleCss }>Rank</h5>
<div className={ styles.pokemonInfoWraper }>
<div className={ styles.pokemonInfoLeftColumn }>
<div><h1 className={ styles.pokemonRankValue }>{ rankedGrade }</h1> Rank</div>
{ rankedPokemon === null || rankedPokemon.cp > MaxCpByLeague[activeLeague] &&
<div><h1 className={ styles.pokemonRankValue }>N/A</h1></div>
}
{ rankedPokemon !== null && rankedPokemon.cp <= MaxCpByLeague[activeLeague] &&
<div><h1 className={ styles.pokemonRankValue }>{ rankedGrade }</h1> Rank</div>
}
<div>CP <h1 className={ styles.pokemonRankValue }>{ rankedCp }</h1></div>
</div>
<div className={ styles.pokemonInfoRightColumn }>
@ -416,36 +315,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
);
}
private readonly handleChangeLevel = (event : React.ChangeEvent<HTMLInputElement>) => {
const raw = event.currentTarget.value;
const value = parseFloat(raw);
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 } });
}
}
private readonly handleClickMaximizeLevel = () => {
this.props.handleMaximizeLevel();
}
private readonly handleChangeIvFactory = (type : IndividualValueKey) => {
return (event : React.ChangeEvent<HTMLInputElement>) => {
const raw = event.currentTarget.value;
const value = parseInt(raw, 10);
if (raw === '' + value && value >= this.MIN_IV && value <= this.MAX_IV) {
this.props.handleChangeIndividualValue(type, value);
} else if (raw === '') {
this.props.handleChangeIndividualValue(type, null);
}
};
}
private readonly handleActivateLeagueStats = (stats : IStats) => {
const { handleChangeIndividualValue } = this.props;

View File

@ -16,11 +16,11 @@ export const setLeaguePokemon = (leaguePokemon : ILeaguePokemon | null) => actio
export const setIvLevel = (level : number | null) => action(PokemonExplorerActionTypes.SET_IV_LEVEL, { level });
export const setIvHp = (hp : number | null) => action(PokemonExplorerActionTypes.SET_IV_HP, { hp });
export const setIvHp = (ivHp : number | null) => action(PokemonExplorerActionTypes.SET_IV_HP, { ivHp });
export const setIvAtk = (atk : number | null) => action(PokemonExplorerActionTypes.SET_IV_ATK, { atk });
export const setIvAtk = (ivAtk : number | null) => action(PokemonExplorerActionTypes.SET_IV_ATK, { ivAtk });
export const setIvDef = (def : number | null) => action(PokemonExplorerActionTypes.SET_IV_DEF, { def });
export const setIvDef = (ivDef : number | null) => action(PokemonExplorerActionTypes.SET_IV_DEF, { ivDef });
export const setActiveLeague = (league : League) => action(PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE, { league });
@ -37,17 +37,17 @@ export const maximizeLevel = (
return async (dispatch, getState, extraArguments) => {
const pokemonExplorerState = getState().pokemonExplorerState;
const {
hp,
atk,
def,
ivHp,
ivAtk,
ivDef,
} = pokemonExplorerState.individualValues;
if (pokemonExplorerState.leaguePokemon !== null) {
const pokemonLeagueValues = pokemonExplorerState.leaguePokemon.pvp[pokemonExplorerState.league];
const statsSet = pokemonLeagueValues.some((stats) => {
if (((hp === null) || (stats.ivHp === hp)) &&
((atk === null) || (stats.ivAtk === atk)) &&
((def === null) || (stats.ivDef === def))
if (((ivHp === null) || (stats.ivHp === ivHp)) &&
((ivAtk === null) || (stats.ivAtk === ivAtk)) &&
((ivDef === null) || (stats.ivDef === ivDef))
) {
dispatch(setIvHp(stats.ivHp));
dispatch(setIvAtk(stats.ivAtk));
@ -57,8 +57,8 @@ export const maximizeLevel = (
}
return false;
});
if (!statsSet && hp !== null && atk !== null && def !== null) {
dispatch(setIvLevel(calculateMaxLevelForLeague(pokemonExplorerState.leaguePokemon.stats, hp, atk, def, pokemonExplorerState.league)));
if (!statsSet && ivHp !== null && ivAtk !== null && ivDef !== null) {
dispatch(setIvLevel(calculateMaxLevelForLeague(pokemonExplorerState.leaguePokemon.stats, ivHp, ivAtk, ivDef, pokemonExplorerState.league)));
}
}
};

View File

@ -14,9 +14,9 @@ export const initialState : IPokemonExplorerState = {
},
individualValues: {
level: null,
hp: null,
atk: null,
def: null,
ivHp: null,
ivAtk: null,
ivDef: null,
},
league: 'great',
};
@ -65,7 +65,7 @@ const reduceSetIvHp = (
...state,
individualValues: {
...state.individualValues,
hp: action.payload.hp,
ivHp: action.payload.ivHp,
}
});
@ -76,7 +76,7 @@ const reduceSetIvAtk = (
...state,
individualValues: {
...state.individualValues,
atk: action.payload.atk,
ivAtk: action.payload.ivAtk,
}
});
@ -87,7 +87,7 @@ const reduceSetIvDef = (
...state,
individualValues: {
...state.individualValues,
def: action.payload.def,
ivDef: action.payload.ivDef,
}
});

View File

@ -0,0 +1,22 @@
:global(.nes-field.is-inline) .ivInput {
width: 4.25em;
padding-left: 0.7em;
padding-right: 0.5em;
&.levelInput {
width: 6.5em;
}
}
:global(.nes-field.is-inline).fieldRow {
justify-content: space-between;
label {
flex-grow: 0;
margin-left: 1em;
&:first-child {
margin-left: 0;
}
}
}

View File

@ -0,0 +1,5 @@
// This file is automatically generated.
// Please do not change this file!
export const fieldRow: string;
export const ivInput: string;
export const levelInput: string;

View File

@ -106,26 +106,3 @@
align-items: start;
align-self: stretch;
}
:global(.nes-field.is-inline) .ivInput {
width: 4.25em;
padding-left: 0.7em;
padding-right: 0.5em;
&.levelInput {
width: 6.5em;
}
}
:global(.nes-field.is-inline).fieldRow {
justify-content: space-between;
label {
flex-grow: 0;
margin-left: 1em;
&:first-child {
margin-left: 0;
}
}
}

View File

@ -1,11 +1,8 @@
// This file is automatically generated.
// Please do not change this file!
export const dexHeader: string;
export const fieldRow: string;
export const formHeader: string;
export const ivInput: string;
export const leaguePokemonRank: string;
export const levelInput: string;
export const pokemonBaseStats: string;
export const pokemonInfoLeftColumn: string;
export const pokemonInfoRightColumn: string;

View File

@ -4,9 +4,9 @@ import { IMaxStats } from 'app/models/Pokemon';
export type IndividualValueKey = 'level' | 'hp' | 'atk' | 'def';
export interface IIndividualValues {
level : number | null;
hp : number | null;
atk : number | null;
def : number | null;
ivHp : number | null;
ivAtk : number | null;
ivDef : number | null;
}
export interface IPokemonExplorerState {