join play and account team change'

client/src/components/join.jsx

@@ -0,0 +1,50 @@
+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 JoinButtons(args) {
+    const {
+        sendInstanceQueue,
+        sendInstancePractice,
+    } = args;
+
+    return (
+        <div class="join">
+            <h1>Join Game</h1>
+            <div class="buttons">
+                <button
+                    class='practice'
+                    onClick={() => sendInstancePractice()}
+                    type="submit">
+                    Practice vs CPU
+                </button>
+                <button
+                    class='pvp'
+                    onClick={() => sendInstanceQueue()}
+                    type="submit">
+                    PVP
+                </button>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(JoinButtons);

client/src/components/play.jsx

@@ -0,0 +1,121 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const { stringSort } = require('./../utils');
+const { ConstructAvatar } = require('./construct');
+const actions = require('./../actions');
+const Join = require('./join');
+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 Play(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="play">
+            <div class="team">
+                {constructPanels}
+            </div>
+            <Inventory />
+            <Join />
+        </main>
+    );
+}
+
+module.exports = addState(Play);