jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

componentize stat display

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-03 23:21:13 -05:00
parent f289d91d58
commit a1213642b9
3 changed files with 88 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/scss/index.scss
View File

@ -43,7 +43,6 @@ a.active:not([href]):not([tabindex]) {
a.list-item { a.list-item {
position: relative; position: relative;
margin-right: 20px;
// borrowed from @import '~nes.css/scss/elements/radios'; // borrowed from @import '~nes.css/scss/elements/radios';

134
src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
View File

@ -9,6 +9,7 @@ import { formatDexNumber } from 'app/utils/formatter';
import { IIndividualValues, IndividualValueKey } from './types'; import { IIndividualValues, IndividualValueKey } from './types';
import { LeagueStatsList } from './LeagueStatsList'; import { LeagueStatsList } from './LeagueStatsList';
import { StatDisplay } from './StatDisplay';
import * as styles from './styles/PokemonExplorer.scss'; import * as styles from './styles/PokemonExplorer.scss';
@ -118,9 +119,9 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
const rankedGrade = rankedPokemon !== null ? Grade[rankedPokemon.speciesGrade] : '-'; const rankedGrade = rankedPokemon !== null ? Grade[rankedPokemon.speciesGrade] : '-';
const rankedCp = rankedPokemon !== null ? rankedPokemon.cp : '-'; const rankedCp = rankedPokemon !== null ? rankedPokemon.cp : '-';
const rankedHp = rankedPokemon !== null ? rankedPokemon.hp : '-'; const rankedHp = rankedPokemon !== null ? rankedPokemon.hp : 0;
const rankedAtk = rankedPokemon !== null ? rankedPokemon.atk : '-'; const rankedAtk = rankedPokemon !== null ? rankedPokemon.atk : 0;
const rankedDef = rankedPokemon !== null ? rankedPokemon.def : '-'; const rankedDef = rankedPokemon !== null ? rankedPokemon.def : 0;
const idIvLevelInput = 'iv-level-input'; const idIvLevelInput = 'iv-level-input';
const idIvHpInput = 'iv-hp-input'; const idIvHpInput = 'iv-hp-input';
@ -187,37 +188,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
} }
); );
const progressStaminaCss = classNames(
'nes-progress',
{
'is-success': leaguePokemon.statsRank.staminaRank > 66,
'is-warning': leaguePokemon.statsRank.staminaRank >= 34 && leaguePokemon.statsRank.staminaRank <= 66,
'is-error': leaguePokemon.statsRank.staminaRank < 34,
}
);
const progressAttackCss = classNames(
'nes-progress',
{
'is-success': leaguePokemon.statsRank.attackRank > 66,
'is-warning': leaguePokemon.statsRank.attackRank >= 34 && leaguePokemon.statsRank.attackRank <= 66,
'is-error': leaguePokemon.statsRank.attackRank < 34,
}
);
const progressDefenseCss = classNames(
'nes-progress',
{
'is-success': leaguePokemon.statsRank.defenseRank > 66,
'is-warning': leaguePokemon.statsRank.defenseRank >= 34 && leaguePokemon.statsRank.defenseRank <= 66,
'is-error': leaguePokemon.statsRank.defenseRank < 34,
}
);
const baseStamina : number = leaguePokemon.stats.baseStamina;
const baseAttack : number = leaguePokemon.stats.baseAttack;
const baseDefense : number = leaguePokemon.stats.baseDefense;
let type1 : JSX.Element | null = null; let type1 : JSX.Element | null = null;
if (leaguePokemon.types.type1) { if (leaguePokemon.types.type1) {
type1 = <div className={ `${pokemonType} ${leaguePokemon.types.type1}` }>{ leaguePokemon.types.type1 }</div>; type1 = <div className={ `${pokemonType} ${leaguePokemon.types.type1}` }>{ leaguePokemon.types.type1 }</div>;
@ -248,39 +218,21 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
<h5>{ leaguePokemon.category }</h5> <h5>{ leaguePokemon.category }</h5>
<section className={ baseStatsCss }> <section className={ baseStatsCss }>
<h3 className={ containerTitleCss }>Base Stats</h3> <h3 className={ containerTitleCss }>Base Stats</h3>
<div className={ styles.baseStatRow }> <StatDisplay
<span>HP &nbsp;{ baseStamina < 100 && String.fromCharCode(160) }{ baseStamina }</span> statLabel={ `HP${ String.fromCharCode(160) }` }
<progress statValue={ leaguePokemon.stats.baseStamina }
className={ progressStaminaCss } statRank={ leaguePokemon.statsRank.staminaRank }
max={ 100 } />
value={ leaguePokemon.statsRank.staminaRank } <StatDisplay
title={ `${leaguePokemon.statsRank.staminaRank}%` } statLabel="ATK"
> statValue={ leaguePokemon.stats.baseAttack }
{ leaguePokemon.statsRank.staminaRank }% statRank={ leaguePokemon.statsRank.attackRank }
</progress> />
</div> <StatDisplay
<div className={ styles.baseStatRow }> statLabel="DEF"
<span>ATK { baseAttack < 100 && String.fromCharCode(160) }{ baseAttack }</span> statValue={ leaguePokemon.stats.baseDefense }
<progress statRank={ leaguePokemon.statsRank.defenseRank }
className={ progressAttackCss } />
max={ 100 }
value={ leaguePokemon.statsRank.attackRank }
title={ `${leaguePokemon.statsRank.attackRank}%` }
>
{ leaguePokemon.statsRank.attackRank }%
</progress>
</div>
<div className={ styles.baseStatRow }>
<span>DEF { baseDefense < 100 && String.fromCharCode(160) }{ baseDefense }</span>
<progress
className={ progressDefenseCss }
max={ 100 }
value={ leaguePokemon.statsRank.defenseRank }
title={ `${leaguePokemon.statsRank.defenseRank}%` }
>
{ leaguePokemon.statsRank.defenseRank }%
</progress>
</div>
</section> </section>
</div> </div>
</div> </div>
@ -360,39 +312,21 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
<div>CP <span>{ rankedCp }</span></div> <div>CP <span>{ rankedCp }</span></div>
</div> </div>
<div className={ styles.pokemonInfoRightColumn }> <div className={ styles.pokemonInfoRightColumn }>
<div className={ styles.baseStatRow }> <StatDisplay
<span>HP &nbsp;{ rankedHp < 100 && String.fromCharCode(160) }{ rankedHp }</span> statLabel={ `HP${ String.fromCharCode(160) }` }
<progress statValue={ rankedHp }
className={ progressStaminaCss } statRank={ leaguePokemon.statsRank.staminaRank }
max={ 100 } />
value={ leaguePokemon.statsRank.staminaRank } <StatDisplay
title={ `${leaguePokemon.statsRank.staminaRank}%` } statLabel="ATK"
> statValue={ rankedAtk }
{ leaguePokemon.statsRank.staminaRank }% statRank={ leaguePokemon.statsRank.attackRank }
</progress> />
</div> <StatDisplay
<div className={ styles.baseStatRow }> statLabel="DEF"
<span>ATK { rankedAtk < 100 && String.fromCharCode(160) }{ rankedAtk }</span> statValue={ rankedDef }
<progress statRank={ leaguePokemon.statsRank.defenseRank }
className={ progressAttackCss } />
max={ 100 }
value={ leaguePokemon.statsRank.attackRank }
title={ `${leaguePokemon.statsRank.attackRank}%` }
>
{ leaguePokemon.statsRank.attackRank }%
</progress>
</div>
<div className={ styles.baseStatRow }>
<span>DEF { rankedDef < 100 && String.fromCharCode(160) }{ rankedDef }</span>
<progress
className={ progressDefenseCss }
max={ 100 }
value={ leaguePokemon.statsRank.defenseRank }
title={ `${leaguePokemon.statsRank.defenseRank}%` }
>
{ leaguePokemon.statsRank.defenseRank }%
</progress>
</div>
</div> </div>
</div> </div>
</section> </section>

54
src/ts/app/components/PokemonExplorer/StatDisplay.tsx Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import classNames from 'classnames';
import * as styles from './styles/PokemonExplorer.scss';
export interface IStartDisplayProps {
statLabel : string;
statValue : number | null;
statRank : number;
}
export class StatDisplay extends React.Component<IStartDisplayProps, object> {
public render() {
const {
statLabel,
statValue,
statRank,
} = this.props;
const progressStatCss = classNames(
'nes-progress',
{
'is-success': statRank > 66,
'is-warning': statRank >= 34 && statRank <= 66,
'is-error': statRank < 34,
}
);
let spacer = ' ';
let displayValue : number | string | null = statValue;
if (statValue === null) {
displayValue = '-';
spacer += String.fromCharCode(160) + String.fromCharCode(160);
} else if (statValue < 100) {
spacer += String.fromCharCode(160);
}
return (
<div className={ styles.baseStatRow }>
<span>{ statLabel }{ spacer }{ displayValue }</span>
<progress
className={ progressStatCss }
max={ 100 }
value={ statRank }
title={ `${statRank}%` }
>
{ statRank }%
</progress>
</div>
);
}
}