diff --git a/client/cryps.css b/client/cryps.css index a35116bb..33567a7d 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -209,8 +209,7 @@ header { .menu-cryps { display: flex; flex-flow: row wrap; - - flex: 1; + flex: 1 1 100%; } .menu-cryp-ctr { @@ -228,14 +227,12 @@ header { display: flex; flex-flow: row wrap; align-content: center; -} - -.spawn-btn .menu-cryp h2 { - flex: 1; + justify-content: center; } .spawn-btn input { flex: 1 1 100%; + width: 100%; margin: 1em; } @@ -267,7 +264,6 @@ header { display: flex; align-content: flex-start; - height: 100%; } .menu-instance-btn { @@ -579,6 +575,7 @@ header { .cryp-box-top figure { flex: 1; + font-size: 60%; } .menu-instance-btn { @@ -605,6 +602,12 @@ header { margin: 0.5em; } + .spawn-btn button { + margin: 1em; + padding: 0.2em; + width: 100%; + } + .cryp-box .skills { display: none; } diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx index b928d184..7838b236 100644 --- a/client/src/components/body.component.jsx +++ b/client/src/components/body.component.jsx @@ -2,9 +2,8 @@ const preact = require('preact'); const { connect } = require('preact-redux'); -const InstanceListContainer = require('./instance.list.container'); const LoginContainer = require('./login.container'); -const CrypListContainer = require('./cryp.list.container'); +const MenuContainer = require('./menu.container'); const GameContainer = require('./game.container'); const InstanceContainer = require('./instance.container'); @@ -44,10 +43,7 @@ function renderBody(props) { } return ( -
- - -
+ ); } diff --git a/client/src/components/cryp.list.component.jsx b/client/src/components/cryp.list.component.jsx index 867912b8..9e9d8b0d 100644 --- a/client/src/components/cryp.list.component.jsx +++ b/client/src/components/cryp.list.component.jsx @@ -18,6 +18,7 @@ function CrypList(args) { cryps, selectedCryps, setSelectedCryps, + sendPlayerMmCrypsSet, sendInstanceJoin, sendCrypSpawn } = args; @@ -42,6 +43,15 @@ function CrypList(args) { } const instanceJoinHidden = !selectedCryps.every(c => !!c); + + const mmSet = ( + + ); const instanceJoin = ( + ); + const instanceJoin = ( + + ); + + + const crypPanels = cryps.sort(idSort).map(cryp => { + const colour = selectedCryps.indexOf(cryp.id); + const selected = colour > -1; + + const borderColour = selected ? COLOURS[colour] : '#000000'; + + return ( +
+
selectCryp(cryp.id)} > +
+ {molecule} +
+

{cryp.name}

+
+
+ ); + }); + + const spawnButtonsNum = cryps.length < 3 + ? (3 - cryps.length) + : 1; + + const spawnButtons = range(spawnButtonsNum) + .map(i => sendCrypSpawn(name)} />); + + return ( +
+ {mmSet} + {instanceJoin} + {crypPanels} + {spawnButtons} +
+ ); +} + +function instanceList({ instances, setActiveInstance }) { if (!instances) return
...
; - // const instanceJoin = ( - // - // ); - const instancePanels = instances.map(instance => { const globalInstance = instance.instance === NULL_UUID; const name = globalInstance diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx new file mode 100644 index 00000000..f2902153 --- /dev/null +++ b/client/src/components/menu.component.jsx @@ -0,0 +1,143 @@ +const preact = require('preact'); +const range = require('lodash/range'); + +const { NULL_UUID } = require('./../utils'); + +const { stringSort } = require('./../utils'); +const molecule = require('./molecule'); +const SpawnButton = require('./spawn.button'); + +const idSort = stringSort('id'); + +const COLOURS = [ + '#a52a2a', + '#1FF01F', + '#3498db', +]; + +function Menu(args) { + const { + cryps, + selectedCryps, + setSelectedCryps, + setActiveInstance, + sendPlayerMmCrypsSet, + sendInstanceJoin, + sendCrypSpawn, + instances, + } = args; + + function instanceList() { + if (!instances) return
...
; + + const instancePanels = instances.map(instance => { + const globalInstance = instance.instance === NULL_UUID; + const name = globalInstance + ? 'Global Matchmaking' + : `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`; + + return ( + + ); + }); + + const instanceJoinHidden = !selectedCryps.every(c => !!c); + + const mmSet = ( + + ); + const instanceJoin = ( + + ); + + return ( +
+ {instancePanels} + {mmSet} + {instanceJoin} +
+ ); + } + + function crypList() { + if (!cryps) return
; + + // redux limitation + suggested workaround + // so much for dumb components + function selectCryp(id) { + // remove + const i = selectedCryps.findIndex(sid => sid === id); + if (i > -1) { + selectedCryps[i] = null; + return setSelectedCryps(selectedCryps); + } + + // window insert + const insert = selectedCryps.findIndex(j => j === null); + if (insert === -1) return setSelectedCryps([id, null, null]); + selectedCryps[insert] = id; + return setSelectedCryps(selectedCryps); + } + + const crypPanels = cryps.sort(idSort).map(cryp => { + const colour = selectedCryps.indexOf(cryp.id); + const selected = colour > -1; + + const borderColour = selected ? COLOURS[colour] : '#000000'; + + return ( +
+
selectCryp(cryp.id)} > +
+ {molecule} +
+

{cryp.name}

+
+
+ ); + }); + + const spawnButtonsNum = cryps.length < 3 + ? (3 - cryps.length) + : 1; + + const spawnButtons = range(spawnButtonsNum) + .map(i => sendCrypSpawn(name)} />); + + return ( +
+ {crypPanels} + {spawnButtons} +
+ ); + } + + return ( +
+ {instanceList()} + {crypList()} +
+ ); +} + +module.exports = Menu; diff --git a/client/src/components/menu.container.jsx b/client/src/components/menu.container.jsx new file mode 100644 index 00000000..5ee15df1 --- /dev/null +++ b/client/src/components/menu.container.jsx @@ -0,0 +1,54 @@ +const { connect } = require('preact-redux'); + +const Menu = require('./menu.component'); +const actions = require('./../actions'); + +const addState = connect( + function receiveState(state) { + const { ws, cryps, selectedCryps, instances } = state; + + function sendInstanceJoin() { + if (selectedCryps.length) { + return ws.sendInstanceJoin(selectedCryps); + } + return false; + } + + function sendPlayerMmCrypsSet() { + if (selectedCryps.length) { + return ws.sendPlayerMmCrypsSet(selectedCryps); + } + return false; + } + + function sendCrypSpawn(name) { + return ws.sendCrypSpawn(name); + } + + return { + cryps, + selectedCryps, + sendInstanceJoin, + sendCrypSpawn, + sendPlayerMmCrypsSet, + instances, + }; + }, + + function receiveDispatch(dispatch) { + function setSelectedCryps(crypIds) { + dispatch(actions.setSelectedCryps(crypIds)); + } + + function setActiveInstance(instance) { + dispatch(actions.setInstance(instance)); + } + + return { + setSelectedCryps, + setActiveInstance, + }; + } +); + +module.exports = addState(Menu); diff --git a/client/src/socket.jsx b/client/src/socket.jsx index f4259dd0..17a1783f 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -77,8 +77,8 @@ function createSocket(events) { send({ method: 'cryp_unspec', params: { id, spec } }); } - function sendPlayerCrypsSet(instanceId, crypIds) { - send({ method: 'player_cryps_set', params: { instance_id: instanceId, cryp_ids: crypIds } }); + function sendPlayerMmCrypsSet(crypIds) { + send({ method: 'player_mm_cryps_set', params: { cryp_ids: crypIds } }); } function sendPlayerState(instanceId) { @@ -309,7 +309,7 @@ function createSocket(events) { sendInstanceJoin, sendInstanceReady, sendInstanceScores, - sendPlayerCrypsSet, + sendPlayerMmCrypsSet, sendPlayerState, sendVboxAccept, sendVboxApply, diff --git a/server/src/player.rs b/server/src/player.rs index 7645274a..73360727 100644 --- a/server/src/player.rs +++ b/server/src/player.rs @@ -170,7 +170,7 @@ pub fn player_state(params: PlayerStateParams, tx: &mut Transaction, account: &A player_get(tx, account.id, params.instance_id) } -pub fn player_cryps_set(params: PlayerCrypsSetParams, tx: &mut Transaction, account: &Account) -> Result { +pub fn player_mm_cryps_set(params: PlayerCrypsSetParams, tx: &mut Transaction, account: &Account) -> Result { if params.cryp_ids.len() != 3 { return Err(err_msg("team size is 3")); } @@ -183,6 +183,7 @@ pub fn player_cryps_set(params: PlayerCrypsSetParams, tx: &mut Transaction, acco match player_get(tx, account.id, Uuid::nil()) { Ok(mut p) => { p.cryps = cryps; + p.vbox = Vbox::new(account.id, Uuid::nil()); player_update(tx, p, false) }, Err(_) => { diff --git a/server/src/rpc.rs b/server/src/rpc.rs index c000070a..b3dc22f1 100644 --- a/server/src/rpc.rs +++ b/server/src/rpc.rs @@ -21,7 +21,7 @@ use account::{Account, account_create, account_login, account_from_token, accoun use skill::{Skill}; // use zone::{Zone, zone_create, zone_join, zone_close}; use spec::{Spec}; -use player::{Score, player_state, player_cryps_set, Player}; +use player::{Score, player_state, player_mm_cryps_set, Player}; use instance::{instance_join, instance_ready, instance_scores}; use vbox::{Var, vbox_accept, vbox_apply, vbox_discard, vbox_combine, vbox_reclaim, vbox_unequip}; @@ -82,7 +82,7 @@ impl Rpc { "instance_scores" => Rpc::instance_scores(data, &mut tx, account.unwrap(), client), "player_state" => Rpc::player_state(data, &mut tx, account.unwrap(), client), - "player_cryps_set" => Rpc::player_cryps_set(data, &mut tx, account.unwrap(), client), + "player_mm_cryps_set" => Rpc::player_mm_cryps_set(data, &mut tx, account.unwrap(), client), "player_vbox_accept" => Rpc::player_vbox_accept(data, &mut tx, account.unwrap(), client), "player_vbox_apply" => Rpc::player_vbox_apply(data, &mut tx, account.unwrap(), client), "player_vbox_combine" => Rpc::player_vbox_combine(data, &mut tx, account.unwrap(), client), @@ -307,12 +307,12 @@ impl Rpc { return Ok(response); } - fn player_cryps_set(data: Vec, tx: &mut Transaction, account: Account, _client: &mut WebSocket) -> Result { + fn player_mm_cryps_set(data: Vec, tx: &mut Transaction, account: Account, _client: &mut WebSocket) -> Result { let msg = from_slice::(&data).or(Err(err_msg("invalid params")))?; let response = RpcResponse { method: "player_state".to_string(), - params: RpcResult::PlayerState(player_cryps_set(msg.params, tx, &account)?) + params: RpcResult::PlayerState(player_mm_cryps_set(msg.params, tx, &account)?) }; return Ok(response);