124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
const { connect } = require('preact-redux');
|
|
const preact = require('preact');
|
|
|
|
const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
|
|
const { ConstructAvatar } = require('./construct');
|
|
const actions = require('./../actions');
|
|
const InstanceCreateForm = require('./instance.create.buttons');
|
|
|
|
const idSort = stringSort('id');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const { ws, constructs, team, instanceList, account } = state;
|
|
|
|
function sendInstanceJoin(instance) {
|
|
if (team.length) {
|
|
return ws.sendInstanceJoin(instance.id, team);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function sendInstanceState(instance) {
|
|
return ws.sendInstanceState(instance.id);
|
|
}
|
|
|
|
function sendInstanceList() {
|
|
return ws.sendInstanceList();
|
|
}
|
|
|
|
return {
|
|
account,
|
|
constructs,
|
|
team,
|
|
sendInstanceJoin,
|
|
sendInstanceState,
|
|
sendInstanceList,
|
|
instanceList,
|
|
};
|
|
},
|
|
);
|
|
|
|
function List(args) {
|
|
const {
|
|
account,
|
|
team,
|
|
constructs,
|
|
sendInstanceState,
|
|
sendInstanceJoin,
|
|
sendInstanceList,
|
|
instanceList,
|
|
} = args;
|
|
|
|
function listElements() {
|
|
if (!instanceList) return <div>...</div>;
|
|
|
|
const instancePanels = instanceList.map(instance => {
|
|
const player = instance.players.find(p => p.id === account.id);
|
|
const scoreText = player
|
|
? `${player.wins} : ${player.losses}`
|
|
: '';
|
|
|
|
function instanceClick() {
|
|
if (!player) return sendInstanceJoin(instance);
|
|
return sendInstanceState(instance);
|
|
}
|
|
|
|
return (
|
|
<tr key={instance.id}
|
|
class="right"
|
|
onClick={instanceClick} >
|
|
<td>{instance.name}</td>
|
|
<td>{instance.players.length} / {instance.max_players}</td>
|
|
<td>{scoreText}</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div class="menu-instance-list" >
|
|
<hr />
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>instance name</th>
|
|
<th>players</th>
|
|
<th>status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{instancePanels}
|
|
<tr class="right" onClick={() => sendInstanceList()}>
|
|
<td colSpan={3} >↺</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<InstanceCreateForm />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const constructPanels = constructs
|
|
.filter(c => team.includes(c.id))
|
|
.sort(idSort)
|
|
.map(construct =>
|
|
<div
|
|
key={construct.id}
|
|
class="menu-construct" >
|
|
<ConstructAvatar name={construct.name} id={construct.id} />
|
|
<h2>{construct.name}</h2>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<main class="menu-instances">
|
|
<div class="construct-list">
|
|
{constructPanels}
|
|
</div>
|
|
{listElements()}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(List);
|