spec highlights

client/cryps.css

@@ -740,6 +740,11 @@ table td svg {
     border-top-width: 0;
 }
 
+figure.gray {
+    color: #333;
+    stroke-color: #333;
+}
+
 .stat-icon {
     height: 2em;
     stroke-width: 5px;

client/src/components/instance.cryps.jsx

@@ -1,11 +1,10 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
 const range = require('lodash/range');
-const mapValues = require('lodash/mapValues');
 
+const shapes = require('./shapes');
 const { SPECS, crypAvatar } = require('../utils');
 const actions = require('../actions');
-const SkillBtn = require('./skill.btn');
 
 const addState = connect(
     function receiveState(state) {
@@ -95,11 +94,23 @@ function Cryp(props) {
         return setActiveCryp(cryp);
     }
 
-    const specs = cryp.specs.map((s, i) => {
+    const specs = range(0, 6).map(i => {
+        const s = cryp.specs[i];
+
+        if (!s) {
+            return (
+                <figure key={i} className="gray" onClick={() => setInfo('highlight', 'spec')}>
+                    {shapes.diamond('stat-icon gray')}
+                    <figcaption>-</figcaption>
+                </figure>
+            );
+        }
+
         function specClick() {
             setActiveCryp(cryp);
             setInfo('spec', { spec: s, cryp });
         }
+
         return (
             <figure key={i} onClick={specClick}>
                 {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}

client/src/components/vbox.component.jsx

@@ -144,6 +144,7 @@ function Vbox(args) {
         const highlight = () => {
             if (!value || !info[0] || info[0] !== 'highlight') return false;
             const v = vboxInfo.vars.find(vi => vi.v === value);
+            console.log(v);
             if (info[1] === 'skill') return v.skill;
             if (info[1] === 'spec') return v.spec;
             return false;

client/src/events.jsx

@@ -6,7 +6,6 @@ const actions = require('./actions');
 const { TIMES } = require('./constants');
 const { getCombatSequence } = require('./utils');
 
-
 function registerEvents(store) {
 
     // timeout handlers