143 lines
6.5 KiB
TypeScript
143 lines
6.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { IPokemon } from 'app/models/Pokemon';
|
|
|
|
import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter';
|
|
|
|
import { StatDisplay } from './StatDisplay';
|
|
import { TypeIndicator, TypeTheme } from './TypeIndicator';
|
|
|
|
import * as PVPogoProtos from 'common/models/PvPogoProtos';
|
|
|
|
import * as styles from 'app/components/PokemonExplorer/styles/PokemonDisplay.scss';
|
|
|
|
export interface IPokemonDisplay {
|
|
leaguePokemon : IPokemon;
|
|
isHighlighted : boolean;
|
|
}
|
|
|
|
export class PokemonDisplay extends React.Component<IPokemonDisplay> {
|
|
public render() {
|
|
const {
|
|
leaguePokemon,
|
|
isHighlighted
|
|
} = this.props;
|
|
|
|
const dex = formatDexNumber(leaguePokemon.dex);
|
|
|
|
const pokemonInfoLeftColumnCss = classNames(
|
|
styles.pokemonInfoLeftColumn,
|
|
{
|
|
[styles.highlight]: isHighlighted
|
|
}
|
|
);
|
|
|
|
const containerCss = classNames(
|
|
'nes-container',
|
|
'with-title',
|
|
);
|
|
const containerTitleCss = classNames(
|
|
'title',
|
|
);
|
|
const baseStatsCss = classNames(
|
|
styles.pokemonBaseStats,
|
|
containerCss,
|
|
);
|
|
|
|
const pokemonIconCss = classNames(
|
|
'icon',
|
|
'pixel',
|
|
'sprite',
|
|
`pokemon-${dex}`,
|
|
{
|
|
'normal-form': Forms.normal.indexOf(leaguePokemon.form) > -1,
|
|
'alola-form': Forms.alola.indexOf(leaguePokemon.form) > -1,
|
|
'plant-form': Forms.plant.indexOf(leaguePokemon.form) > -1,
|
|
'sandy-form': Forms.sandy.indexOf(leaguePokemon.form) > -1,
|
|
'trash-form': Forms.trash.indexOf(leaguePokemon.form) > -1,
|
|
'west-sea-form': Forms.westSea.indexOf(leaguePokemon.form) > -1,
|
|
'east-sea-form': Forms.eastSea.indexOf(leaguePokemon.form) > -1,
|
|
'frost-form': Forms.frost.indexOf(leaguePokemon.form) > -1,
|
|
'fan-form': Forms.fan.indexOf(leaguePokemon.form) > -1,
|
|
'mow-form': Forms.mow.indexOf(leaguePokemon.form) > -1,
|
|
'wash-form': Forms.wash.indexOf(leaguePokemon.form) > -1,
|
|
'heat-form': Forms.heat.indexOf(leaguePokemon.form) > -1,
|
|
'sky-form': Forms.sky.indexOf(leaguePokemon.form) > -1,
|
|
'land-form': Forms.land.indexOf(leaguePokemon.form) > -1,
|
|
'overcast-form': Forms.overcast.indexOf(leaguePokemon.form) > -1,
|
|
'sunny-form': Forms.sunny.indexOf(leaguePokemon.form) > -1,
|
|
'rainy-form': Forms.rainy.indexOf(leaguePokemon.form) > -1,
|
|
'snowy-form': Forms.snowy.indexOf(leaguePokemon.form) > -1,
|
|
'attack-form': Forms.attack.indexOf(leaguePokemon.form) > -1,
|
|
'defense-form': Forms.defense.indexOf(leaguePokemon.form) > -1,
|
|
'speed-form': Forms.speed.indexOf(leaguePokemon.form) > -1,
|
|
'altered-form': Forms.altered.indexOf(leaguePokemon.form) > -1,
|
|
'origin-form': Forms.origin.indexOf(leaguePokemon.form) > -1,
|
|
'fighting-form': Forms.fighting.indexOf(leaguePokemon.form) > -1,
|
|
'flying-form': Forms.flying.indexOf(leaguePokemon.form) > -1,
|
|
'poison-form': Forms.poison.indexOf(leaguePokemon.form) > -1,
|
|
'ground-form': Forms.ground.indexOf(leaguePokemon.form) > -1,
|
|
'rock-form': Forms.rock.indexOf(leaguePokemon.form) > -1,
|
|
'bug-form': Forms.bug.indexOf(leaguePokemon.form) > -1,
|
|
'ghost-form': Forms.ghost.indexOf(leaguePokemon.form) > -1,
|
|
'steel-form': Forms.steel.indexOf(leaguePokemon.form) > -1,
|
|
'fire-form': Forms.fire.indexOf(leaguePokemon.form) > -1,
|
|
'water-form': Forms.water.indexOf(leaguePokemon.form) > -1,
|
|
'grass-form': Forms.grass.indexOf(leaguePokemon.form) > -1,
|
|
'electric-form': Forms.electric.indexOf(leaguePokemon.form) > -1,
|
|
'psychic-form': Forms.psychic.indexOf(leaguePokemon.form) > -1,
|
|
'ice-form': Forms.ice.indexOf(leaguePokemon.form) > -1,
|
|
'dragon-form': Forms.dragon.indexOf(leaguePokemon.form) > -1,
|
|
'dark-form': Forms.dark.indexOf(leaguePokemon.form) > -1,
|
|
'fairy-form': Forms.fairy.indexOf(leaguePokemon.form) > -1,
|
|
},
|
|
);
|
|
|
|
const type1 = <TypeIndicator type={ leaguePokemon.types.type1 } theme={ TypeTheme.SOLID }/>;
|
|
let type2 : JSX.Element | null = null;
|
|
if (leaguePokemon.types.type2) {
|
|
type2 = <TypeIndicator type={ leaguePokemon.types.type2 } theme={ TypeTheme.SOLID }/>;
|
|
}
|
|
|
|
return (
|
|
<div className={ styles.pokemonInfoWrapper }>
|
|
<div className={ pokemonInfoLeftColumnCss }>
|
|
<i className={ pokemonIconCss } />
|
|
<h4 className={ styles.dexHeader }>No.{ dex }</h4>
|
|
<div className={ styles.pokemonTypeWrapper }>
|
|
{ type1 }
|
|
{ type2 }
|
|
</div>
|
|
{ leaguePokemon.form !== PVPogoProtos.PokemonForm.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>
|
|
</div>
|
|
);
|
|
}
|
|
}
|