profesh... except the css

client/assets/styles/menu.less

@@ -80,20 +80,6 @@
             }
         }
     }
-
-    .login {
-        display: flex;
-        flex-flow: column;
-
-        .terms {
-            display: inline;
-            margin: 0 1em;
-        }
-
-        button {
-            padding: 0 0.5em;
-        }
-    }
 }
 
 section {
@@ -108,58 +94,14 @@ section {
         padding-right: 1em;
     }
 
-    .list {
-        letter-spacing: 0.25em;
-        text-transform: uppercase;
-        display: grid;
-        // grid-template-columns: repeat(4, 1fr);
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 1em;
-        flex-flow: row wrap;
-        align-items: flex-end;
-
-        &.sub {
-            grid-template-columns: 1fr;
-        }
-
-        &.play {
-            grid-template-columns: repeat(2, 1fr);
-            align-items: flex-start;
-
-            &.rejoin {
-                grid-template-columns: 1fr;
-            }
-
-            button.ready:enabled {
-                color: forestgreen;
-                border-color: forestgreen;
-
-                &:hover {
-                    background: forestgreen;
-                    color: black;
-                    border-color: forestgreen;
-                }
-            }
-
-            // // all green
-            // button.ready:enabled {
-            //     background: forestgreen;
-            //     color: black;
-            //     border-color: forestgreen;
-
-            //     &:hover {
-            //         color: forestgreen;
-            //         border-color: forestgreen;
-            //         background: 0;
-            //     }
-            // }
-        }
-    }
-
     .panes {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
     }
+}
+
+.list {
+    margin-bottom: 2em;
 
     figure {
         letter-spacing: 0.25em;
@@ -168,5 +110,91 @@ section {
         display: flex;
         flex-flow: column;
     }
+
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    display: grid;
+    // grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1em;
+    flex-flow: row wrap;
+    align-items: flex-end;
+
+    &.sub {
+        grid-template-columns: 1fr;
+    }
+
+    &.play {
+        grid-template-columns: repeat(2, 1fr);
+        align-items: flex-start;
+
+        &.rejoin {
+            grid-template-columns: 1fr;
+        }
+
+        button.ready:enabled {
+            color: forestgreen;
+            border-color: forestgreen;
+
+            &:hover {
+                background: forestgreen;
+                color: black;
+                border-color: forestgreen;
+            }
+        }
+
+        // // all green
+        // button.ready:enabled {
+        //     background: forestgreen;
+        //     color: black;
+        //     border-color: forestgreen;
+
+        //     &:hover {
+        //         color: forestgreen;
+        //         border-color: forestgreen;
+        //         background: 0;
+        //     }
+        // }
+    }
 }
 
+
+.login {
+    display: flex;
+    flex-flow: column;
+
+    .terms {
+        display: inline;
+        margin: 0 1em;
+    }
+
+    button {
+        padding: 0 0.5em;
+        margin-top: 1em;
+    }
+}
+
+.options {
+    grid-area: hdr;
+
+    display: flex;
+
+    .logo {
+        flex: 0 1 10%;
+        margin-right: 1em;
+        border: none;
+    }
+
+    button {
+        flex: 1;
+        border-top: 0;
+        border: 0.1em solid #222;
+        &:last-child {
+            float: right;
+        }
+    }
+}
+
+.intro {
+    text-align: center;
+}

client/assets/styles/styles.less

@@ -27,23 +27,6 @@ html body {
     overflow-y: hidden;
 }
 
-#mnml {
-    /* this is the sweet nectar to keep it full page*/
-    height: 100vh;
-    max-height: 100vh;
-    min-height: 100vh;
-
-    /* stops inspector going skitz*/
-    overflow-x: hidden;
-    // overflow-y: hidden;
-}
-
-// @media (min-width: 1921px) {
-//     html, body, #mnml {
-//         font-size: 16pt;
-//     }
-// }
-
 html {
     box-sizing: border-box;
     margin: 0;
@@ -108,11 +91,33 @@ dl {
 
     padding: 0.5em 1em;
 
+    /* this is the sweet nectar to keep it full page*/
+    height: 100vh;
+    max-height: 100vh;
+    min-height: 100vh;
+
+    /* stops inspector going skitz*/
+    overflow-x: hidden;
+    // overflow-y: hidden;
+
+
     &.animations-test {
         aside button {
             font-size: 50%;
         }
     }
+
+    &.front-page {
+        display: block;
+
+        main {
+            padding: 0 25%;
+        }
+
+        .logo {
+            margin: 2em 0;
+        }
+    }
 }
 
 main {
@@ -266,10 +271,7 @@ figure.gray {
         &.highlight {
             color: @white;
             box-shadow: inset 0px 5px 0px 0px @white;
-            border: 0;
         }
-
-        border: none;
     }
 }
 
@@ -288,10 +290,10 @@ li {
 
 .logo {
     height: 2em;
-    background-image: url("../../assets/mnml.logo.trim.svg");
+    background-image: url("../../assets/mnml.logo.text.svg");
     background-size: contain;
     background-repeat: no-repeat;
-    background-position: left;
+    background-position: center;
 }
 
 .discord-btn {

client/src/components/guest.top.jsx

@@ -1,137 +0,0 @@
-// 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 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>
-        );
-    };
-
-    return (
-        <section class="top">
-            <div class="news">
-                <h1>Welcome to MNML</h1>
-                {list()}
-                <hr />
-                {news}
-            </div>
-            <Welcome />
-        </section>
-    );
-}
-
-module.exports = addState(Play);

client/src/components/main.top.jsx

@@ -4,7 +4,6 @@ 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');
@@ -13,12 +12,10 @@ const addState = connect(
     function receiveState(state) {
         const {
             nav,
-            authenticated,
         } = state;
 
         return {
             nav,
-            authenticated,
         };
     },
 );
@@ -29,8 +26,6 @@ function Top(args) {
         authenticated,
     } = args;
 
-    if (!authenticated) return <GuestTop />
-
     if (nav === 'account') return <AccountTop />;
     if (nav === 'play') return <Play />
     if (nav === 'shop') return <Shop />

client/src/components/mnml.jsx

@@ -4,27 +4,35 @@ const { connect } = require('preact-redux');
 const Main = require('./main');
 // const Nav = require('./nav');
 const Controls = require('./controls');
+const FrontPage = require('./front.page');
 
 const addState = connect(
-    ({ game, instance }) => ({ game, instance })
+    ({ game, instance, authenticated }) => ({ game, instance, authenticated })
 );
 
 function Mnml(args) {
     const {
         game,
         instance,
+        authenticated,
     } = args;
 
     const rotateClass = (game || instance) && window.innerHeight < 900 && window.innerWidth < window.innerHeight
         ? 'show'
         : '';
 
+    if (!authenticated) return (
+        <div id="mnml" class='front-page'>
+            <FrontPage />
+            <div id="rotate" class={rotateClass} ></div>
+        </div>
+    );
+
     return (
         <div id="mnml">
             <Main />
             <Controls />
-            <div id="rotate" class={rotateClass} >
+            <div id="rotate" class={rotateClass} ></div>
-            </div>
         </div>
     );
 }