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

more mobile work

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-24 23:08:09 -04:00
parent c7bd19a32a
commit d1419c0f6e
23 changed files with 254 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/app.css vendored
View File

@ -1,6 +1,8 @@
/* Generated by cssConcatenator.js */
/** Source: ./dist/main.tmp.css */
.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__navigation__26Mp5{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){.PokemonApp__navigation__26Mp5{position:absolute;top:0;right:72px}}.PokemonApp__header__2s_s2 button,.PokemonApp__navigation__26Mp5 button{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}.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}
.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}
.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}
.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}
@ -8,9 +10,9 @@
.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}}
.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}}
.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__navigation__26Mp5{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){.PokemonApp__navigation__26Mp5{position:absolute;top:0;right:72px}}.PokemonApp__header__2s_s2 button,.PokemonApp__navigation__26Mp5 button{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}.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__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}
@ -22,6 +24,8 @@
.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}
.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}
.PokemonSelectList__wrapper__2LQMY{font-size:0.8rem;width:20em;display:flex;flex-flow:column nowrap;margin:0 1.5em 0 auto;position:relative}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6{flex:1 1 auto;display:flex;padding:0;overflow:hidden;height:340px;position:absolute;top:100%;left:0;right:0;z-index:2}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6>*{width:100%}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb{align-self:center;text-align:center}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb>*:first-child{margin:1em auto}.PokemonSelectList__wrapper__2LQMY a{color:inherit;text-decoration:none;padding:5px 1em 5px 2em;justify-content:flex-end;align-content:space-around;flex-wrap:wrap;display:flex}.PokemonSelectList__wrapper__2LQMY a .PokemonSelectList__menuIcon__1I2_T{margin:-4px 0 0 0.5em;opacity:0.5}.PokemonSelectList__wrapper__2LQMY a.active .PokemonSelectList__menuIcon__1I2_T{opacity:1}.PokemonSelectList__filterWrapper__1d1Wl{position:relative;margin:0.1em}.PokemonSelectList__filterWrapper__1d1Wl .close{position:absolute;top:1em;right:1em}.PokemonSelectList__filterInput__1z_s2{margin-left:0;margin-right:0;padding-right:3em}.PokemonSelectList__dex__1QHut,.PokemonSelectList__form__VIw8Q{font-size:0.8em;text-transform:capitalize}.PokemonSelectList__dex__1QHut{margin-left:auto}.PokemonSelectList__form__VIw8Q{flex:0 1 100%}

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

14
dist/main-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

1
src/scss/Components.scss
View File

@ -1 +0,0 @@
$navigation-width: 72px;

26
src/scss/Variables.scss
View File

@ -1,30 +1,6 @@
@import '~nes.css/scss/base/color-palette';
@import '~nes.css/scss/base/variables';
// 320 x 568
// 360 x 640
// 375 x 667
// 411 x 731
// 414 x 736
// 768 x 1024
// 1024 x 1366
// 1280 x 800
// 1440 x 900
$min-large-desktop-width: 1200px;
$max-desktop-width: 1199px;
$min-desktop-width: 993px;
$max-tablet-width: 992px;
$min-tablet-width: 768px;
$max-mobile-width: 767px;
$min-mobile-width: 360px;
$max-small-mobile-width: 359px;
$container-width: (
desktop: 425px,
tablet: 425px,
mobile: 320px
);
@import './constants';
$game-boy-1: #e3eec0;
$game-boy-2: #aeba89;

26
src/scss/constants.scss Normal file
View File

@ -0,0 +1,26 @@
$navigation-width: 72px;
// 320 x 568
// 360 x 640
// 375 x 667
// 411 x 731
// 414 x 736
// 768 x 1024
// 1024 x 1366
// 1280 x 800
// 1440 x 900
$min-large-desktop-width: 1200px;
$max-desktop-width: 1199px;
$min-desktop-width: 993px;
$max-tablet-width: 992px;
$min-tablet-width: 768px;
$max-mobile-width: 767px;
$min-mobile-width: 360px;
$max-small-mobile-width: 359px;
$container-width: (
desktop: 425px,
tablet: 425px,
mobile: 320px
);

5
src/scss/index.scss
View File

@ -44,6 +44,10 @@ body {
color: $main-font-primary-color;
}
button:focus {
outline: none;
}
a.active:not([href]):not([tabindex]) {
color: $main-active-font-color;
}
@ -111,6 +115,7 @@ a.list-item {
.nes-container.with-title > .title {
font-size: 1em;
background-color: $main-background-color;
margin: -2rem 0 1rem;
}
.nes-container:not(:last-child) {

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

@ -114,6 +114,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
}
);
const pokedexButtonCss = classNames(
styles.navigationButton,
// {
// [styles.activeNavigationButton]: activeNavigation === 'pokedex',
// }

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

@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
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';
@ -54,7 +56,7 @@ export class Header extends React.Component<IHeaderProps> {
// onClick={ this.reload }
>
<i className={ iconCss } />
<Media query={ { minWidth: 768 } }>
<Media query={ { minWidth: MIN_TABLET_WIDTH } }>
<span>PVPokémon</span>
</Media>
</Link>

97
src/ts/app/components/PokemonExplorer/Navigation.tsx Normal file
View File

@ -0,0 +1,97 @@
import React from 'react';
import classNames from 'classnames';
import {
SubNavigation,
SubNavigationDisplay,
} from 'app/components/PokemonExplorer/types';
import * as styles from 'app/components/PokemonExplorer/styles/Navigation.scss';
export interface INavigationProps {
widgets : SubNavigationDisplay;
handleNavigationClick : (widget : SubNavigation) => void;
}
export class Navigation extends React.Component<INavigationProps> {
public render() {
const {
widgets,
} = this.props;
const navCss = classNames(
styles.navigation,
);
const iconCss = classNames(
'icon',
'pixel',
'sprite',
);
const buttonCss = classNames(
styles.navigationButton,
);
const pvpCss = classNames(
iconCss,
'pvp',
{
active: widgets.pvp,
}
);
const pvpButtonCss = classNames(
buttonCss,
// {
// [styles.activeNavigationButton]: widgets.pvp,
// }
);
const badgeCss = classNames(
iconCss,
'badge',
{
active: widgets.types,
}
);
const badgeButtonCss = classNames(
buttonCss,
// {
// [styles.activeNavigationButton]: widgets.types,
// }
);
const tmCss = classNames(
iconCss,
'tm',
{
active: widgets.moves,
}
);
const tmButtonCss = classNames(
buttonCss,
// {
// [styles.activeNavigationButton]: widgets.moves,
// }
);
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>
</div>
);
}
private handleTypesClick = () => {
this.props.handleNavigationClick('types');
}
private handleMovesClick = () => {
this.props.handleNavigationClick('moves');
}
private handlePvpClick = () => {
this.props.handleNavigationClick('pvp');
}
}

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

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

123
src/ts/app/components/PokemonExplorer/PokemonExplorer.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';
@ -14,18 +15,21 @@ import {
IndividualValueKey,
IPokemonExplorerDispatch,
IPokemonExplorerStore,
SelectedCombatMoves
SelectedCombatMoves,
SubNavigation,
} from 'app/components/PokemonExplorer/types';
import { IRouterProps } from 'app/types';
import { LeagueIvExplorer } from 'app/components/PokemonExplorer/LeagueIvExplorer';
import { MovesExplorer } from 'app/components/PokemonExplorer/MovesExplorer';
import { Navigation } from 'app/components/PokemonExplorer/Navigation';
import { PokemonDisplay } from 'app/components/PokemonExplorer/PokemonDisplay';
import { EffectivenessMode, TypeEffectiveDisplay } from 'app/components/PokemonExplorer/TypeEffectiveDisplay';
import { appendQueryString } from 'app/utils/navigation';
import { calculateTypeCoverage } from 'app/utils/types';
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';
@ -39,24 +43,7 @@ interface IPokemonExplorerProps extends IRouterProps {
interface IConnectedPokemonExplorerProps extends IPokemonExplorerStore, IPokemonExplorerDispatch, IPokemonExplorerProps {}
type SubNavigation = 'pvp' | 'types' | 'moves';
interface IState {
widgets : { [ key in SubNavigation ] : boolean };
}
class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IState> {
constructor(props : IConnectedPokemonExplorerProps) {
super(props);
this.state = {
widgets: {
pvp: true,
types: false,
moves: false,
},
};
}
class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
public render() {
const {
@ -66,13 +53,11 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
const {
league,
individualValues,
widgets,
leaguePokemon,
selectedCombatMoves,
combatMoveSelectorsOpen,
} = this.props.pokemonExplorerState;
const {
widgets,
} = this.state;
const isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
const isOverlayShown = this.props.isOverlaid || isSelectingMove;
@ -80,57 +65,11 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
const navWrapperCss = classNames(
styles.navigationWrapper,
);
const navCss = classNames(
styles.navigation,
);
const displayWrapperCss = classNames(
styles.displayWrapper,
);
const iconCss = classNames(
'icon',
'pixel',
'sprite',
);
const pvpCss = classNames(
iconCss,
'pvp',
{
active: widgets.pvp,
}
);
const pvpButtonCss = classNames(
// {
// [styles.activeNavigationButton]: widgets.pvp,
// }
);
const badgeCss = classNames(
iconCss,
'badge',
{
active: widgets.types,
}
);
const badgeButtonCss = classNames(
// {
// [styles.activeNavigationButton]: widgets.types,
// }
);
const tmCss = classNames(
iconCss,
'tm',
{
active: widgets.moves,
}
);
const tmButtonCss = classNames(
// {
// [styles.activeNavigationButton]: widgets.moves,
// }
);
const overLayCss = classNames(
styles.overlay,
{
@ -151,7 +90,14 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
<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">
@ -187,11 +133,12 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
/>
}
</div>
<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>
</div>
<Media query={ { minWidth: MIN_TABLET_WIDTH } }>
<Navigation
widgets={ widgets }
handleNavigationClick={ this.handleNavigationClick }
/>
</Media>
</div>
{ isOverlayShown &&
<div className={ overLayCss } onClick={ this.handleOverlayClick } />
@ -229,34 +176,8 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
this.props.toggleInterruption(false);
}
private readonly handlePvpClick = () => {
const widgets = this.state.widgets;
this.setState({
widgets: {
...widgets,
pvp: !widgets.pvp
}
});
}
private readonly handleTypesClick = () => {
const widgets = this.state.widgets;
this.setState({
widgets: {
...widgets,
types: !widgets.types
}
});
}
private readonly handleMovesClick = () => {
const widgets = this.state.widgets;
this.setState({
widgets: {
...widgets,
moves: !widgets.moves
}
});
private readonly handleNavigationClick = (widget : SubNavigation) => {
this.props.dispatch(ActionsPokemonExplorer.setSubNavigationWidgetIsShown(widget, !this.props.pokemonExplorerState.widgets[widget]));
}
private readonly handleChangeIndividualValue = (stat : IndividualValueKey, value : number | null) => {

3
src/ts/app/components/PokemonExplorer/actions.ts
View File

@ -4,6 +4,7 @@ import {
CombatMoveSelectorsOpen,
PokemonExplorerActionTypes,
SelectedCombatMoves,
SubNavigation,
ThunkResult
} from 'app/components/PokemonExplorer/types';
@ -15,6 +16,8 @@ export const setIsLoading = (isLoading : boolean) => action(PokemonExplorerActio
export const setLeaguePokemon = (leaguePokemon : ILeaguePokemon | null) => action(PokemonExplorerActionTypes.SET_LEAGUE_POKEMON, { leaguePokemon });
export const setSubNavigationWidgetIsShown = (widget : SubNavigation, isShown : boolean) => action(PokemonExplorerActionTypes.SET_SUBNAVIGATION_WIDGET_IS_SHOWN, { widget, isShown });
export const setIvLevel = (level : number | null) => action(PokemonExplorerActionTypes.SET_IV_LEVEL, { level });
export const setIvHp = (ivHp : number | null) => action(PokemonExplorerActionTypes.SET_IV_HP, { ivHp });

18
src/ts/app/components/PokemonExplorer/reducers.ts
View File

@ -8,6 +8,11 @@ import { IPokemonExplorerState, PokemonExplorerActionTypes } from 'app/component
export const initialState : IPokemonExplorerState = {
isLoading: false,
leaguePokemon: null,
widgets: {
types: false,
moves: false,
pvp: true,
},
individualValues: {
level: null,
ivHp: null,
@ -43,6 +48,17 @@ const reduceSetLeaguePokemon = (
leaguePokemon: action.payload.leaguePokemon,
});
const reduceSetSubNavigationWidgetIsShown = (
state : IPokemonExplorerState,
action : ReturnType<typeof Actions.setSubNavigationWidgetIsShown>
) : IPokemonExplorerState => ({
...state,
widgets: {
...state.widgets,
[action.payload.widget]: action.payload.isShown,
}
});
const reduceSetIvLevel = (
state : IPokemonExplorerState,
action : ReturnType<typeof Actions.setIvLevel>
@ -124,6 +140,8 @@ export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
return reduceSetIsLoading(state, action as ReturnType<typeof Actions.setIsLoading>);
case PokemonExplorerActionTypes.SET_LEAGUE_POKEMON:
return reduceSetLeaguePokemon(state, action as ReturnType<typeof Actions.setLeaguePokemon>);
case PokemonExplorerActionTypes.SET_SUBNAVIGATION_WIDGET_IS_SHOWN:
return reduceSetSubNavigationWidgetIsShown(state, action as ReturnType<typeof Actions.setSubNavigationWidgetIsShown>);
case PokemonExplorerActionTypes.SET_IV_LEVEL:
return reduceSetIvLevel(state, action as ReturnType<typeof Actions.setIvLevel>);
case PokemonExplorerActionTypes.SET_IV_HP:

33
src/ts/app/components/PokemonExplorer/styles/Navigation.scss Normal file
View File

@ -0,0 +1,33 @@
@import '~styles/Variables.scss';
.navigation {
margin-right: -1 * $navigation-width; // offset so the displayWrapper is centered
padding: 1em;
position: sticky;
top: 90px;
display: inline-flex;
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;
button {
margin-bottom: 0;
}
}
}
.navigationButton {
padding: 0;
margin-bottom: 1em;
outline: none;
border: none;
background-color: transparent;
}

4
src/ts/app/components/PokemonExplorer/styles/Navigation.scss.d.ts vendored Normal file
View File

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

1
src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss
View File

@ -1,5 +1,4 @@
@import '~styles/Variables.scss';
@import '~styles/Components.scss';
.highlight {
composes: highlight from '../../../styles/PokemonApp.scss';

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

@ -19,5 +19,9 @@
@media only screen and (max-width: $max-mobile-width) {
height: 1.2em;
}
@media only screen and (max-width: $max-small-mobile-width) {
height: 1.4em;
}
}
}

5
src/ts/app/components/PokemonExplorer/types.ts
View File

@ -26,9 +26,13 @@ export type CombatMoveSelectorsOpen = {
[ key in MoveTypes ] : boolean;
};
export type SubNavigation = 'pvp' | 'types' | 'moves';
export type SubNavigationDisplay = { [ key in SubNavigation ] : boolean };
export interface IPokemonExplorerState {
isLoading : boolean;
leaguePokemon : ILeaguePokemon | null;
widgets : SubNavigationDisplay;
individualValues : IIndividualValues;
league : League;
selectedCombatMoves : SelectedCombatMoves;
@ -38,6 +42,7 @@ export interface IPokemonExplorerState {
export const PokemonExplorerActionTypes = {
SET_IS_LOADING: 'POKEMON_EXPLORER/SET_IS_LOADING',
SET_LEAGUE_POKEMON: 'POKEMON_EXPLORER/SET_LEAGUE_POKEMON',
SET_SUBNAVIGATION_WIDGET_IS_SHOWN: 'POKEMON_EXPLORER/SET_SUBNAVIGATION_WIDGET_IS_SHOWN',
SET_IV_LEVEL: 'POKEMON_EXPLORER/SET_IV_LEVEL',
SET_IV_HP: 'POKEMON_EXPLORER/SET_IV_HP',
SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',

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

@ -1,5 +1,4 @@
@import '~styles/Variables.scss';
@import '~styles/Components.scss';
$overlay-opacity: 0.7;
$footer-height: 60px;
@ -57,31 +56,8 @@ $footer-height: 60px;
z-index: 10;
}
.navigation {
margin-right: -1 * $navigation-width; // offset so the displayWrapper is centered
padding: 1em;
position: sticky;
top: 90px;
display: inline-flex;
flex-flow: column nowrap;
align-self: flex-start;
@media only screen and (max-width: $max-mobile-width) {
position: absolute;
top: 0;
right: $navigation-width;
}
}
.header,
.navigation {
button {
padding: 0;
margin-bottom: 1em;
outline: none;
border: none;
background-color: transparent;
}
.navigationButton {
composes: navigationButton from '../components/PokemonExplorer/styles/Navigation.scss';
}
.overlay {

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

@ -8,7 +8,7 @@ export const footer: string;
export const header: string;
export const highlight: string;
export const leftColumn: string;
export const navigation: string;
export const navigationButton: string;
export const navigationWrapper: string;
export const overlaid: string;
export const overlay: string;

10
src/ts/common/models/constants.ts Normal file
View File

@ -0,0 +1,10 @@
/* Screen Sizes */
// This should be kept equal to Screen Sizes in src/scss/constants.scss
export const MIN_LARGE_DESKTOP_WIDTH : number = 1200;
export const MAX_DESKTOP_WIDTH : number = 1199;
export const MIN_DESKTOP_WIDTH : number = 993;
export const MAX_TABLET_WIDTH : number = 992;
export const MIN_TABLET_WIDTH : number = 768;
export const MAX_MOBILE_WIDTH : number = 767;
export const MIN_MOBILE_WIDTH : number = 360;
export const MAX_SMALL_MOBILE_WIDTH : number = 359;