spawn buttons

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 }) {
-    if (!cryps) return <div>not ready</div>;
+class SpawnButton extends Component {
+    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.type === 'item') {
-            if (SKILLS[info.info]) {
-                desc = SKILLS[info.info];
-            } else if (SPECS[info.info]) {
-                desc = SPECS[info.info];
-            } else if (COLOURS[info.info]) {
-                desc = COLOURS[info.info];
-            }
+    if (!info) return (<div className="instance-info">&nbsp;</div>);
+
+    if (info.type === 'item') {
+        if (SKILLS[info.info]) {
+            desc = SKILLS[info.info];
+        } else if (SPECS[info.info]) {
+            desc = SPECS[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>
-            <div> {JSON.stringify(desc)} </div>
+            <h5>{info.info}</h5>
+            <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 = (
-        <button
-            className="menu-instance-btn full right"
-            onClick={() => sendInstanceJoin()}>
-            Join New Instance
-        </button>
-    );
+    // const instanceJoin = (
+    //     <button
+    //         className="menu-instance-btn full right"
+    //         onClick={() => sendInstanceJoin()}>
+    //         Join New Instance
+    //     </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={() => {
-                    if (c) {
-                        sendVboxAccept(j, i);
-                        setInfo('item', c);
-                    }
-                }} >
+                onClick={() => { if (c) return setInfo('item', c) }}
+                onDblClick={() => sendVboxAccept(j, i) }
+                >
                 {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;