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