diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index f4aafd3e..664a1c80 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -2,14 +2,13 @@ const preact = require('preact'); const range = require('lodash/range'); const reactStringReplace = require('react-string-replace'); -const { Component } = require('preact'); const { INFO } = require('./../constants'); const { convertItem, removeTier } = require('../utils'); const { tutorialStage } = require('../tutorial.utils'); const shapes = require('./shapes'); -class InfoComponent extends Component { +class InfoComponent extends preact.Component { shouldComponentUpdate(newProps) { if (newProps.tutorial !== this.props.tutorial) return true; if (newProps.tutorial) return false; // We don't care about info during tutorial @@ -19,33 +18,24 @@ class InfoComponent extends Component { render(args) { const { - ws, - itemInfo, - player, - instance, + // Variables that will change info, tutorial, - clearTutorial, + + // Static + player, // Only used for colour calcs which will be update if info changes + ws, + itemInfo, + instance, // Only used for instance id + // functions + setInfo, + setTutorialNull, } = args; function Info() { - if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance); + if (tutorial) return tutorialStage(tutorial, ws, setTutorialNull, instance); + if (!info) return false; - if (!info) { - return ( -
-

VBOX phase

-

Strengthen and specialise your constructs by equipping items to them.

-

Double click to purchase items in the VBOX and move them to your INVENTORY.

-

- Combine a SKILL or SPEC with 2 COLOURS to create an item.
- Combine 3 of the same item to upgrade it.
- Click an item and then click a construct to equip that item to it.
-

-

Click the READY button for the GAME PHASE.

-
- ); - } const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info]; if (!fullInfo) return false; const isSkill = fullInfo.skill; @@ -64,7 +54,7 @@ class InfoComponent extends Component { const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null; return (
-

{fullInfo.item} - {fullInfo.cost}b

+

{fullInfo.item} {fullInfo.cost}b

SKILL

{itemSourceDescription}
{cooldown}
@@ -161,16 +151,20 @@ class InfoComponent extends Component { const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); const itemSource = itemInfo.combos.filter(c => c.item === info); - const itemSourceInfo = itemSource.length + let itemSourceInfo = itemSource.length ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` : false; const itemRegEx = /(Red|Blue|Green)/; + if (itemSourceInfo) { + while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+'); + } const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); - const infoText = info.replace('Plus', '+'); + let infoText = info; + while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+'); return (
-

{infoText} - {fullInfo.cost}b

+

{infoText} {fullInfo.cost}b

SPEC

{itemSourceDescription}
{infoDescription}
@@ -202,7 +196,7 @@ class InfoComponent extends Component { {vboxCombos.map((c, i) => - {convertItem(c.item)} + setInfo(c.item)} >{convertItem(c.item)} {c.components.map((u, j) => {convertItem(u)})} )} diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx index b19fff8e..aec4b282 100644 --- a/client/src/components/info.container.jsx +++ b/client/src/components/info.container.jsx @@ -29,10 +29,14 @@ const addState = connect( }, function receiveDispatch(dispatch) { - function clearTutorial() { + function setTutorialNull() { dispatch(actions.setTutorial(null)); } - return { clearTutorial }; + + function setInfo(info) { + dispatch(actions.setInfo(info)); + } + return { setTutorialNull, setInfo }; } diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index abd2e9da..76291079 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -56,7 +56,6 @@ class Instance extends Component { render(args) { const { instance, - setInfo, clearItems, } = args; @@ -76,7 +75,7 @@ class Instance extends Component { } return ( -
setInfo(null)}> +
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 5d3ec130..c8afc6e3 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -58,10 +58,6 @@ const addState = connect( dispatch(actions.setActiveConstruct(value)); } - function clearInfo() { - return dispatch(actions.setInfo(null)); - } - function setItemEquip(v) { return dispatch(actions.setItemEquip(v)); } @@ -70,7 +66,7 @@ const addState = connect( return dispatch(actions.setItemUnequip(v)); } - return { quit, clearInfo, setInfo, setActiveConstruct, setItemUnequip, setItemEquip }; + return { quit, setInfo, setActiveConstruct, setItemUnequip, setItemEquip }; } ); @@ -248,7 +244,6 @@ function InstanceConstructs(props) { itemEquip, player, instance, - // clearInfo, setInfo, setActiveConstruct, diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index ca0f3ad4..82885c81 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -143,8 +143,12 @@ function Vbox(args) { // function vboxHover(e, v) { if (v) { - if (info !== v) setInfo(v); e.stopPropagation(); + if (combiner.length !== 0) { + const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c])); + if (base) return setInfo(vbox.bound[base]); + } + if (info !== v) setInfo(v); } return true; } @@ -228,10 +232,12 @@ function Vbox(args) { return (
setReclaiming(false)} - onClick={e => e.stopPropagation()} - onMouseOver={e => hoverInfo(e, 'vbox')}> + onClick={e => e.stopPropagation()}>
-

e.target.scrollIntoView(true)}>VBOX

+

e.target.scrollIntoView(true)} + onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX +

hoverInfo(e, 'bits')} >{vbox.bits}b
@@ -290,7 +296,10 @@ function Vbox(args) { if (reclaiming) return sendVboxReclaim(i); // 4 things selected - if (combiner.length > 2) return combinerChange([i]); + if (combiner.length > 2) { + setInfo(vbox.bound[i]); + return combinerChange([i]); + } // removing const combinerIndex = combiner.indexOf(i); @@ -301,6 +310,7 @@ function Vbox(args) { combiner.push(i); if (!comboHighlight) { + setInfo(vbox.bound[i]); return combinerChange([i]); } @@ -384,10 +394,12 @@ function Vbox(args) {
e.stopPropagation()} - style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null} - onMouseOver={e => hoverInfo(e, 'inventory')}> + style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
-

e.target.scrollIntoView(true)}>INVENTORY

+

e.target.scrollIntoView(true)} + onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY +