Added filtered skills and specs

client/instance.css

@@ -11,8 +11,8 @@
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
-        "g g g g g g g g x x x x"
+        "n g g g g g g g x x x x"
-        "g g g g g g g g x x x x"
+        "n g g g g g g g x x x x"
         "f f f f f f f f x x x x"
         "f f f f f f f f x x x x"
         "f f f f f f f f x x x x"
@@ -33,19 +33,6 @@
 }
 
 
-.instance-cryp-list {
-    grid-area: f;
-    flex: 1 1 auto;
-    display: flex;
-    flex-flow: row;
-    padding: 0 2em 0 2em;
-    align-content: flex-start;
-
-    min-width: 300px;
-
-    overflow: hidden;
-}
-
 
 .instance .spacer {
     flex-grow: 1
@@ -54,11 +41,11 @@
 .vbox {
     grid-area: v;
     display: grid;
-    grid-template-columns: repeat(11, 1fr);
+    grid-template-columns: 5fr 1fr 5fr;
     grid-template-rows: repeat(2, 1fr);
     grid-template-areas: 
-        "vb vb vb vb vb . i i i i i"
+        "vb . i"
-        "vb vb vb vb vb . i i i i i";
+        "vb . i";
 }
 
 .vbox-box {
@@ -121,6 +108,8 @@
     margin: 0;
 }
 
+/* VBOX */
+
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
     color: black;
 }
@@ -177,6 +166,20 @@
 }
 
 /* CRYP BOX */
+
+.instance-cryp-list {
+    grid-area: f;
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row;
+    padding: 0 2em 0 2em;
+    align-content: flex-start;
+
+    min-width: 300px;
+
+    overflow: hidden;
+}
+
 .instance-cryp {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
@@ -249,10 +252,10 @@
     grid-area: st;
     display: grid;
     grid-template-rows: 1fr 3fr;
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: 3fr 1fr 3fr;
     grid-template-areas: 
-        "dl dl dl sl ll ll ll"
+        "dl sl ll"
-        "di di di si li li li";
+        "di si li";
     border-top: 1px solid whitesmoke;
 }
 
@@ -311,4 +314,61 @@
     justify-content: center;
 }
 
+/* Equipment */
+.instance-equip {
+    grid-area: g;
+    display: flex;
+    justify-content: center;
+}
 
+.instance-equip .skills {
+    display: flex;
+    min-height: 100px;
+    flex-direction: column;
+}
+
+.instance-equip .skills button {
+    flex: 1 1 100%;
+    color: whitesmoke;
+    font-size: 16pt;
+    padding: 10px;
+    border-width: 0px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top-width: 1px;
+    height: 100%;
+
+}
+
+
+.instance-equip .specs {
+    display: flex;
+    padding-left: 50px;
+    flex-direction: column;
+}
+
+.instance-equip .items {
+    display: flex;
+    justify-content: center;
+}
+
+.instance-equip .label {
+    display: flex;
+    justify-content: center;
+    font-size: 20pt;
+    padding: 15px;
+
+}
+
+.instance-equip .specs figure {
+    flex: 1;
+    border: 0;
+    padding: 0.5em 1em 0 0;
+    text-align: center;
+}
+
+
+.instance-equip .specs figcaption {
+    font-size: 75%;
+}

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