menu
This commit is contained in:
ntr
parent
262e5a3a54
commit
c641afde22
@ -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;
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<main>
|
||||
<CrypListContainer />
|
||||
<InstanceListContainer />
|
||||
</main>
|
||||
<MenuContainer />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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 = (
|
||||
<button
|
||||
className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
|
||||
disabled={instanceJoinHidden}
|
||||
onClick={() => sendPlayerMmCrypsSet()}>
|
||||
Set Matchmaking Team
|
||||
</button>
|
||||
);
|
||||
const instanceJoin = (
|
||||
<button
|
||||
className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
|
||||
@ -84,6 +94,7 @@ function CrypList(args) {
|
||||
|
||||
return (
|
||||
<div className="menu-cryps">
|
||||
{mmSet}
|
||||
{instanceJoin}
|
||||
{crypPanels}
|
||||
{spawnButtons}
|
||||
|
||||
@ -5,7 +5,7 @@ const actions = require('./../actions');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, cryps, selectedCryps } = state;
|
||||
const { ws, cryps, selectedCryps, instances } = state;
|
||||
|
||||
function sendInstanceJoin() {
|
||||
if (selectedCryps.length) {
|
||||
@ -14,19 +14,52 @@ const addState = connect(
|
||||
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 };
|
||||
return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn, sendPlayerMmCrypsSet };
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function setSelectedCryps(crypIds) {
|
||||
dispatch(actions.setSelectedCryps(crypIds));
|
||||
}
|
||||
return { setSelectedCryps };
|
||||
|
||||
function setActiveInstance(instance) {
|
||||
dispatch(actions.setInstance(instance));
|
||||
}
|
||||
|
||||
return {
|
||||
setSelectedCryps,
|
||||
setActiveInstance,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = addState(CrypList);
|
||||
|
||||
|
||||
function sendCrypsSet() {
|
||||
console.log('set crypos');
|
||||
// return ws.sendGamePvp(crypIds);
|
||||
}
|
||||
|
||||
function sendInstanceJoin() {
|
||||
if (selectedCryps.length) {
|
||||
return ws.sendInstanceJoin(selectedCryps);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
return { instances, sendCrypsSet, sendInstanceJoin };
|
||||
},
|
||||
|
||||
|
||||
@ -1,19 +1,110 @@
|
||||
// eslint-disable-next-line
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const { NULL_UUID } = require('./../utils');
|
||||
const { stringSort, NULL_UUID } = require('./../utils');
|
||||
const molecule = require('./molecule');
|
||||
const SpawnButton = require('./spawn.button');
|
||||
|
||||
function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
|
||||
const idSort = stringSort('id');
|
||||
|
||||
const COLOURS = [
|
||||
'#a52a2a',
|
||||
'#1FF01F',
|
||||
'#3498db',
|
||||
];
|
||||
|
||||
function CrypList(args) {
|
||||
const {
|
||||
cryps,
|
||||
selectedCryps,
|
||||
setSelectedCryps,
|
||||
sendPlayerMmCrypsSet,
|
||||
sendInstanceJoin,
|
||||
sendCrypSpawn
|
||||
} = args;
|
||||
|
||||
if (!cryps) return <div></div>;
|
||||
|
||||
// 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 instanceJoinHidden = !selectedCryps.every(c => !!c);
|
||||
|
||||
const mmSet = (
|
||||
<button
|
||||
className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
|
||||
disabled={instanceJoinHidden}
|
||||
onClick={() => sendPlayerMmCrypsSet()}>
|
||||
Set Matchmaking Team
|
||||
</button>
|
||||
);
|
||||
const instanceJoin = (
|
||||
<button
|
||||
className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
|
||||
disabled={instanceJoinHidden}
|
||||
onClick={() => sendInstanceJoin()}>
|
||||
Join New Instance
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
const crypPanels = cryps.sort(idSort).map(cryp => {
|
||||
const colour = selectedCryps.indexOf(cryp.id);
|
||||
const selected = colour > -1;
|
||||
|
||||
const borderColour = selected ? COLOURS[colour] : '#000000';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cryp.id}
|
||||
className="menu-cryp-ctr">
|
||||
<div
|
||||
className="menu-cryp"
|
||||
style={ { 'border-color': borderColour || 'whitesmoke' } }
|
||||
onClick={() => selectCryp(cryp.id)} >
|
||||
<figure className="img">
|
||||
{molecule}
|
||||
</figure>
|
||||
<h2>{cryp.name}</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const spawnButtonsNum = cryps.length < 3
|
||||
? (3 - cryps.length)
|
||||
: 1;
|
||||
|
||||
const spawnButtons = range(spawnButtonsNum)
|
||||
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
|
||||
|
||||
return (
|
||||
<div className="menu-cryps">
|
||||
{mmSet}
|
||||
{instanceJoin}
|
||||
{crypPanels}
|
||||
{spawnButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function instanceList({ instances, setActiveInstance }) {
|
||||
if (!instances) return <div>...</div>;
|
||||
|
||||
// const instanceJoin = (
|
||||
// <button
|
||||
// className="menu-instance-btn full right"
|
||||
// onClick={() => sendInstanceJoin()}>
|
||||
// Join New Instance
|
||||
// </button>
|
||||
// );
|
||||
|
||||
const instancePanels = instances.map(instance => {
|
||||
const globalInstance = instance.instance === NULL_UUID;
|
||||
const name = globalInstance
|
||||
|
||||
143
client/src/components/menu.component.jsx
Normal file
143
client/src/components/menu.component.jsx
Normal file
@ -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 <div>...</div>;
|
||||
|
||||
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 (
|
||||
<button
|
||||
className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
|
||||
key={instance.id}
|
||||
onClick={() => setActiveInstance(instance)}>
|
||||
{name}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
const instanceJoinHidden = !selectedCryps.every(c => !!c);
|
||||
|
||||
const mmSet = (
|
||||
<button
|
||||
className={`menu-instance-btn left ${instanceJoinHidden ? 'hidden' : ''}`}
|
||||
disabled={instanceJoinHidden}
|
||||
onClick={() => sendPlayerMmCrypsSet()}>
|
||||
Set Matchmaking Team
|
||||
</button>
|
||||
);
|
||||
const instanceJoin = (
|
||||
<button
|
||||
className={`menu-instance-btn right ${instanceJoinHidden ? 'hidden' : ''}`}
|
||||
disabled={instanceJoinHidden}
|
||||
onClick={() => sendInstanceJoin()}>
|
||||
Join New Instance
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="menu-instance-list" >
|
||||
{instancePanels}
|
||||
{mmSet}
|
||||
{instanceJoin}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function crypList() {
|
||||
if (!cryps) return <div></div>;
|
||||
|
||||
// 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 (
|
||||
<div
|
||||
key={cryp.id}
|
||||
className="menu-cryp-ctr">
|
||||
<div
|
||||
className="menu-cryp"
|
||||
style={ { 'border-color': borderColour || 'whitesmoke' } }
|
||||
onClick={() => selectCryp(cryp.id)} >
|
||||
<figure className="img">
|
||||
{molecule}
|
||||
</figure>
|
||||
<h2>{cryp.name}</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const spawnButtonsNum = cryps.length < 3
|
||||
? (3 - cryps.length)
|
||||
: 1;
|
||||
|
||||
const spawnButtons = range(spawnButtonsNum)
|
||||
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
|
||||
|
||||
return (
|
||||
<div className="menu-cryps">
|
||||
{crypPanels}
|
||||
{spawnButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
{instanceList()}
|
||||
{crypList()}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Menu;
|
||||
54
client/src/components/menu.container.jsx
Normal file
54
client/src/components/menu.container.jsx
Normal file
@ -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);
|
||||
@ -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,
|
||||
|
||||
@ -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<Player, Error> {
|
||||
pub fn player_mm_cryps_set(params: PlayerCrypsSetParams, tx: &mut Transaction, account: &Account) -> Result<Player, Error> {
|
||||
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(_) => {
|
||||
|
||||
@ -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<u8>, tx: &mut Transaction, account: Account, _client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
|
||||
fn player_mm_cryps_set(data: Vec<u8>, tx: &mut Transaction, account: Account, _client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
|
||||
let msg = from_slice::<PlayerCrypsSetMsg>(&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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user