wip

client/assets/styles/menu.less

@@ -174,3 +174,19 @@ section {
     }
 }
 
+
+.vbox {
+    .login {
+        display: flex;
+        flex-flow: column;
+
+        label {
+            line-height: initial;
+        }
+
+        .terms {
+            display: inline;
+            margin: 0 1em;
+        }
+    }
+}

client/assets/styles/styles.mobile.less

@@ -164,7 +164,7 @@
 
 
 // portrait menu or small size vertical in landscape
-@media (max-width: 550px) and (max-height: 800px) {
+@media (max-width: 550px) and (max-height: 800px) and (orientation: portrait) {
     #mnml {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;

client/src/components/welcome.login.jsx

@@ -4,6 +4,7 @@ const { Component } = require('preact')
 const { connect } = require('preact-redux');
 const linkState = require('linkstate').default;
 
+const actions = require('./../actions');
 const { postData, errorToast } = require('../utils');
 
 const addState = connect(
@@ -26,18 +27,29 @@ const addState = connect(
             submitLogin,
         }
     },
+    function receiveDispatch(dispatch) {
+        function clearInstance(user) {
+            dispatch(actions.setInstance(null));
+        }
+
+        return {
+            clearInstance,
+        }
+    }
 );
 
 
 function Login(args) {
     const {
         submitLogin,
+        clearInstance,
     } = args;
 
     const { password, name } = this.state;
 
     const loginSubmit = (event) => {
         event.preventDefault();
+        clearInstance();
         submitLogin(name, password);
         this.setState({ name: '', password: '' });
     };

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/socket.jsx

@@ -299,6 +299,8 @@ function createSocket(events) {
         ChatWheel: wheel => events.setChatWheel(wheel),
         // Joining: () => events.notify('Searching for instance...'),
 
+        StartTutorial: () => events.startTutorial(),
+
         Processing: () => true,
         Error: errHandler,
     };

client/src/tutorial.utils.jsx

@@ -1,6 +1,8 @@
 const preact = require('preact');
 const actions = require('./actions');
 
+const Login = require('./components/welcome.login');
+
 function tutorialConstructDisplay(player, instance, tutorial, i) {
     if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
         if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
@@ -27,6 +29,7 @@ function tutorialVbox(player, store, tutorial) {
             for (let i = 2; i < 6; i += 1) {
                 delete vbox.store.Colours[i];
             }
+            vbox.store.Colours = {};
             vbox.store.Skills = {};
             vbox.store.Specs = {};
             delete vbox.stash[0];
@@ -112,6 +115,21 @@ function tutorialStage(tutorial, clearTutorial, instance) {
     const exit = () => clearTutorial();
 
     const tutorialText = () => {
+        if (tutorial === 1) {
+            return (
+                <div>
+                    <div class='logo login-btn'> &nbsp; </div>
+                    <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>
+                    <Login />
+                </div>
+            );
+        }
+
         if (tutorial === 1) {
             return (
                 <div class='info-item'>
@@ -220,12 +238,14 @@ function tutorialStage(tutorial, clearTutorial, instance) {
         onClick={e => e.stopPropagation()}
         onMouseDown={exit}> {text} </button>;
 
+    // <figure>
+    // {exitTutorial}
+    // </figure>
+
+
     return (
         <div class='tutorial'>
             {tutorialText()}
-            <figure>
-                {exitTutorial}
-            </figure>
         </div>);
 }
 

server/src/rpc.rs

@@ -60,6 +60,8 @@ pub enum RpcMessage {
     EmailState(Option<Email>),
     SubscriptionState(Option<Subscription>),
 
+    StartTutorial(()),
+
     Pong(()),
 
     QueueRequested(()),

server/src/user_anonymous.rs

@@ -50,6 +50,7 @@ impl User for Anonymous {
 
         self.send(RpcMessage::AccountState(self.account.clone()), events, ws)?;
         self.send(RpcMessage::ItemInfo(item_info()), events, ws)?;
+        self.send(RpcMessage::StartTutorial(()), events, ws)?;
         self.send(RpcMessage::InstanceState(pg::instance_demo(&self.account)?), events, ws)?;
 
         Ok(())