ez mode tutorial and updates to the auth and anon user structs

client/assets/styles/menu.less

@@ -100,6 +100,12 @@ section {
     }
 }
 
+.block-text {
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    text-align: center;
+}
+
 .list {
     margin-bottom: 2em;
 

client/src/components/front.page.jsx

@@ -14,6 +14,7 @@ const addState = connect(
         const {
             ws,
             account,
+            tutorial,
         } = state;
 
         function sendInstancePractice() {
@@ -21,6 +22,7 @@ const addState = connect(
         }
 
         return {
+            promptRegister: tutorial === 99, // see events
             account,
             sendInstancePractice,
         };
@@ -30,6 +32,7 @@ const addState = connect(
 function Play(args) {
     const {
         account,
+        promptRegister,
         sendInstancePractice,
     } = args;
 
@@ -47,6 +50,17 @@ function Play(args) {
     );
 
     const list = () => {
+
+        if (promptRegister) {
+            return (
+                <div class='block-text'>
+                    <p><b>You just won your first round of MNML.</b></p>
+                    <p>Register below to play a real Bo5 against other players, play a practice round, customise your team & more...</p>
+                    <p>glhf</p>
+                </div>
+            )
+        }
+
         return (
             <div class='list play'>
                 <figure>

client/src/components/game.ctrl.btns.jsx

@@ -9,6 +9,7 @@ const addState = connect(
             ws,
             game,
             account,
+            authenticated,
             chatShow,
             animating,
         } = state;
@@ -33,6 +34,7 @@ const addState = connect(
         return {
             game,
             account,
+            authenticated,
             chatShow,
             sendAbandon,
             sendGameSkillClear,
@@ -65,6 +67,7 @@ function GameCtrlBtns(args) {
         animating,
         account,
         chatShow,
+        authenticated,
 
         getInstanceState,
         sendGameSkillClear,
@@ -77,7 +80,9 @@ function GameCtrlBtns(args) {
     const finished = game.phase === 'Finished';
 
     function quitClick() {
-        getInstanceState();
+        if (authenticated) {
+            getInstanceState();
+        }
         quit();
     }
 

client/src/components/game.ctrl.btns.top.jsx

@@ -9,6 +9,7 @@ const addState = connect(
             ws,
             game,
             animating,
+            authenticated,
             account,
         } = state;
 
@@ -27,6 +28,7 @@ const addState = connect(
         return {
             game,
             account,
+            authenticated,
 
             sendAbandon,
             sendDraw,
@@ -50,6 +52,7 @@ function GameCtrlTopBtns(args) {
     const {
         game,
         account,
+        authenticated,
 
         leave,
         sendAbandon,
@@ -82,6 +85,11 @@ function GameCtrlTopBtns(args) {
         setTimeout(() => this.setState({ concedeState: false }), 2000);
     };
 
+    const authBtn = btn => {
+        if (authenticated) return btn;
+        return <button disabled>-</button>
+    }
+
     const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
     const abandonText = abandonState ? 'Confirm' : 'Abandon';
     const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
@@ -102,9 +110,9 @@ function GameCtrlTopBtns(args) {
 
     return (
         <div class="instance-ctrl-btns">
-            {abandonBtn}
-            {concedeBtn}
-            {drawBtn}
+            {authBtn(abandonBtn)}
+            {authBtn(concedeBtn)}
+            {authBtn(drawBtn)}
         </div>
     );
 }

client/src/components/instance.ctrl.top.btns.jsx

@@ -7,6 +7,7 @@ const addState = connect(
     function receiveState(state) {
         const {
             ws,
+            authenticated,
             instance,
             tutorial,
         } = state;
@@ -17,6 +18,7 @@ const addState = connect(
 
         return {
             instance,
+            authenticated,
             tutorial,
             sendAbandon,
         };
@@ -39,6 +41,7 @@ const addState = connect(
 function InstanceTopBtns(args) {
     const {
         instance,
+        authenticated,
 
         leave,
         sendAbandon,
@@ -61,9 +64,16 @@ function InstanceTopBtns(args) {
     const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>{abandonText}</button>;
     const leaveBtn = <button class='abandon confirming' onClick={() => leave(tutorial)}>Leave</button>;
 
+    const finalBtn = () => {
+        // disable for tutorial mode
+        if (!authenticated) return <button disabled='true'>-</button>;
+        if (finished) return leaveBtn;
+        return abandonBtn;
+    }
+
     return (
         <div class="instance-ctrl-btns">
-            {finished ? leaveBtn : abandonBtn}
+            {finalBtn()}
         </div>
     );
 }

client/src/components/welcome.jsx

@@ -1,13 +1,31 @@
 // eslint-disable-next-line
 const preact = require('preact');
+const { connect } = require('preact-redux');
 
 const Login = require('./welcome.login');
 const Register = require('./welcome.register');
 const Help = require('./welcome.help');
 // const About = require('./welcome.about');
 
-function Welcome() {
-    const page = this.state.page || 'login';
+const addState = connect(
+    function receiveState(state) {
+        const {
+            tutorial,
+        } = state;
+
+        return {
+            promptRegister: tutorial === 99, // see events
+        };
+    },
+);
+
+function Welcome(args) {
+
+    const {
+        promptRegister,
+    } = args;
+
+    const page = this.state.page || promptRegister && 'register' || 'login';
 
     const pageEl = () => {
         if (page === 'login') return <Login />;
@@ -45,4 +63,4 @@ function Welcome() {
     );
 }
 
-module.exports = Welcome;
+module.exports = addState(Welcome);

client/src/events.jsx

@@ -218,6 +218,10 @@ function registerEvents(store) {
         store.dispatch(actions.setTutorial(1));
     }
 
+    function promptRegister() {
+        store.dispatch(actions.setTutorial(99));
+        store.dispatch(actions.setInstance(null));
+    }
 
     window.addEventListener('hashchange', urlHashChange, false);
 
@@ -250,6 +254,7 @@ function registerEvents(store) {
         setWs,
 
         startTutorial,
+        promptRegister,
 
         urlHashChange,
 

client/src/socket.jsx

@@ -301,6 +301,7 @@ function createSocket(events) {
         // Joining: () => events.notify('Searching for instance...'),
 
         StartTutorial: () => events.startTutorial(),
+        PromptRegister: () => events.promptRegister(),
 
         Processing: () => true,
         Error: errHandler,