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

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
 */
@@ -96,7 +96,15 @@ button.left:hover, button.left:focus {
     flex-flow: column;
 }
 
+.cryps input {
+    border-color: #444;
+    background-color: #333;
+    border-radius: 0;
+}
 
+.cryps input:focus {
+    border-color: whitesmoke;
+}
 
 /*
     MENU
@@ -158,6 +166,35 @@ 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;
+}
+
+.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 +224,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,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 }) {
+class SpawnButton extends Component {
-    if (!cryps) return <div>not ready</div>;
+    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 (info.item) {
+        if (SKILLS[info.item]) {
-            if (SKILLS[info.item]) {
+            itemDetails = SKILLS[info.item];
-                itemDetails = SKILLS[info.item];
+        } else if (SPECS[info.item]) {
-            } else if (SPECS[info.item]) {
+            itemDetails = SPECS[info.item];
-                itemDetails = SPECS[info.item];
+        } else if (COLOURS[info.item]) {
-            } else if (COLOURS[info.item]) {
+            itemDetails = COLOURS[info.item];
-                itemDetails = COLOURS[info.item];
-            }
-        }
-
-        if (info.cryp) {
-            ({ cryp } = info);
         }
     }
-    const crypHeader = cryp ? <div> {cryp.name} </div> : null;
+    const crypHeader = info.cryp ? <h5> {info.cryp.name} </h5> : null;
-    const stats = cryp ? [
+    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 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 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 = (
+    // 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/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={() => {
+                onClick={() => { if (c) return setInfo(c, null) }}
-                    if (c) {
+                onDblClick={() => sendVboxAccept(j, i) }
-                        sendVboxAccept(j, i);
+                >
-                        setInfo(c, null);
-                    }
-                }} >
                 {convertVar(c)}
             </td>
         ));

client/src/socket.jsx

@@ -260,7 +260,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