instance form and pve

client/cryps.css

@@ -160,7 +160,7 @@ svg {
     flex-flow: column;
 }
 
-.cryps input {
+.cryps input, .cryps select {
     border-color: #444;
     background-color: #333;
     border-radius: 0;
@@ -286,6 +286,10 @@ header {
     margin-right: 0.5em;
 }
 
+.create-form button {
+    display: block;
+}
+
 /*
     INSTANCE
 */

client/src/components/body.component.jsx

@@ -15,6 +15,11 @@ const addState = connect(
             ws.clearGameStateTimeout();
         }
 
+        if (!instance) {
+            ws.clearInstanceStateTimeout();
+        }
+
+
         return { game, instance, account };
     }
 );

client/src/components/menu.component.jsx

@@ -7,6 +7,8 @@ const { stringSort } = require('./../utils');
 const molecule = require('./molecule');
 const SpawnButton = require('./spawn.button');
 
+const InstanceCreateForm = require('./instance.create.form');
+
 const idSort = stringSort('id');
 
 const COLOURS = [
@@ -24,7 +26,6 @@ function Menu(args) {
         sendInstanceState,
         sendPlayerMmCrypsSet,
         sendInstanceJoin,
-        sendInstanceNew,
         sendCrypSpawn,
         instances,
     } = args;
@@ -64,20 +65,12 @@ function Menu(args) {
                 Set Matchmaking Team
             </button>
         );
-        const instanceJoin = (
-            <button
-                className={`menu-instance-btn right ${instanceJoinHidden ? 'hidden' : ''}`}
-                disabled={instanceJoinHidden}
-                onClick={() => sendInstanceNew()}>
-                Create New Instance
-            </button>
-        );
 
         return (
             <section className="menu-instance-list" >
                 {instancePanels}
                 {mmSet}
-                {instanceJoin}
+                <InstanceCreateForm />
             </section>
         );
     }

client/src/components/menu.container.jsx

@@ -14,13 +14,6 @@ const addState = connect(
             return false;
         }
 
-        function sendInstanceNew() {
-            if (selectedCryps.length) {
-                return ws.sendInstanceNew(selectedCryps);
-            }
-            return false;
-        }
-
         function sendPlayerMmCrypsSet() {
             if (selectedCryps.length) {
                 return ws.sendPlayerMmCrypsSet(selectedCryps);
@@ -41,7 +34,6 @@ const addState = connect(
             cryps,
             selectedCryps,
             sendInstanceJoin,
-            sendInstanceNew,
             sendInstanceState,
             sendCrypSpawn,
             sendPlayerMmCrypsSet,

client/src/events.jsx

@@ -20,6 +20,9 @@ function registerEvents(store) {
 
     function setGame(game) {
         const { game: currentGame, ws } = store.getState();
+
+        if (!game) ws.clearGameStateTimeout();
+
         if (game && currentGame) {
             if (game.resolved.length !== currentGame.resolved.length) {
                 // stop fetching the game state til animations are done

client/src/socket.jsx

@@ -148,8 +148,8 @@ function createSocket(events) {
         send({ method: 'instance_join', params: { instance_id: instanceId, cryp_ids: cryps } });
     }
 
-    function sendInstanceNew(cryps) {
-        send({ method: 'instance_new', params: { cryp_ids: cryps, name: 'dota pros onli', players: 2 } });
+    function sendInstanceNew(cryps, name, players) {
+        send({ method: 'instance_new', params: { cryp_ids: cryps, name, players } });
     }
 
     function sendInstanceReady(instanceId) {
@@ -323,6 +323,7 @@ function createSocket(events) {
 
     return {
         clearGameStateTimeout,
+        clearInstanceStateTimeout,
         sendAccountLogin,
         sendAccountCreate,
         sendAccountDemo,