moving spec constants to server

client/src/components/info.component.jsx

@@ -2,10 +2,9 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const { INFO } = require('./../constants');
-const { SPECS } = require('./../utils');
 const { COLOUR_ICONS, convertItem } = require('../utils');
 
-function Info(args) {
+function InfoComponent(args) {
     const {
         info,
         itemInfo,
@@ -24,16 +23,6 @@ function Info(args) {
         const isSkill = fullInfo.skill;
         const isSpec = fullInfo.spec;
 
-        let red = 0;
-        let blue = 0;
-        let green = 0;
-        player.constructs.forEach(construct => {
-            red += construct.colours.red;
-            blue += construct.colours.blue;
-            green += construct.colours.green;
-        });
-        const teamColours = { red, blue, green };
-
         if (isSkill) {
             return (
                 <div className="info-skill">
@@ -44,8 +33,18 @@ function Info(args) {
         }
 
         if (isSpec) {
-            const breaks = SPECS[info].thresholds;
-            const colourReqs = SPECS[info].colours || [];
+            let red = 0;
+            let blue = 0;
+            let green = 0;
+            player.constructs.forEach(construct => {
+                red += construct.colours.red;
+                blue += construct.colours.blue;
+                green += construct.colours.green;
+            });
+            const teamColours = { red, blue, green };
+
+            const breaks = fullInfo.values;
+            const colourReqs = fullInfo.values || [];
 
             const thresholdEl = colourReqs.map((c, i) => {
                 const numIcons = Math.max(...breaks);
@@ -142,4 +141,4 @@ function Info(args) {
     );
 }
 
-module.exports = Info;
+module.exports = InfoComponent;

client/src/components/instance.equip.jsx

@@ -4,7 +4,7 @@ const range = require('lodash/range');
 
 const actions = require('../actions');
 const shapes = require('./shapes');
-const { convertItem, SPECS } = require('./../utils');
+const { convertItem } = require('./../utils');
 
 const addState = connect(
     function receiveState(state) {
@@ -103,11 +103,12 @@ function Equipment(props) {
 
     const specs = range(0, 9).map(i => {
         const item = convertItem(vbox.bound[i]);
-        if (specList.includes(item)) {
+        const fullInfo = itemInfo.items.find(i => i.item === item);
+        if (fullInfo.spec) {
             return (
                 <figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
-                    {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
-                    <figcaption>{SPECS[item].caption}</figcaption>
+                    {shapes[fullInfo.values.shape.toLowerCase()](`stat-icon ${itemInfo[item].colour}`)}
+                    <figcaption>{item}</figcaption>
                 </figure>
             );
         } return false;