simpify join

client/assets/styles/styles.css

@@ -473,30 +473,17 @@ header {
 
     display: flex;
     flex-flow: row wrap;
-    border: 2px solid #333;
     padding: 1em;
     margin-bottom: 1.5em;
 }
 
-.create-form form {
-    margin: 0;
-    flex: 1 1 50%;
-}
-
-.create-form .login-input {
-    width: 50%;
-}
-
-.create-form.disabled {
-    border: 2px solid #222;
-    color: #222;
-}
-
 .create-form button {
-    flex: 0 1 25%;
+    flex: 1;
     font-size: 1.5em;
-    border-color: #444;
+}
-    background-color: #333;
+
+.create-form button:first-child {
+    margin-right: 1em;
 }
 
 .create-form button:hover, .create-form button:focus {

client/src/components/instance.create.buttons.jsx

@@ -0,0 +1,46 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+const { Component } = require('preact');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, team, account } = state;
+
+        function sendInstanceNew(sConstructs, pve) {
+            if (sConstructs.length) {
+                return ws.sendInstanceNew(sConstructs, account.name, pve);
+            }
+            return false;
+        }
+
+        return {
+            sendInstanceNew,
+            team,
+        };
+    }
+);
+
+function CreateButtons(args) {
+    const { team, sendInstanceNew } = args;
+    const disabled = !team.every(c => c);
+
+    const classes = `create-form ${disabled ? 'disabled' : ''}`;
+    return (
+        <div class={classes}>
+            <button
+                onClick={() => sendInstanceNew(team, true)}
+                disabled={disabled}
+                type="submit">
+                Practice vs CPU
+            </button>
+            <button
+                onClick={() => sendInstanceNew(team, false)}
+                disabled={disabled}
+                type="submit">
+                PVP
+            </button>
+        </div>
+    );
+}
+
+module.exports = addState(CreateButtons);

client/src/components/list.jsx

@@ -4,7 +4,7 @@ const preact = require('preact');
 const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('./../actions');
-const InstanceCreateForm = require('./instance.create.form');
+const InstanceCreateForm = require('./instance.create.buttons');
 
 const idSort = stringSort('id');