fix spawn

:

client/assets/styles/styles.css

@@ -136,7 +136,7 @@ button, input {
     color: whitesmoke;
     height: auto;
     border-width: 2px;
-    border-color: whitesmoke;
+    border-color: #444;
     border-radius: 0;
     letter-spacing: 0.25em;
     box-sizing: border-box;
@@ -399,7 +399,6 @@ header {
     flex: 1;
     margin: 0.5em 1em;
     padding: 0 0.5em;
-    border-color: #333
 }
 
 .spawn-btn input[disabled], .spawn-btn button[disabled] {

client/src/components/construct.spawn.button.jsx

@@ -1,32 +0,0 @@
-const preact = require('preact');
-
-function renderSpawnButton({ account, sendConstructSpawn }) {
-    let name = '';
-
-    if (!account) return <div>...</div>;
-
-    return false;
-
-    return (
-        <div className="row">
-            <div className="two columns">
-                <input
-                    className="input"
-                    type="text"
-                    placeholder="construct name"
-                    onChange={e => (name = e.target.value)}
-                />
-            </div>
-            <div className="two columns">
-                <button
-                    className="button"
-                    type="submit"
-                    onClick={() => sendConstructSpawn(name)}>
-                    Spawn 👾
-                </button>
-            </div>
-        </div>
-    );
-}
-
-module.exports = renderSpawnButton;

client/src/components/construct.spawn.container.js

@@ -1,16 +0,0 @@
-const { connect } = require('react-redux');
-
-const ConstructSpawnButton = require('./construct.spawn.button');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws } = state;
-        function sendConstructSpawn(name) {
-            return ws.sendConstructSpawn(name);
-        }
-
-        return { account: state.account, sendConstructSpawn };
-    }
-);
-
-module.exports = addState(ConstructSpawnButton);

client/src/components/spawn.button.jsx

@@ -1,7 +1,7 @@
 const preact = require('preact');
 const { useState } = require('preact/hooks');
 
-function SpawnButton({ i }) {
+function SpawnButton({ spawn }) {
     const [name, setName] = useState('');
     const [enabled, setEnabled] = useState(false);
 
@@ -17,7 +17,6 @@ function SpawnButton({ i }) {
 
     return (
         <div
-            key={i}
             className="menu-construct-ctr spawn-btn">
             <div
                 className="menu-construct"
@@ -34,7 +33,7 @@ function SpawnButton({ i }) {
                 <button
                     className="login-btn"
                     disabled={!enabled}
-                    onClick={e => enabledToggle(e)}
+                    onClick={() => spawn(name)}
                     type="submit">
                     spawn
                 </button>

client/src/components/team.jsx

@@ -104,7 +104,7 @@ function Team(args) {
     const spawnButtonsNum = (3 - constructs.length % 3);
 
     const spawnButtons = range(spawnButtonsNum)
-        .map(i => <SpawnButton key={i} i={i} spawn={name => sendConstructSpawn(name)} />);
+        .map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />);
 
 
     const header = (