338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
import React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { Grade, ILeaguePokemon, IStats } from 'app/models/Pokemon';
|
|
import { calculateCp, calculateStatAtLevel } from 'app/utils/calculator';
|
|
|
|
import { IIndividualValues, IndividualValueKey } from './types';
|
|
|
|
import { LeagueStatsList } from './LeagueStatsList';
|
|
|
|
import * as styles from './styles/PokemonExplorer.scss';
|
|
|
|
export interface IPokemonExplorerProps {
|
|
isLoading : boolean;
|
|
leaguePokemon : ILeaguePokemon;
|
|
individualValues : IIndividualValues;
|
|
|
|
handleChangeIndividualValue : (stat : IndividualValueKey, value : number | null) => void;
|
|
}
|
|
|
|
interface IState {
|
|
form : {
|
|
level : string;
|
|
};
|
|
}
|
|
|
|
export class PokemonExplorer extends React.Component<IPokemonExplorerProps, 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 : IPokemonExplorerProps) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
form: {
|
|
level: '',
|
|
}
|
|
};
|
|
|
|
this.handleChangeHp = this.handleChangeIvFactory('hp');
|
|
this.handleChangeAtk = this.handleChangeIvFactory('atk');
|
|
this.handleChangeDef = this.handleChangeIvFactory('def');
|
|
}
|
|
|
|
public render() {
|
|
const {
|
|
individualValues,
|
|
leaguePokemon
|
|
} = this.props;
|
|
const league = 'great'; // TODO: this should be a prop
|
|
|
|
let rankedPokemon : IStats | null = null;
|
|
let placeholderLevel = '';
|
|
let placeholderHp = '';
|
|
let placeholderAtk = '';
|
|
let placeholderDef = '';
|
|
|
|
const dex = this.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
|
|
) {
|
|
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 && typeof individualValueLevel === 'number' &&
|
|
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 = {
|
|
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),
|
|
total: 0,
|
|
speciesGrade: Grade.F,
|
|
metaGrade: Grade.F,
|
|
};
|
|
rankedPokemon.total = rankedPokemon.hp + rankedPokemon.atk + rankedPokemon.def;
|
|
}
|
|
}
|
|
|
|
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 : '-';
|
|
|
|
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'
|
|
);
|
|
const containerRoundCss = classNames(
|
|
containerCss,
|
|
'is-rounded'
|
|
);
|
|
const pokemonType = classNames(
|
|
containerRoundCss,
|
|
styles.pokemonType
|
|
);
|
|
const containerTitleCss = classNames(
|
|
'title'
|
|
);
|
|
const baseStatsCss = classNames(
|
|
styles.pokemonBaseStats,
|
|
containerCss
|
|
);
|
|
const formContainerCss = classNames(
|
|
containerCss,
|
|
'form'
|
|
);
|
|
const fieldCss = classNames(
|
|
'nes-field'
|
|
);
|
|
const inlineFieldCss = classNames(
|
|
fieldCss,
|
|
'is-inline',
|
|
styles.fieldRow
|
|
);
|
|
const inputTextCss = classNames(
|
|
'nes-input',
|
|
styles.ivInput
|
|
);
|
|
const leaugeRankCss = classNames(
|
|
styles.leaguePokemonRank,
|
|
containerCss,
|
|
{ 'with-title': false }
|
|
);
|
|
const maxButtonCss = classNames(
|
|
'nes-btn',
|
|
'is-primary'
|
|
);
|
|
|
|
let type1 : JSX.Element | null = null;
|
|
if (leaguePokemon.types.type1) {
|
|
type1 = <div className={ `${pokemonType} ${leaguePokemon.types.type1}` }>{ leaguePokemon.types.type1 }</div>;
|
|
}
|
|
|
|
let type2 : JSX.Element | null = null;
|
|
if (leaguePokemon.types.type2) {
|
|
type2 = <div className={ `${pokemonType} ${leaguePokemon.types.type2}` }>{ leaguePokemon.types.type2 }</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={ styles.wrapper }>
|
|
<div>
|
|
<div className={ styles.pokemonInfoWrapper }>
|
|
<div className={ styles.pokemonInfoLeftColumn }>
|
|
<i className={ `pokemon-${dex}` } />
|
|
<h4>No.{ dex }</h4>
|
|
<div className={ styles.pokemonTypeWrapper }>
|
|
{ type1 }
|
|
{ type2 }
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2>
|
|
{ leaguePokemon.name }
|
|
</h2>
|
|
<h3>The Seed Pokemon</h3>
|
|
<section className={ baseStatsCss }>
|
|
<h3 className={ containerTitleCss }>Base Stats</h3>
|
|
<div>HP { leaguePokemon.stats.baseStamina }</div>
|
|
<div>ATK { leaguePokemon.stats.baseAttack }</div>
|
|
<div>DEF { leaguePokemon.stats.baseDefense }</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<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={ inputTextCss }
|
|
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={ false }
|
|
>
|
|
MAX Lv
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<section className={ leaugeRankCss }>
|
|
<div className="league-pokemon-stat pokemon-rank"><span>{ rankedGrade }</span> Rank</div>
|
|
<div className="league-pokemon-stat pokemon-cp">CP <span>{ rankedCp }</span></div>
|
|
<div className="league-pokemon-stat"><span>{ rankedHp }</span> HP</div>
|
|
<div className="league-pokemon-stat"><span>{ rankedAtk }</span> ATK</div>
|
|
<div className="league-pokemon-stat"><span>{ rankedDef }</span> DEF</div>
|
|
</section>
|
|
</div>
|
|
<LeagueStatsList
|
|
activeIndividualValues={ individualValues }
|
|
leagueStatsList={ leaguePokemon.pvp[league] }
|
|
handleActivateLeagueStats={ this.handleActivateLeagueStats }
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private formatDexNumber(dex : number) {
|
|
let prefix : string = '';
|
|
if (dex < 100) {
|
|
prefix += '0';
|
|
}
|
|
if (dex < 10) {
|
|
prefix += '0';
|
|
}
|
|
return prefix + dex;
|
|
}
|
|
|
|
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 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;
|
|
|
|
handleChangeIndividualValue('level', stats.level);
|
|
handleChangeIndividualValue('hp', stats.ivHp);
|
|
handleChangeIndividualValue('atk', stats.ivAtk);
|
|
handleChangeIndividualValue('def', stats.ivDef);
|
|
}
|
|
}
|