Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

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

@@ -1,4 +1,6 @@
 const preact = require('preact');
+const { Component } = require('preact');
+const range = require('lodash/range');
 
 const { stringSort } = require('./../utils');
 const molecule = require('./molecule');
@@ -11,8 +13,50 @@ 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({ spawn }, { enabled }) {
+        let spawnName = null;
+        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}
+                        onClick={() => spawn(spawnName)}
+                        type="submit">
+                        spawn
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+function CrypList(args) {
+    const {
+        cryps,
+        selectedCryps,
+        setSelectedCryps,
+        sendInstanceJoin,
+        sendCrypSpawn
+    } = args;
+
+    if (!cryps) return <div></div>;
 
     // redux limitation + suggested workaround
     // so much for dumb components
@@ -31,6 +75,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 +108,18 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
         );
     });
 
+    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}
+            {spawnButtons}
         </div>
     );
 }

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

@@ -6,7 +6,19 @@ 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;
+        }
+
+        function sendCrypSpawn(name) {
+            return ws.sendCrypSpawn(name);
+        }
+
+        return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn };
     },
 
     function receiveDispatch(dispatch) {

client/src/components/info.component.jsx

@@ -6,25 +6,20 @@ function Info(args) {
         info,
         sendUnequip,
     } = args;
-    let itemDetails = null; let cryp = null;
+    if (!info) return (<div className="instance-info">&nbsp;</div>);
+    let itemDetails = null;
 
-    if (info) {
-        if (info.item) {
-            if (SKILLS[info.item]) {
-                itemDetails = SKILLS[info.item];
-            } else if (SPECS[info.item]) {
-                itemDetails = SPECS[info.item];
-            } else if (COLOURS[info.item]) {
-                itemDetails = COLOURS[info.item];
-            }
-        }
-
-        if (info.cryp) {
-            ({ cryp } = info);
+    if (info.item) {
+        if (SKILLS[info.item]) {
+            itemDetails = SKILLS[info.item];
+        } else if (SPECS[info.item]) {
+            itemDetails = SPECS[info.item];
+        } else if (COLOURS[info.item]) {
+            itemDetails = COLOURS[info.item];
         }
     }
-    const crypHeader = cryp ? <div> {cryp.name} </div> : null;
-    const stats = cryp ? [
+    const crypHeader = info.cryp ? <h5> {info.cryp.name} </h5> : null;
+    const stats = info.cryp ? [
         { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
         { stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
         { stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
@@ -33,13 +28,17 @@ function Info(args) {
         { stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
         { stat: 'speed', disp: 'Speed', colour: '#FFD123' },
     ].map((s, i) => (
-        <div key={i}>{s.disp}: {cryp[s.stat].max}</div>
+        <div key={i}>{s.disp}: {info.cryp[s.stat].max}</div>
     )) : null;
+    
+    const itemInfo = itemDetails
+        ? <div>{info.item} - {itemDetails.description}</div>
+        : null;
+    
+    const unequip = (itemDetails && info.cryp)
+        ? <button onClick={() => sendUnequip(info.cryp.id, info.item)}> unequip </button>
+        : null;
 
-    const itemInfo = itemDetails ? <div>{info.item} - {itemDetails.description}</div> : null;
-
-
-    const unequip = (itemDetails && cryp) ? <button onClick={() => sendUnequip(cryp.id, info.item)}> unequip </button> : null;
 
     return (
         <div className="instance-info">

client/src/components/instance.component.jsx

@@ -12,7 +12,6 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         const s = cryp.skills[i]
             ? cryp.skills[i].skill
             : (<span>&nbsp;</span>);
-
         return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo(s, cryp)}>{s}</button>;
     });
 

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/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/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(c, null);
-                    }
-                }} >
+                onClick={() => { if (c) return setInfo(c, null) }}
+                onDblClick={() => sendVboxAccept(j, i) }
+                >
                 {convertVar(c)}
             </td>
         ));