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

mobile side nav

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-25 22:10:09 -04:00
parent d1419c0f6e
commit f991d9ff1f
20 changed files with 331 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/app.css vendored
View File

@ -1,18 +1,18 @@
/* Generated by cssConcatenator.js */
/** Source: ./dist/main.tmp.css */
.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.Navigation__navigation__32sTf{position:static;display:flex;flex-flow:row nowrap;padding:0;margin:0;width:100%;justify-content:space-evenly}.Navigation__navigation__32sTf button{margin-bottom:0}}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}.Navigation__navigation__32sTf.Navigation__menu__2XeMt{position:fixed;right:72px;z-index:1;width:100px;height:325px;justify-content:space-between}.Navigation__navigation__32sTf.Navigation__menu__2XeMt button>*{display:block;margin:auto}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
.nes-field.is-inline .IvForm__ivInput__xR5IU{width:4.25em;padding-left:0.45em;padding-right:0.25em}.nes-field.is-inline .IvForm__ivInput__xR5IU.IvForm__levelInput__1n6We{width:6.5em}.nes-field.is-inline.IvForm__fieldRow__3HcBN{font-size:0.9em;justify-content:space-between;align-items:baseline}.nes-field.is-inline.IvForm__fieldRow__3HcBN label{flex-grow:0;margin-left:1em}.nes-field.is-inline.IvForm__fieldRow__3HcBN label:first-child{margin-left:0}
.LeagueSelector__wrapper__fxmRz{font-size:0.8em;display:flex;justify-content:space-between;margin:0 0 0.5rem 0}.LeagueSelector__leagueRadioLabel__3aPV9{display:flex;align-items:center}.LeagueSelector__leagueRadio__3hY7B{display:none}
.LeagueSelector__wrapper__fxmRz{font-size:0.8em;display:flex;justify-content:space-around;margin:0 0 0.5rem 0}.LeagueSelector__leagueRadioLabel__3aPV9{display:flex;align-items:center}.LeagueSelector__leagueRadio__3hY7B{display:none}
.LeagueStatsList__selectList__1FBIL{flex-grow:1;display:flex;overflow:hidden}.LeagueStatsList__selectList__1FBIL>*{flex:1;overflow:auto}.LeagueStatsList__listItem__oCOvr{position:relative;display:flex;justify-content:space-evenly}.LeagueStatsList__listItem__oCOvr.list-item.active::before,.LeagueStatsList__listItem__oCOvr.list-item:hover::before{top:8px;left:10px}
.StatDisplay__baseStatRow__1B60A{display:flex;align-items:center}.StatDisplay__baseStatRow__1B60A>*{flex-shrink:0}.StatDisplay__baseStatRow__1B60A>progress{flex-shrink:1;margin:0 0 0 1em;width:5em;height:1em;border-image-outset:1;padding:2px}@media only screen and (max-width: 767px){.StatDisplay__baseStatRow__1B60A>progress{height:1.2em}}@media only screen and (max-width: 359px){.StatDisplay__baseStatRow__1B60A>progress{height:1.4em}}
.StatDisplay__baseStatRow__1B60A{display:flex;align-items:center}.StatDisplay__baseStatRow__1B60A>*{flex-shrink:0}.StatDisplay__baseStatRow__1B60A>progress{flex-shrink:1;margin:0 0 0 1em;width:5em;height:1em;border-image-outset:1;padding:2px}@media only screen and (max-width: 767px){.StatDisplay__baseStatRow__1B60A>progress{height:1.2em}}@media only screen and (max-width: 359px){.StatDisplay__baseStatRow__1B60A>progress{height:1.3em}}
.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
.LeagueIvExplorer__wrapper__3E7AD{display:flex;flex-flow:column nowrap}.LeagueIvExplorer__container__3GKct{margin-bottom:1rem}.LeagueIvExplorer__leftColumn__3au0L{}.LeagueIvExplorer__rightColumn__1eyvh{}.LeagueIvExplorer__leaguePokemonRank__3bjyU{justify-content:flex-start;flex-wrap:wrap}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonInfoWrapper__3WVsh{flex:1 0 100%;display:flex}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__leftColumn__3au0L{align-items:flex-start}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonRankValue__3k3ih{display:inline}.LeagueIvExplorer__ivsContainer__31sfb{max-height:350px;font-size:0.95em;flex:0 999 auto;display:flex;flex-flow:column nowrap}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX{display:flex;justify-content:flex-end;background-color:transparent;padding:0}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*{background-color:#fff}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*:first-child{margin-right:auto;padding:0 0.5em}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*:last-child{padding-right:0.5em}.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8{padding:1.5rem 0 0}.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8 .title.LeagueIvExplorer__ivContainerTitle__3Z3eX{margin-bottom:0;margin-right:-9px;margin-left:-9px;padding:0 1.5em}
@ -24,7 +24,7 @@
.MovesExplorer__wrapper__2y-BK h3{font-size:1rem}.MovesExplorer__wrapper__2y-BK h4{font-size:0.8em;color:#676767}
.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.Navigation__navigation__32sTf{position:static;display:flex;flex-flow:row nowrap;padding:0;margin:0;width:100%;justify-content:space-evenly}.Navigation__navigation__32sTf button{margin-bottom:0}}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}.Navigation__navigation__32sTf.Navigation__menu__2XeMt{position:fixed;right:72px;z-index:1;width:100px;height:325px;justify-content:space-between}.Navigation__navigation__32sTf.Navigation__menu__2XeMt button>*{display:block;margin:auto}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
.PokemonDisplay__highlight__h50BA{color:#fff;pointer-events:none}.PokemonDisplay__pokemonInfoWrapper__3AW3e{margin-bottom:1rem}.PokemonDisplay__pokemonInfoLeftColumn__1vugM{}.PokemonDisplay__pokemonInfoRightColumn__27Q49{}.PokemonDisplay__pokemonName__WBKbk{margin-bottom:0}.PokemonDisplay__dexHeader__2HVfr{margin-bottom:0.25rem}.PokemonDisplay__pokemonTypeWrapper__1rJIA{display:flex;justify-content:center;align-self:stretch}.PokemonDisplay__formHeader__1pr6M{text-transform:uppercase;margin-bottom:0}.PokemonDisplay__pokemonBaseStats__3UJvn{display:flex;flex-flow:column nowrap;align-items:start;align-self:stretch}

2
dist/global-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/global.css vendored
View File

File diff suppressed because one or more lines are too long

10
dist/main-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

6
src/scss/index.scss
View File

@ -11,7 +11,7 @@ body {
}
@media only screen and (max-width: $max-small-mobile-width) {
font-size: 10px;
font-size: 11px;
}
}
@ -86,6 +86,10 @@ a.list-item {
content: "";
@include pixelize(2px, $radio, $colors);
@media only screen and (max-width: $max-mobile-width) {
left: 0;
}
}
}

336
src/scss/sprites.scss
View File

File diff suppressed because it is too large Load Diff

70
src/ts/app/PokemonApp.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import Media from 'react-media';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';
@ -9,7 +10,7 @@ import { appReducers } from 'app/index';
import * as ActionsPokemonApp from 'app/actions';
import * as ActionsPokemonExplorer from 'app/components/PokemonExplorer/actions';
import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
import { IPokemonAppDispatch, IRouterProps } from 'app/types';
import { IPokemonAppDispatch, IRouterProps, Navigation } from 'app/types';
import { convertFormParamToPokemonForm, convertIdParamToPokemonId, convertLeagueParamToLeague } from 'app/utils/navigation';
@ -18,6 +19,7 @@ import { Header } from 'app/components/Header';
import { ConnectedPokemonExplorer } from 'app/components/PokemonExplorer/PokemonExplorer';
import { PokemonSelectList } from 'app/components/PokemonSelectList/PokemonSelectList';
import { MAX_MOBILE_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';
import * as PVPogoProtos from 'common/models/PVPogoProtos';
import * as styles from 'app/styles/PokemonApp.scss';
@ -26,21 +28,7 @@ type PokemonAppProps = ReturnType<typeof appReducers>;
interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch, IRouterProps {}
// TODO: this should be on PokemonAppState
export type Navigation = 'pokedex';
interface IState {
activeNavigation : Navigation | null;
}
class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
constructor(props : IConnectedPokemonAppProps) {
super(props);
this.state = {
activeNavigation: null,
};
}
class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
public async componentWillMount() {
const {
@ -74,6 +62,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
public render() {
const {
navigation,
isInterruption,
attackTypeEffectiveness,
combatMoves,
@ -86,9 +75,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
const {
leaguePokemon,
} = this.props.pokemonExplorerState;
const {
activeNavigation,
} = this.state;
const matchParams = this.props.match.params;
const activePokemonId = convertIdParamToPokemonId(matchParams.id);
const activePokemonForm = convertFormParamToPokemonForm(matchParams.form);
@ -110,7 +96,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
iconCss,
'pokedex',
{
active: activeNavigation === 'pokedex',
active: navigation === 'pokedex',
}
);
const pokedexButtonCss = classNames(
@ -120,6 +106,14 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
// }
);
const hamburgerButtonCss = classNames(
styles.hamburgerIcon,
styles.navigationButton,
// {
// [styles.activeNavigationButton]: activeNavigation === 'menu',
// }
);
// react optimization for rendering on pokemon switching
// https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
const uniquePokemonId = leaguePokemon !== null ? `${leaguePokemon.id}~${leaguePokemon.form}` : undefined;
@ -129,7 +123,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
<Header>
<PokemonSelectList
isLoading={ this.props.pokemonSelectListState.isLoading }
isListOpen={ activeNavigation === 'pokedex' }
isListOpen={ navigation === 'pokedex' }
activePokemonId={ activePokemonId }
activePokemonForm={ activePokemonForm }
pokemonList={ filterTerm === '' ? pokemonList : pokemonListFiltered }
@ -137,10 +131,16 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
handleActivatePokemon={ this.handleActivatePokemon }
handleChangeFilter={ this.handleChangeFilter }
/>
<button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
<Media query={ { minWidth: MIN_TABLET_WIDTH } }>
<button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
</Media>
<Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
<button className={ hamburgerButtonCss } onClick={ this.handleMenuClick }>&#9776;</button>
</Media>
</Header>
<ConnectedPokemonExplorer
key={ uniquePokemonId }
isMenuOpen={ navigation === 'menu' }
isOverlaid={ isInterruption }
attackTypeEffectiveness={ attackTypeEffectiveness }
combatMoves={ combatMoves }
@ -151,14 +151,14 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
);
}
private readonly handleSearchInterruption = (isInterruption : boolean) => {
this.setState({
activeNavigation: isInterruption ? 'pokedex' : null,
});
this.props.dispatch(ActionsPokemonApp.setIsInterruption(isInterruption));
private readonly handleInterruption = (isInterruption : boolean, navigation : Navigation) => {
const { dispatch } = this.props;
dispatch(ActionsPokemonApp.setNavigation(isInterruption ? navigation : null));
dispatch(ActionsPokemonApp.setIsInterruption(isInterruption));
if (isInterruption) {
this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({
dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({
quickMove: false,
chargeMove1: false,
chargeMove2: false,
@ -169,14 +169,16 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
private readonly handleToggleInterruption = (isInterruption : boolean) => {
this.props.dispatch(ActionsPokemonApp.setIsInterruption(isInterruption));
if (!isInterruption) {
this.setState({
activeNavigation: null,
});
this.props.dispatch(ActionsPokemonApp.setNavigation(null));
}
}
private readonly handlePokedexClick = () => {
this.handleSearchInterruption(true);
this.handleInterruption(true, 'pokedex');
}
private readonly handleMenuClick = () => {
this.handleInterruption(true, 'menu');
}
private readonly handleActivatePokemon = async (pokemonId : PVPogoProtos.PokemonId, form : PVPogoProtos.PokemonForm) => {
@ -192,11 +194,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
dispatch(ActionsPokemonExplorer.setLeaguePokemon(null));
}
dispatch(ActionsPokemonExplorer.setIsLoading(false));
this.handleSearchInterruption(false);
this.handleInterruption(false, 'pokedex');
}
private readonly handleChangeFilter = (filterTerm : string) => {
this.handleSearchInterruption(true);
this.handleInterruption(true, 'pokedex');
return this.props.dispatch(ActionsPokemonSelectList.filterPokemonList(filterTerm));
}
}

4
src/ts/app/actions.ts
View File

@ -4,10 +4,12 @@ import { ILeaguePokemon } from 'app/models/League';
import { CombatMoveStats, IMaxStats } from 'app/models/Pokemon';
import * as PVPogoProtos from 'common/models/PVPogoProtos';
import { PokemonAppActionTypes, ThunkResult } from 'app/types';
import { Navigation, PokemonAppActionTypes, ThunkResult } from 'app/types';
import { AttackTypeEffectiveness } from 'app/models/Config';
export const setNavigation = (navigation : Navigation | null) => action(PokemonAppActionTypes.SET_NAVIGATION, { navigation });
export const setIsInterruption = (isInterruption : boolean) => action(PokemonAppActionTypes.SET_IS_INTERRUPTION, { isInterruption });
export const setMaxPossibleStats = (maxStats : IMaxStats) => action(PokemonAppActionTypes.SET_MAX_STATS, { maxStats });

11
src/ts/app/components/Header.tsx
View File

@ -6,22 +6,12 @@ import classNames from 'classnames';
import { MIN_TABLET_WIDTH } from 'common/models/constants';
import { Navigation } from 'app/PokemonApp';
import * as styles from 'app/styles/PokemonApp.scss';
interface IHeaderProps {}
export class Header extends React.Component<IHeaderProps> {
constructor(props : IHeaderProps) {
super(props);
this.state = {
activeNavigation: null,
};
}
public render() {
const headerCss = classNames(
'nes-container',
@ -35,7 +25,6 @@ export class Header extends React.Component<IHeaderProps> {
'sprite',
'pokeball',
'premier-ball',
''
);
// const linkTo = {

52
src/ts/app/components/PokemonExplorer/Navigation.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import Media from 'react-media';
import classNames from 'classnames';
@ -6,23 +7,32 @@ import {
SubNavigation,
SubNavigationDisplay,
} from 'app/components/PokemonExplorer/types';
import { Navigation as NavigationType } from 'app/types';
import { MAX_MOBILE_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';
import * as styles from 'app/components/PokemonExplorer/styles/Navigation.scss';
export interface INavigationProps {
isMenu : boolean;
widgets : SubNavigationDisplay;
handleNavigationClick : (widget : SubNavigation) => void;
handleNavigationClick : (widget : SubNavigation | NavigationType) => void;
}
export class Navigation extends React.Component<INavigationProps> {
public render() {
const {
isMenu,
widgets,
} = this.props;
const navCss = classNames(
styles.navigation,
{
'nes-container': isMenu,
[styles.menu]: isMenu,
}
);
const iconCss = classNames(
@ -73,16 +83,50 @@ export class Navigation extends React.Component<INavigationProps> {
// [styles.activeNavigationButton]: widgets.moves,
// }
);
const pokedexCss = classNames(
iconCss,
'pokedex',
);
const pokedexButtonCss = classNames(
buttonCss,
);
return (
<div className={ navCss }>
<button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
<button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
<button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
{ isMenu &&
<button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }>
<i className={ pokedexCss } />
<Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
<span>Dex</span>
</Media>
</button>
}
<button className={ badgeButtonCss } onClick={ this.handleTypesClick }>
<i className={ badgeCss } />
<Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
<span>Types</span>
</Media>
</button>
<button className={ tmButtonCss } onClick={ this.handleMovesClick }>
<i className={ tmCss } />
<Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
<span>Moves</span>
</Media>
</button>
<button className={ pvpButtonCss } onClick={ this.handlePvpClick }>
<i className={ pvpCss } />
<Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
<span>PVP</span>
</Media>
</button>
</div>
);
}
private handlePokedexClick = () => {
this.props.handleNavigationClick('pokedex');
}
private handleTypesClick = () => {
this.props.handleNavigationClick('types');
}

2
src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx
View File

@ -21,7 +21,6 @@ export interface IPokemonDisplay {
export class PokemonDisplay extends React.Component<IPokemonDisplay> {
public render() {
const {
children,
leaguePokemon,
isHighlighted
} = this.props;
@ -136,7 +135,6 @@ export class PokemonDisplay extends React.Component<IPokemonDisplay> {
statRank={ leaguePokemon.statsRank.defenseRank }
/>
</section>
{ children }
</div>
</div>
);

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

@ -9,6 +9,7 @@ import { AttackTypeEffectiveness } from 'app/models/Config';
import { League } from 'app/models/League';
import { CombatMoveStats, TypeEffectiveness } from 'app/models/Pokemon';
import * as ActionsPokemonApp from 'app/actions';
import * as ActionsPokemonExplorer from 'app/components/PokemonExplorer/actions';
import {
CombatMoveSelectorsOpen,
@ -18,7 +19,7 @@ import {
SelectedCombatMoves,
SubNavigation,
} from 'app/components/PokemonExplorer/types';
import { IRouterProps } from 'app/types';
import { IRouterProps, Navigation as NavigationType } from 'app/types';
import { LeagueIvExplorer } from 'app/components/PokemonExplorer/LeagueIvExplorer';
import { MovesExplorer } from 'app/components/PokemonExplorer/MovesExplorer';
@ -35,6 +36,7 @@ import * as PVPogoProtos from 'common/models/PVPogoProtos';
import * as styles from 'app/styles/PokemonApp.scss';
interface IPokemonExplorerProps extends IRouterProps {
isMenuOpen : boolean;
isOverlaid : boolean;
attackTypeEffectiveness : AttackTypeEffectiveness;
combatMoves : CombatMoveStats;
@ -47,6 +49,8 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
public render() {
const {
isMenuOpen,
isOverlaid,
combatMoves,
attackTypeEffectiveness,
} = this.props;
@ -60,7 +64,7 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
} = this.props.pokemonExplorerState;
const isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
const isOverlayShown = this.props.isOverlaid || isSelectingMove;
const isOverlayShown = isOverlaid || isSelectingMove;
const navWrapperCss = classNames(
styles.navigationWrapper,
@ -90,14 +94,7 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
<PokemonDisplay
leaguePokemon={ leaguePokemon }
isHighlighted={ isOverlayShown }
>
<Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
<Navigation
widgets={ widgets }
handleNavigationClick={ this.handleNavigationClick }
/>
</Media>
</PokemonDisplay>
/>
}
{ widgets.types && leaguePokemon !== null &&
<div className="nes-container with-title">
@ -135,10 +132,20 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
</div>
<Media query={ { minWidth: MIN_TABLET_WIDTH } }>
<Navigation
isMenu={ false }
widgets={ widgets }
handleNavigationClick={ this.handleNavigationClick }
/>
</Media>
{ isMenuOpen &&
<Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
<Navigation
isMenu={ true }
widgets={ widgets }
handleNavigationClick={ this.handleNavigationClick }
/>
</Media>
}
</div>
{ isOverlayShown &&
<div className={ overLayCss } onClick={ this.handleOverlayClick } />
@ -176,8 +183,13 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
this.props.toggleInterruption(false);
}
private readonly handleNavigationClick = (widget : SubNavigation) => {
this.props.dispatch(ActionsPokemonExplorer.setSubNavigationWidgetIsShown(widget, !this.props.pokemonExplorerState.widgets[widget]));
private readonly handleNavigationClick = (widget : SubNavigation | NavigationType) => {
if (widget === 'pokedex') {
this.props.dispatch(ActionsPokemonApp.setIsInterruption(true));
this.props.dispatch(ActionsPokemonApp.setNavigation('pokedex'));
} else if (widget !== 'menu') {
this.props.dispatch(ActionsPokemonExplorer.setSubNavigationWidgetIsShown(widget, !this.props.pokemonExplorerState.widgets[widget]));
}
}
private readonly handleChangeIndividualValue = (stat : IndividualValueKey, value : number | null) => {

2
src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss
View File

@ -70,7 +70,7 @@
.wrapper {
font-size: 0.8em;
display: flex;
justify-content: space-between;
justify-content: space-around;
margin: 0 0 0.5rem 0;
}

20
src/ts/app/components/PokemonExplorer/styles/Navigation.scss
View File

@ -9,17 +9,17 @@
flex-flow: column nowrap;
align-self: flex-start;
@media only screen and (max-width: $max-mobile-width) {
position: static;
display: flex;
flex-flow: row nowrap;
padding: 0;
margin: 0;
width: 100%;
justify-content: space-evenly;
&.menu {
position: fixed;
right: $navigation-width;
z-index: 1;
width: 100px;
height: 325px;
justify-content: space-between;
button {
margin-bottom: 0;
button > * {
display: block;
margin: auto;
}
}
}

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

@ -1,4 +1,5 @@
// This file is automatically generated.
// Please do not change this file!
export const menu: string;
export const navigation: string;
export const navigationButton: string;

2
src/ts/app/components/PokemonExplorer/styles/StatDisplay.scss
View File

@ -21,7 +21,7 @@
}
@media only screen and (max-width: $max-small-mobile-width) {
height: 1.4em;
height: 1.3em;
}
}
}

11
src/ts/app/reducers.ts
View File

@ -4,6 +4,7 @@ import * as Actions from 'app/actions';
import { IPokemonAppState, PokemonAppActionTypes } from 'app/types';
export const initialState : IPokemonAppState = {
navigation: null,
isInterruption: false,
maxPossibleStats: {
baseStamina: 0,
@ -16,6 +17,14 @@ export const initialState : IPokemonAppState = {
pokemonLeagueStats: {}, // TODO: this should be a map, but only if it makes sense with action reducers
};
const reduceSetNavigation = (
state : IPokemonAppState,
action : ReturnType<typeof Actions.setNavigation>
) : IPokemonAppState => ({
...state,
navigation: action.payload.navigation,
});
const reduceSetInterruption = (
state : IPokemonAppState,
action : ReturnType<typeof Actions.setIsInterruption>
@ -66,6 +75,8 @@ export const PokemonAppReducers : Reducer<IPokemonAppState> = (
action,
) : IPokemonAppState => {
switch (action.type) {
case PokemonAppActionTypes.SET_NAVIGATION:
return reduceSetNavigation(state, action as ReturnType<typeof Actions.setNavigation>);
case PokemonAppActionTypes.SET_IS_INTERRUPTION:
return reduceSetInterruption(state, action as ReturnType<typeof Actions.setIsInterruption>);
case PokemonAppActionTypes.SET_MAX_STATS:

5
src/ts/app/styles/PokemonApp.scss
View File

@ -58,6 +58,11 @@ $footer-height: 60px;
.navigationButton {
composes: navigationButton from '../components/PokemonExplorer/styles/Navigation.scss';
&.hamburgerIcon {
font-size: 2rem;
margin-top: -6px;
}
}
.overlay {

1
src/ts/app/styles/PokemonApp.scss.d.ts vendored
View File

@ -5,6 +5,7 @@ export const complete: string;
export const container: string;
export const displayWrapper: string;
export const footer: string;
export const hamburgerIcon: string;
export const header: string;
export const highlight: string;
export const leftColumn: string;

4
src/ts/app/types.ts
View File

@ -12,7 +12,10 @@ import { IPokemonSelectListState } from 'app/components/PokemonSelectList/types'
import { PokemonService } from 'api/PokemonService';
export type Navigation = 'pokedex' | 'menu';
export interface IPokemonAppState {
navigation : Navigation | null;
isInterruption : boolean;
maxPossibleStats : IMaxStats;
attackTypeEffectiveness : AttackTypeEffectiveness;
@ -21,6 +24,7 @@ export interface IPokemonAppState {
}
export const PokemonAppActionTypes = {
SET_NAVIGATION: 'SET_NAVIGATION',
SET_IS_INTERRUPTION: 'POKEMON_APP/SET_IS_INTERRUPTION',
SET_MAX_STATS: 'POKEMON_APP/SET_MAX_STATS',
SET_ATTACK_TYPE_EFFECTIVENESS: 'POKEMON_APP/SET_ATTACK_TYPE_EFFECTIVENESS',