From 43c0af4ded207d710d96c2a51dab966e3ca335b1 Mon Sep 17 00:00:00 2001 From: ntr Date: Wed, 3 Apr 2019 00:10:58 +1100 Subject: [PATCH 1/2] spawn buttons --- client/cryps.css | 46 ++++++++++++++--- client/src/components/cryp.list.component.jsx | 50 ++++++++++++++++++- client/src/components/cryp.list.container.jsx | 10 +++- client/src/components/info.component.jsx | 32 ++++++++---- client/src/components/instance.component.jsx | 3 +- .../components/instance.list.component.jsx | 21 ++++---- client/src/components/vbox.component.jsx | 9 ++-- client/src/socket.jsx | 2 +- 8 files changed, 131 insertions(+), 42 deletions(-) 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; From 42124c8c485fa11be1e193a3dabf3b65cba32ffd Mon Sep 17 00:00:00 2001 From: ntr Date: Wed, 3 Apr 2019 13:21:28 +1100 Subject: [PATCH 2/2] cryp spawn button --- client/cryps.css | 9 ++++++- client/src/components/cryp.list.component.jsx | 25 ++++++++++++++++--- client/src/components/cryp.list.container.jsx | 6 ++++- client/src/components/login.container.jsx | 2 +- client/src/socket.jsx | 2 +- server/WORKLOG.md | 1 + 6 files changed, 37 insertions(+), 8 deletions(-) diff --git a/client/cryps.css b/client/cryps.css index e7ac010c..983c7265 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -96,7 +96,15 @@ button.hidden { flex-flow: column; } +.cryps input { + border-color: #444; + background-color: #333; + border-radius: 0; +} +.cryps input:focus { + border-color: whitesmoke; +} /* MENU @@ -177,7 +185,6 @@ header { .spawn-btn input { flex: 1 1 100%; margin: 1em; - background-color: #333; } .spawn-btn button { diff --git a/client/src/components/cryp.list.component.jsx b/client/src/components/cryp.list.component.jsx index 15a1d35c..fb15834c 100644 --- a/client/src/components/cryp.list.component.jsx +++ b/client/src/components/cryp.list.component.jsx @@ -1,5 +1,6 @@ const preact = require('preact'); const { Component } = require('preact'); +const range = require('lodash/range'); const { stringSort } = require('./../utils'); const molecule = require('./molecule'); @@ -17,7 +18,8 @@ class SpawnButton extends Component { this.setState({ enabled: e }); } - render({ }, { enabled }) { + render({ spawn }, { enabled }) { + let spawnName = null; return (
@@ -30,11 +32,12 @@ class SpawnButton extends Component { type="text" disabled={!enabled} placeholder="name" - // onChange={e => spawnName = e.target.value} + onChange={e => spawnName = e.target.value} /> @@ -44,7 +47,15 @@ class SpawnButton extends Component { } } -function CrypList({ cryps, selectedCryps, setSelectedCryps, sendInstanceJoin }) { +function CrypList(args) { + const { + cryps, + selectedCryps, + setSelectedCryps, + sendInstanceJoin, + sendCrypSpawn + } = args; + if (!cryps) return
; // redux limitation + suggested workaround @@ -97,12 +108,18 @@ function CrypList({ cryps, selectedCryps, setSelectedCryps, sendInstanceJoin }) ); }); + const spawnButtonsNum = cryps.length < 3 + ? (3 - cryps.length) + : 1; + + const spawnButtons = range(spawnButtonsNum) + .map(() => sendCrypSpawn(name)} />); return (
{instanceJoin} {crypPanels} - + {spawnButtons}
); } diff --git a/client/src/components/cryp.list.container.jsx b/client/src/components/cryp.list.container.jsx index 4a2ea8fe..48f4fed2 100644 --- a/client/src/components/cryp.list.container.jsx +++ b/client/src/components/cryp.list.container.jsx @@ -14,7 +14,11 @@ const addState = connect( return false; } - return { cryps, selectedCryps, sendInstanceJoin }; + function sendCrypSpawn(name) { + return ws.sendCrypSpawn(name); + } + + return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn }; }, function receiveDispatch(dispatch) { diff --git a/client/src/components/login.container.jsx b/client/src/components/login.container.jsx index d9b60196..2d36e1d4 100644 --- a/client/src/components/login.container.jsx +++ b/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(); diff --git a/client/src/socket.jsx b/client/src/socket.jsx index cc77a7c9..0144b1a1 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: 'grepking', password: 'grepgrepgrep' } }); } return true; diff --git a/server/WORKLOG.md b/server/WORKLOG.md index 2f7f6fc5..2f438959 100644 --- a/server/WORKLOG.md +++ b/server/WORKLOG.md @@ -67,6 +67,7 @@ $$$ # Db maintenance # Art Styles +* illusions * Aztec * youkai * Pixel