spawn buttons

client/cryps.css

@@ -4,7 +4,6 @@
 
 html, body, .cryps {
     width: 100%;
-    height: 100%;
     margin: 0;
 
     background-color: #000000;
@@ -14,15 +13,14 @@ html, body, .cryps {
     user-select: none;
 
     /* this is the sweet nectar to keep it full page*/
-    max-height: 100%;
+    height: 99%;
-    overflow: hidden;
+    max-height: 99%;
 }
 
 html {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    height: 100%;
 }
 
 *, *:before, *:after {
@@ -35,7 +33,6 @@ html {
     padding: 0 2em;
     display: flex;
     flex-flow: column;
-    position: fixed;
 }
 
 main {
@@ -48,7 +45,6 @@ main {
     align-content: flex-start;
     justify-content: flex-start;
     align-items: flex-start;
-
 }
 
 button, input {
@@ -86,6 +82,10 @@ button.left:hover, button.left:focus {
     box-shadow: inset 0.5em 0 0 0 whitesmoke;
 }
 
+button.hidden {
+    opacity: 0;
+}
+
 /*
     LOGIN
 */
@@ -158,6 +158,36 @@ header {
 
     text-align: center;
     display: flex;
+    justify-content: center;
+}
+
+.spawn-btn .menu-cryp {
+    border: 1px solid #333;
+    color: #333;
+    display: flex;
+    flex-flow: row wrap;
+    align-content: center;
+}
+
+.spawn-btn .menu-cryp h2 {
+    font-size: 3em;
+    flex: 1;
+}
+
+.spawn-btn input {
+    flex: 1 1 100%;
+    margin: 1em;
+    background-color: #333;
+}
+
+.spawn-btn button {
+    flex: 1;
+    margin: 0.5em 2em;
+    border-color: #333
+}
+
+.spawn-btn input[disabled], .spawn-btn button[disabled] {
+    opacity: 0
 }
 
 .menu-cryp {
@@ -187,12 +217,12 @@ header {
 
 .menu-instance-btn {
     box-sizing: border-box;
-    flex: 1 0 100%;
+    flex: 1 1 100%;
     font-size: 150%;
     /*min-width: 20%;*/
     border-width: 2px;
     padding: 0.5em;
-    margin: 0.5em;
+    margin-right: 0.5em;
 }
 
 /*

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

@@ -1,4 +1,5 @@
 const preact = require('preact');
+const { Component } = require('preact');
 
 const { stringSort } = require('./../utils');
 const molecule = require('./molecule');
@@ -11,8 +12,40 @@ const COLOURS = [
     '#3498db',
 ];
 
-function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
+class SpawnButton extends Component {
-    if (!cryps) return <div>not ready</div>;
+    toggle(e) {
+        this.setState({ enabled: e });
+    }
+
+    render({ }, { enabled }) {
+        return (
+            <div
+                className="menu-cryp-ctr spawn-btn">
+                <div
+                    className="menu-cryp"
+                    onClick={() => this.toggle(!this.enabled)} >
+                    <h2>+</h2>
+                    <input
+                        className="login-input"
+                        type="text"
+                        disabled={!enabled}
+                        placeholder="name"
+                        // onChange={e => spawnName = e.target.value}
+                    />
+                    <button
+                        className="login-btn"
+                        disabled={!enabled}
+                        type="submit">
+                        spawn
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+function CrypList({ cryps, selectedCryps, setSelectedCryps, sendInstanceJoin }) {
+    if (!cryps) return <div></div>;
 
     // redux limitation + suggested workaround
     // so much for dumb components
@@ -31,6 +64,16 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
         return setSelectedCryps(selectedCryps);
     }
 
+    const instanceJoinHidden = !selectedCryps.every(c => !!c);
+    const instanceJoin = (
+        <button
+            className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
+            onClick={() => sendInstanceJoin()}>
+            Join New Instance
+        </button>
+    );
+
+
     const crypPanels = cryps.sort(idSort).map(cryp => {
         const colour = selectedCryps.indexOf(cryp.id);
         const selected = colour > -1;
@@ -54,9 +97,12 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
         );
     });
 
+
     return (
         <div className="menu-cryps">
+            {instanceJoin}
             {crypPanels}
+            <SpawnButton />
         </div>
     );
 }

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

@@ -6,7 +6,15 @@ const actions = require('./../actions');
 const addState = connect(
     function receiveState(state) {
         const { ws, cryps, selectedCryps } = state;
-        return { cryps, selectedCryps };
+
+        function sendInstanceJoin() {
+            if (selectedCryps.length) {
+                return ws.sendInstanceJoin(selectedCryps);
+            }
+            return false;
+        }
+
+        return { cryps, selectedCryps, sendInstanceJoin };
     },
 
     function receiveDispatch(dispatch) {

client/src/components/info.component.jsx

@@ -6,22 +6,32 @@ function Info(args) {
         info,
     } = args;
     let desc = null;
-    if (info) {
+    if (!info) return (<div className="instance-info">&nbsp;</div>);
-        if (info.type === 'item') {
+
-            if (SKILLS[info.info]) {
+    if (info.type === 'item') {
-                desc = SKILLS[info.info];
+        if (SKILLS[info.info]) {
-            } else if (SPECS[info.info]) {
+            desc = SKILLS[info.info];
-                desc = SPECS[info.info];
+        } else if (SPECS[info.info]) {
-            } else if (COLOURS[info.info]) {
+            desc = SPECS[info.info];
-                desc = COLOURS[info.info];
+        } else if (COLOURS[info.info]) {
-            }
+            desc = COLOURS[info.info];
         }
     }
 
+    if (info.type === 'cryp') {
+        const cryp = info.info;
+        return (
+            <div className="instance-info">
+                <h5>{cryp.name}</h5>
+            </div>
+        );
+    }
+
     return (
         <div className="instance-info">
-            <div> {JSON.stringify(info)} </div>
+            <h5>{info.info}</h5>
-            <div> {JSON.stringify(desc)} </div>
+            <div>{desc.description}</div>
+            <div>{desc.upgrades}</div>
         </div>
     );
 }

client/src/components/instance.component.jsx

@@ -13,7 +13,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
 
-        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('item', s)}>{s}</button>;
+        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', s)}>{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -48,6 +48,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         <div
             key={cryp.id}
             className="cryp-box"
+            onClick={() => setInfo('cryp', cryp)}
             onDragOver={onDragOver}
             onDrop={onDrop}
             >

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

@@ -6,35 +6,32 @@ const { NULL_UUID } = require('./../utils');
 function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
     if (!instances) return <div>...</div>;
 
-    const instanceJoin = (
+    // const instanceJoin = (
-        <button
+    //     <button
-            className="menu-instance-btn full right"
+    //         className="menu-instance-btn full right"
-            onClick={() => sendInstanceJoin()}>
+    //         onClick={() => sendInstanceJoin()}>
-            Join New Instance
+    //         Join New Instance
-        </button>
+    //     </button>
-    );
+    // );
 
     const instancePanels = instances.map(instance => {
         const globalInstance = instance.instance === NULL_UUID;
         const name = globalInstance
             ? 'Global Matchmaking'
-            : `${instance.instance.substring(0, 5)}`;
+            : `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;
 
         return (
             <button
                 className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
                 key={instance.id}
                 onClick={() => setActiveInstance(instance)}>
-                {name} | {instance.score.wins} : {instance.score.losses}
+                {name}
             </button>
         );
     });
 
-    // <h2>Instances</h2>
-
     return (
         <section className="menu-instance-list" >
-            {instanceJoin}
             {instancePanels}
         </section>
     );

client/src/components/vbox.component.jsx

@@ -53,12 +53,9 @@ function Vbox(args) {
         const cells = row.map((c, j) => (
             <td
                 key={j}
-                onClick={() => {
+                onClick={() => { if (c) return setInfo('item', c) }}
-                    if (c) {
+                onDblClick={() => sendVboxAccept(j, i) }
-                        sendVboxAccept(j, i);
+                >
-                        setInfo('item', c);
-                    }
-                }} >
                 {convertVar(c)}
             </td>
         ));

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: 'ntr', password: 'grepgrepgrep' } });
             }
 
             return true;