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

league functionality, stats list layout

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-06 22:39:20 -05:00
parent f16da85933
commit 58a17849a4
4 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
View File

@ -123,11 +123,20 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
);
}
private padString(value : string, length : number) {
let output = value;
for (let i = value.length - length - 1; i >= 0; i--) {
output += String.fromCharCode(160);
}
return output;
}
private rowFactory({ index, style } : IRowFactory) {
const activeIvs = this.props.activeIndividualValues;
const stats = this.props.leagueStatsList[index];
const css = classNames(
'list-item',
'list-item', // global style
styles.listItem,
{
active: activeIvs.level === stats.level &&
activeIvs.hp === stats.ivHp &&
@ -140,6 +149,7 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
this.props.handleActivateLeagueStats(stats);
this.setState({ activeIndex: index });
};
return (
<a
key={ index }
@ -147,7 +157,12 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
className={ css }
onClick={ onClick }
>
{ `${ Grade[stats.speciesGrade] } ${ stats.cp } ${ stats.level } ${ stats.ivHp } ${ stats.ivAtk } ${ stats.ivDef }` }
<span>{ Grade[stats.speciesGrade] }</span>
<span>{ this.padString(stats.cp.toString(), 4) }</span>
<span>{ this.padString(stats.level.toString(), 4) }</span>
<span>{ this.padString(stats.ivHp.toString(), 2) }</span>
<span>{ this.padString(stats.ivAtk.toString(), 2) }</span>
<span>{ this.padString(stats.ivDef.toString(), 2) }</span>
</a>
);
}

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

@ -62,7 +62,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
individualValues,
leaguePokemon
} = this.props;
const league = 'great'; // TODO: this should be a prop
let rankedPokemon : IStats | null = null;
let placeholderLevel = '';
@ -79,7 +78,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
individualValues.atk === null &&
individualValues.def === null
) {
rankedPokemon = leaguePokemon.pvp[league][0];
rankedPokemon = leaguePokemon.pvp[activeLeague][0];
placeholderLevel = '' + rankedPokemon.level;
placeholderHp = '' + rankedPokemon.ivHp;
placeholderAtk = '' + rankedPokemon.ivAtk;
@ -91,7 +90,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
individualValues.atk !== null &&
individualValues.def !== null
) {
leaguePokemon.pvp[league].some((stats) => {
leaguePokemon.pvp[activeLeague].some((stats) => {
if (individualValueLevel === stats.level &&
individualValues.hp === stats.ivHp &&
individualValues.atk === stats.ivAtk &&
@ -134,63 +133,63 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
const idIvDefInput = 'iv-def-input';
const containerCss = classNames(
'nes-container',
'with-title'
'with-title',
);
const containerRoundCss = classNames(
containerCss,
'is-rounded'
'is-rounded',
);
const pokemonType = classNames(
containerRoundCss,
styles.pokemonType
styles.pokemonType,
);
const containerTitleCss = classNames(
'title'
'title',
);
const baseStatsCss = classNames(
styles.pokemonBaseStats,
containerCss
containerCss,
);
const formContainerCss = classNames(
containerCss,
'form'
'form',
);
const fieldCss = classNames(
'nes-field'
'nes-field',
);
const inlineFieldCss = classNames(
fieldCss,
'is-inline',
styles.fieldRow
styles.fieldRow,
);
const inputTextCss = classNames(
'nes-input',
styles.ivInput
styles.ivInput,
);
const inputTextLevelCss = classNames(
inputTextCss,
styles.levelInput
styles.levelInput,
);
const leaugeRankCss = classNames(
styles.leaguePokemonRank,
containerCss,
{
'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}`,
{
alola: leaguePokemon.form === 'ALOLA'
}
},
);
let type1 : JSX.Element | null = null;
@ -307,6 +306,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
<button
type="button"
className={ maxButtonCss }
disabled={ individualValues.hp === null || individualValues.atk === null || individualValues.def === null }
onClick={ this.handleClickMaximizeLevel }
>
MAX LEAGUE Lv
@ -343,7 +343,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
<LeagueStatsList
activePokemonId={ leaguePokemon.id }
activeIndividualValues={ individualValues }
leagueStatsList={ leaguePokemon.pvp[league] }
leagueStatsList={ leaguePokemon.pvp[activeLeague] }
handleActivateLeagueStats={ this.handleActivateLeagueStats }
/>
</div>

16
src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss
View File

@ -10,3 +10,19 @@
overflow: auto;
}
}
.listItem {
position: relative;
display: flex;
justify-content: space-evenly;
&:global(.list-item) {
&:global(.active),
&:hover {
&::before {
top: 8px;
left: 10px;
}
}
}
}

1
src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts vendored
View File

@ -1,3 +1,4 @@
// This file is automatically generated.
// Please do not change this file!
export const listItem: string;
export const selectList: string;