diff --git a/client/cryps.css b/client/cryps.css index 61a69df2..e7ac010c 100644 --- a/client/cryps.css +++ b/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%; - overflow: hidden; + height: 99%; + 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; } /* diff --git a/client/src/components/cryp.list.component.jsx b/client/src/components/cryp.list.component.jsx index dce35b9d..15a1d35c 100644 --- a/client/src/components/cryp.list.component.jsx +++ b/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
not ready
; +class SpawnButton extends Component { + toggle(e) { + this.setState({ enabled: e }); + } + + render({ }, { enabled }) { + return ( +
+
this.toggle(!this.enabled)} > +

+

+ spawnName = e.target.value} + /> + +
+
+ ); + } +} + +function CrypList({ cryps, selectedCryps, setSelectedCryps, sendInstanceJoin }) { + if (!cryps) return
; // 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 = ( + + ); + + 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 (
+ {instanceJoin} {crypPanels} +
); } diff --git a/client/src/components/cryp.list.container.jsx b/client/src/components/cryp.list.container.jsx index 6ae16e7a..4a2ea8fe 100644 --- a/client/src/components/cryp.list.container.jsx +++ b/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) { diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 091ddc02..81775f4a 100644 --- a/client/src/components/info.component.jsx +++ b/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 (
 
); + + 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 ( +
+
{cryp.name}
+
+ ); + } + return (
-
{JSON.stringify(info)}
-
{JSON.stringify(desc)}
+
{info.info}
+
{desc.description}
+
{desc.upgrades}
); } diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index cd272803..1a1eac8d 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -13,7 +13,7 @@ function Cryp(cryp, sendVboxApply, setInfo) { ? cryp.skills[i].skill : ( ); - return ; + return ; }); // needed for ondrop to fire @@ -48,6 +48,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
setInfo('cryp', cryp)} onDragOver={onDragOver} onDrop={onDrop} > diff --git a/client/src/components/instance.list.component.jsx b/client/src/components/instance.list.component.jsx index 97678f53..bb8618f9 100644 --- a/client/src/components/instance.list.component.jsx +++ b/client/src/components/instance.list.component.jsx @@ -6,35 +6,32 @@ const { NULL_UUID } = require('./../utils'); function instanceList({ instances, setActiveInstance, sendInstanceJoin }) { if (!instances) return
...
; - const instanceJoin = ( - - ); + // const instanceJoin = ( + // + // ); 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 ( ); }); - //

Instances

- return (
- {instanceJoin} {instancePanels}
); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 4c704646..db4937f3 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -53,12 +53,9 @@ function Vbox(args) { const cells = row.map((c, j) => ( { - if (c) { - sendVboxAccept(j, i); - setInfo('item', c); - } - }} > + onClick={() => { if (c) return setInfo('item', c) }} + onDblClick={() => sendVboxAccept(j, i) } + > {convertVar(c)} )); diff --git a/client/src/socket.jsx b/client/src/socket.jsx index 01e666ef..cc77a7c9 100644 --- a/client/src/socket.jsx +++ b/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;