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

add iv display radio for list/manual

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-13 23:56:04 -05:00
parent 44a734bcac
commit 573ef57444
4 changed files with 178 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,10 +29,12 @@ export interface IPokemonExplorerProps {
handleChangeLeague : (league : League) => void;
}
enum IvDisplayMode {
MANUAL = 'manual',
LIST = 'list',
}
interface IState {
form : {
level : string;
};
ivDisplayMode : IvDisplayMode;
}
export class PokemonExplorer extends React.Component<IPokemonExplorerProps, IState> {
@ -63,9 +65,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
super(props);
this.state = {
form: {
level: '',
}
ivDisplayMode: IvDisplayMode.MANUAL,
};
}
@ -78,6 +78,10 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
handleMaximizeLevel,
} = this.props;
const {
ivDisplayMode,
} = this.state;
let rankedPokemon : IStats | null = null;
const dex = formatDexNumber(leaguePokemon.dex);
@ -153,13 +157,21 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
const containerTitleCss = classNames(
'title',
);
const ivContainerTitleCss = classNames(
containerTitleCss,
styles.ivContainerTitle
);
const baseStatsCss = classNames(
styles.pokemonBaseStats,
containerCss,
);
const formContainerCss = classNames(
containerCss,
styles.ivsContainer,
'form',
{
[ styles.diplayingIvList ]: ivDisplayMode === IvDisplayMode.LIST,
}
);
const leaugeRankCss = classNames(
styles.leaguePokemonRank,
@ -223,94 +235,116 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
return (
<div className={ styles.wrapper }>
<div>
<div className={ styles.pokemonInfoWrapper }>
<div className={ styles.pokemonInfoLeftColumn }>
<i className={ pokemonIconCss } />
<h4 className={ styles.dexHeader }>No.{ dex }</h4>
<div className={ styles.pokemonTypeWrapper }>
{ type1 }
{ type2 }
</div>
{ leaguePokemon.form !== POGOProtos.Enums.Form.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 className={ styles.pokemonInfoWrapper }>
<div className={ styles.pokemonInfoLeftColumn }>
<i className={ pokemonIconCss } />
<h4 className={ styles.dexHeader }>No.{ dex }</h4>
<div className={ styles.pokemonTypeWrapper }>
{ type1 }
{ type2 }
</div>
{ leaguePokemon.form !== POGOProtos.Enums.Form.FORM_UNSET &&
<h6 className={ styles.formHeader }>{ formatForm(leaguePokemon.form) } Form</h6>
}
</div>
<LeagueSelector
activeLeague={ activeLeague }
handleLeagueSelect={ this.handleLeagueSelect }
/>
<section className={ formContainerCss }>
<h5 className={ containerTitleCss }>IVs</h5>
<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>
<LeagueSelector
activeLeague={ activeLeague }
handleLeagueSelect={ this.handleLeagueSelect }
/>
<section className={ formContainerCss }>
<h5 className={ ivContainerTitleCss }>
<span>IVs</span>
<label>
<input
className="nes-radio"
type="radio"
value="manual"
checked={ ivDisplayMode === IvDisplayMode.MANUAL }
onChange={ this.handleIvDisplayModeManual }
/> <span>Manual</span>
</label>
<label>
<input
className="nes-radio"
type="radio"
value="list"
checked={ ivDisplayMode === IvDisplayMode.LIST }
onChange={ this.handleIvDisplayModeList }
/> <span>List</span>
</label>
</h5>
{ ivDisplayMode === IvDisplayMode.MANUAL &&
<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 }>
{ 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 }>
<StatDisplay
statLabel={ `HP${ String.fromCharCode(160) }` }
statValue={ rankedHp }
statRank={ staminaStatRank }
/>
<StatDisplay
statLabel="ATK"
statValue={ rankedAtk }
statRank={ attackStatRank }
/>
<StatDisplay
statLabel="DEF"
statValue={ rankedDef }
statRank={ defenseStatRank }
/>
</div>
}
{ ivDisplayMode === IvDisplayMode.LIST &&
<LeagueStatsList
activePokemonId={ leaguePokemon.id }
activePokemonForm={ leaguePokemon.form }
activeIndividualValues={ individualValues }
leagueStatsList={ leaguePokemon.pvp[activeLeague] }
handleActivateLeagueStats={ this.handleActivateLeagueStats }
/>
}
</section>
<section className={ leaugeRankCss }>
<h5 className={ containerTitleCss }>Rank</h5>
<div className={ styles.pokemonInfoWraper }>
<div className={ styles.pokemonInfoLeftColumn }>
{ 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>
</section>
</div>
<LeagueStatsList
activePokemonId={ leaguePokemon.id }
activePokemonForm={ leaguePokemon.form }
activeIndividualValues={ individualValues }
leagueStatsList={ leaguePokemon.pvp[activeLeague] }
handleActivateLeagueStats={ this.handleActivateLeagueStats }
/>
<div className={ styles.pokemonInfoRightColumn }>
<StatDisplay
statLabel={ `HP${ String.fromCharCode(160) }` }
statValue={ rankedHp }
statRank={ staminaStatRank }
/>
<StatDisplay
statLabel="ATK"
statValue={ rankedAtk }
statRank={ attackStatRank }
/>
<StatDisplay
statLabel="DEF"
statValue={ rankedDef }
statRank={ defenseStatRank }
/>
</div>
</div>
</section>
</div>
);
}
@ -327,4 +361,12 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
private readonly handleLeagueSelect = (league : League) => {
this.props.handleChangeLeague(league);
}
private readonly handleIvDisplayModeManual = () => {
this.setState({ ivDisplayMode: IvDisplayMode.MANUAL });
}
private readonly handleIvDisplayModeList = () => {
this.setState({ ivDisplayMode: IvDisplayMode.LIST });
}
}

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

@ -1,7 +1,12 @@
@import 'styles/Variables.scss';
.selectList {
flex: 1;
height: 100%;
flex-grow: 1;
/* for Firefox */
// min-height: 0;
display: flex;
overflow: hidden;

43
src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss
View File

@ -3,7 +3,7 @@
.wrapper {
height: 100vh;
margin: 0 auto;
flex-basis: 15rem;
flex-basis: 30rem;
display: flex;
flex-flow: column nowrap;
}
@ -106,3 +106,44 @@
align-items: start;
align-self: stretch;
}
.ivsContainer {
flex: 0 2 auto;
display: flex;
flex-flow: column nowrap;
/* for Firefox */
// min-height: 0;
:global(.title).ivContainerTitle {
display: flex;
justify-content: flex-end;
background-color: transparent;
& > * {
background-color: $main-background-color;
&:first-child {
margin-right: auto;
padding: 0 0.5em;
}
&:last-child {
padding-right: 0.5em;
}
}
}
&.diplayingIvList {
// .nes-container.title has `padding: 2rem;`
$border-offset: 6px;
padding: 2rem $border-offset $border-offset;
:global(.title).ivContainerTitle {
margin-bottom: 0;
margin-right: -$border-offset;
margin-left: -$border-offset;
padding: 0 2.5rem;
}
}
}

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

@ -1,7 +1,10 @@
// This file is automatically generated.
// Please do not change this file!
export const dexHeader: string;
export const diplayingIvList: string;
export const formHeader: string;
export const ivContainerTitle: string;
export const ivsContainer: string;
export const leaguePokemonRank: string;
export const pokemonBaseStats: string;
export const pokemonInfoLeftColumn: string;