120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
const { connect } = require('preact-redux');
|
|
const preact = require('preact');
|
|
|
|
const { stringSort } = require('./../utils');
|
|
const { ConstructAvatar } = require('./construct');
|
|
const actions = require('./../actions');
|
|
const Inventory = require('./inventory');
|
|
|
|
const idSort = stringSort('id');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
constructs,
|
|
constructRename,
|
|
team,
|
|
mtxActive,
|
|
} = state;
|
|
|
|
function sendInstancePractice() {
|
|
return ws.sendInstancePractice();
|
|
}
|
|
|
|
function sendConstructAvatarReroll(id) {
|
|
console.log('using', mtxActive, 'on', id);
|
|
return ws.sendMtxApply(id, mtxActive, '');
|
|
}
|
|
|
|
function sendConstructRename(id, name) {
|
|
ws.sendMtxApply(id, 'Rename', name);
|
|
}
|
|
|
|
return {
|
|
constructs,
|
|
mtxActive,
|
|
constructRename,
|
|
team,
|
|
sendConstructRename,
|
|
sendInstancePractice,
|
|
sendConstructAvatarReroll,
|
|
};
|
|
},
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function setConstructRename(id) {
|
|
dispatch(actions.setConstructRename(id));
|
|
}
|
|
|
|
function clearMtxRename() {
|
|
dispatch(actions.setConstructRename(null));
|
|
dispatch(actions.setMtxActive(null));
|
|
}
|
|
|
|
return {
|
|
clearMtxRename,
|
|
setConstructRename,
|
|
};
|
|
}
|
|
|
|
);
|
|
|
|
function Play(args) {
|
|
const {
|
|
team,
|
|
constructRename,
|
|
clearMtxRename,
|
|
setConstructRename,
|
|
sendConstructRename,
|
|
mtxActive,
|
|
sendConstructAvatarReroll,
|
|
} = args;
|
|
|
|
const constructPanels = team
|
|
.map(construct => {
|
|
const constructName = constructRename === construct.id
|
|
? <input id='renameInput' type="text" style="text-align: center" placeholder="enter a new name"></input>
|
|
: <h2>{construct.name}</h2>;
|
|
|
|
const confirm = constructRename === construct.id
|
|
? <button onClick={() => sendConstructRename(construct.id, document.getElementById('renameInput').value)}>
|
|
Confirm
|
|
</button>
|
|
: false;
|
|
|
|
const cancel = constructRename === construct.id
|
|
? <button onClick={() => clearMtxRename()}>
|
|
Cancel
|
|
</button>
|
|
: false;
|
|
return (
|
|
<div
|
|
key={construct.id}
|
|
style={ mtxActive ? { cursor: 'pointer' } : {}}
|
|
onClick={() => {
|
|
if (!mtxActive) return false;
|
|
if (mtxActive === 'Rename') return setConstructRename(construct.id);
|
|
return sendConstructAvatarReroll(construct.id);
|
|
}}
|
|
class="menu-construct" >
|
|
<ConstructAvatar construct={construct} />
|
|
{constructName}
|
|
{confirm}
|
|
{cancel}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<main class="play">
|
|
<div class="team">
|
|
{constructPanels}
|
|
</div>
|
|
<Inventory />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Play);
|