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

finish up welcome dialog and footer

Browse Source
This commit is contained in:
Jeff Colombo 2019-04-16 20:26:53 -04:00
parent f0dc252794
commit 4d0dd3efd7
19 changed files with 219 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/app.css vendored
View File

@ -2,9 +2,11 @@
/** 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}.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;height:100vh}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.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;display:flex;justify-content:flex-end;padding-top:0;padding-bottom: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:450px;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:0;align-items:start}
.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:450px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch;height:100vh}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.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}ul{display:grid;justify-items:center}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;grid-column-gap:1em;justify-content:center;padding-top:0;padding-bottom:0}.PokemonApp__footer__3q19Q .PokemonApp__adWrapper__3GNZY{width:320px;height:50px;grid-column-start:2;display:flex;justify-content:space-evenly;align-items:center}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6{margin:auto 0 auto auto}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6>*{display:inline;margin:1em}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6 .PokemonApp__feedback__2Nh7J{vertical-align:super}.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__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:0;align-items:start}
.ExplorerLoading__wrapper__MGSlF{display:flex;flex-wrap:wrap;width:480px;margin:0 auto}@media only screen and (max-width: 767px){.ExplorerLoading__wrapper__MGSlF{flex-direction:column}}.ExplorerLoading__wrapper__MGSlF .icon{animation:ExplorerLoading__bounce__F9WGl 0.6s both linear infinite}@media only screen and (max-width: 767px){.ExplorerLoading__wrapper__MGSlF .icon{margin:0 auto}}@keyframes ExplorerLoading__bounce__F9WGl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.ExplorerLoading__wrapper__MGSlF .icon:nth-child(2){animation-delay:0.2s}.ExplorerLoading__wrapper__MGSlF .icon:nth-child(3){animation-delay:0.4s}.ExplorerLoading__loading__kpcaU{width:100%;text-align:center;margin-top:0.5em}.ExplorerLoading__loading__kpcaU::after{position:absolute;overflow:hidden;display:inline-block;vertical-align:bottom;animation:ExplorerLoading__ellipsis__3kLb6 steps(4, end) 900ms infinite;content:"\2026";width:0}@keyframes ExplorerLoading__ellipsis__3kLb6{to{width:1.25em}}
.Loading__wrapper__3kid5{text-align:center}.Loading__wrapper__3kid5 .icon{animation:Loading__bounce__2g2QY 0.6s both linear infinite}@media only screen and (max-width: 767px){.Loading__wrapper__3kid5 .icon{margin:0 auto}}@keyframes Loading__bounce__2g2QY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.Loading__wrapper__3kid5 .icon:nth-child(2){animation-delay:0.2s}.Loading__wrapper__3kid5 .icon:nth-child(3){animation-delay:0.4s}
.ExplorerLoading__wrapper__MGSlF{display:flex;flex-wrap:wrap;width:480px;margin:0 auto}@media only screen and (max-width: 767px){.ExplorerLoading__wrapper__MGSlF{flex-direction:column}}.ExplorerLoading__loading__kpcaU{width:100%;text-align:center;margin-top:0.5em}.ExplorerLoading__loading__kpcaU::after{position:absolute;overflow:hidden;display:inline-block;vertical-align:bottom;animation:ExplorerLoading__ellipsis__3kLb6 steps(4, end) 900ms infinite;content:"\2026";width:0}@keyframes ExplorerLoading__ellipsis__3kLb6{to{width:1.25em}}
.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}
@ -14,7 +16,7 @@
.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;height:100vh}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.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;display:flex;justify-content:flex-end;padding-top:0;padding-bottom: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:450px;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:0;align-items:start}
.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:450px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch;height:100vh}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:75px}.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}ul{display:grid;justify-items:center}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;grid-column-gap:1em;justify-content:center;padding-top:0;padding-bottom:0}.PokemonApp__footer__3q19Q .PokemonApp__adWrapper__3GNZY{width:320px;height:50px;grid-column-start:2;display:flex;justify-content:space-evenly;align-items:center}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6{margin:auto 0 auto auto}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6>*{display:inline;margin:1em}.PokemonApp__footer__3q19Q .PokemonApp__contactWrapper__2kgo6 .PokemonApp__feedback__2Nh7J{vertical-align:super}.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__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:0;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}
@ -32,7 +34,7 @@
.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%}
.WelcomeDialog__dialog__2L0N1{width:450px;position:fixed;z-index:2;top:20%;left:0;right:0;margin:0 auto}@media only screen and (max-width: 767px){.WelcomeDialog__dialog__2L0N1{width:auto;margin:0 0.1em}}.WelcomeDialog__title__35Pr6{text-align:center;margin-top:1em}.WelcomeDialog__closeButton__2brhD{position:absolute;top:0.25em;right:0.25em;margin:0}
.WelcomeDialog__dialog__2L0N1{font-size:0.75em;width:450px;position:fixed;z-index:2;top:20%;left:0;right:0;margin:0 auto}@media only screen and (max-width: 767px){.WelcomeDialog__dialog__2L0N1{width:auto;margin:0 0.1em}}.WelcomeDialog__title__35Pr6{text-align:center;margin-top:1em}.WelcomeDialog__closeButton__2brhD{position:absolute;top:0.25em;right:0.25em;margin:0}.WelcomeDialog__iconWrapper__3emT0{display:flex;justify-content:space-evenly}.WelcomeDialog__iconWrapper__3emT0 .icon:hover{animation:WelcomeDialog__bounce__12n2T 0.6s both linear infinite}@keyframes WelcomeDialog__bounce__12n2T{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/*# sourceMappingURL=main.tmp.css.map*/

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

12
dist/main-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/scss/index.scss
View File

@ -189,4 +189,8 @@ a.list-item {
}
}
.nes-list li {
margin: 1em 0;
}
/** end nes.css overrides */

19
src/scss/sprites.scss
View File

@ -192,6 +192,16 @@ $scale: 4;
// TODO: https://veekun.com/dex/downloads
// TODO: https://github.com/msikma/pokesprite
.pokemon-rhydon,
.pokemon-bird,
.pokemon-fish,
.pokemon-clefairy,
.pokemon-plant,
.pokemon-bug,
.pokemon-snake,
.pokemon-tauros,
.pokemon-pokeball,
.pokemon-fossil,
.pokemon-001, // #001 Bulbasaur
.pokemon-002, // #002 Ivysaur
.pokemon-003, // #003 Venusaur
@ -1027,7 +1037,8 @@ $scale: 4;
100% { background-position-y: -146px; }
}
:hover > & {
:hover > &,
&.active {
animation: dance 300ms steps(2) infinite;
}
@ -1858,7 +1869,8 @@ $scale: 4;
&.pokemon-pokeball {
background-position: 0 -128px;
:hover > & {
:hover > &,
&.active {
animation: pokeball-dance 300ms steps(2) infinite alternate;
}
}
@ -1893,7 +1905,8 @@ $scale: 4;
&.pokemon-fossil {
background-position: 0 -144px;
:hover > & {
:hover > &,
&.active {
animation: fossil-dance 300ms steps(2) infinite alternate;
}
}

21
src/ts/app/components/Footer.tsx
View File

@ -1,7 +1,10 @@
import React from 'react';
import Media from 'react-media';
import classNames from 'classnames';
import { MIN_DESKTOP_WIDTH } from 'common/models/constants';
import * as styles from 'app/styles/PokemonApp.scss';
interface IFooterProps {}
@ -16,7 +19,25 @@ export class Footer extends React.Component<IFooterProps> {
return (
<footer className={ footerCss }>
<div className={ styles.adWrapper }>
<i className="icon pixel sprite menu pokemon-rhydon" />
<i className="icon pixel sprite menu pokemon-bird" />
<i className="icon pixel sprite menu pokemon-fish" />
<i className="icon pixel sprite menu pokemon-clefairy" />
<i className="icon pixel sprite menu pokemon-plant" />
<i className="icon pixel sprite menu pokemon-bug" />
<i className="icon pixel sprite menu pokemon-snake" />
<i className="icon pixel sprite menu pokemon-tauros" />
<i className="icon pixel sprite menu pokemon-pokeball" />
<i className="icon pixel sprite menu pokemon-fossil" />
</div>
<span className={ styles.contactWrapper }>
<Media query={ { minWidth: MIN_DESKTOP_WIDTH } }>
<span className={ styles.feedback }>Feedback?</span>
</Media>
<a href="mailto:feedback@pvpokemon.com"><i className="nes-icon gmail" /></a>
<a href="https://twitter.com/pvpokemongo"><i className="nes-icon twitter" /></a>
</span>
</footer>
);
}

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

@ -45,7 +45,7 @@ export class Header extends React.Component<IHeaderProps> {
<a onClick={ handleHomeClick }>
<i className={ iconCss } />
<Media query={ { minWidth: MIN_TABLET_WIDTH } }>
<span>PVPokémon</span>
<span>PVPokémon Go</span>
</Media>
</a>
{ /* <Link

44
src/ts/app/components/Loading.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import classNames from 'classnames';
import { formatDexNumber } from 'app/utils/formatter';
import * as styles from 'app/styles/Loading.scss';
export interface ILoadingProps {}
export class Loading extends React.Component<ILoadingProps> {
public render() {
const pokemonGroups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[172, 25, 26],
[144, 145, 146],
];
const pokemonIconCss = classNames(
'icon',
'pixel',
'sprite',
);
const groupIndex = Math.floor(Math.random() * pokemonGroups.length);
const pokemonIcons = pokemonGroups[groupIndex].map((dex) => {
const pokemonCss = classNames(
pokemonIconCss,
`pokemon-${ formatDexNumber(dex) }`,
);
return <div key={ dex } className={ pokemonCss } />;
});
return (
<div className={ styles.wrapper }>
{ pokemonIcons }
</div>
);
}
}

29
src/ts/app/components/PokemonExplorer/ExplorerLoading.tsx
View File

@ -1,8 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import { formatDexNumber } from 'app/utils/formatter';
import { Loading } from 'app/components/Loading';
import * as styles from 'app/components/PokemonExplorer/styles/ExplorerLoading.scss';
@ -12,32 +10,9 @@ export class ExplorerLoading extends React.Component<IExplorerLoadingProps> {
public render() {
const pokemonGroups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[172, 25, 26],
[144, 145, 146],
];
const pokemonIconCss = classNames(
'icon',
'pixel',
'sprite',
);
const groupIndex = Math.floor(Math.random() * pokemonGroups.length);
const pokemonIcons = pokemonGroups[groupIndex].map((dex) => {
const pokemonCss = classNames(
pokemonIconCss,
`pokemon-${ formatDexNumber(dex) }`,
);
return <div key={ dex } className={ pokemonCss } />;
});
return (
<div className={ styles.wrapper }>
{ pokemonIcons }
<Loading />
<h2 className={ styles.loading }>Loading</h2>
</div>
);

27
src/ts/app/components/PokemonExplorer/styles/ExplorerLoading.scss
View File

@ -9,33 +9,6 @@
@media only screen and (max-width: $max-mobile-width) {
flex-direction: column;
}
:global(.icon) {
animation: bounce 0.6s both linear infinite;
@media only screen and (max-width: $max-mobile-width) {
margin: 0 auto;
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
}
}
.loading {

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

@ -1,6 +1,5 @@
// This file is automatically generated.
// Please do not change this file!
export const bounce: string;
export const ellipsis: string;
export const loading: string;
export const wrapper: string;

13
src/ts/app/components/WelcomeDialog.tsx
View File

@ -28,11 +28,16 @@ export class WelcomeDialog extends React.Component<IWelcomeDialogProps> {
return (
<div className={ wrapperCss }>
<h3 className={ styles.title }>Welcome to PVPokémon</h3>
<ul>
<li>Hello</li>
<li>Goodbye</li>
<h3 className={ styles.title }>Welcome to PVPokémon Go</h3>
<ul className="nes-list is-disc">
<li>Evaluate your Pokémon for PVP viability!</li>
<li>Activate icons for hidden areas!</li>
<li>Enjoy state-of-the-art graphics!</li>
<li>What functionality would you like to see? There's plenty more to add!</li>
</ul>
<div className={ styles.iconWrapper }>
<a href="https://www.youtube.com/watch?v=Ce5mRvkAePU" target="_blank"><i className="icon pixel sprite pokemon-079" /></a>
</div>
<i
className={ closeCss }
onClick={ handleClose }

32
src/ts/app/styles/Loading.scss Normal file
View File

@ -0,0 +1,32 @@
@import '~styles/Variables.scss';
.wrapper {
text-align: center;
:global(.icon) {
animation: bounce 0.6s both linear infinite;
@media only screen and (max-width: $max-mobile-width) {
margin: 0 auto;
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
}
}

4
src/ts/app/styles/Loading.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 bounce: string;
export const wrapper: string;

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

@ -3,6 +3,20 @@
$overlay-opacity: 0.7;
$footer-height: 60px;
.displayWrapper {
margin: 0 auto;
& > * {
width: map-get($container-width, 'desktop');
margin: 0 1em;
@media only screen and (max-width: $max-mobile-width) {
width: auto;
margin: 0 0.1em;
}
}
}
.wrapper {
display: flex;
flex-flow: column nowrap;
@ -42,16 +56,45 @@ $footer-height: 60px;
}
}
ul {
display: grid;
justify-items: center;
}
.footer {
height: $footer-height;
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: flex-end;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-column-gap: 1em;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
.adWrapper {
width: 320px;
height: 50px;
grid-column-start: 2;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.contactWrapper {
margin: auto 0 auto auto;
> * {
display: inline;
margin: 1em;
}
.feedback {
vertical-align: super;
}
}
}
.header,
@ -88,20 +131,6 @@ $footer-height: 60px;
margin: 0 auto;
}
.displayWrapper {
margin: 0 auto;
& > * {
width: map-get($container-width, 'desktop');
margin: 0 1em;
@media only screen and (max-width: $max-mobile-width) {
width: auto;
margin: 0 0.1em;
}
}
}
.container {
display: flex;
justify-content: space-evenly;

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

@ -1,9 +1,12 @@
// This file is automatically generated.
// Please do not change this file!
export const adWrapper: string;
export const body: string;
export const complete: string;
export const contactWrapper: string;
export const container: string;
export const displayWrapper: string;
export const feedback: string;
export const footer: string;
export const hamburgerIcon: string;
export const header: string;

21
src/ts/app/styles/WelcomeDialog.scss
View File

@ -1,6 +1,7 @@
@import 'styles/Variables.scss';
.dialog {
font-size: 0.75em;
width: map-get($container-width, 'desktop');
position: fixed;
z-index: 2;
@ -26,3 +27,23 @@
right: 0.25em;
margin: 0;
}
.iconWrapper {
display: flex;
justify-content: space-evenly;
:global(.icon):hover {
animation: bounce 0.6s both linear infinite;
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
}
}

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

@ -1,5 +1,7 @@
// This file is automatically generated.
// Please do not change this file!
export const bounce: string;
export const closeButton: string;
export const dialog: string;
export const iconWrapper: string;
export const title: string;