join buttons

client/assets/styles/colours.less

@@ -1,10 +1,11 @@
 @green: #1FF01F;
 @red: #a52a2a;
-@blue: #3050f8;
+// @blue: #3498db // cyan?
 @blue: #3050f8;
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
 
+@black: black;
 @gray: #222;
 @gray-box: #222;
 @gray-exists: #444;

client/assets/styles/styles.less

@@ -163,7 +163,7 @@ button, input {
     flex: 1;
 
     /*the transitions */
-    transition-property: color;
+    transition-property: color background;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
@@ -472,7 +472,7 @@ header {
     flex-flow: column;
 }
 
-.menu-instances {
+.play {
     height: 100%;
     display: grid;
 
@@ -480,12 +480,33 @@ header {
     grid-template-columns: 1fr 1fr;
 
     grid-template-areas:
-        "constructs constructs"
+        "team team"
-        "inventory  games";
+        "inventory  join";
+
+    .join {
+        grid-area: join;
+
+        .buttons {
+            margin-top: 1em;
+            display: grid;
+            font-size: 200%;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 1em;
+            flex-flow: row wrap;
+            align-items: flex-end;
+
+            button {
+                height: 3em;
+                &:hover {
+                    border-color: @green;
+                    color: @green;
+                }
+            }
+        }
     }
 
-.menu-instances .construct-list {
+    .team {
-    grid-area: constructs;
+        grid-area: team;
 
         /* poor man's <hr>*/
         padding: 0.5em 2em 0 0;
@@ -493,20 +514,13 @@ header {
         border-bottom: 0.1em solid whitesmoke;
     }
 
-.menu-instances .menu-construct {
+    .menu-construct {
         flex: 1 0 33%;
     }
 
-.menu-instance-list {
-    grid-area: games;
-    flex: 1;
-    order: 99;
-    flex-flow: row wrap;
-
-    display: flex;
-    align-content: flex-start;
 }
 
+
 .menu-instance-btn {
     flex: 1 1 100%;
     font-size: 1.2em;
@@ -612,10 +626,6 @@ main .top button {
     transition-timing-function: ease;
 }
 
-.menu-instance-list table {
-    margin-bottom: 2em;
-}
-
 footer {
     display: flex;
     flex-flow: row wrap;

client/src/components/join.buttons.jsx

@@ -1,46 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws } = state;
-
-        function sendInstancePractice() {
-            ws.sendInstancePractice();
-        }
-
-        function sendInstanceQueue() {
-            ws.sendInstanceQueue();
-        }
-
-        return {
-            sendInstanceQueue,
-            sendInstancePractice,
-        };
-    }
-);
-
-function CreateButtons(args) {
-    const {
-        sendInstanceQueue,
-        sendInstancePractice,
-    } = args;
-
-    return (
-        <div>
-            <h1>Join Game</h1>
-            <button
-                onClick={() => sendInstancePractice()}
-                type="submit">
-                Practice vs CPU
-            </button>
-            <button
-                onClick={() => sendInstanceQueue()}
-                type="submit">
-                PVP
-            </button>
-        </div>
-    );
-}
-
-module.exports = addState(CreateButtons);

client/src/components/list.jsx

@@ -1,121 +0,0 @@
-const { connect } = require('preact-redux');
-const preact = require('preact');
-
-const { stringSort } = require('./../utils');
-const { ConstructAvatar } = require('./construct');
-const actions = require('./../actions');
-const JoinButtons = require('./join.buttons');
-const Inventory = require('./inventory');
-
-const idSort = stringSort('id');
-
-const addState = connect(
-    function receiveState(state) {
-        const {
-            ws,
-            constructs,
-            constructRename,
-            team,
-            mtxActive,
-        } = state;
-
-        function sendInstancePractice() {
-            return ws.sendInstancePractice();
-        }
-
-        function sendConstructAvatarReroll(id) {
-            console.log('using', mtxActive, 'on', id);
-            return ws.sendMtxApply(id, mtxActive, '');
-        }
-
-        function sendConstructRename(id, name) {
-            ws.sendMtxApply(id, 'Rename', name);
-        }
-
-        return {
-            constructs,
-            mtxActive,
-            constructRename,
-            team,
-            sendConstructRename,
-            sendInstancePractice,
-            sendConstructAvatarReroll,
-        };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setConstructRename(id) {
-            dispatch(actions.setConstructRename(id));
-        }
-
-        function clearMtxRename() {
-            dispatch(actions.setConstructRename(null));
-            dispatch(actions.setMtxActive(null));
-        }
-
-        return {
-            clearMtxRename,
-            setConstructRename,
-        };
-    }
-
-);
-
-function List(args) {
-    const {
-        team,
-        constructRename,
-        clearMtxRename,
-        setConstructRename,
-        sendConstructRename,
-        mtxActive,
-        sendConstructAvatarReroll,
-    } = args;
-
-    const constructPanels = team
-        .map(construct => {
-            const constructName = constructRename === construct.id
-                ? <input id='renameInput' type="text" style="text-align: center" placeholder="enter a new name"></input>
-                : <h2>{construct.name}</h2>;
-
-            const confirm = constructRename === construct.id
-                ? <button onClick={() => sendConstructRename(construct.id, document.getElementById('renameInput').value)}>
-                    Confirm
-                </button>
-                : false;
-
-            const cancel = constructRename === construct.id
-                ? <button onClick={() => clearMtxRename()}>
-                    Cancel
-                </button>
-                : false;
-            return (
-                <div
-                    key={construct.id}
-                    style={ mtxActive ? { cursor: 'pointer' } : {}}
-                    onClick={() => {
-                        if (!mtxActive) return false;
-                        if (mtxActive === 'Rename') return setConstructRename(construct.id);
-                        return sendConstructAvatarReroll(construct.id);
-                    }}
-                    class="menu-construct" >
-                    <ConstructAvatar construct={construct} />
-                    {constructName}
-                    {confirm}
-                    {cancel}
-                </div>
-            );
-        });
-
-    return (
-        <main class="menu-instances">
-            <div class="construct-list">
-                {constructPanels}
-            </div>
-            <Inventory />
-            <JoinButtons />
-        </main>
-    );
-}
-
-module.exports = addState(List);

client/src/components/main.jsx

@@ -6,7 +6,7 @@ const Login = require('./login');
 const Game = require('./game');
 const Instance = require('./instance.component');
 const Team = require('./team');
-const List = require('./list');
+const Play = require('./play');
 
 const addState = connect(
     state => {
@@ -27,6 +27,8 @@ function Main(props) {
         return <Login />;
     }
 
+    if (nav === 'play') return <Play />;
+
     if (game) {
         return <Game />;
     }
@@ -36,10 +38,9 @@ function Main(props) {
     }
 
     if (nav === 'team') return <Team />;
-    if (nav === 'list') return <List />;
 
     return (
-        <main></main>
+        <Play />
     );
 }
 

client/src/components/nav.jsx

@@ -95,7 +95,7 @@ function Nav(args) {
             <h1 class="header-title">mnml.gg</h1>
             <AccountStatus />
             <hr />
-            <button class="play-btn" disabled={canJoin} onClick={() => navTo('list')}>Play</button>
+            <button class="play-btn" disabled={canJoin} onClick={() => navTo('play')}>Play</button>
             <hr />
             {joined}
         </nav>

client/src/events.jsx

@@ -18,19 +18,7 @@ function registerEvents(store) {
     }
 
     function setConstructList(constructs) {
-        // check team is in list
-        const { team } = store.getState();
-        const ids = constructs.map(c => c.id);
-
-        // team is fucked up, or just registered
-        // reset to the first 3 constructs
-        if (!team.every(t => t && ids.includes(t))) {
-            setTeam([ids[0], ids[1], ids[2]]);
-        }
-
         store.dispatch(actions.setConstructs(constructs));
-        // Now that constructs have been set we can switch to list
-        setNav('list');
     }
 
     function setNewConstruct(construct) {