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;

client/src/socket.jsx

@@ -300,15 +300,15 @@ function createSocket(events) {
                 position: 'bottomCenter',
             });
 
+            sendPing();
+            sendItemInfo();
+
             if (account) {
                 events.setAccount(account);
                 sendAccountInstances();
                 sendAccountConstructs();
-                setTimeout(sendItemInfo, 2000);
             }
 
-            sendPing();
-
             return true;
         });
 

client/src/utils.jsx

@@ -167,135 +167,6 @@ const STATS = {
     },
 };
 
-const SPECS = {
-    Life: {
-        colour: 'white',
-        caption: 'Life',
-        svg: shapes.square
-    },
-    GreenLifeI: {
-        colour: 'green',
-        caption: 'Life',
-        thresholds: [5, 10, 20],
-        svg: shapes.square,
-    },
-    RedLifeI: {
-        colour: 'red',
-        caption: 'Life',
-        thresholds: [2, 5, 10],
-        svg: shapes.square,
-    },
-    BlueLifeI: {
-        colour: 'blue',
-        caption: 'Life',
-        thresholds: [2, 5, 10],
-        svg: shapes.square,
-    },
-    GRLI: {
-        colour: 'yellow',
-        caption: 'Life',
-        thresholds: [2, 5, 10],
-        svg: shapes.square
-    },
-    GBLI: {
-        colour: 'cyan',
-        caption: 'Life',
-        thresholds: [2, 5, 10],
-        svg: shapes.square
-    },
-    RBLI: {
-        colour: 'purple',
-        caption: 'Life',
-        thresholds: [2, 5, 10],
-        svg: shapes.square
-    },
-
-    Power: {
-        colour: 'white',
-        caption: 'Power',
-        thresholds: [],
-        svg: shapes.circle
-    },
-    RedPowerI: {
-        colour: 'red',
-        caption: 'PowerI',
-        thresholds: [5, 10, 20],
-        svg: shapes.circle
-    },
-    BluePowerI: {
-        colour: 'blue',
-        caption: 'PowerI',
-        thresholds: [5, 10, 20],
-        svg: shapes.circle
-    },
-    GreenPowerI: {
-        colour: 'green',
-        caption: 'PowerI',
-        thresholds: [5, 10, 20],
-        svg: shapes.circle,
-    },
-    GRDI: {
-        colour: 'yellow',
-        caption: 'PowerI',
-        thresholds: [2, 5, 10],
-        svg: shapes.circle
-    },
-    GBDI: {
-        colour: 'cyan',
-        caption: 'PowerI',
-        thresholds: [2, 5, 10],
-        svg: shapes.circle,
-    },
-    RBDI: {
-        colour: 'purple',
-        caption: 'PowerI',
-        thresholds: [2, 5, 10],
-        svg: shapes.circle,
-    },
-
-    Speed: {
-        colour: 'white',
-        caption: 'Speed',
-        svg: shapes.triangle,
-    },
-    RedSpeedI: {
-        colour: 'red',
-        caption: 'Speed',
-        thresholds: [5, 10, 20],
-        svg: shapes.triangle,
-    },
-    BlueSpeedI: {
-        colour: 'blue',
-        caption: 'Speed',
-        thresholds: [2, 5, 10],
-        svg: shapes.triangle,
-    },
-    GreenSpeedI: {
-        colour: 'green',
-        caption: 'Speed',
-        thresholds: [2, 5, 10],
-        svg: shapes.triangle,
-    },
-    GRSpeedI: {
-        colour: 'yellow',
-        caption: 'Speed',
-        thresholds: [2, 5, 10],
-        svg: shapes.triangle,
-    },
-    GBSpeedI: {
-        colour: 'cyan',
-        caption: 'Speed',
-        thresholds: [2, 5, 10],
-        svg: shapes.triangle,
-    },
-    RBSpeedI: {
-        colour: 'purple',
-        caption: 'Speed',
-        thresholds: [2, 5, 10],
-        svg: shapes.triangle,
-    },
-
-};
 
 const COLOUR_ICONS = {
     red: { colour: 'red', caption: 'red', svg: shapes.square },
@@ -599,6 +470,5 @@ module.exports = {
     resoConstructHealth,
     NULL_UUID,
     STATS,
-    SPECS,
     COLOUR_ICONS,
 };