move combiner into info (clear buy/combine) on combo hover

This commit is contained in:
Mashy 2019-11-23 21:05:17 +10:00
parent 754f3e0025
commit 16af4da249
2 changed files with 52 additions and 94 deletions

View File

@ -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);

View File

@ -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>