moved combiner wip
This commit is contained in:
Mashy
@@ -7,9 +7,12 @@ const { convertItem, removeTier } = require('../utils');
|
||||
const { tutorialStage } = require('../tutorial.utils');
|
||||
const shapes = require('./shapes');
|
||||
|
||||
const Combiner = require('./vbox.combiner');
|
||||
|
||||
|
||||
class InfoComponent extends preact.Component {
|
||||
shouldComponentUpdate(newProps, newState) {
|
||||
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
|
||||
if (newProps.tutorial !== this.props.tutorial) return true;
|
||||
// We don't care about info during tutorial
|
||||
if (newProps.tutorial && this.props.instance.time_control === 'Practice'
|
||||
@@ -30,6 +33,7 @@ class InfoComponent extends preact.Component {
|
||||
// Variables that will change
|
||||
info,
|
||||
tutorial,
|
||||
vboxHighlight,
|
||||
|
||||
// Static
|
||||
player, // Only used for colour calcs which will be update if info changes
|
||||
@@ -37,7 +41,6 @@ class InfoComponent extends preact.Component {
|
||||
itemInfo,
|
||||
instance, // Only used for instance id
|
||||
// functions
|
||||
setInfo,
|
||||
setTutorialNull,
|
||||
} = args;
|
||||
const { comboItem } = this.state;
|
||||
@@ -181,6 +184,7 @@ class InfoComponent extends preact.Component {
|
||||
<div class='info'>
|
||||
<div onMouseOver={() => this.setState({ comboItem: null })}>
|
||||
<Info />
|
||||
<Combiner vboxHighlight={vboxHighlight} />
|
||||
</div>
|
||||
<Combos />
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,6 @@ const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const Vbox = require('./vbox.component');
|
||||
const InfoContainer = require('./info.container');
|
||||
const InstanceConstructsContainer = require('./instance.constructs');
|
||||
const Faceoff = require('./faceoff');
|
||||
|
||||
@@ -63,7 +62,6 @@ function Instance(args) {
|
||||
return (
|
||||
<main id="instance" class='instance' onClick={instanceClick}>
|
||||
<Vbox />
|
||||
<InfoContainer />
|
||||
<InstanceConstructsContainer />
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -1,66 +1,123 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
const countBy = require('lodash/countBy');
|
||||
|
||||
function combinerBtn(props) {
|
||||
const {
|
||||
itemInfo,
|
||||
sendVboxCombine,
|
||||
setInfo,
|
||||
stashSelect,
|
||||
storeSelect,
|
||||
vbox,
|
||||
vboxBuySelected,
|
||||
vboxHighlight,
|
||||
} = props;
|
||||
let text = '';
|
||||
let mouseEvent = false;
|
||||
const combineLength = stashSelect.length + storeSelect.length;
|
||||
if (vboxHighlight && vboxHighlight.length === 0) {
|
||||
// The selected items can't be combined with additional items therefore valid combo
|
||||
const stashItems = stashSelect.map(j => vbox.bound[j]);
|
||||
const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]);
|
||||
const selectedItems = stashItems.concat(shopItems);
|
||||
const combinerCount = countBy(selectedItems, co => co);
|
||||
const actions = require('../actions');
|
||||
|
||||
const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => {
|
||||
if (!combo.components.includes(c)) return false;
|
||||
const comboCount = countBy(combo.components, co => co);
|
||||
if (combinerCount[c] > comboCount[c]) return false;
|
||||
return true;
|
||||
}));
|
||||
let comboItem = comboItemObj ? comboItemObj.item : 'refine';
|
||||
setInfo(comboItem);
|
||||
comboItem = comboItem.replace('Plus', '+');
|
||||
let bits = 0;
|
||||
storeSelect.forEach(item => bits += item[0] + 1);
|
||||
text = bits
|
||||
? <p>Buy<br/>{comboItem}<br />{bits}b</p>
|
||||
: <p>Combine<br />{comboItem}</p>;
|
||||
if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
|
||||
} else if (stashSelect.length === 0 && storeSelect.length === 1) {
|
||||
const item = storeSelect[0];
|
||||
text = <p>Buy<br />{vbox.free[item[0]][item[1]]}<br />{item[0] + 1}b</p>;
|
||||
mouseEvent = vboxBuySelected;
|
||||
} else {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (combineLength > i) {
|
||||
text += '■ ';
|
||||
} else {
|
||||
text += '▫ ';
|
||||
}
|
||||
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,
|
||||
itemInfo,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
};
|
||||
},
|
||||
function receiveDispatch(dispatch) {
|
||||
function setInfo(item) {
|
||||
return dispatch(actions.setInfo(item));
|
||||
}
|
||||
|
||||
return {
|
||||
setInfo,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
class CombinerBtn extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
// Single variable props
|
||||
if (newProps.vbox !== this.props.vbox) return true;
|
||||
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
|
||||
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
render(props) {
|
||||
const {
|
||||
vboxHighlight,
|
||||
|
||||
vbox,
|
||||
vboxSelected,
|
||||
itemInfo,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
|
||||
setInfo,
|
||||
} = 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;
|
||||
const combineLength = stashSelect.length + storeSelect.length;
|
||||
if (vboxHighlight && vboxHighlight.length === 0) {
|
||||
// The selected items can't be combined with additional items therefore valid combo
|
||||
const stashItems = stashSelect.map(j => vbox.bound[j]);
|
||||
const shopItems = storeSelect.map(j => vbox.free[j[0]][j[1]]);
|
||||
const selectedItems = stashItems.concat(shopItems);
|
||||
const combinerCount = countBy(selectedItems, co => co);
|
||||
|
||||
const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => {
|
||||
if (!combo.components.includes(c)) return false;
|
||||
const comboCount = countBy(combo.components, co => co);
|
||||
if (combinerCount[c] > comboCount[c]) return false;
|
||||
return true;
|
||||
}));
|
||||
let comboItem = comboItemObj ? comboItemObj.item : 'refine';
|
||||
setInfo(comboItem);
|
||||
comboItem = comboItem.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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div class='combiner'>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={!mouseEvent}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => mouseEvent()}>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = combinerBtn;
|
||||
module.exports = addState(CombinerBtn);
|
||||
|
||||
@@ -5,9 +5,9 @@ const forEach = require('lodash/forEach');
|
||||
|
||||
const actions = require('../actions');
|
||||
|
||||
const InfoContainer = require('./info.container');
|
||||
const StashElement = require('./vbox.stash');
|
||||
const StoreElement = require('./vbox.store');
|
||||
const CombinerElement = require('./vbox.combiner');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
@@ -16,6 +16,7 @@ const addState = connect(
|
||||
instance,
|
||||
player,
|
||||
vboxSelected,
|
||||
info,
|
||||
itemInfo,
|
||||
itemUnequip,
|
||||
tutorial,
|
||||
@@ -30,10 +31,6 @@ const addState = connect(
|
||||
return ws.sendVboxAccept(instance.id, group, index);
|
||||
}
|
||||
|
||||
function sendVboxCombine() {
|
||||
return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect);
|
||||
}
|
||||
|
||||
function sendVboxReclaim(i) {
|
||||
return ws.sendVboxReclaim(instance.id, i);
|
||||
}
|
||||
@@ -44,9 +41,9 @@ const addState = connect(
|
||||
|
||||
return {
|
||||
instance,
|
||||
info,
|
||||
player,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
sendVboxDiscard,
|
||||
sendVboxReclaim,
|
||||
vboxSelected,
|
||||
@@ -130,7 +127,6 @@ class Vbox extends preact.Component {
|
||||
// Function Calls
|
||||
sendItemUnequip,
|
||||
sendVboxAccept,
|
||||
sendVboxCombine,
|
||||
sendVboxDiscard,
|
||||
sendVboxReclaim,
|
||||
setVboxSelected,
|
||||
@@ -235,6 +231,10 @@ class Vbox extends preact.Component {
|
||||
<div class='vbox'>
|
||||
{storeHdr()}
|
||||
{stashHdr()}
|
||||
<InfoContainer
|
||||
vboxHighlight={vboxHighlight}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
/>
|
||||
<StoreElement
|
||||
clearVboxSelected = {clearVboxSelected}
|
||||
setInfo = {setInfo}
|
||||
@@ -258,16 +258,6 @@ class Vbox extends preact.Component {
|
||||
setInfo = {setInfo}
|
||||
setVboxSelected = {setVboxSelected}
|
||||
/>
|
||||
<CombinerElement
|
||||
itemInfo = {itemInfo}
|
||||
sendVboxCombine = {sendVboxCombine}
|
||||
setInfo = {setInfo}
|
||||
stashSelect = {stashSelect}
|
||||
storeSelect = {storeSelect}
|
||||
vbox = {vbox}
|
||||
vboxBuySelected = {vboxBuySelected}
|
||||
vboxHighlight = {vboxHighlight}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user