join buttons

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>