90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const actions = require('./../actions');
|
|
const { COLOURS } = require('./../utils');
|
|
const { ConstructAvatar } = require('./construct');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const { ws, constructs, teamPage, teamSelect } = state;
|
|
|
|
function sendConstructSpawn(name) {
|
|
return ws.sendMtxConstructSpawn(name);
|
|
}
|
|
|
|
return {
|
|
constructs,
|
|
teamPage,
|
|
teamSelect,
|
|
};
|
|
},
|
|
function receiveDispatch(dispatch) {
|
|
function setTeam(constructIds) {
|
|
dispatch(actions.setTeamSelect(constructIds));
|
|
}
|
|
|
|
return {
|
|
setTeam,
|
|
};
|
|
}
|
|
);
|
|
|
|
function Collection(args) {
|
|
const {
|
|
constructs,
|
|
teamPage,
|
|
teamSelect,
|
|
setTeam,
|
|
} = args;
|
|
|
|
if (!constructs) return <div></div>;
|
|
|
|
// redux limitation + suggested workaround
|
|
// so much for dumb components
|
|
function selectConstruct(id) {
|
|
// remove
|
|
const i = teamSelect.findIndex(sid => sid === id);
|
|
if (i > -1) {
|
|
teamSelect[i] = null;
|
|
return setTeam(teamSelect);
|
|
}
|
|
|
|
// window insert
|
|
const insert = teamSelect.findIndex(j => j === null);
|
|
if (insert === -1) return setTeam([id, null, null]);
|
|
teamSelect[insert] = id;
|
|
return setTeam(teamSelect);
|
|
}
|
|
|
|
const dispConstructs = constructs.length >= ((teamPage + 1) * 6)
|
|
? constructs.slice(teamPage * 6, (teamPage + 1) * 6)
|
|
: constructs.slice(teamPage * 6, constructs.length);
|
|
|
|
const constructPanels = dispConstructs.map(construct => {
|
|
const colour = teamSelect.indexOf(construct.id);
|
|
const selected = colour > -1;
|
|
|
|
const borderColour = selected ? COLOURS[colour] : '#000000';
|
|
|
|
return (
|
|
<div
|
|
key={construct.id}
|
|
class="construct team-select"
|
|
style={ { 'border-color': borderColour || 'whitesmoke' } }
|
|
onClick={() => selectConstruct(construct.id)} >
|
|
<ConstructAvatar construct={construct} />
|
|
<h2>{construct.name}</h2>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<section class="team">
|
|
{constructPanels}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Collection);
|