132 lines
3.6 KiB
JavaScript
132 lines
3.6 KiB
JavaScript
const preact = require('preact');
|
|
const range = require('lodash/range');
|
|
|
|
const { stringSort, NULL_UUID } = require('./../utils');
|
|
const molecule = require('./molecule');
|
|
const SpawnButton = require('./spawn.button');
|
|
|
|
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 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>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<section className="menu-instance-list" >
|
|
{instancePanels}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
module.exports = instanceList;
|