diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 6dd3fede..86b193e4 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -20,36 +20,27 @@ class InfoComponent extends preact.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) { - const tutorialStageInfo = tutorialStage(tutorial, ws, clearTutorial, instance); + const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance); if (tutorialStageInfo) return tutorialStageInfo; } + 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; @@ -68,7 +59,7 @@ class InfoComponent extends preact.Component { const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null; return (
-

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

+

{fullInfo.item} {fullInfo.cost}b

SKILL

{itemSourceDescription}
{cooldown}
@@ -165,16 +156,20 @@ class InfoComponent extends preact.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}
@@ -206,7 +201,7 @@ class InfoComponent extends preact.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 7f4bf164..84d77f21 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -57,10 +57,6 @@ const addState = connect( dispatch(actions.setActiveConstruct(value)); } - function clearInfo() { - return dispatch(actions.setInfo(null)); - } - function setItemEquip(v) { return dispatch(actions.setItemEquip(v)); } @@ -69,7 +65,7 @@ const addState = connect( return dispatch(actions.setItemUnequip(v)); } - return { quit, clearInfo, setInfo, setActiveConstruct, setItemUnequip, setItemEquip }; + return { quit, setInfo, setActiveConstruct, setItemUnequip, setItemEquip }; } ); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index c7923c87..1d1b9ee3 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -160,8 +160,12 @@ class Vbox extends preact.Component { // function vboxHover(e, v) { if (v) { - if (info !== v) setInfo(v); - e.stopPropagation(); + 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; } @@ -243,30 +247,32 @@ class Vbox extends preact.Component { function vboxElement() { return ( -
setReclaiming(false)} - onClick={e => e.stopPropagation()} - onMouseOver={e => hoverInfo(e, 'vbox')}> -
-

e.target.scrollIntoView(true)}>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))} -
- -
+
setReclaiming(false)} + onClick={e => e.stopPropagation()}> +
+

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))} +
+ +
); } @@ -307,8 +313,10 @@ class Vbox extends preact.Component { 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); if (combinerIndex > -1) { @@ -317,9 +325,10 @@ class Vbox extends preact.Component { combiner.push(i); - if (!comboHighlight) { - return combinerChange([i]); - } + if (!comboHighlight) { + setInfo(vbox.bound[i]); + return combinerChange([i]); + } return combinerChange(combiner); } @@ -398,27 +407,29 @@ class Vbox extends preact.Component { } return ( -
e.stopPropagation()} - style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null} - onMouseOver={e => hoverInfo(e, 'inventory')}> -
-

e.target.scrollIntoView(true)}>INVENTORY

- -
-
- {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))} -
- {combinerBtn()} -
+
e.stopPropagation()} + style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}> +
+

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

+ +
+
+ {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))} +
+ {combinerBtn()} +
); }