separate out demo tab

client/src/components/anims/counter.jsx

@@ -60,7 +60,7 @@ class Counter extends Component {
         this.animations.push(anime({
             targets: ['#counter'],
             rotateX: 180,
-            delay: TIMES.TARGET_DELAY_MS * 2,
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS / 3,
             duration: TIMES.TARGET_DURATION_MS / 2,
             easing: 'easeOutSine',
         }));

client/src/components/demo.jsx

@@ -1,11 +1,11 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
 
-const actions = require('../actions');
+// const actions = require('../actions');
 const shapes = require('./shapes');
 
 const { ConstructAvatar } = require('./construct');
-const { ConstructAnimation } = require('./animations');
+// const { ConstructAnimation } = require('./animations');
 
 const addState = connect(
     function receiveState(state) {
@@ -20,15 +20,15 @@ const addState = connect(
             itemInfo,
             demo,
         };
-    },
+    }
 
-    function receiveDispatch(dispatch) {
+/*    function receiveDispatch(dispatch) {
         function setAnimTarget(anim) {
             dispatch(actions.setAnimTarget(anim));
         }
 
         return { setAnimTarget };
-    }
+    } */
 );
 
 
@@ -38,7 +38,7 @@ function Demo(args) {
         itemInfo,
         account,
 
-        setAnimTarget,
+        // setAnimTarget,
     } = args;
 
     if (!demo || !itemInfo.items.length || account) return false;
@@ -90,7 +90,7 @@ function Demo(args) {
                             VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
                         </h2>
                         <p>
-                            Combine the colour base items with an array of skills and specialisations to build powerful variants.
+                            Combine the colour base items with skills and specialisations to build an array of powerful variants.
                         </p>
                     </div>
                     <div>&nbsp;</div>
@@ -179,10 +179,10 @@ function Demo(args) {
     };
 
     return (
-        <section class='demo news bottom'>
+        <section class='demo news top'>
+            {gameDemo()}
             {vboxDemo()}
             {vboxConstructs()}
-            {gameDemo()}
         </section>
     );
 }

client/src/components/welcome.jsx

@@ -10,7 +10,6 @@ const Demo = require('./demo');
 function Welcome() {
     const page = this.state.page || 'register';
 
-    const navRegister = () => this.setState({ page: 'register' });
     const pageEl = () => {
         if (page === 'login') return <Login />;
         if (page === 'register') return <Register />;
@@ -18,6 +17,26 @@ 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 = (['login', 'register', 'help'].includes(page)) 
+        ? <section>{news}{pageEl()}</section>
+        : <Demo />;
+
     return (
         <main class="menu welcome">
             <header>
@@ -39,6 +58,12 @@ function Welcome() {
                         onClick={() => this.setState({ page: 'register' })}>
                         Register
                     </button>
+                    <button
+                        class={`login-btn ${page === 'info' ? 'highlight' : ''}`}
+                        disabled={page === 'info'}
+                        onClick={() => this.setState({ page: 'info' })}>
+                        Info
+                    </button>
                     <button
                         class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
                         disabled={page === 'help'}
@@ -48,26 +73,8 @@ function Welcome() {
                 </div>
             </header>
             <div class="top">
-                <section>
-                    <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>
-                    {pageEl()}
-                </section>
+                {main}
             </div>
-            <Demo />
         </main>
     );
 }