cryp spawn button

client/cryps.css

@@ -96,7 +96,15 @@ button.hidden {
     flex-flow: column;
 }
 
+.cryps input {
+    border-color: #444;
+    background-color: #333;
+    border-radius: 0;
+}
 
+.cryps input:focus {
+    border-color: whitesmoke;
+}
 
 /*
     MENU
@@ -177,7 +185,6 @@ header {
 .spawn-btn input {
     flex: 1 1 100%;
     margin: 1em;
-    background-color: #333;
 }
 
 .spawn-btn button {

client/src/components/cryp.list.component.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const { Component } = require('preact');
+const range = require('lodash/range');
 
 const { stringSort } = require('./../utils');
 const molecule = require('./molecule');
@@ -17,7 +18,8 @@ class SpawnButton extends Component {
         this.setState({ enabled: e });
     }
 
-    render({ }, { enabled }) {
+    render({ spawn }, { enabled }) {
+        let spawnName = null;
         return (
             <div
                 className="menu-cryp-ctr spawn-btn">
@@ -30,11 +32,12 @@ class SpawnButton extends Component {
                         type="text"
                         disabled={!enabled}
                         placeholder="name"
-                        // onChange={e => spawnName = e.target.value}
+                        onChange={e => spawnName = e.target.value}
                     />
                     <button
                         className="login-btn"
                         disabled={!enabled}
+                        onClick={() => spawn(spawnName)}
                         type="submit">
                         spawn
                     </button>
@@ -44,7 +47,15 @@ class SpawnButton extends Component {
     }
 }
 
-function CrypList({ cryps, selectedCryps, setSelectedCryps, sendInstanceJoin }) {
+function CrypList(args) {
+    const {
+        cryps,
+        selectedCryps,
+        setSelectedCryps,
+        sendInstanceJoin,
+        sendCrypSpawn
+    } = args;
+
     if (!cryps) return <div></div>;
 
     // redux limitation + suggested workaround
@@ -97,12 +108,18 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps, sendInstanceJoin })
         );
     });
 
+    const spawnButtonsNum = cryps.length < 3
+        ? (3 - cryps.length)
+        : 1;
+
+    const spawnButtons = range(spawnButtonsNum)
+        .map(() => <SpawnButton key={Date.now()} spawn={name => sendCrypSpawn(name)} />);
 
     return (
         <div className="menu-cryps">
             {instanceJoin}
             {crypPanels}
-            <SpawnButton />
+            {spawnButtons}
         </div>
     );
 }

client/src/components/cryp.list.container.jsx

@@ -14,7 +14,11 @@ const addState = connect(
             return false;
         }
 
-        return { cryps, selectedCryps, sendInstanceJoin };
+        function sendCrypSpawn(name) {
+            return ws.sendCrypSpawn(name);
+        }
+
+        return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn };
     },
 
     function receiveDispatch(dispatch) {

client/src/components/login.container.jsx

@@ -9,7 +9,7 @@ const addState = connect(
             return ws.sendAccountLogin(name, password);
         }
         function submitRegister(name, password) {
-            return ws.sendAccountRegister(name, password);
+            return ws.sendAccountCreate(name, password);
         }
         function submitDemo() {
             return ws.sendAccountDemo();

client/src/socket.jsx

@@ -259,7 +259,7 @@ function createSocket(events) {
 
             // if (!account) events.loginPrompt();
             if (process.env.NODE_ENV !== 'production') {
-                send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+                send({ method: 'account_login', params: { name: 'grepking', password: 'grepgrepgrep' } });
             }
 
             return true;

server/WORKLOG.md

@@ -67,6 +67,7 @@ $$$
 # Db maintenance
 
 # Art Styles
+* illusions
 * Aztec
 * youkai
 * Pixel