breakout combiner / inv / store into separate files
This commit is contained in:
Mashy
parent
33420e4231
commit
85592b1516
68
client/src/components/vbox.combiner.jsx
Normal file
68
client/src/components/vbox.combiner.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
const preact = require('preact');
|
||||
const countBy = require('lodash/countBy');
|
||||
|
||||
function combinerBtn(props) {
|
||||
const {
|
||||
itemInfo,
|
||||
sendVboxCombine,
|
||||
setInfo,
|
||||
stashSelect,
|
||||
shopSelect,
|
||||
vbox,
|
||||
vboxBuySelected,
|
||||
vboxHighlight,
|
||||
} = props;
|
||||
let text = '';
|
||||
let mouseEvent = false;
|
||||
const combineLength = stashSelect.length + shopSelect.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 = shopSelect.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;
|
||||
shopSelect.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 && shopSelect.length === 1) {
|
||||
const item = shopSelect[0];
|
||||
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
|
||||
mouseEvent = vboxBuySelected;
|
||||
} else {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (combineLength > i) {
|
||||
text += '■ ';
|
||||
} else {
|
||||
text += '▫ ';
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div class='combiner'>
|
||||
<div class='vbox-padding'>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={!mouseEvent}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => mouseEvent()}>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = combinerBtn;
|
||||
@ -1,14 +1,13 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
const range = require('lodash/range');
|
||||
const countBy = require('lodash/countBy');
|
||||
const without = require('lodash/without');
|
||||
const forEach = require('lodash/forEach');
|
||||
|
||||
const { removeTier } = require('../utils');
|
||||
const shapes = require('./shapes');
|
||||
const actions = require('../actions');
|
||||
const buttons = require('./buttons');
|
||||
|
||||
const InventoryElement = require('./vbox.inventory');
|
||||
const StoreElement = require('./vbox.store');
|
||||
const CombinerElement = require('./vbox.combiner');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
@ -175,66 +174,6 @@ class Vbox extends preact.Component {
|
||||
return true;
|
||||
}
|
||||
|
||||
function availableBtn(v, group, index) {
|
||||
if (!v) return <button disabled class='empty' key={(group * 10) + index} > </button>;
|
||||
const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index);
|
||||
|
||||
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
||||
|
||||
function onClick(e) {
|
||||
e.stopPropagation();
|
||||
if (!comboHighlight) setInfo(vbox.free[group][index]);
|
||||
if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) {
|
||||
return setVboxSelected({ shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect });
|
||||
}
|
||||
|
||||
if (!shopSelect.length && !stashSelect.length) return setVboxSelected({ shopSelect: [[group, index]], stashSelect });
|
||||
if (comboHighlight !== 'combo-border') {
|
||||
return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] });
|
||||
}
|
||||
return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect });
|
||||
}
|
||||
|
||||
|
||||
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
|
||||
|
||||
const vboxObject = shapes[v] ? shapes[v]() : v;
|
||||
const disabled = vbox.bits <= group;
|
||||
return (
|
||||
<label draggable='true'
|
||||
onDragStart={ev => ev.dataTransfer.setData('text', '')}
|
||||
key={group * 10 + index}
|
||||
onDragEnd={clearVboxSelected}>
|
||||
<button
|
||||
class={classes}
|
||||
disabled={disabled}
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onMouseDown={onClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
> {vboxObject}
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function vboxElement() {
|
||||
return (
|
||||
<div class='shop'
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<div class='vbox-padding'>
|
||||
<div class="vbox-colours">
|
||||
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
||||
</div>
|
||||
<div class="vbox-items">
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function vboxHdr() {
|
||||
return (
|
||||
<div class="shop-hdr">
|
||||
@ -250,7 +189,8 @@ class Vbox extends preact.Component {
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => vboxHover(e, 'refill')}
|
||||
disabled={vbox.bits < 2
|
||||
|| (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||
|| (tutorial && tutorial < 7
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||
}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxDiscard()}>
|
||||
@ -261,143 +201,6 @@ class Vbox extends preact.Component {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
//
|
||||
// INVENTORY
|
||||
//
|
||||
|
||||
function inventoryBtn(v, i) {
|
||||
const inventoryHighlight = vboxSelecting || itemUnequip.length;
|
||||
|
||||
if (!v && v !== 0) {
|
||||
const emptyInvClick = () => {
|
||||
if (vboxSelecting) return vboxBuySelected();
|
||||
return false;
|
||||
};
|
||||
return <button key={i} onClick={emptyInvClick} disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} > </button>;
|
||||
}
|
||||
|
||||
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
||||
|
||||
function onClick(type) {
|
||||
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
|
||||
// removing
|
||||
if (combinerContainsIndex) {
|
||||
if (type === 'click') {
|
||||
return combinerChange(without(stashSelect, i));
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!comboHighlight) {
|
||||
setInfo(vbox.bound[i]);
|
||||
return setVboxSelected({ shopSelect: [], stashSelect: [i] });
|
||||
}
|
||||
|
||||
stashSelect.push(i);
|
||||
// if (stashSelect.length === 3) setInfo(comboItem.item);
|
||||
return combinerChange(stashSelect);
|
||||
}
|
||||
|
||||
const highlighted = stashSelect.indexOf(i) > -1;
|
||||
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
|
||||
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
|
||||
|
||||
const invObject = shapes[v] ? shapes[v]() : v;
|
||||
|
||||
return (
|
||||
<label
|
||||
key={i}
|
||||
draggable='true'
|
||||
onDragStart={ev => {
|
||||
onClick('drag');
|
||||
ev.dataTransfer.setData('text', '');
|
||||
}}>
|
||||
<button
|
||||
class={classes}
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => onClick('click')}>
|
||||
{invObject}
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function combinerBtn() {
|
||||
let text = '';
|
||||
let mouseEvent = false;
|
||||
const combineLength = stashSelect.length + shopSelect.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 = shopSelect.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;
|
||||
shopSelect.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 && shopSelect.length === 1) {
|
||||
const item = shopSelect[0];
|
||||
text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
|
||||
mouseEvent = vboxBuySelected;
|
||||
} else {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (combineLength > i) {
|
||||
text += '■ ';
|
||||
} else {
|
||||
text += '▫ ';
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div class='combiner'>
|
||||
<div class='vbox-padding'>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={!mouseEvent}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => mouseEvent()}>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function inventoryElement() {
|
||||
function inventoryClick(e) {
|
||||
e.stopPropagation();
|
||||
if (itemUnequip.length) return sendItemUnequip(itemUnequip);
|
||||
return true;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class='stash'
|
||||
onMouseDown={inventoryClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onDragOver={ev => ev.preventDefault()}
|
||||
onDrop={inventoryClick}
|
||||
>
|
||||
<div class='vbox-padding'>
|
||||
{range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function inventoryHdr() {
|
||||
return (
|
||||
@ -414,7 +217,8 @@ class Vbox extends preact.Component {
|
||||
const refund = shopSelect.length === 0 && stashSelect.length === 1
|
||||
? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
|
||||
: 0;
|
||||
const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1;
|
||||
const tutorialDisabled = tutorial && tutorial < 8
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1;
|
||||
return (
|
||||
<div class='refund'>
|
||||
<div class='vbox-padding'>
|
||||
@ -434,17 +238,45 @@ class Vbox extends preact.Component {
|
||||
);
|
||||
}
|
||||
|
||||
//
|
||||
// EVERYTHING
|
||||
//
|
||||
return (
|
||||
<div class='vbox'>
|
||||
{vboxHdr()}
|
||||
{vboxElement()}
|
||||
{inventoryHdr()}
|
||||
{inventoryElement()}
|
||||
{combinerBtn()}
|
||||
{refundBtn()}
|
||||
<StoreElement
|
||||
clearVboxSelected = {clearVboxSelected}
|
||||
setInfo = {setInfo}
|
||||
setVboxSelected = {setVboxSelected}
|
||||
shopSelect = {shopSelect}
|
||||
stashSelect = {stashSelect}
|
||||
vbox = {vbox}
|
||||
vboxHighlight = {vboxHighlight}
|
||||
vboxHover = {vboxHover}
|
||||
/>
|
||||
<InventoryElement
|
||||
combinerChange = {combinerChange}
|
||||
itemUnequip = {itemUnequip}
|
||||
vbox = {vbox}
|
||||
vboxBuySelected = {vboxBuySelected}
|
||||
vboxHighlight = {vboxHighlight}
|
||||
vboxHover = {vboxHover}
|
||||
vboxSelecting = {vboxSelecting}
|
||||
stashSelect = {stashSelect}
|
||||
sendItemUnequip = {sendItemUnequip}
|
||||
setInfo = {setInfo}
|
||||
setVboxSelected = {setVboxSelected}
|
||||
/>
|
||||
<CombinerElement
|
||||
itemInfo = {itemInfo}
|
||||
sendVboxCombine = {sendVboxCombine}
|
||||
setInfo = {setInfo}
|
||||
stashSelect = {stashSelect}
|
||||
shopSelect = {shopSelect}
|
||||
vbox = {vbox}
|
||||
vboxBuySelected = {vboxBuySelected}
|
||||
vboxHighlight = {vboxHighlight}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
108
client/src/components/vbox.inventory.jsx
Normal file
108
client/src/components/vbox.inventory.jsx
Normal file
@ -0,0 +1,108 @@
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
const without = require('lodash/without');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
const buttons = require('./buttons');
|
||||
const { removeTier } = require('../utils');
|
||||
|
||||
function inventoryElement(props) {
|
||||
const {
|
||||
combinerChange,
|
||||
itemUnequip,
|
||||
vbox,
|
||||
vboxBuySelected,
|
||||
vboxHighlight,
|
||||
vboxHover,
|
||||
vboxSelecting,
|
||||
stashSelect,
|
||||
|
||||
sendItemUnequip,
|
||||
setInfo,
|
||||
setVboxSelected,
|
||||
|
||||
} = props;
|
||||
function inventoryClick(e) {
|
||||
e.stopPropagation();
|
||||
if (itemUnequip.length) return sendItemUnequip(itemUnequip);
|
||||
return true;
|
||||
}
|
||||
|
||||
function inventoryBtn(v, i) {
|
||||
const inventoryHighlight = vboxSelecting || itemUnequip.length;
|
||||
|
||||
if (!v && v !== 0) {
|
||||
const emptyInvClick = () => {
|
||||
if (vboxSelecting) return vboxBuySelected();
|
||||
return false;
|
||||
};
|
||||
return <button
|
||||
key={i}
|
||||
onClick={emptyInvClick}
|
||||
disabled={!inventoryHighlight}
|
||||
class={inventoryHighlight ? 'receiving' : 'empty'} > </button>;
|
||||
}
|
||||
|
||||
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
||||
|
||||
function onClick(type) {
|
||||
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
|
||||
// removing
|
||||
if (combinerContainsIndex) {
|
||||
if (type === 'click') {
|
||||
return combinerChange(without(stashSelect, i));
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!comboHighlight) {
|
||||
setInfo(vbox.bound[i]);
|
||||
return setVboxSelected({ shopSelect: [], stashSelect: [i] });
|
||||
}
|
||||
|
||||
stashSelect.push(i);
|
||||
// if (stashSelect.length === 3) setInfo(comboItem.item);
|
||||
return combinerChange(stashSelect);
|
||||
}
|
||||
|
||||
const highlighted = stashSelect.indexOf(i) > -1;
|
||||
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
|
||||
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
|
||||
|
||||
const invObject = shapes[v] ? shapes[v]() : v;
|
||||
|
||||
return (
|
||||
<label
|
||||
key={i}
|
||||
draggable='true'
|
||||
onDragStart={ev => {
|
||||
onClick('drag');
|
||||
ev.dataTransfer.setData('text', '');
|
||||
}}>
|
||||
<button
|
||||
class={classes}
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => onClick('click')}>
|
||||
{invObject}
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class='stash'
|
||||
onMouseDown={inventoryClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onDragOver={ev => ev.preventDefault()}
|
||||
onDrop={inventoryClick}
|
||||
>
|
||||
<div class='vbox-padding'>
|
||||
{range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = inventoryElement;
|
||||
81
client/src/components/vbox.store.jsx
Normal file
81
client/src/components/vbox.store.jsx
Normal file
@ -0,0 +1,81 @@
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
|
||||
|
||||
function storeElement(props) {
|
||||
const {
|
||||
clearVboxSelected,
|
||||
setInfo,
|
||||
setVboxSelected,
|
||||
shopSelect,
|
||||
stashSelect,
|
||||
vbox,
|
||||
vboxHighlight,
|
||||
vboxHover,
|
||||
} = props;
|
||||
|
||||
function availableBtn(v, group, index) {
|
||||
if (!v) return <button disabled class='empty' key={(group * 10) + index} > </button>;
|
||||
const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index);
|
||||
|
||||
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
|
||||
|
||||
function onClick(e) {
|
||||
e.stopPropagation();
|
||||
if (!comboHighlight) setInfo(vbox.free[group][index]);
|
||||
if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) {
|
||||
return setVboxSelected(
|
||||
{ shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
|
||||
);
|
||||
}
|
||||
|
||||
if (!shopSelect.length && !stashSelect.length) {
|
||||
return setVboxSelected({ shopSelect: [[group, index]], stashSelect });
|
||||
}
|
||||
if (comboHighlight !== 'combo-border') {
|
||||
return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] });
|
||||
}
|
||||
return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect });
|
||||
}
|
||||
|
||||
|
||||
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
|
||||
|
||||
const vboxObject = shapes[v] ? shapes[v]() : v;
|
||||
const disabled = vbox.bits <= group;
|
||||
return (
|
||||
<label draggable='true'
|
||||
onDragStart={ev => ev.dataTransfer.setData('text', '')}
|
||||
key={group * 10 + index}
|
||||
onDragEnd={clearVboxSelected}>
|
||||
<button
|
||||
class={classes}
|
||||
disabled={disabled}
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onMouseDown={onClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
> {vboxObject}
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class='shop'
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<div class='vbox-padding'>
|
||||
<div class="vbox-colours">
|
||||
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
||||
</div>
|
||||
<div class="vbox-items">
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
|
||||
{range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = storeElement;
|
||||
Loading…
x
Reference in New Issue
Block a user