124 lines
3.2 KiB
JavaScript
124 lines
3.2 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
const range = require('lodash/range');
|
|
|
|
const actions = require('./../actions');
|
|
const { COLOURS } = require('./../utils');
|
|
const { stringSort, ConstructAvatar } = require('./../utils');
|
|
const SpawnButton = require('./spawn.button');
|
|
|
|
const idSort = stringSort('id');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const { ws, constructs, team, account } = state;
|
|
|
|
function sendConstructSpawn(name) {
|
|
return ws.sendConstructSpawn(name);
|
|
}
|
|
|
|
return {
|
|
account,
|
|
constructs,
|
|
team,
|
|
sendConstructSpawn,
|
|
};
|
|
},
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function setTeam(constructIds) {
|
|
dispatch(actions.setTeam(constructIds));
|
|
}
|
|
|
|
function navToList() {
|
|
dispatch(actions.setGame(null));
|
|
dispatch(actions.setInstance(null));
|
|
return dispatch(actions.setNav('list'));
|
|
}
|
|
|
|
|
|
return {
|
|
setTeam,
|
|
navToList,
|
|
};
|
|
}
|
|
);
|
|
|
|
function Team(args) {
|
|
const {
|
|
account,
|
|
constructs,
|
|
team,
|
|
|
|
setTeam,
|
|
sendConstructSpawn,
|
|
navToList,
|
|
} = args;
|
|
|
|
if (!constructs) return <div></div>;
|
|
|
|
// redux limitation + suggested workaround
|
|
// so much for dumb components
|
|
function selectConstruct(id) {
|
|
// remove
|
|
const i = team.findIndex(sid => sid === id);
|
|
if (i > -1) {
|
|
team[i] = null;
|
|
return setTeam(team);
|
|
}
|
|
|
|
// window insert
|
|
const insert = team.findIndex(j => j === null);
|
|
if (insert === -1) return setTeam([id, null, null]);
|
|
team[insert] = id;
|
|
return setTeam(team);
|
|
}
|
|
|
|
const constructPanels = constructs.sort(idSort).map(construct => {
|
|
const colour = team.indexOf(construct.id);
|
|
const selected = colour > -1;
|
|
|
|
const borderColour = selected ? COLOURS[colour] : '#000000';
|
|
|
|
return (
|
|
<div
|
|
key={construct.id}
|
|
className="menu-construct"
|
|
style={ { 'border-color': borderColour || 'whitesmoke' } }
|
|
onClick={() => selectConstruct(construct.id)} >
|
|
<ConstructAvatar name={construct.name} id={construct.id} />
|
|
<h2>{construct.name}</h2>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
const spawnButtonsNum = (3 - constructs.length % 3);
|
|
|
|
const spawnButtons = range(spawnButtonsNum)
|
|
.map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />);
|
|
|
|
|
|
const header = (
|
|
<div className="top">
|
|
<button
|
|
disabled={team.some(c => !c)}
|
|
className="instance-btn instance-ui-btn right"
|
|
onClick={() => navToList()}>
|
|
Join Instance
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<main className="menu-constructs">
|
|
{header}
|
|
<div className="constructs-list">
|
|
{constructPanels}
|
|
{spawnButtons}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Team);
|