start welcome dialog

dist/app.css

@@ -32,5 +32,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}
+
 
 /*# sourceMappingURL=main.tmp.css.map*/

package.json

@@ -88,6 +88,7 @@
     "pokemongo-json-pokedex": "^3.4.6",
     "prop-types": "^15.6.2",
     "react": "^16.7.0",
+    "react-cookie": "^3.1.1",
     "react-dom": "^16.7.0",
     "react-measure": "^2.2.2",
     "react-media": "^1.9.2",

src/ts/app/PokemonApp.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ReactCookieProps, withCookies } from 'react-cookie';
 import Media from 'react-media';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
@@ -18,6 +19,7 @@ import { Footer } from 'app/components/Footer';
 import { Header } from 'app/components/Header';
 import { ConnectedPokemonExplorer } from 'app/components/PokemonExplorer/PokemonExplorer';
 import { PokemonSelectList } from 'app/components/PokemonSelectList/PokemonSelectList';
+import { WelcomeDialog } from 'app/components/WelcomeDialog';
 
 import { MAX_MOBILE_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';
 import * as PVPogoProtos from 'common/models/PVPogoProtos';
@@ -26,12 +28,13 @@ import * as styles from 'app/styles/PokemonApp.scss';
 
 type PokemonAppProps = ReturnType<typeof appReducers>;
 
-interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch, IRouterProps {}
+interface IConnectedPokemonAppProps extends PokemonAppProps, ReactCookieProps, IPokemonAppDispatch, IRouterProps {}
 
 class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
 
     public async componentWillMount() {
         const {
+            cookies,
             dispatch,
             match,
         } = this.props;
@@ -58,10 +61,18 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
         if (activeLeague !== null) {
             dispatch(ActionsPokemonExplorer.setActiveLeague(activeLeague));
         }
+
+        if (typeof cookies === 'undefined' || !cookies.get('welcomed')) {
+            if (typeof cookies !== 'undefined') {
+                cookies.set('welcomed', 1);
+            }
+            this.handleOpenWelcomeDialog();
+        }
     }
 
     public render() {
         const {
+            isWelcomeShown,
             navigation,
             isInterruption,
             attackTypeEffectiveness,
@@ -79,10 +90,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
         const activePokemonId = convertIdParamToPokemonId(matchParams.id);
         const activePokemonForm = convertFormParamToPokemonForm(matchParams.form);
 
+        const isOverlayShown = isWelcomeShown || isInterruption;
         const wrapperCss = classNames(
             styles.wrapper,
             {
-                [styles.overlaid]: isInterruption,
+                [styles.overlaid]: isOverlayShown,
             }
         );
 
@@ -120,7 +132,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
 
         return (
             <div className={ wrapperCss }>
-                <Header>
+                <Header
+                    handleHomeClick={ this.handleOpenWelcomeDialog }
+                >
                     <PokemonSelectList
                         isLoading={ this.props.pokemonSelectListState.isLoading }
                         isListOpen={ navigation === 'pokedex' }
@@ -141,16 +155,29 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
                 <ConnectedPokemonExplorer
                     key={ uniquePokemonId }
                     isMenuOpen={ navigation === 'menu' }
-                    isOverlaid={ isInterruption }
+                    isOverlaid={ isOverlayShown }
                     attackTypeEffectiveness={ attackTypeEffectiveness }
                     combatMoves={ combatMoves }
                     toggleInterruption={ this.handleToggleInterruption }
                 />
+                { isWelcomeShown &&
+                    <WelcomeDialog
+                        handleClose={ this.handleCloseWelcomeDialog }
+                    />
+                }
                 <Footer />
             </div>
         );
     }
 
+    private readonly handleOpenWelcomeDialog = () => {
+        this.props.dispatch(ActionsPokemonApp.setWelcomeShown(true));
+    }
+
+    private readonly handleCloseWelcomeDialog = () => {
+        this.props.dispatch(ActionsPokemonApp.setWelcomeShown(false));
+    }
+
     private readonly handleInterruption = (isInterruption : boolean, navigation : Navigation) => {
         const { dispatch } = this.props;
 
@@ -170,6 +197,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
         this.props.dispatch(ActionsPokemonApp.setIsInterruption(isInterruption));
         if (!isInterruption) {
             this.props.dispatch(ActionsPokemonApp.setNavigation(null));
+            this.handleCloseWelcomeDialog();
         }
     }
 
@@ -211,4 +239,4 @@ const mapStateToProps = (state : PokemonAppProps) : PokemonAppProps => {
     };
 };
 
-export const ConnectedPokemonApp = withRouter(connect(mapStateToProps)(PokemonApp));
+export const ConnectedPokemonApp = withCookies(withRouter(connect(mapStateToProps)(PokemonApp)));

src/ts/app/actions.ts

@@ -8,6 +8,8 @@ import { Navigation, PokemonAppActionTypes, ThunkResult } from 'app/types';
 
 import { AttackTypeEffectiveness } from 'app/models/Config';
 
+export const setWelcomeShown = (isWelcomeShown : boolean) => action(PokemonAppActionTypes.SET_WELCOME_SHOWN, { isWelcomeShown });
+
 export const setNavigation = (navigation : Navigation | null) => action(PokemonAppActionTypes.SET_NAVIGATION, { navigation });
 
 export const setIsInterruption = (isInterruption : boolean) => action(PokemonAppActionTypes.SET_IS_INTERRUPTION, { isInterruption });

src/ts/app/components/Header.tsx

@@ -8,11 +8,15 @@ import { MIN_TABLET_WIDTH } from 'common/models/constants';
 
 import * as styles from 'app/styles/PokemonApp.scss';
 
-interface IHeaderProps {}
+interface IHeaderProps {
+    handleHomeClick : () => void;
+}
 
 export class Header extends React.Component<IHeaderProps> {
 
     public render() {
+        const { handleHomeClick } = this.props;
+
         const headerCss = classNames(
             'nes-container',
             styles.header,
@@ -38,17 +42,12 @@ export class Header extends React.Component<IHeaderProps> {
         // };
         return (
             <header className={ headerCss }>
-                <Link
+                <a onClick={ handleHomeClick }>
-                    to="/explorer"
-                    // style={ style }
-                    // className={ anchorCss }
-                    // onClick={ this.reload }
-                >
                     <i className={ iconCss } />
                     <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
                         <span>PVPokémon</span>
                     </Media>
-                </Link>
+                </a>
                 { /* <Link
                     to="/explorer"
                     // style={ style }

src/ts/app/components/WelcomeDialog.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import * as styles from 'app/styles/WelcomeDialog.scss';
+
+export interface IWelcomeDialogProps {
+    handleClose : () => void;
+}
+
+export class WelcomeDialog extends React.Component<IWelcomeDialogProps> {
+
+    public render() {
+        const { handleClose } = this.props;
+
+        const wrapperCss = classNames(
+            'nes-dialog',
+            'nes-container',
+            styles.dialog,
+        );
+
+        const closeCss = classNames(
+            'nes-icon',
+            'close',
+            'is-small',
+            styles.closeButton,
+        );
+
+        return (
+            <div className={ wrapperCss }>
+                <h3 className={ styles.title }>Welcome to PVPokémon</h3>
+                <i
+                    className={ closeCss }
+                    onClick={ handleClose }
+                />
+            </div>
+        );
+    }
+}

src/ts/app/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CookiesProvider } from 'react-cookie';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { Redirect, Route, Router, Switch } from 'react-router-dom';
@@ -39,15 +40,19 @@ const store = Redux.createStore(
 const historyRouter = new HistoryRouter(store.dispatch);
 
 ReactDOM.render(
-    <Provider store={ store }>
+    <CookiesProvider>
-        <Router history={ historyRouter.getHistory() }>
+        <Provider store={ store }>
-            <Switch>
+            <Router history={ historyRouter.getHistory() }>
-                <Route path={ historyRouter.getRoutePath('PokemonExplorer') } component={ ConnectedPokemonApp } />
+                <Switch>
+                    <Route path={ historyRouter.getRoutePath('PokemonExplorer') }>
+                        <ConnectedPokemonApp />
+                    </Route>
 
-                <Redirect from="/" to="/explorer/1/0" />
+                    <Redirect from="/" to="/explorer/1/0" />
-            </Switch>
+                </Switch>
-        </Router>
+            </Router>
-    </Provider>,
+        </Provider>
+    </CookiesProvider>,
     document.getElementById('pokemon-mount')
 );
 

src/ts/app/reducers.ts

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

src/ts/app/styles/WelcomeDialog.scss

@@ -0,0 +1,28 @@
+@import 'styles/Variables.scss';
+
+.dialog {
+  width: map-get($container-width, 'desktop');
+  position: fixed;
+  z-index: 2;
+  top: 20%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+
+  @media only screen and (max-width: $max-mobile-width) {
+    width: auto;
+    margin: 0 0.1em;
+  }
+}
+
+.title {
+  text-align: center;
+  margin-top: 1em;
+}
+
+.closeButton {
+  position: absolute;
+  top: 0.25em;
+  right: 0.25em;
+  margin: 0;
+}

src/ts/app/styles/WelcomeDialog.scss.d.ts

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

src/ts/app/types.ts

@@ -15,6 +15,7 @@ import { PokemonService } from 'api/PokemonService';
 export type Navigation = 'pokedex' | 'menu';
 
 export interface IPokemonAppState {
+    isWelcomeShown : boolean;
     navigation : Navigation | null;
     isInterruption : boolean;
     maxPossibleStats : IMaxStats;
@@ -24,7 +25,8 @@ export interface IPokemonAppState {
 }
 
 export const PokemonAppActionTypes = {
-    SET_NAVIGATION: 'SET_NAVIGATION',
+    SET_WELCOME_SHOWN: 'POKEMON_APP/SET_WELCOME_SHOWN',
+    SET_NAVIGATION: 'POKEMON_APP/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',

webpack.config.js

@@ -25,7 +25,7 @@ module.exports = function (env) {
         new StyleLintPlugin({
             configFile: '.stylelintrc',
             context: 'src',
-            emitErrors: true,
+            emitErrors: false,
             failOnError: false,
             quiet: false,
         }),

yarn.lock

@@ -799,6 +799,11 @@
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd"
   integrity sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg==
 
+"@types/cookie@^0.3.1":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.2.tgz#453f4b14b25da6a8ea4494842dedcbf0151deef9"
+  integrity sha512-aHQA072E10/8iUQsPH7mQU/KUyQBZAGzTVRCUvnSz8mSvbrYsP4xEO2RSA0Pjltolzi0j8+8ixrm//Hr4umPzw==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -818,7 +823,7 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
   integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@^3.0.1", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#a59c0c995cc885bef1b8ec2241b114f9b35b517b"
   integrity sha512-O2OGyW9wlO2bbDmZRH17MecArQfsIa1g//ve2IJk6BnmwEglFz5kdhP1BlgeqjVNH5IHIhsc83DWFo8StCe8+Q==
@@ -850,6 +855,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.14.1.tgz#8701cd760acc20beba5ffe0b7a1b879f39cb8c41"
   integrity sha512-Rymt08vh1GaW4vYB6QP61/5m/CFLGnFZP++bJpWbiNxceNa6RBipDmb413jvtSf/R1gg5a/jQVl2jY4XVRscEA==
 
+"@types/object-assign@^4.0.30":
+  version "4.0.30"
+  resolved "https://registry.yarnpkg.com/@types/object-assign/-/object-assign-4.0.30.tgz#8949371d5a99f4381ee0f1df0a9b7a187e07e652"
+  integrity sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI=
+
 "@types/prop-types@*":
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.0.tgz#4c48fed958d6dcf9487195a0ef6456d5f6e0163a"
@@ -2098,7 +2108,7 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-cookie@0.3.1:
+cookie@0.3.1, cookie@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
@@ -3470,7 +3480,7 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -5783,6 +5793,15 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-cookie@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-3.1.1.tgz#abaf56959a778e5dc9669136bb7f774ccbc674de"
+  integrity sha512-46S6P38lEbxKDEgYvwH7Le36MDlN4tB2ASrhNm8IvoMXQckGFQpW2N6pFl+fqefrA3VAv0a0rrL59qiBn8HQEQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.0.1"
+    hoist-non-react-statics "^3.0.0"
+    universal-cookie "^3.1.0"
+
 react-dom@^16.7.0:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48"
@@ -7444,6 +7463,16 @@ unist-util-visit@^1.1.0:
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+universal-cookie@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-3.1.0.tgz#a16964ccb16cf8fa463bda1ebe86482945339ad8"
+  integrity sha512-sP6WuFgqIUro7ikgI2ndrsw9Ro+YvVBe5O9cQfWnjTicpLaSMUEUUDjQF8m8utzWF2ONl7tRkcZd7v4n6NnzjQ==
+  dependencies:
+    "@types/cookie" "^0.3.1"
+    "@types/object-assign" "^4.0.30"
+    cookie "^0.3.1"
+    object-assign "^4.1.0"
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"