move combiner into info (clear buy/combine) on combo hover
This commit is contained in:
parent
754f3e0025
commit
16af4da249
@ -1,92 +0,0 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const {
|
||||
ws,
|
||||
instance,
|
||||
vboxSelected,
|
||||
itemInfo,
|
||||
player,
|
||||
} = state;
|
||||
|
||||
const { vbox } = player;
|
||||
function sendVboxAccept(group, index) {
|
||||
document.activeElement.blur();
|
||||
return ws.sendVboxAccept(instance.id, group, index);
|
||||
}
|
||||
|
||||
function sendVboxCombine() {
|
||||
return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect);
|
||||
}
|
||||
|
||||
return {
|
||||
vbox,
|
||||
vboxSelected,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
class CombinerBtn extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
// Single variable props
|
||||
if (newProps.vbox !== this.props.vbox) return true;
|
||||
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
render(props) {
|
||||
const {
|
||||
vbox,
|
||||
vboxSelected,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
combinerCombo,
|
||||
|
||||
} = props;
|
||||
|
||||
const { stashSelect, storeSelect } = vboxSelected;
|
||||
|
||||
function vboxBuySelected() {
|
||||
if (!(storeSelect.length === 1 && stashSelect.length === 0)) return false;
|
||||
document.activeElement.blur();
|
||||
sendVboxAccept(storeSelect[0][0], storeSelect[0][1]);
|
||||
return true;
|
||||
}
|
||||
let text = '';
|
||||
let mouseEvent = false;
|
||||
if (combinerCombo) {
|
||||
const comboItem = combinerCombo.replace('Plus', '+');
|
||||
let bits = 0;
|
||||
storeSelect.forEach(item => bits += item[0] + 1);
|
||||
text = bits
|
||||
? `Buy ${comboItem} ${bits}b`
|
||||
: `Combine ${comboItem}`;
|
||||
if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
|
||||
} else if (stashSelect.length === 0 && storeSelect.length === 1) {
|
||||
const item = storeSelect[0];
|
||||
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
|
||||
mouseEvent = vboxBuySelected;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
<div class='combiner'>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={!mouseEvent}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => mouseEvent()}>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = addState(CombinerBtn);
|
||||
@ -8,7 +8,6 @@ const { INFO } = require('./../constants');
|
||||
const { convertItem, removeTier } = require('../utils');
|
||||
const { tutorialStage } = require('../tutorial.utils');
|
||||
const shapes = require('./shapes');
|
||||
const Combiner = require('./vbox.combiner');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
@ -25,6 +24,15 @@ const addState = connect(
|
||||
vboxSelected,
|
||||
} = state;
|
||||
|
||||
function sendVboxAccept(group, index) {
|
||||
document.activeElement.blur();
|
||||
return ws.sendVboxAccept(instance.id, group, index);
|
||||
}
|
||||
|
||||
function sendVboxCombine() {
|
||||
return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect);
|
||||
}
|
||||
|
||||
return {
|
||||
ws,
|
||||
info,
|
||||
@ -34,6 +42,8 @@ const addState = connect(
|
||||
account,
|
||||
tutorial,
|
||||
vboxSelected,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
};
|
||||
},
|
||||
|
||||
@ -81,6 +91,8 @@ class InfoComponent extends preact.Component {
|
||||
itemInfo,
|
||||
instance, // Only used for instance id
|
||||
// functions
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
setTutorialNull,
|
||||
} = args;
|
||||
const { comboItem } = this.state;
|
||||
@ -246,11 +258,49 @@ class InfoComponent extends preact.Component {
|
||||
);
|
||||
};
|
||||
|
||||
const Combiner = () => {
|
||||
if (comboItem) return false;
|
||||
function vboxBuySelected() {
|
||||
if (!(storeSelect.length === 1 && stashSelect.length === 0)) return false;
|
||||
document.activeElement.blur();
|
||||
sendVboxAccept(storeSelect[0][0], storeSelect[0][1]);
|
||||
return true;
|
||||
}
|
||||
let text = '';
|
||||
let mouseEvent = false;
|
||||
if (combinerCombo) {
|
||||
const combinerComboText = combinerCombo.replace('Plus', '+');
|
||||
let bits = 0;
|
||||
storeSelect.forEach(item => bits += item[0] + 1);
|
||||
text = bits
|
||||
? `Buy ${combinerComboText} ${bits}b`
|
||||
: `Combine ${combinerComboText}`;
|
||||
if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
|
||||
} else if (stashSelect.length === 0 && storeSelect.length === 1) {
|
||||
const item = storeSelect[0];
|
||||
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
|
||||
mouseEvent = vboxBuySelected;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
<div class='combiner'>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={!mouseEvent}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => mouseEvent()}>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class='info'>
|
||||
<div onMouseOver={() => this.setState({ comboItem: null })}>
|
||||
<Info />
|
||||
<Combiner vboxHighlight={vboxHighlight} combinerCombo={combinerCombo} />
|
||||
<Combiner />
|
||||
</div>
|
||||
<Combos />
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user