what a goddamn nightmare

client/assets/styles/instance.css

@@ -420,19 +420,25 @@ button.equipping {
 
 .thresholds {
     display: flex;
-    flex-flow: row-wrap;
+    flex-flow: column;
-    /*align-items: center;*/
+    text-align: center;
+}
+
+.thresholds hr {
+    margin: 1em 0;
+}
+
+.colour-reqs {
+    display: flex;
+    flex-flow: row;
     justify-content: space-around;
 }
 
-.spec-goals {
+.thresholds figure svg {
-}
-
-.spec-goals figure svg {
     height: 2em;
 }
 
-.spec-goals .unmet {
+.thresholds .unmet {
     opacity: 0.5;
 }
 

client/src/components/info.component.jsx

@@ -1,4 +1,5 @@
 const preact = require('preact');
+const { Fragment } = require('preact');
 const range = require('lodash/range');
 
 const { INFO } = require('./../constants');
@@ -43,16 +44,20 @@ function InfoComponent(args) {
             });
             const teamColours = { red, blue, green };
 
-            const breaks = fullInfo.values;
+            const colourReqs = fullInfo.values.bonuses || [];
-            const colourReqs = fullInfo.values || [];
 
-            const thresholdEl = colourReqs.map((c, i) => {
+            const thresholds = colourReqs.map((bonus, i) => {
-                const numIcons = Math.max(...breaks);
+                const colours = ['red', 'green', 'blue'];
-                const dots = range(0, numIcons).map(j => {
+                const colourGoals = colours.map(c => {
+                    const colourReq = bonus.req[c];
+                    if (colourReqs === 0) return false;
+
+                    const start = i === 0
+                        ? 0
+                        : colourReqs[i - 1].req[c];
+
+                    const dots = range(start, colourReq).map(j => {
                         const unmet = teamColours[c] < j + 1;
-                    const caption = breaks.includes(j + 1)
-                        ? '+ x'
-                        : '';
 
                         const reqClass = unmet
                             ? 'unmet'
@@ -61,24 +66,42 @@ function InfoComponent(args) {
                         return (
                             <figure key={j} alt={c.colour} className={reqClass} >
                                 {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
-                            <figcaption>{caption}</figcaption>
                             </figure>
                         );
                     });
 
                     return (
-                    <div key={i} className="spec-goals">
+                        <div key={c}>
                             {dots}
                         </div>
                     );
                 });
 
+                const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
+
+                const reqClass = reqsMet
+                    ? ''
+                    : 'unmet';
+
+                return (
+                    <div key={i} className="spec-goal">
+                        <div className="colour-reqs">
+                            {colourGoals}
+                        </div>
+                        <div className={reqClass}>
+                            + {bonus.bonus}
+                            <hr />
+                        </div>
+                    </div>
+                );
+            });
+
             return (
                 <div className="info-spec">
                     <h2>{info}</h2>
                     <div>{fullInfo.description}</div>
                     <div className="thresholds">
-                        {thresholdEl}
+                        {thresholds}
                     </div>
                 </div>
             );

client/src/components/instance.constructs.jsx

@@ -3,7 +3,7 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const shapes = require('./shapes');
-const { SPECS, STATS, instanceConstruct } = require('../utils');
+const { STATS, instanceConstruct } = require('../utils');
 const actions = require('../actions');
 
 const addState = connect(
@@ -152,6 +152,8 @@ function Construct(props) {
             );
         }
 
+        const specInfo = itemInfo.items.find(i => i.item === s);
+
         function specClick(e) {
             e.stopPropagation();
             setItemUnequip(s);
@@ -174,8 +176,8 @@ function Construct(props) {
                 onClick={specClick}
                 onDblClick={specDblClick}
                 onMouseOver={e => hoverInfo(e, s)} >
-                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                {shapes[specInfo.values.shape.toLowerCase()](`stat-icon ${specInfo.values.colour}`)}
-                <figcaption>{SPECS[s].caption}</figcaption>
+                <figcaption>{s}</figcaption>
             </figure>
         );
     });

client/src/components/instance.equip.jsx

@@ -64,9 +64,11 @@ function Equipment(props) {
     const isSkill = fullInfo && fullInfo.skill;
     const isSpec = fullInfo && fullInfo.spec;
 
+    console.log('isSkill', isSkill, fullInfo);
+
     function skillClick(e, i) {
         if (itemUnequip && activeConstruct) return false;
-        const value = vbox.bound[i];
+        // const value = vbox.bound[i];
         setItemEquip(i);
         return false;
     }
@@ -87,31 +89,31 @@ function Equipment(props) {
     const skillClass = isSkill ? 'skills highlight' : 'skills';
     const specClass = isSpec ? 'specs highlight' : 'specs';
 
-    const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
-    const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
-
     const skills = range(0, 9).map(i => {
         const item = convertItem(vbox.bound[i]);
-        if (skillList.includes(item)) {
+        const skillInfo = itemInfo.items.find(i => i.item === item);
+        if (skillInfo && skillInfo.skill) {
             return (
                 <button key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
                     {item}
                 </button>
             );
-        } return false;
+        }
+        return false;
     });
 
     const specs = range(0, 9).map(i => {
         const item = convertItem(vbox.bound[i]);
-        const fullInfo = itemInfo.items.find(i => i.item === item);
+        const specInfo = itemInfo.items.find(i => i.item === item);
-        if (fullInfo.spec) {
+        if (specInfo && specInfo.spec) {
             return (
                 <figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
-                    {shapes[fullInfo.values.shape.toLowerCase()](`stat-icon ${itemInfo[item].colour}`)}
+                    {shapes[specInfo.values.shape.toLowerCase()](`stat-icon ${specInfo.values.colour}`)}
                     <figcaption>{item}</figcaption>
                 </figure>
             );
-        } return false;
+        }
+        return false;
     });
 
     if (skills.every(s => !s)) skills.push(<button disabled={true}>&nbsp;</button>);