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

74
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,7 +235,6 @@ 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 } />
@ -264,13 +275,44 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
handleLeagueSelect={ this.handleLeagueSelect }
/>
<section className={ formContainerCss }>
<h5 className={ containerTitleCss }>IVs</h5>
<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 }
/>
}
{ 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>
@ -304,14 +346,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
</div>
</section>
</div>
<LeagueStatsList
activePokemonId={ leaguePokemon.id }
activePokemonForm={ leaguePokemon.form }
activeIndividualValues={ individualValues }
leagueStatsList={ leaguePokemon.pvp[activeLeague] }
handleActivateLeagueStats={ this.handleActivateLeagueStats }
/>
</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;