skill fix"

gp
"
\

client/cryps.css

@@ -477,7 +477,7 @@ header {
     flex-flow: column;
 }
 
-.stats {
+.cryp-box .stats {
     flex: 0 0 20%;
     width: 100%;
     display: flex;

client/src/components/info.component.jsx

@@ -1,7 +1,7 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
-const { ITEMS: { SKILLS, COLOURS } } = require('./constants');
+const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./constants');
 const { COLOUR_ICONS, STATS, SPECS } = require('../utils');
 
 function Info(args) {
@@ -21,12 +21,13 @@ function Info(args) {
         });
         const teamColours = { red, blue, green };
         const [type, value] = info;
+
         if (type === 'item') {
             let itemDetails;
             if (SKILLS[value]) {
                 itemDetails = SKILLS[value];
-            } else if (SPECS[value]) {
-                itemDetails = SPECS[value];
+            } else if (SPEC_CONSTANT[value]) {
+                itemDetails = SPEC_CONSTANT[value];
             } else if (COLOURS[value]) {
                 itemDetails = COLOURS[value];
             }
@@ -51,7 +52,7 @@ function Info(args) {
 
         function thresholds(t, spec) {
             return (
-                SPECS[spec].colours.map((c, i) => (
+                SPEC_CONSTANT[spec].colours.map((c, i) => (
                     <figure key={i} alt={c.colour}>
                         {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
                         <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
@@ -60,9 +61,8 @@ function Info(args) {
             );
         }
 
-
         if (type === 'spec') {
-            const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
+            const breaks = SPEC_CONSTANT[value.spec].thresholds ? SPEC_CONSTANT[value.spec].thresholds.map((t, i) => {
                 const threshold = thresholds(t, value.spec);
                 return (
                     <div className="thresholds" key={i} alt={t}>
@@ -74,7 +74,7 @@ function Info(args) {
                 <div className="info-spec">
                     <div>
                         <div> {value.spec} </div>
-                        <div> {SPECS[value.spec].description} </div>
+                        <div> {SPEC_CONSTANT[value.spec].description} </div>
                         {breaks}
                     </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>

client/src/components/instance.component.jsx

@@ -18,12 +18,14 @@ function Cryp(props) {
     } = props;
 
     const skills = range(0, 4).map(i => {
-        const s = cryp.skills[i]
-            ? cryp.skills[i].skill
+        const skill = cryp.skills[i];
+        const s = skill
+            ? skill.skill
             : (<span>&nbsp;</span>);
 
         function skillClick() {
-            setInfo('skill', { skill: s, cryp });
+            if (!skill) return false;
+            setInfo('skill', { skill, cryp });
             setActiveCryp(cryp);
         }
 
@@ -51,12 +53,18 @@ function Cryp(props) {
         return setActiveCryp(cryp);
     }
 
-    const specs = cryp.specs.map((s, i) => (
-        <figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
-            {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
-            <figcaption>{SPECS[s].caption}</figcaption>
-        </figure>
-    ));
+    const specs = cryp.specs.map((s, i) => {
+        function specClick() {
+            setActiveCryp(cryp);
+            setInfo('spec', { spec: s, cryp });
+        }
+        return (
+            <figure key={i} onClick={specClick}>
+                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                <figcaption>{SPECS[s].caption}</figcaption>
+            </figure>
+        );
+    });
 
     return (
         <div