add back shouldComponentUpdates =\
This commit is contained in:
Mashy
parent
8312b44b2b
commit
5153ed07b0
@ -1,44 +1,58 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
function Combiner(args) {
|
||||
const {
|
||||
vbox,
|
||||
vboxCombiner,
|
||||
vboxSelected,
|
||||
vboxBuySelected,
|
||||
sendVboxCombine,
|
||||
} = args;
|
||||
const addState = connect(({ vboxCombiner }) => ({ vboxCombiner }));
|
||||
|
||||
const { stashSelect, storeSelect } = vboxSelected;
|
||||
|
||||
if (vboxCombiner) {
|
||||
const combinerComboText = vboxCombiner.replace('Plus', '+');
|
||||
let bits = 0;
|
||||
storeSelect.forEach(item => bits += item[0] + 1);
|
||||
return (
|
||||
<button
|
||||
class='combiner vbox-btn'
|
||||
disabled={bits > vbox.bits}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={sendVboxCombine}>
|
||||
{bits ? `Buy ${combinerComboText} ${bits}b` : `Combine ${combinerComboText}`}
|
||||
</button>
|
||||
);
|
||||
class Combiner extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
if (newProps.vbox !== this.props.vbox) return true;
|
||||
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
||||
if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
|
||||
if (newProps.sendVboxCombine !== this.props.sendVboxCombine) return true;
|
||||
if (newProps.vboxCombiner !== this.props.vboxCombiner) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (stashSelect.length === 0 && storeSelect.length === 1) {
|
||||
const item = storeSelect[0];
|
||||
return (
|
||||
<button
|
||||
class='combiner vbox-btn'
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={vboxBuySelected}>
|
||||
{`Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
render(args) {
|
||||
const {
|
||||
vbox,
|
||||
vboxSelected,
|
||||
vboxBuySelected,
|
||||
sendVboxCombine,
|
||||
vboxCombiner,
|
||||
} = args;
|
||||
|
||||
return false;
|
||||
const { stashSelect, storeSelect } = vboxSelected;
|
||||
|
||||
if (vboxCombiner) {
|
||||
const combinerComboText = vboxCombiner.replace('Plus', '+');
|
||||
let bits = 0;
|
||||
storeSelect.forEach(item => bits += item[0] + 1);
|
||||
return (
|
||||
<button
|
||||
class='combiner vbox-btn'
|
||||
disabled={bits > vbox.bits}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={sendVboxCombine}>
|
||||
{bits ? `Buy ${combinerComboText} ${bits}b` : `Combine ${combinerComboText}`}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (stashSelect.length === 0 && storeSelect.length === 1) {
|
||||
const item = storeSelect[0];
|
||||
return (
|
||||
<button
|
||||
class='combiner vbox-btn'
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={vboxBuySelected}>
|
||||
{`Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Combiner;
|
||||
module.exports = addState(Combiner);
|
||||
|
||||
@ -1,51 +1,67 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const { convertItem } = require('../utils');
|
||||
|
||||
function Combos(props) {
|
||||
const {
|
||||
info,
|
||||
instance,
|
||||
itemInfo,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
} = props;
|
||||
const addState = connect(
|
||||
({ info, instance, itemInfo, tutorial, vboxInfo }) => ({
|
||||
info, instance, itemInfo, tutorial, vboxInfo,
|
||||
}));
|
||||
|
||||
if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
|
||||
class Combos extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
if (newProps.info !== this.props.info) return true;
|
||||
if (newProps.instance !== this.props.instance) return true;
|
||||
if (newProps.itemInfo !== this.props.itemInfo) return true;
|
||||
if (newProps.tutorial !== this.props.tutorial) return true;
|
||||
if (newProps.vboxInfo !== this.props.vboxInfo) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
|
||||
if (vboxCombos.length > 6 || vboxCombos.length === 0) return <div class="combos"></div>;
|
||||
render(props) {
|
||||
const {
|
||||
info,
|
||||
instance,
|
||||
itemInfo,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
} = props;
|
||||
if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
|
||||
|
||||
const comboTable = vboxCombos.map((c, i) => {
|
||||
const mouseOver = e => {
|
||||
e.stopPropagation();
|
||||
// this.setState({ comboItem: c.item });
|
||||
// set comboInfo state here
|
||||
};
|
||||
const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
|
||||
? [<div key="0">{convertItem(c.components[0])} {convertItem(c.components[1])}</div>,
|
||||
<div key="1">{convertItem(c.components[2])}</div>]
|
||||
: c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
|
||||
return (
|
||||
<div key={i} onMouseOver={mouseOver} class="table-button">
|
||||
<div class="item">
|
||||
{convertItem(c.item)}
|
||||
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
|
||||
if (vboxCombos.length > 6 || vboxCombos.length === 0) return <div class="combos"></div>;
|
||||
|
||||
const comboTable = vboxCombos.map((c, i) => {
|
||||
const mouseOver = e => {
|
||||
e.stopPropagation();
|
||||
// this.setState({ comboItem: c.item });
|
||||
// set comboInfo state here
|
||||
};
|
||||
const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
|
||||
? [<div key="0">{convertItem(c.components[0])} {convertItem(c.components[1])}</div>,
|
||||
<div key="1">{convertItem(c.components[2])}</div>]
|
||||
: c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
|
||||
return (
|
||||
<div key={i} onMouseOver={mouseOver} class="table-button">
|
||||
<div class="item">
|
||||
{convertItem(c.item)}
|
||||
</div>
|
||||
{componentTable}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div class="combos">
|
||||
<div class="combo-header">
|
||||
<h2>COMBOS</h2>
|
||||
Combine colours and items.
|
||||
</div>
|
||||
<div class="combo-list" onClick={e => e.stopPropagation()}>
|
||||
{comboTable}
|
||||
</div>
|
||||
{componentTable}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div class="combos">
|
||||
<div class="combo-header">
|
||||
<h2>COMBOS</h2>
|
||||
Combine colours and items.
|
||||
</div>
|
||||
<div class="combo-list" onClick={e => e.stopPropagation()}>
|
||||
{comboTable}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Combos;
|
||||
module.exports = addState(Combos);
|
||||
|
||||
@ -4,8 +4,8 @@ const { connect } = require('preact-redux');
|
||||
const actions = require('../actions');
|
||||
|
||||
const InfoContainer = require('./vbox.info');
|
||||
const { StashHdr, StashElement } = require('./vbox.stash');
|
||||
const { StoreHdr, StoreElement } = require('./vbox.store');
|
||||
const StashElement = require('./vbox.stash');
|
||||
const StoreElement = require('./vbox.store');
|
||||
const Combiner = require('./vbox.combiner');
|
||||
const Combos = require('./vbox.combos');
|
||||
|
||||
@ -96,13 +96,11 @@ const addState = connect(
|
||||
|
||||
class Vbox extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
// Single variable props
|
||||
if (newProps.itemUnequip !== this.props.itemUnequip) return true;
|
||||
if (newProps.instance !== this.props.instance) return true;
|
||||
if (newProps.player !== this.props.player) return true;
|
||||
if (newProps.tutorial !== this.props.tutorial) return true;
|
||||
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
||||
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
|
||||
if (newProps.player !== this.props.player) return true;
|
||||
if (newProps.instance !== this.props.instance) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -110,13 +108,9 @@ class Vbox extends preact.Component {
|
||||
const {
|
||||
// Changing state variables
|
||||
itemUnequip,
|
||||
info,
|
||||
instance,
|
||||
player,
|
||||
tutorial,
|
||||
vboxCombiner,
|
||||
vboxHighlight,
|
||||
vboxInfo,
|
||||
vboxSelected,
|
||||
// Static
|
||||
itemInfo,
|
||||
@ -148,72 +142,94 @@ class Vbox extends preact.Component {
|
||||
return true;
|
||||
}
|
||||
|
||||
function storeHdr() {
|
||||
return (
|
||||
<div class="store-hdr">
|
||||
<h2
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'store')}> STORE
|
||||
</h2>
|
||||
<h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
|
||||
{vbox.bits}b
|
||||
</h1>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => vboxHover(e, 'refill')}
|
||||
disabled={vbox.bits < 2
|
||||
|| (tutorial && tutorial < 7
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||
}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxDiscard()}>
|
||||
refill <br />
|
||||
2b
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function stashHdr() {
|
||||
const refund = storeSelect.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 refundBtn = (
|
||||
<button
|
||||
disabled={tutorialDisabled || !refund}
|
||||
class='vbox-btn'
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
sendVboxReclaim(vboxSelected.stashSelect[0]);
|
||||
}}>
|
||||
refund <br />
|
||||
{refund}b
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class='stash-hdr'>
|
||||
<h2 onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'stash')}> STASH
|
||||
</h2>
|
||||
{refundBtn}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// EVERYTHING
|
||||
return (
|
||||
<div class='vbox'>
|
||||
<StoreHdr
|
||||
instance={instance}
|
||||
tutorial={tutorial}
|
||||
sendVboxDiscard={sendVboxDiscard}
|
||||
vbox={vbox}
|
||||
vboxHover={vboxHover}
|
||||
/>
|
||||
{storeHdr()}
|
||||
{stashHdr()}
|
||||
<StoreElement
|
||||
clearVboxSelected = {clearVboxSelected}
|
||||
setInfo = {setInfo}
|
||||
setVboxSelected = {setVboxSelected}
|
||||
stashSelect = {stashSelect}
|
||||
storeSelect = {storeSelect}
|
||||
vbox = {vbox}
|
||||
vboxHighlight = {vboxHighlight}
|
||||
vboxHover = {vboxHover}
|
||||
/>
|
||||
<StashHdr
|
||||
instance={instance}
|
||||
itemInfo={itemInfo}
|
||||
sendVboxReclaim={sendVboxReclaim}
|
||||
tutorial={tutorial}
|
||||
clearVboxSelected={clearVboxSelected}
|
||||
setVboxSelected={setVboxSelected}
|
||||
vbox={vbox}
|
||||
vboxHover={vboxHover}
|
||||
vboxSelected={vboxSelected}
|
||||
vboxHover = {vboxHover}
|
||||
/>
|
||||
<StashElement
|
||||
itemUnequip = {itemUnequip}
|
||||
stashSelect = {stashSelect}
|
||||
storeSelect = {storeSelect}
|
||||
sendItemUnequip = {sendItemUnequip}
|
||||
setInfo = {setInfo}
|
||||
setVboxSelected = {setVboxSelected}
|
||||
vbox = {vbox}
|
||||
vboxBuySelected = {vboxBuySelected}
|
||||
vboxHighlight = {vboxHighlight}
|
||||
vboxHover = {vboxHover}
|
||||
sendItemUnequip={sendItemUnequip}
|
||||
setInfo={setInfo}
|
||||
setVboxSelected={setVboxSelected}
|
||||
vbox={vbox}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
vboxHover={vboxHover}
|
||||
/>
|
||||
<div class='info-combiner'>
|
||||
<InfoContainer
|
||||
clearTutorial={clearTutorial}
|
||||
info={info}
|
||||
instance={instance}
|
||||
itemInfo={itemInfo}
|
||||
player={player}
|
||||
tutorial={tutorial}
|
||||
vboxInfo={vboxInfo}
|
||||
/>
|
||||
<Combiner
|
||||
vbox={vbox}
|
||||
vboxCombiner={vboxCombiner}
|
||||
vboxSelected={vboxSelected}
|
||||
vboxBuySelected={vboxBuySelected}
|
||||
sendVboxCombine={sendVboxCombine}
|
||||
/>
|
||||
</div>
|
||||
<Combos
|
||||
info={info}
|
||||
instance={instance}
|
||||
itemInfo={itemInfo}
|
||||
tutorial={tutorial}
|
||||
vboxInfo={vboxInfo}
|
||||
/>
|
||||
<Combos />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,55 +1,74 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const { tutorialStage } = require('../tutorial.utils');
|
||||
const { genItemInfo } = require('./vbox.utils');
|
||||
|
||||
function Info(props) {
|
||||
const {
|
||||
// Variables that will change
|
||||
info,
|
||||
player,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
// Static
|
||||
clearTutorial,
|
||||
itemInfo,
|
||||
instance,
|
||||
} = props;
|
||||
const addState = connect(
|
||||
({ info, player, tutorial, vboxInfo, itemInfo, instance }) => ({
|
||||
info, player, tutorial, vboxInfo, itemInfo, instance,
|
||||
}));
|
||||
|
||||
if (tutorial) {
|
||||
const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
|
||||
if (tutorialStageInfo) return tutorialStageInfo;
|
||||
|
||||
class Info extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
if (newProps.clearTutorial !== this.props.clearTutorial) return true;
|
||||
if (newProps.info !== this.props.info) return true;
|
||||
if (newProps.player !== this.props.player) return true;
|
||||
if (newProps.tutorial !== this.props.tutorial) return true;
|
||||
if (newProps.vboxInfo !== this.props.vboxInfo) return true;
|
||||
if (newProps.itemInfo !== this.props.itemInfo) return true;
|
||||
if (newProps.instance !== this.props.instance) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Prioritise the vbox info
|
||||
if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
|
||||
render(props) {
|
||||
const {
|
||||
clearTutorial,
|
||||
info,
|
||||
player,
|
||||
tutorial,
|
||||
vboxInfo,
|
||||
itemInfo,
|
||||
instance,
|
||||
} = props;
|
||||
|
||||
// check normal info state
|
||||
if (!info) return false;
|
||||
if (info.includes('constructName')) {
|
||||
return (
|
||||
<div class='info info-item'>
|
||||
<h2> {info.replace('constructName ', '')} </h2>
|
||||
<p> This is the name of your construct. <br />
|
||||
Names are randomly generated and are purely cosmetic. <br />
|
||||
You can change change your construct name in the <b>RESHAPE</b> tab outside of games.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
if (tutorial) {
|
||||
const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
|
||||
if (tutorialStageInfo) return tutorialStageInfo;
|
||||
}
|
||||
|
||||
// Prioritise the vbox info
|
||||
if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
|
||||
|
||||
// check normal info state
|
||||
if (!info) return false;
|
||||
if (info.includes('constructName')) {
|
||||
return (
|
||||
<div class='info info-item'>
|
||||
<h2> {info.replace('constructName ', '')} </h2>
|
||||
<p> This is the name of your construct. <br />
|
||||
Names are randomly generated and are purely cosmetic. <br />
|
||||
You can change change your construct name in the <b>RESHAPE</b> tab outside of games.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (info.includes('constructAvatar')) {
|
||||
return (
|
||||
<div class='info info-item'>
|
||||
<h2> {info.replace('constructAvatar ', '')} </h2>
|
||||
<p> This is your construct avatar. <br />
|
||||
Avatars are randomly generated and are purely cosmetic. <br />
|
||||
You can change your construct avatar in the <b>RESHAPE</b> tab outside of games.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return genItemInfo(info, itemInfo, player, info);
|
||||
}
|
||||
|
||||
if (info.includes('constructAvatar')) {
|
||||
return (
|
||||
<div class='info info-item'>
|
||||
<h2> {info.replace('constructAvatar ', '')} </h2>
|
||||
<p> This is your construct avatar. <br />
|
||||
Avatars are randomly generated and are purely cosmetic. <br />
|
||||
You can change your construct avatar in the <b>RESHAPE</b> tab outside of games.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return genItemInfo(info, itemInfo, player, info);
|
||||
}
|
||||
|
||||
module.exports = Info;
|
||||
module.exports = addState(Info);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const range = require('lodash/range');
|
||||
const without = require('lodash/without');
|
||||
|
||||
@ -6,143 +8,124 @@ const shapes = require('./shapes');
|
||||
const buttons = require('./buttons');
|
||||
const { removeTier } = require('../utils');
|
||||
|
||||
function stashHdr(props) {
|
||||
const {
|
||||
instance,
|
||||
itemInfo,
|
||||
sendVboxReclaim,
|
||||
tutorial,
|
||||
vbox,
|
||||
vboxHover,
|
||||
vboxSelected,
|
||||
} = props;
|
||||
const { storeSelect, stashSelect } = vboxSelected;
|
||||
const refund = storeSelect.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 refundBtn = (
|
||||
<button
|
||||
disabled={tutorialDisabled || !refund}
|
||||
class='vbox-btn'
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => {
|
||||
e.stopPropagation();
|
||||
sendVboxReclaim(vboxSelected.stashSelect[0]);
|
||||
}}>
|
||||
refund <br />
|
||||
{refund}b
|
||||
</button>
|
||||
);
|
||||
const addState = connect(
|
||||
({ itemUnequip, vboxHighlight, vboxSelected }) => ({ itemUnequip, vboxHighlight, vboxSelected }));
|
||||
|
||||
return (
|
||||
<div class='stash-hdr'>
|
||||
<h2 onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'stash')}> STASH
|
||||
</h2>
|
||||
{refundBtn}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
class stashElement extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
if (newProps.sendItemUnequip !== this.props.sendItemUnequip) return true;
|
||||
if (newProps.setInfo !== this.props.setInfo) return true;
|
||||
if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
|
||||
if (newProps.vbox !== this.props.vbox) return true;
|
||||
if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
|
||||
if (newProps.vboxHover !== this.props.vboxHover) return true;
|
||||
|
||||
function stashElement(props) {
|
||||
const {
|
||||
itemUnequip,
|
||||
sendItemUnequip,
|
||||
setInfo,
|
||||
setVboxSelected,
|
||||
stashSelect,
|
||||
storeSelect,
|
||||
vbox,
|
||||
vboxBuySelected,
|
||||
vboxHighlight,
|
||||
vboxHover,
|
||||
} = props;
|
||||
|
||||
const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0;
|
||||
|
||||
function stashClick(e) {
|
||||
e.stopPropagation();
|
||||
if (itemUnequip.length) return sendItemUnequip(itemUnequip);
|
||||
if (vboxSelecting) return vboxBuySelected();
|
||||
return true;
|
||||
if (newProps.itemUnequip !== this.props.itemUnequip) return true;
|
||||
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
|
||||
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function stashBtn(v, i) {
|
||||
const stashHighlight = vboxSelecting || itemUnequip.length;
|
||||
render(props) {
|
||||
const {
|
||||
sendItemUnequip,
|
||||
setInfo,
|
||||
setVboxSelected,
|
||||
vbox,
|
||||
vboxBuySelected,
|
||||
vboxHover,
|
||||
|
||||
if (!v && v !== 0) {
|
||||
const emptyInvClick = () => {
|
||||
if (vboxSelecting) return vboxBuySelected();
|
||||
return false;
|
||||
};
|
||||
return <button
|
||||
key={i}
|
||||
onClick={emptyInvClick}
|
||||
disabled={!stashHighlight}
|
||||
class={stashHighlight ? 'receiving' : 'empty'} > </button>;
|
||||
}
|
||||
itemUnequip,
|
||||
vboxHighlight,
|
||||
vboxSelected,
|
||||
} = props;
|
||||
|
||||
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
|
||||
const { storeSelect, stashSelect } = vboxSelected;
|
||||
|
||||
function onClick(type, e) {
|
||||
const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0;
|
||||
|
||||
function stashClick(e) {
|
||||
e.stopPropagation();
|
||||
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
|
||||
// removing
|
||||
if (combinerContainsIndex) {
|
||||
if (type === 'click') {
|
||||
return setVboxSelected({ storeSelect, stashSelect: without(stashSelect, i) });
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (notValidCombo) {
|
||||
setInfo(vbox.bound[i]);
|
||||
return setVboxSelected({ storeSelect: [], stashSelect: [i] });
|
||||
}
|
||||
|
||||
return setVboxSelected({ storeSelect, stashSelect: [...stashSelect, i] });
|
||||
if (itemUnequip.length) return sendItemUnequip(itemUnequip);
|
||||
if (vboxSelecting) return vboxBuySelected();
|
||||
return true;
|
||||
}
|
||||
|
||||
const highlighted = stashSelect.indexOf(i) > -1;
|
||||
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
|
||||
const classes = highlighted
|
||||
? 'highlight'
|
||||
: `${border} ${notValidCombo ? 'fade' : ''}`;
|
||||
function stashBtn(v, i) {
|
||||
const stashHighlight = vboxSelecting || itemUnequip.length;
|
||||
|
||||
const invObject = shapes[v] ? shapes[v]() : v;
|
||||
if (!v && v !== 0) {
|
||||
const emptyInvClick = () => {
|
||||
if (vboxSelecting) return vboxBuySelected();
|
||||
return false;
|
||||
};
|
||||
return <button
|
||||
key={i}
|
||||
onClick={emptyInvClick}
|
||||
disabled={!stashHighlight}
|
||||
class={stashHighlight ? 'receiving' : 'empty'} > </button>;
|
||||
}
|
||||
|
||||
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
|
||||
|
||||
function onClick(type, e) {
|
||||
e.stopPropagation();
|
||||
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
|
||||
// removing
|
||||
if (combinerContainsIndex) {
|
||||
if (type === 'click') {
|
||||
return setVboxSelected({ storeSelect, stashSelect: without(stashSelect, i) });
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (notValidCombo) {
|
||||
setInfo(vbox.bound[i]);
|
||||
return setVboxSelected({ storeSelect: [], stashSelect: [i] });
|
||||
}
|
||||
|
||||
return setVboxSelected({ storeSelect, stashSelect: [...stashSelect, i] });
|
||||
}
|
||||
|
||||
const highlighted = stashSelect.indexOf(i) > -1;
|
||||
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
|
||||
const classes = highlighted
|
||||
? 'highlight'
|
||||
: `${border} ${notValidCombo ? 'fade' : ''}`;
|
||||
|
||||
const invObject = shapes[v] ? shapes[v]() : v;
|
||||
|
||||
return (
|
||||
<label
|
||||
key={i}
|
||||
draggable='true'
|
||||
onDragStart={ev => {
|
||||
onClick('drag', ev);
|
||||
ev.dataTransfer.setData('text', '');
|
||||
}}>
|
||||
<button
|
||||
class={classes}
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => onClick('click', e)}>
|
||||
{invObject}
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<label
|
||||
key={i}
|
||||
draggable='true'
|
||||
onDragStart={ev => {
|
||||
onClick('drag', ev);
|
||||
ev.dataTransfer.setData('text', '');
|
||||
}}>
|
||||
<button
|
||||
class={classes}
|
||||
onMouseOver={e => vboxHover(e, v)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={e => onClick('click', e)}>
|
||||
{invObject}
|
||||
</button>
|
||||
</label>
|
||||
<div
|
||||
class='stash'
|
||||
onMouseDown={stashClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onDragOver={ev => ev.preventDefault()}
|
||||
onDrop={stashClick}
|
||||
>
|
||||
{range(0, 6).map(i => stashBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class='stash'
|
||||
onMouseDown={stashClick}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onDragOver={ev => ev.preventDefault()}
|
||||
onDrop={stashClick}
|
||||
>
|
||||
{range(0, 6).map(i => stashBtn(vbox.bound[i], i))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = { stashHdr, stashElement };
|
||||
module.exports = addState(stashElement);
|
||||
|
||||
@ -1,112 +1,95 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
|
||||
function storeHdr(props) {
|
||||
const {
|
||||
instance,
|
||||
tutorial,
|
||||
sendVboxDiscard,
|
||||
vbox,
|
||||
vboxHover,
|
||||
} = props;
|
||||
const addState = connect(({ vboxHighlight }) => ({ vboxHighlight }));
|
||||
|
||||
return (
|
||||
<div class="store-hdr">
|
||||
<h2
|
||||
onTouchStart={e => e.target.scrollIntoView(true)}
|
||||
onMouseOver={e => vboxHover(e, 'store')}> STORE
|
||||
</h2>
|
||||
<h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
|
||||
{vbox.bits}b
|
||||
</h1>
|
||||
<button
|
||||
class='vbox-btn'
|
||||
onMouseOver={e => vboxHover(e, 'refill')}
|
||||
disabled={vbox.bits < 2
|
||||
|| (tutorial && tutorial < 7
|
||||
&& instance.time_control === 'Practice' && instance.rounds.length === 1)
|
||||
}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxDiscard()}>
|
||||
refill <br />
|
||||
2b
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function storeElement(props) {
|
||||
const {
|
||||
clearVboxSelected,
|
||||
setVboxSelected,
|
||||
storeSelect,
|
||||
stashSelect,
|
||||
vbox,
|
||||
vboxHighlight,
|
||||
vboxHover,
|
||||
} = props;
|
||||
|
||||
function availableBtn(v, group, index) {
|
||||
if (!v) return <button disabled class='empty' key={(group * 10) + index} > </button>;
|
||||
const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
|
||||
|
||||
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
|
||||
|
||||
function onClick(e) {
|
||||
e.stopPropagation();
|
||||
if (storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index)) {
|
||||
return setVboxSelected(
|
||||
{ storeSelect: storeSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
|
||||
);
|
||||
}
|
||||
|
||||
if (!storeSelect.length && !stashSelect.length) {
|
||||
return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
|
||||
}
|
||||
if (notValidCombo) {
|
||||
return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] });
|
||||
}
|
||||
return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect });
|
||||
}
|
||||
|
||||
|
||||
const classes = selected
|
||||
? `${v.toLowerCase()} highlight`
|
||||
: `${v.toLowerCase()} ${notValidCombo ? 'fade' : ''}`;
|
||||
|
||||
const vboxObject = shapes[v] ? shapes[v]() : v;
|
||||
const disabled = vbox.bits <= group;
|
||||
return (
|
||||
<label
|
||||
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>
|
||||
);
|
||||
class storeElement extends preact.Component {
|
||||
shouldComponentUpdate(newProps) {
|
||||
if (newProps.clearVboxSelected !== this.props.clearVboxSelected) return true;
|
||||
if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
|
||||
if (newProps.vbox !== this.props.vbox) return true;
|
||||
if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
|
||||
if (newProps.vboxHover !== this.props.vboxHover) return true;
|
||||
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
<div class='store'
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<div class="vbox-colours">
|
||||
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
|
||||
render(props) {
|
||||
const {
|
||||
// passed
|
||||
clearVboxSelected,
|
||||
setVboxSelected,
|
||||
vbox,
|
||||
vboxHover,
|
||||
vboxSelected,
|
||||
// state
|
||||
vboxHighlight,
|
||||
} = props;
|
||||
|
||||
const { storeSelect, stashSelect } = vboxSelected;
|
||||
|
||||
function availableBtn(v, group, index) {
|
||||
if (!v) return <button disabled class='empty' key={(group * 10) + index} > </button>;
|
||||
const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
|
||||
|
||||
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
|
||||
|
||||
function onClick(e) {
|
||||
e.stopPropagation();
|
||||
if (storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index)) {
|
||||
return setVboxSelected(
|
||||
{ storeSelect: storeSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
|
||||
);
|
||||
}
|
||||
|
||||
if (!storeSelect.length && !stashSelect.length) {
|
||||
return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
|
||||
}
|
||||
if (notValidCombo) {
|
||||
return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] });
|
||||
}
|
||||
return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect });
|
||||
}
|
||||
|
||||
|
||||
const classes = selected
|
||||
? `${v.toLowerCase()} highlight`
|
||||
: `${v.toLowerCase()} ${notValidCombo ? 'fade' : ''}`;
|
||||
|
||||
const vboxObject = shapes[v] ? shapes[v]() : v;
|
||||
const disabled = vbox.bits <= group;
|
||||
return (
|
||||
<label
|
||||
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='store'
|
||||
onClick={e => e.stopPropagation()}>
|
||||
<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 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>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { storeHdr, storeElement };
|
||||
module.exports = addState(storeElement);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user