From 37be6b633c234dd71dccc226171aba8cc9221f9a Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 8 Apr 2019 13:16:03 +1000
Subject: [PATCH] skill fix" gp " \

---
 client/cryps.css                             |  2 +-
 client/src/components/info.component.jsx     | 14 +++++------
 client/src/components/instance.component.jsx | 26 +++++++++++++-------
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index c1a8772b..bb929f43 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -477,7 +477,7 @@ header {
     flex-flow: column;
 }
 
-.stats {
+.cryp-box .stats {
     flex: 0 0 20%;
     width: 100%;
     display: flex;
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 97098463..d2e00332 100644
--- a/client/src/components/info.component.jsx
+++ b/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)}>
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index f606262a..59c50b39 100644
--- a/client/src/components/instance.component.jsx
+++ b/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