-
- );
- }
+ if (animating) return false;
const playerTeam = game.players.find(t => t.id === account.id);
const otherTeam = game.players.find(t => t.id !== account.id);
@@ -110,8 +96,11 @@ class TargetSvg extends Component {
? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
: otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
+ const skillNumber = window.innerWidth <= 800 // mobile styling trigger
+ ? playerTeam.constructs[source].skills.findIndex(s => s.skill === cast.skill)
+ : 0;
const sourceY = height;
- const sourceX = (source * width / 3) + width / 24;
+ const sourceX = (source * width / 3) + width / 18 + skillNumber * (width / 9);
const targetX = (target * width / 3) + width / 6
+ (defensive ? width / 64 : 0)
+ (source * width / 18);
diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx
new file mode 100644
index 00000000..9c7ddd96
--- /dev/null
+++ b/client/src/components/vbox.combiner.jsx
@@ -0,0 +1,67 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const addState = connect(({ vboxCombiner }) => ({ vboxCombiner }));
+
+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;
+ }
+
+ render(args) {
+ const {
+ // passed props
+ vbox,
+ vboxSelected,
+ vboxBuySelected,
+ sendVboxCombine,
+ // state props
+ vboxCombiner,
+ } = args;
+
+ const { stashSelect, storeSelect } = vboxSelected;
+
+ function cost([group, i]) {
+ if (group === 'Colours') return 1;
+ if (group === 'Skills') return 2;
+ if (group === 'Specs') return 3;
+ };
+
+
+ if (vboxCombiner) {
+ const combinerComboText = vboxCombiner.replace('Plus', '+');
+ let bits = 0;
+ storeSelect.forEach(item => bits += cost(item));
+ return (
+
+ );
+ }
+
+ if (stashSelect.length === 0 && storeSelect.length === 1) {
+ const item = storeSelect[0];
+ return (
+
+ );
+ }
+
+ return false;
+ }
+}
+
+module.exports = addState(Combiner);
diff --git a/client/src/components/vbox.combos.jsx b/client/src/components/vbox.combos.jsx
new file mode 100644
index 00000000..f3c18682
--- /dev/null
+++ b/client/src/components/vbox.combos.jsx
@@ -0,0 +1,86 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const { convertItem } = require('../utils');
+const actions = require('../actions');
+
+const addState = connect(
+ function receiveState(state) {
+ const {
+ info, instance, itemInfo, tutorial, vboxInfo,
+ } = state;
+ return {
+ info, instance, itemInfo, tutorial, vboxInfo,
+ };
+ },
+
+ function receiveDispatch(dispatch) {
+ function setComboPreview(item) {
+ return dispatch(actions.setComboPreview(item));
+ }
+
+ return {
+ setComboPreview,
+ };
+ }
+);
+
+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;
+ }
+
+ render(props) {
+ const {
+ info,
+ instance,
+ itemInfo,
+ tutorial,
+ vboxInfo,
+ setComboPreview,
+ } = props;
+ if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
+
+ const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
+ if (vboxCombos.length > 6 || vboxCombos.length === 0) return ;
+
+ const comboTable = vboxCombos.map((c, i) => {
+ const mouseOver = e => {
+ e.stopPropagation();
+ setComboPreview(c.item);
+ };
+ const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
+ ? [{animSkill}
-{itemSourceDescription}
- {convertItem(c.components[0])} {convertItem(c.components[1])}
,
+ {convertItem(c.components[2])}
]
+ : c.components.map((u, j) => {convertItem(u)}
);
+ return (
+
+ );
+ });
+ return (
+
+
+ );
+ }
+}
+
+module.exports = addState(Combos);
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index a0329268..2f1770da 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -1,43 +1,48 @@
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 InfoContainer = require('./vbox.info');
+const StashElement = require('./vbox.stash');
+const StoreElement = require('./vbox.store');
+const Combiner = require('./vbox.combiner');
+const Combos = require('./vbox.combos');
+
+const { setVboxState } = require('./vbox.utils');
const addState = connect(
function receiveState(state) {
const {
ws,
+ itemUnequip,
instance,
player,
- reclaiming,
+ tutorial,
vboxSelected,
itemInfo,
- itemUnequip,
- tutorial,
} = state;
- function sendVboxDiscard() {
- return ws.sendVboxDiscard(instance.id);
+ function sendInstance() {
+ return ws.sendInstanceState(instance.id);
}
- function sendVboxAccept(group, index) {
+ function sendVboxRefill() {
+ return ws.sendVboxRefill(instance.id);
+ }
+
+ function sendVboxBuy(group, index) {
+ if (!(vboxSelected.storeSelect.length === 1 && vboxSelected.stashSelect.length === 0)) return false;
document.activeElement.blur();
- return ws.sendVboxAccept(instance.id, group, index);
+ return ws.sendVboxBuy(instance.id, group, index);
}
function sendVboxCombine() {
- return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.shopSelect);
+ return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect);
}
- function sendVboxReclaim(i) {
- return ws.sendVboxReclaim(instance.id, i);
+ function sendVboxRefund(i) {
+ return ws.sendVboxRefund(instance.id, i);
}
function sendItemUnequip([constructId, item]) {
@@ -45,85 +50,53 @@ const addState = connect(
}
return {
+ itemUnequip,
instance,
player,
- reclaiming,
- sendVboxAccept,
- sendVboxCombine,
- sendVboxDiscard,
- sendVboxReclaim,
- vboxSelected,
- itemInfo,
- itemUnequip,
- sendItemUnequip,
tutorial,
+ vboxSelected,
+
+ itemInfo,
+
+ sendInstance,
+ sendItemUnequip,
+ sendVboxBuy,
+ sendVboxCombine,
+ sendVboxRefill,
+ sendVboxRefund,
};
},
function receiveDispatch(dispatch) {
- function setReclaiming(v) {
- dispatch(actions.setItemUnequip([]));
- dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] }));
- return dispatch(actions.setReclaiming(v));
- }
-
function setInfo(item) {
return dispatch(actions.setInfo(item));
}
- function setVboxSelected(v) {
+ function setTutorial(stage) {
+ return dispatch(actions.setTutorial(stage));
+ }
+
+ function dispatchVboxSelect(v, state) {
+ setVboxState(dispatch, v, state);
dispatch(actions.setItemUnequip([]));
- dispatch(actions.setVboxSelected(v));
return dispatch(actions.setVboxSelected(v));
}
return {
- setReclaiming,
+ dispatchVboxSelect,
setInfo,
- setVboxSelected,
+ setTutorial,
};
}
);
-function validVboxSelect(vbox, itemInfo, shopSelect, stashSelect) {
- if (shopSelect.length === 0 && stashSelect.length === 0) return false;
-
- const validSelects = [];
-
- 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 itemCount = countBy(selectedItems, co => co);
-
- itemInfo.combos.forEach(combo => {
- const comboCount = countBy(combo.components, co => co);
- const buyCount = countBy(combo.components, co => co);
- const valid = selectedItems.every(c => {
- if (!combo.components.includes(c)) return false;
- if (itemCount[c] > comboCount[c]) return false;
- buyCount[c] -= 1;
- return true;
- });
- if (valid) {
- forEach(buyCount, (value, key) => {
- if (value > 0 && !validSelects.includes(key)) validSelects.push(key);
- });
- }
- });
-
- return validSelects;
-}
-
class Vbox extends preact.Component {
shouldComponentUpdate(newProps) {
- // Single variable props
if (newProps.itemUnequip !== this.props.itemUnequip) return true;
- if (newProps.reclaiming !== this.props.reclaiming) 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.player !== this.props.player) return true;
- if (newProps.instance !== this.props.instance) return true;
return false;
}
@@ -131,310 +104,132 @@ class Vbox extends preact.Component {
const {
// Changing state variables
itemUnequip,
+ instance,
player,
- reclaiming,
tutorial,
vboxSelected,
- instance,
-
// Static
itemInfo,
// Function Calls
+ dispatchVboxSelect,
sendItemUnequip,
- sendVboxAccept,
+ sendInstance,
+ sendVboxBuy,
sendVboxCombine,
- sendVboxDiscard,
- sendVboxReclaim,
- setVboxSelected,
+ sendVboxRefill,
+ sendVboxRefund,
setInfo,
- setReclaiming,
+ setTutorial,
} = args;
if (!player) return false;
const { vbox } = player;
- const { shopSelect, stashSelect } = vboxSelected;
- const vboxSelecting = shopSelect.length === 1 && stashSelect.length === 0;
+ const { storeSelect, stashSelect } = vboxSelected;
- function combinerChange(newStashSelect) {
- return setVboxSelected({ shopSelect, stashSelect: newStashSelect });
- }
-
- const vboxHighlight = validVboxSelect(vbox, itemInfo, shopSelect, stashSelect);
- //
- // VBOX
- //
+ const setVboxSelected = v => dispatchVboxSelect(v, { itemInfo, itemUnequip, vbox });
+ const clearVboxSelected = () => setVboxSelected({ storeSelect: [], stashSelect: [] });
+ const vboxBuySelected = () => sendVboxBuy(storeSelect[0][0], storeSelect[0][1]);
+ const clearTutorial = () => {
+ setTutorial(null);
+ sendInstance();
+ };
function vboxHover(e, v) {
if (v) {
e.stopPropagation();
- if (shopSelect.find(c => c[0])) return true; // There is a base skill or spec selected in the vbox
- if (stashSelect.length !== 0) {
- const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
- if (base || base === 0) return true;
- }
+ if (stashSelect.length !== 0 || storeSelect.length !== 0) return true;
setInfo(v);
}
return true;
}
- function clearVboxSelected() {
- setVboxSelected({ shopSelect: [], stashSelect: [] });
- }
-
- function vboxBuySelected() {
- if (!vboxSelecting) return false;
- document.activeElement.blur();
- sendVboxAccept(shopSelect[0][0], shopSelect[0][1]);
- return true;
- }
-
- function availableBtn(v, group, index) {
- if (!v) return ;
- 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;
+ function storeHdr() {
return (
-
- );
- }
-
-
- function vboxElement() {
- return (
-
+
+ COMBOS
+ Combine colours and items. + e.stopPropagation()}
+ onClick={e => e.stopPropagation()}>
+ {comboTable}
+
+ e.stopPropagation()}>
-
);
}
@@ -185,13 +187,11 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
return (
-
- e.target.scrollIntoView(true)} - onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX -
- hoverInfo(e, 'bits')} >{vbox.bits}b
-
- {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
-
-
- {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
- {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
-
+
+
);
}
- //
- // INVENTORY
- //
- function reclaimClick(e) {
- e.stopPropagation();
- return setReclaiming(!reclaiming);
- }
-
- function inventoryBtn(v, i) {
- const inventoryHighlight = vboxSelecting || itemUnequip.length;
-
- if (!v && v !== 0) {
- const emptyInvClick = () => {
- if (vboxSelecting) return vboxBuySelected();
- return false;
- };
- return ;
- }
-
- const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
-
- function onClick(type) {
- if (reclaiming) return sendVboxReclaim(i);
-
- 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 (
-
- );
- }
-
- 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 (
+ function stashHdr() {
+ const refund = storeSelect.length === 0 && stashSelect.length === 1
+ ? itemInfo.items.find(i => i.item === vbox.stash[stashSelect[0]]).cost
+ : 0;
+ const tutorialDisabled = tutorial && tutorial < 8
+ && instance.time_control === 'Practice' && instance.rounds.length === 1;
+ const refundBtn = (
);
- }
-
- function inventoryElement() {
- function inventoryClick(e) {
- e.stopPropagation();
- if (itemUnequip.length) return sendItemUnequip(itemUnequip);
- return true;
- }
return (
- e.target.scrollIntoView(true)} + onMouseOver={e => vboxHover(e, 'store')}> STORE +
+vboxHover(e, 'bits')}> + {vbox.bits}b +
e.stopPropagation()}
- onDragOver={ev => ev.preventDefault()}
- onDrop={inventoryClick}
- >
-
);
}
@@ -161,8 +163,8 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
-
-
- e.target.scrollIntoView(true)} - onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY -
- -
- {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
-
- {combinerBtn()}
+
+
);
}
- //
// EVERYTHING
- //
- function hoverInfo(e, newInfo) {
- if (shopSelect.find(c => c[0])) return true;
- if (stashSelect.length !== 0) {
- const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
- if (base || base === 0) return true;
- }
- return setInfo(newInfo);
- }
-
- const classes = 'vbox';
return (
- e.target.scrollIntoView(true)} + onMouseOver={e => vboxHover(e, 'stash')}> STASH +
+ {refundBtn}
- {vboxElement()}
-
);
}
@@ -138,8 +140,8 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
);
}
@@ -150,7 +152,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
⮞
- {inventoryElement()}
+
+ {storeHdr()}
+ {stashHdr()}
+
);
}
diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx
new file mode 100644
index 00000000..d2eddbec
--- /dev/null
+++ b/client/src/components/vbox.info.jsx
@@ -0,0 +1,78 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const { tutorialStage } = require('../tutorial.utils');
+const { genItemInfo } = require('./vbox.utils');
+
+const addState = connect(
+ ({ info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview }) => ({
+ info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview,
+ }));
+
+
+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;
+ if (newProps.comboPreview !== this.props.comboPreview) return true;
+ return false;
+ }
+
+ render(props) {
+ const {
+ // passed props
+ clearTutorial,
+ // connect state props
+ info,
+ player,
+ tutorial,
+ vboxInfo,
+ itemInfo,
+ instance,
+ comboPreview,
+ } = props;
+
+ // dispaly priority
+ // tutorial -> comboPreview -> vboxInfo -> info
+ if (tutorial) {
+ const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
+ if (tutorialStageInfo) return tutorialStageInfo;
+ }
+ if (comboPreview) return genItemInfo(comboPreview, itemInfo, player);
+ if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player);
+
+ if (!info) return false;
+ if (info.includes('constructName')) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (info.includes('constructAvatar')) {
+ return (
+ {info.replace('constructName ', '')}
+ This is the name of your construct.
+ Names are randomly generated and are purely cosmetic.
+ You can change change your construct name in the RESHAPE tab outside of games.
+
+
+ );
+ }
+
+ return genItemInfo(info, itemInfo, player, info);
+ }
+}
+
+module.exports = addState(Info);
diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/vbox.info.thresholds.jsx
similarity index 95%
rename from client/src/components/info.thresholds.jsx
rename to client/src/components/vbox.info.thresholds.jsx
index 7136a855..9f259f0e 100644
--- a/client/src/components/info.thresholds.jsx
+++ b/client/src/components/vbox.info.thresholds.jsx
@@ -3,6 +3,7 @@ const range = require('lodash/range');
const shapes = require('./shapes');
function specThresholds(player, fullInfo, info) {
+ if (!info) return false;
let red = 0;
let blue = 0;
let green = 0;
@@ -87,9 +88,12 @@ function specThresholds(player, fullInfo, info) {
);
});
return (
- {info.replace('constructAvatar ', '')}
+ This is your construct avatar.
+ Avatars are randomly generated and are purely cosmetic.
+ You can change your construct avatar in the RESHAPE tab outside of games.
+
- {thresholds}
+
);
}
@@ -122,11 +127,8 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
return (
+
+
);
}
diff --git a/client/src/components/vbox.stash.jsx b/client/src/components/vbox.stash.jsx
new file mode 100644
index 00000000..cec94686
--- /dev/null
+++ b/client/src/components/vbox.stash.jsx
@@ -0,0 +1,132 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const range = require('lodash/range');
+const without = require('lodash/without');
+
+const shapes = require('./shapes');
+const buttons = require('./buttons');
+const { removeTier } = require('../utils');
+
+const addState = connect(
+ ({ itemUnequip, vboxHighlight, vboxSelected }) => ({ itemUnequip, vboxHighlight, vboxSelected }));
+
+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;
+
+ 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;
+ }
+
+ render(props) {
+ const {
+ // passed props
+ sendItemUnequip,
+ setInfo,
+ setVboxSelected,
+ vbox,
+ vboxBuySelected,
+ vboxHover,
+ // connect state props
+ itemUnequip,
+ vboxHighlight,
+ vboxSelected,
+ } = props;
+
+ const { storeSelect, stashSelect } = vboxSelected;
+
+ 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;
+ }
+
+ function stashBtn(v, i) {
+ const stashHighlight = vboxSelecting || itemUnequip.length;
+
+ if (!v && v !== 0) {
+ const emptyInvClick = () => {
+ if (vboxSelecting) return vboxBuySelected();
+ return false;
+ };
+ return ;
+ }
+
+ 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.stash[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 (
+
+ );
+ }
+
+ return (
+
+ {thresholds}
+
e.stopPropagation()}
+ onDragOver={ev => ev.preventDefault()}
+ onDrop={stashClick}
+ >
+ {range(0, 6).map(i => stashBtn(vbox.stash[i], i.toString()))}
+
+ );
+ }
+}
+
+module.exports = addState(stashElement);
diff --git a/client/src/components/vbox.store.jsx b/client/src/components/vbox.store.jsx
new file mode 100644
index 00000000..f4d1878c
--- /dev/null
+++ b/client/src/components/vbox.store.jsx
@@ -0,0 +1,95 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+const range = require('lodash/range');
+
+const shapes = require('./shapes');
+
+const addState = connect(({ vboxHighlight }) => ({ vboxHighlight }));
+
+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;
+ }
+
+ render(props) {
+ const {
+ // passed props
+ clearVboxSelected,
+ setVboxSelected,
+ vbox,
+ vboxHover,
+ vboxSelected,
+ // connect state props
+ vboxHighlight,
+ } = props;
+
+ const { storeSelect, stashSelect } = vboxSelected;
+
+ function availableBtn(v, group, index) {
+ if (!v) return ;
+ 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 (
+
+ );
+ }
+
+ return (
+ e.stopPropagation()}>
+
+ );
+ }
+}
+
+module.exports = addState(storeElement);
diff --git a/client/src/components/vbox.utils.jsx b/client/src/components/vbox.utils.jsx
new file mode 100644
index 00000000..4a4a90d1
--- /dev/null
+++ b/client/src/components/vbox.utils.jsx
@@ -0,0 +1,133 @@
+const preact = require('preact');
+const countBy = require('lodash/countBy');
+const forEach = require('lodash/forEach');
+const reactStringReplace = require('react-string-replace');
+
+const actions = require('../actions');
+const specThresholds = require('./vbox.info.thresholds');
+const { INFO } = require('./../constants');
+const { removeTier } = require('../utils');
+const shapes = require('./shapes');
+
+function setVboxState(dispatch, vboxSelected, state) {
+ const {
+ itemInfo,
+ itemUnequip,
+ vbox,
+ } = state;
+ const { storeSelect, stashSelect } = vboxSelected;
+
+ // default returns
+ let vboxCombiner = false;
+ let vboxHighlight = false;
+
+ if (storeSelect.length || stashSelect.length) {
+ vboxHighlight = [];
+ const stashItems = stashSelect.map(j => vbox.stash[j]);
+ const shopItems = storeSelect.map(j => vbox.store[j[0]][j[1]]);
+
+ const selectedItems = stashItems.concat(shopItems);
+ const itemCount = countBy(selectedItems, co => co);
+
+ itemInfo.combos.forEach(combo => {
+ const comboCount = countBy(combo.components, co => co);
+ const buyCount = countBy(combo.components, co => co);
+ const valid = selectedItems.every(c => {
+ if (!combo.components.includes(c)) return false;
+ if (itemCount[c] > comboCount[c]) return false;
+ buyCount[c] -= 1;
+ return true;
+ });
+ if (valid) {
+ const fullCombo = combo.components.every(c => itemCount[c] === comboCount[c]);
+ if (fullCombo) vboxCombiner = combo.item;
+
+ forEach(buyCount, (value, key) => {
+ if (value > 0 && !vboxHighlight.includes(key)) {
+ vboxHighlight.push(key);
+ }
+ });
+ }
+ });
+ }
+
+
+ const vboxInfo = () => {
+ if (vboxCombiner) return vboxCombiner;
+ if (itemUnequip.length) return itemUnequip[1];
+ const stashBase = stashSelect.find(i => !(['Red', 'Blue', 'Green'].includes(vbox.stash[i])));
+ if (stashBase > -1) return vbox.stash[stashBase];
+ const storeBase = storeSelect.find(j => !(['Red', 'Blue', 'Green'].includes(vbox.store[j[0]][j[1]])));
+ if (storeBase) return vbox.store[storeBase[0]][storeBase[1]];
+ if (stashSelect.length > 0) return vbox.stash[stashSelect[0]];
+ if (storeSelect.length > 0) return vbox.store[storeSelect[0][0]][storeSelect[0][1]];
+ return false;
+ };
+
+ dispatch(actions.setVboxInfo(vboxInfo()));
+ dispatch(actions.setVboxCombiner(vboxCombiner));
+ dispatch(actions.setVboxHighlight(vboxHighlight));
+}
+
+function genItemInfo(item, itemInfo, player) {
+ 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
+ {range(0, 6).map(i => availableBtn(vbox.store['Colours'][i], 'Colours', i.toString()))}
+
+
+ {range(0, 3).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))}
+ {range(0, 3).map(i => availableBtn(vbox.store['Specs'][i], 'Specs', i.toString()))}
+
+ {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, item) : null;
+
+ return (
+
+
+ );
+ }
+ return (
+ {infoName}
+ {header} + {itemSourceInfo} + {cooldown} + {itemDescription()} + {speed} + {thresholds} +
+
+ );
+}
+
+function cost(group) {
+ if (group === 'Colours') return 1;
+ if (group === 'Skills') return 2;
+ if (group === 'Specs') return 3;
+};
+
+module.exports = { setVboxState, genItemInfo, cost };
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 5a7a24a3..c6b6dfaf 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -3,7 +3,7 @@ const preact = require('preact');
const SOURCE_DURATION_MS = 1000; // Time for SOURCE ONLY
const TARGET_DELAY_MS = 500; // Used for Source + Target
const TARGET_DURATION_MS = 1500; // Time for TARGET ONLY
-const POST_SKILL_DURATION_MS = 1000; // Time for all POST
+const POST_SKILL_DURATION_MS = 1300; // Time for all POST
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS; // SOURCE + TARGET time
module.exports = {
@@ -24,22 +24,18 @@ module.exports = {
},
INFO: {
- vbox: {
- item: 'VBOX',
- description: {fullInfo.item}
+ {itemDescription()} +ITEMS that are available to buy.
- The VBOX is refilled every round.
Click REFILL at the bottom to purchase a refill.
Contains items that are available to buy.
+ The store is refilled every round.
Click REFILL to purchase a refill for 2 bits.
Holds ITEMS
ITEMS carry over each round.
The VBOX currency.
- Colours - 1b
- Skills - 2b
- Specs - 3b
- At the beginning of each round you receive 30 bits.
Currency to buy items.
At the beginning of each round you receive 30 bits.
Reclaim items refunding the listed cost of the item.
- Click to enable and then click the item to reclaim.
Tutorial
Welcome to the vbox phase tutorial.
Colours are used to create powerful combinations with base items.
-Buy the two colours from the vbox to continue.
+Buy the two colours from the store to continue.
Tutorial
-In a normal game you start with three base Attack skill items.
-The Attack item can be combined with colours to create a new skill.
- Select the Attack item along with two colours.
- Once selected press COMBINE to create a new combo.
-
You start the game with the base Attack skill item.
+Highlight all three items then click combine.
Tutorial
The first construct on your team is {constructOne}.
Skill items can be equipped to your constructs to be used in the combat phase.
- Click the newly combined skill item in the top right of the inventory.
- Once selected click the construct SKILL slot to equip the skill.
Click your new skill from the stash.
+ Once selected click the flashing SKILL slot to equip the skill.
Tutorial
You can also buy specialisation items for your constructs.
Specialisation items increase stats including power, speed and life.
Buy the specialisation item from the vbox to continue.
+Buy the specialisation item from the store to continue.
Tutorial
Equipping specialisation items will increase the stats of your constructs.
These can also be combined with colours for further specialisation.
- Click the specialisation item in the top right of the inventory.
- Once selected click the construct SPEC slot to equip the specialisation.
Click the specialisation item in the stash.
+ Once selected click the flashing SPEC slot to equip the specialisation.
Tutorial
-Each round you start with a vbox full of different skills, specs and colours.
- Bits are your currency for buying skills, specs and colours from the vbox.
- Colours cost 1b, Skills cost 2b and specs cost 3b.
- You can refill the vbox by pressing the refill button for 2b.
- After each combat round you get more bits to further upgrade your team.
+
Each round you start with 30 bits and a store full of different skills, specs and colours.
+ Bits are your currency for buying items.
+ You can refill the store by pressing the refill button for 2b.
Press the REFILL button to get a new vbox and continue.
+Press the REFILL button to buy new items.
Tutorial
That completes the VBOX Tutorial.
Press READY to progress to the GAME PHASE
- or continue creating new items to strengthen your constructs further
You can unequip skills and specs back into the inventory by double clicking.
- Reclaim can be used to refund the cost of items in your inventory.