Added filtered skills and specs

client/src/components/instance.component.jsx

@@ -3,6 +3,7 @@ const preact = require('preact');
 const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
 const InstanceCrypsContainer = require('./instance.cryps');
+const EquipmentContainer = require('./instance.equip');
 
 function InstanceComponent(args) {
     const {
@@ -92,6 +93,7 @@ function InstanceComponent(args) {
             </div>
             <VboxContainer />
             <InstanceCrypsContainer />
+            <EquipmentContainer />
             <InfoContainer />
         </main>
     );

client/src/components/instance.equip.jsx

@@ -0,0 +1,95 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+const range = require('lodash/range');
+
+const actions = require('../actions');
+const { convertVar, SPECS } = require('./../utils');
+
+const addState = connect(
+    function receiveState(state) {
+        const { player, vboxInfo } = state;
+
+        return { player, vboxInfo };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(item, value) {
+            dispatch(actions.setInfo([item, value]));
+        }
+
+        function clearInfo() {
+            return dispatch(actions.setInfo([]));
+        }
+
+        return { setInfo, clearInfo };
+    }
+
+);
+
+function Equipment(props) {
+    const {
+        player,
+        setInfo,
+        vboxInfo,
+    } = props;
+
+    const { vbox } = player;
+
+    function boundClick(e, i) {
+        const value = vbox.bound[i];
+        setInfo('item', value);
+
+        return false;
+    }
+
+    // const classes = `right ${skill ? '' : 'action'}`;
+    const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
+    const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
+
+    const skills = range(0, 9).map(i => {
+        const item = convertVar(vbox.bound[i]);
+        if (skillList.includes(item)) {
+            return (
+                <button key={i} className={''} onClick={e => boundClick(e, i)}>
+                    {item}
+                </button>
+            );
+        } return false;
+    });
+
+    const specs = range(0, 9).map(i => {
+        const item = convertVar(vbox.bound[i]);
+        if (specList.includes(item)) {
+            return (
+                <figure key={i} onClick={e => boundClick(e, i)}>
+                    {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
+                    <figcaption>{SPECS[item].caption}</figcaption>
+                </figure>
+            );
+        } return false;
+    });
+    // const specLabel = specs.every(i => i === false) ? '' : 'Specs';
+
+    return (
+        <div className="instance-equip" >
+            <div className="skills">
+                <div className="label">
+                    Skills
+                </div>
+                <div className ="items">
+                    {skills}
+                </div>
+            </div>
+            <div className="specs">
+                <div className="label">
+                    Specs
+                </div>
+                <div className ="items">
+                    {specs}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(Equipment);