remove null info, don't set info to null. click into combos for preview. preview base when combining

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,
+            // Variables that will change
-            itemInfo,
-            player,
-            instance,
             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 (
-                    <div>
-                        <h2>VBOX phase</h2>
-                        <p>Strengthen and specialise your constructs by equipping items to them.</p>
-                        <p>Double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
-                        <p>
-                            Combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
-                            Combine <b>3 of the same item</b> to upgrade it.<br />
-                            Click an item and then click a construct to <b>equip</b> that item to it.<br />
-                        </p>
-                        <p>Click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
-                    </div>
-                );
-            }
             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 (
                     <div class="info-skill">
-                        <h2>{fullInfo.item} - {fullInfo.cost}b</h2>
+                        <h2>{fullInfo.item} {fullInfo.cost}b</h2>
                         <h3> SKILL </h3>
                         {itemSourceDescription}
                         <div> {cooldown} </div>
@@ -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 (
                     <div class="info-spec">
-                        <h2>{infoText} - {fullInfo.cost}b</h2>
+                        <h2>{infoText} {fullInfo.cost}b</h2>
                         <h3>SPEC</h3>
                         {itemSourceDescription}
                         <div>{infoDescription}</div>
@@ -202,7 +196,7 @@ class InfoComponent extends Component {
                     <tbody>
                         {vboxCombos.map((c, i) =>
                             <tr key={i} >
-                                <td class="highlight" >{convertItem(c.item)}</td>
+                                <td class="highlight" onClick={() => setInfo(c.item)} >{convertItem(c.item)}</td>
                                 {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
                             </tr>
                         )}

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 };
     }
 
 

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 (
-            <main id="instance" class='instance' onClick={instanceClick} onMouseOver={() => setInfo(null)}>
+            <main id="instance" class='instance' onClick={instanceClick}>
                 <Vbox />
                 <InfoContainer />
                 <InstanceConstructsContainer />

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,
 

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 (
             <div class='vbox-vbox'
                 onMouseDown={() => setReclaiming(false)}
-                onClick={e => e.stopPropagation()}
+                onClick={e => e.stopPropagation()}>
-                onMouseOver={e => hoverInfo(e, 'vbox')}>
                 <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
+                    <h3
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
+                    </h3>
                     <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
                 <div class="vbox-colours">
@@ -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) {
             <div class={inventoryClass}
                 onMouseDown={inventoryClick}
                 onClick={e => e.stopPropagation()}
-                style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
+                style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
-                onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
+                    <h3
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
+                    </h3>
                     <button
                         disabled={tutorial && tutorial < 8}
                         class='vbox-btn reclaim'