-
e.target.scrollIntoView(true)}
onMouseOver={e => vboxHover(e, 'store')}> STORE
-
+
vboxHover(e, 'bits')}>
{vbox.bits}b
@@ -222,9 +214,9 @@ class Vbox extends preact.Component {
return (
-
e.target.scrollIntoView(true)}
+ e.target.scrollIntoView(true)}
onMouseOver={e => vboxHover(e, 'stash')}> STASH
-
+
{refundBtn}
);
@@ -235,6 +227,10 @@ class Vbox extends preact.Component {
{storeHdr()}
{stashHdr()}
+
);
}
diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx
new file mode 100644
index 00000000..f8ea6157
--- /dev/null
+++ b/client/src/components/vbox.info.jsx
@@ -0,0 +1,315 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+const reactStringReplace = require('react-string-replace');
+const countBy = require('lodash/countBy');
+
+const specThresholds = require('./vbox.info.thresholds');
+const { INFO } = require('./../constants');
+const { convertItem, removeTier } = require('../utils');
+const { tutorialStage } = require('../tutorial.utils');
+const shapes = require('./shapes');
+
+const actions = require('../actions');
+
+const addState = connect(
+ function receiveState(state) {
+ const {
+ ws,
+ info,
+ itemInfo,
+ itemUnequip,
+ instance,
+ player,
+ account,
+ tutorial,
+ 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,
+ itemInfo,
+ itemUnequip,
+ instance,
+ player,
+ account,
+ tutorial,
+ vboxSelected,
+ sendVboxAccept,
+ sendVboxCombine,
+ };
+ },
+
+ function receiveDispatch(dispatch) {
+ function setTutorialNull() {
+ dispatch(actions.setTutorial(null));
+ }
+
+ function setInfo(info) {
+ dispatch(actions.setInfo(info));
+ }
+ return { setTutorialNull, setInfo };
+ }
+);
+
+class InfoComponent extends preact.Component {
+ shouldComponentUpdate(newProps, newState) {
+ if (newProps.info !== this.props.info) return true;
+ if (newProps.itemUnequip !== this.props.itemUnequip) return true;
+ if (newProps.tutorial !== this.props.tutorial) return true;
+ if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
+ if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+ if (newState.comboItem !== this.state.comboItem) return true;
+
+ return false;
+ }
+
+ componentDidUpdate(prevProps) {
+ // Catch case where mouse events don't properly clear state and info changed
+ if (prevProps.info !== this.props.info && this.state.comboItem) this.setState({ comboItem: null });
+ }
+
+ render(args) {
+ const {
+ // Variables that will change
+ info,
+ itemUnequip,
+ tutorial,
+ vboxHighlight,
+ vboxSelected,
+ // Static
+ player, // Only used for colour calcs which will be update if info changes
+ ws,
+ itemInfo,
+ instance, // Only used for instance id
+ // functions
+ sendVboxAccept,
+ sendVboxCombine,
+ setTutorialNull,
+ } = args;
+ const { comboItem } = this.state;
+
+ const { vbox } = player;
+ const { stashSelect, storeSelect } = vboxSelected;
+
+ const vboxCombo = () => {
+ if (!(vboxHighlight && vboxHighlight.length === 0)) return false;
+ // 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;
+ }));
+ return comboItemObj.item;
+ };
+
+ const combinerCombo = vboxCombo();
+ const checkVboxInfo = () => {
+ if (combinerCombo) return combinerCombo;
+ const stashBase = stashSelect.find(i => !(['Red', 'Blue', 'Green'].includes(vbox.bound[i])));
+ if (stashBase > -1) return vbox.bound[stashBase];
+ const storeBase = storeSelect.find(j => !(['Red', 'Blue', 'Green'].includes(vbox.free[j[0]][j[1]])));
+ if (storeBase) return vbox.free[storeBase[0]][storeBase[1]];
+ if (stashSelect.length > 0) return vbox.bound[stashSelect[0]];
+ if (storeSelect.length > 0) return vbox.free[storeSelect[0][0]][storeSelect[0][1]];
+ return false;
+ };
+ let vboxInfo = false;
+ if (itemUnequip.length) [, vboxInfo] = itemUnequip;
+ else if (stashSelect.length > 0 || storeSelect.length > 0) vboxInfo = checkVboxInfo();
+
+ function Info() {
+ if (tutorial) {
+ const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance);
+ if (tutorialStageInfo) return tutorialStageInfo;
+ }
+
+ function genItemInfo(item) {
+ const fullInfo = itemInfo.items.find(i => i.item === item) || INFO[item];
+ const isSkill = fullInfo.skill;
+ const isSpec = fullInfo.spec;
+ const itemDescription = () => {
+ const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|LIFE|SPEED|POWER)/;
+ const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]());
+ return
{reactStringReplace(infoDescription, '\n', () =>
;
+ };
+ if (isSkill || isSpec) {
+ let infoName = fullInfo.item;
+ while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+');
+
+ const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item));
+
+ let itemSourceInfo = itemSource.length && !isSpec
+ ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
+ : false;
+
+ let header = null;
+ if (!itemSource.length) header = isSkill ?
SKILL :
SPEC ;
+ if (itemSourceInfo) {
+ while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
+ const itemRegEx = /(Red|Blue|Green)/;
+ itemSourceInfo = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+ }
+
+ const cooldown = isSkill && fullInfo.cooldown ?
{fullInfo.cooldown} Turn delay
: null;
+
+ const speed = isSkill
+ ?
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
+ : null;
+
+ const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
+
+ return (
+
+
{infoName}
+ {header}
+ {itemSourceInfo}
+ {cooldown}
+ {itemDescription()}
+ {speed}
+ {thresholds}
+
+ );
+ }
+ return (
+
+
{fullInfo.item}
+ {itemDescription()}
+
+ );
+ }
+ const stateFullInfo = comboItem || vboxInfo;
+ if (stateFullInfo) return genItemInfo(stateFullInfo);
+ if (!info) return false;
+ if (info.includes('constructName')) {
+ return (
+
+
{info.replace('constructName ', '')}
+
This is the name of your construct. RESHAPE tab outside of games.
+
+
+ );
+ }
+
+ if (info.includes('constructAvatar')) {
+ return (
+
+
{info.replace('constructAvatar ', '')}
+
This is your construct avatar. RESHAPE tab outside of games.
+
+
+ );
+ }
+
+ return genItemInfo(info);
+ }
+
+ const Combos = () => {
+ if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
+ if (!info && !vboxInfo) return false;
+ const comboInfo = vboxInfo || info;
+ const vboxCombos = itemInfo.combos.filter(c => c.components.includes(comboInfo));
+ if (vboxCombos.length > 6 || vboxCombos.length === 0) return false;
+
+ const comboTable = vboxCombos.map((c, i) => {
+ const mouseOver = e => {
+ e.stopPropagation();
+ this.setState({ comboItem: c.item });
+ };
+ const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
+ ? [
{convertItem(c.components[0])} {convertItem(c.components[1])}
,
+
{convertItem(c.components[2])}
]
+ : c.components.map((u, j) =>
{convertItem(u)}
);
+ return (
+
+ );
+ });
+ const comboList = comboTable.length > 0 ?
{comboTable}
: false;
+ return (
+
+
+ {comboList}
+
+ );
+ };
+
+ 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 (
+
+ e.stopPropagation()}
+ onMouseDown={() => mouseEvent()}>
+ {text}
+
+
+ );
+ };
+
+ return (
+
+
this.setState({ comboItem: null })}>
+
+
+
+
+
+ );
+ }
+}
+
+module.exports = addState(InfoComponent);
diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/vbox.info.thresholds.jsx
similarity index 94%
rename from client/src/components/info.thresholds.jsx
rename to client/src/components/vbox.info.thresholds.jsx
index 930882bd..6785380e 100644
--- a/client/src/components/info.thresholds.jsx
+++ b/client/src/components/vbox.info.thresholds.jsx
@@ -89,11 +89,7 @@ function specThresholds(player, fullInfo, info) {
return (
- {thresholds[0]}
- {thresholds[1]}
-
-
- {thresholds[2]}
+ {thresholds}
diff --git a/client/src/components/vbox.stash.jsx b/client/src/components/vbox.stash.jsx
index bfca1d29..18dd6b78 100644
--- a/client/src/components/vbox.stash.jsx
+++ b/client/src/components/vbox.stash.jsx
@@ -44,7 +44,7 @@ function stashElement(props) {
class={stashHighlight ? 'receiving' : 'empty'} > ;
}
- const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
+ const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
function onClick(type) {
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
@@ -56,7 +56,7 @@ function stashElement(props) {
return true;
}
- if (!comboHighlight) {
+ if (notValidCombo) {
setInfo(vbox.bound[i]);
return setVboxSelected({ storeSelect: [], stashSelect: [i] });
}
@@ -68,7 +68,9 @@ function stashElement(props) {
const highlighted = stashSelect.indexOf(i) > -1;
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
- const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
+ const classes = highlighted
+ ? 'highlight'
+ : `${border} ${notValidCombo ? 'fade' : ''}`;
const invObject = shapes[v] ? shapes[v]() : v;
diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx
index 20a5a402..4dfda70a 100644
--- a/client/src/components/vbox.store.jsx
+++ b/client/src/components/vbox.store.jsx
@@ -7,7 +7,6 @@ const shapes = require('./shapes');
function storeElement(props) {
const {
clearVboxSelected,
- setInfo,
setVboxSelected,
storeSelect,
stashSelect,
@@ -20,11 +19,10 @@ function storeElement(props) {
if (!v) return
;
const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
- const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
+ const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
function onClick(e) {
e.stopPropagation();
- if (!comboHighlight) setInfo(vbox.free[group][index]);
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 }
@@ -34,20 +32,21 @@ function storeElement(props) {
if (!storeSelect.length && !stashSelect.length) {
return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
}
- if (comboHighlight !== 'combo-border') {
+ if (notValidCombo) {
return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] });
}
return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect });
}
- const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
+ const classes = selected
+ ? `${v.toLowerCase()} highlight`
+ : `${v.toLowerCase()} ${notValidCombo ? 'fade' : ''}`;
const vboxObject = shapes[v] ? shapes[v]() : v;
const disabled = vbox.bits <= group;
return (
-
ev.dataTransfer.setData('text', '')}
+
= 6 {
+ if self.bound.len() > 6 {
return Err(err_msg("too many items bound"));
}
Ok(self)