consolidate views for auth and anon

client/src/actions.jsx

@@ -1,4 +1,5 @@
 export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
+export const setAuthenticated = value => ({ type: 'SET_AUTHENTICATED', value });
 
 export const setAnimating  = value => ({ type: 'SET_ANIMATING', value });
 export const setAnimFocus  = value => ({ type: 'SET_ANIM_FOCUS', value });

client/src/components/guest.top.jsx

@@ -0,0 +1,138 @@
+// const { connect } = require('preact-redux');
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const { errorToast, infoToast } = require('../utils');
+const actions = require('./../actions');
+
+const VERSION = process.env.npm_package_version;
+
+const Welcome = require('./welcome');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            account,
+            instances,
+            invite,
+            pvp,
+        } = state;
+
+        function sendInstanceState(id) {
+            ws.sendInstanceState(id);
+        }
+
+        function sendInstancePractice() {
+            ws.sendInstancePractice();
+        }
+
+        function sendInstanceQueue() {
+            ws.sendInstanceQueue();
+        }
+
+        function sendInstanceInvite() {
+            ws.sendInstanceInvite();
+        }
+
+        function sendInstanceLeave() {
+            ws.sendInstanceLeave();
+        }
+
+        return {
+            account,
+            instances,
+            invite,
+            pvp,
+
+            sendInstanceState,
+            sendInstanceQueue,
+            sendInstancePractice,
+            sendInstanceInvite,
+            sendInstanceLeave,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setMtxActive(mtx) {
+            dispatch(actions.setConstructRename(null));
+            dispatch(actions.setMtxActive(mtx));
+            return true;
+        }
+
+        function setNav(place) {
+            return dispatch(actions.setNav(place));
+        }
+
+        return {
+            setMtxActive,
+            setNav,
+        };
+    }
+);
+
+function Play(args) {
+    const {
+        account,
+        instances,
+        invite,
+        pvp,
+
+        sendInstanceState,
+        sendInstanceQueue,
+        sendInstancePractice,
+        sendInstanceInvite,
+        sendInstanceLeave,
+
+        setNav,
+    } = args;
+
+    const news = (
+        <div class="news">
+            <p> MNML is a turn-based 1v1 strategy game in an abstract setting. </p>
+            <p>
+                Build a unique team of 3 constructs from a range of skills and specialisations.<br />
+                Outplay your opponent in multiple rounds by adapting to an always shifting meta. <br />
+                Simple rules, complex interactions and unique mechanics.<br />
+            </p>
+        </div>
+    );
+
+    const list = () => {
+        return (
+            <div>
+                <div class='list play'>
+                    <figure>
+                        <button
+                            class="ready"
+                            onClick={() => sendInstancePractice()}>
+                            Tutorial
+                        </button>
+                        <figcaption>Learn MNML</figcaption>
+                    </figure>
+                    <figure>
+                        <button
+                            class='discord-btn'
+                            onClick={() => window.open('https://discord.gg/YJJgurM') }>
+                                &nbsp;
+                        </button>
+                        <figcaption>Join the Community</figcaption>
+                    </figure>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <section class="top">
+            <div class="news">
+                <h1>Welcome to MNML</h1>
+                {news}
+                {list()}
+            </div>
+            <Welcome />
+        </section>
+    );
+}
+
+module.exports = addState(Play);

client/src/components/header.jsx

@@ -8,6 +8,7 @@ const addState = connect(
         const {
             ws,
             account,
+            authenticated,
             nav,
         } = state;
 
@@ -22,6 +23,7 @@ const addState = connect(
 
         return {
             account,
+            authenticated,
             nav,
 
             sendInstanceState,
@@ -48,6 +50,7 @@ const addState = connect(
 function Header(args) {
     const {
         account,
+        authenticated,
         nav,
 
         sendAccountStates,
@@ -56,6 +59,18 @@ function Header(args) {
 
     if (!account) return false;
 
+    if (!authenticated) return (
+        <header>
+            <div class="options">
+                <button
+                    onClick={() => navTo('play')}
+                    class='logo login-btn'>
+                    &nbsp;
+                </button>
+            </div>
+        </header>
+    )
+
     function navTo(p) {
         return setNav(p);
     }

client/src/components/main.top.jsx

@@ -4,6 +4,7 @@ const preact = require('preact');
 const actions = require('./../actions');
 
 const AccountTop = require('./account.top');
+const GuestTop = require('./guest.top');
 const Play = require('./play');
 const Shop = require('./shop');
 const Reshape = require('./reshape');
@@ -12,10 +13,12 @@ const addState = connect(
     function receiveState(state) {
         const {
             nav,
+            authenticated,
         } = state;
 
         return {
             nav,
+            authenticated,
         };
     },
 );
@@ -23,8 +26,11 @@ const addState = connect(
 function Top(args) {
     const {
         nav,
+        authenticated,
     } = args;
 
+    if (!authenticated) return <GuestTop />
+
     if (nav === 'account') return <AccountTop />;
     if (nav === 'play') return <Play />
     if (nav === 'shop') return <Shop />

client/src/components/welcome.jsx

@@ -7,7 +7,7 @@ const Help = require('./welcome.help');
 // const About = require('./welcome.about');
 
 function Welcome() {
-    const page = this.state.page || 'register';
+    const page = this.state.page || 'login';
 
     const pageEl = () => {
         if (page === 'login') return <Login />;
@@ -16,57 +16,32 @@ function Welcome() {
         return false;
     };
 
-    const news = (
-        <div class="news">
-            <p> Welcome to mnml.</p>
-
-            <p> MNML is a turn-based 1v1 strategy game in an abstract setting. </p>
-            <p>
-                Build a unique team of 3 constructs from a range of skills and specialisations.<br />
-                Outplay your opponent in multiple rounds by adapting to an always shifting meta. <br />
-                Simple rules, complex interactions and unique mechanics.<br />
-            </p>
-            <p> Free to play, no pay to win. Register to start playing.<br /></p>
-
-            <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
-        </div>
-    );
-
-    const main = <section>{news}{pageEl()}</section>;
+    const form = <div>{pageEl()}</div>;
 
     return (
-        <main class="menu welcome">
-            <header>
-                <div class="options">
-                    <button
-                        onClick={() => this.setState({ page: 'login' })}
-                        class='logo login-btn'>
-                        &nbsp;
-                    </button>
-                    <button
-                        class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
-                        disabled={page === 'login'}
-                        onClick={() => this.setState({ page: 'login' })}>
-                        Login
-                    </button>
-                    <button
-                        class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
-                        disabled={page === 'register'}
-                        onClick={() => this.setState({ page: 'register' })}>
-                        Register
-                    </button>
-                    <button
-                        class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
-                        disabled={page === 'help'}
-                        onClick={() => this.setState({ page: 'help' })}>
-                        Help
-                    </button>
-                </div>
-            </header>
-            <div class="top">
-                {main}
+        <div>
+            <div class="options">
+                <button
+                    class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
+                    disabled={page === 'login'}
+                    onClick={() => this.setState({ page: 'login' })}>
+                    Login
+                </button>
+                <button
+                    class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
+                    disabled={page === 'register'}
+                    onClick={() => this.setState({ page: 'register' })}>
+                    Register
+                </button>
+                <button
+                    class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
+                    disabled={page === 'help'}
+                    onClick={() => this.setState({ page: 'help' })}>
+                    Help
+                </button>
             </div>
-        </main>
+            {form}
+        </div>
     );
 }
 

client/src/events.jsx

@@ -27,7 +27,6 @@ function registerEvents(store) {
 
     function clearTutorial() {
         store.dispatch(actions.setTutorial(null));
-        localStorage.setItem('tutorial-complete', true);
     }
 
 
@@ -35,7 +34,6 @@ function registerEvents(store) {
         store.dispatch(actions.setTutorialGame(null));
     }
 
-
     function setPing(ping) {
         store.dispatch(actions.setPing(ping));
     }
@@ -179,18 +177,14 @@ function registerEvents(store) {
             const player = v.players.find(p => p.id === account.id);
             store.dispatch(actions.setPlayer(player));
 
+            if (tutorial) tutorialVbox(player, store, tutorial);
+
             if (v.phase === 'Finished') {
                 ws.sendAccountInstances();
             }
-
-            // instance.mobile.less hides info at @media 1000
-            if (localStorage.getItem('tutorial-complete') || window.innerWidth <= 1100) {
-                store.dispatch(actions.setTutorial(null));
-            } else if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
-                tutorialVbox(player, store, tutorial);
-            }
         }
 
+
         return store.dispatch(actions.setInstance(v));
     }
 
@@ -214,6 +208,11 @@ function registerEvents(store) {
         return true;
     }
 
+    function startTutorial() {
+        store.dispatch(actions.setTutorial(1));
+    }
+
+
     window.addEventListener('hashchange', urlHashChange, false);
 
     return {
@@ -243,6 +242,8 @@ function registerEvents(store) {
         setSubscription,
         setWs,
 
+        startTutorial,
+
         urlHashChange,
 
         notify,

client/src/reducers.jsx

@@ -10,6 +10,7 @@ function createReducer(defaultState, actionType) {
 /* eslint-disable key-spacing */
 module.exports = {
     account:            createReducer(null, 'SET_ACCOUNT'),
+    authenticated:      createReducer(null, 'SET_AUTHENTICATED'),
     activeItem:         createReducer(null, 'SET_ACTIVE_VAR'),
     activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
 

client/src/socket.jsx

@@ -270,6 +270,7 @@ function createSocket(events) {
     // this object wraps the reply types to a function
     const handlers = {
         AccountState: onAccount,
+        AccountAuthenticated: events.setAuthenticated,
         AccountConstructs: onAccountConstructs,
         AccountTeam: onAccountTeam,
         AccountInstances: onAccountInstances,
@@ -299,6 +300,8 @@ function createSocket(events) {
         ChatWheel: wheel => events.setChatWheel(wheel),
         // Joining: () => events.notify('Searching for instance...'),
 
+        StartTutorial: () => events.startTutorial(),
+
         Processing: () => true,
         Error: errHandler,
     };