thresholds lineup

client/src/components/info.component.jsx

@@ -50,32 +50,46 @@ function Info(args) {
             );
         }
 
-        function thresholds(t, spec) {
-            return (
-                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>
-                    </figure>
-                ))
-            );
-        }
-
         if (type === 'spec') {
-            const breaks = SPEC_CONSTANT[value.spec].thresholds ? SPEC_CONSTANT[value.spec].thresholds.map((t, i) => {
-                const threshold = thresholds(t, value.spec);
+            const { spec } = value;
+            const breaks = SPEC_CONSTANT[value.spec].thresholds;
+            const colourReqs = SPEC_CONSTANT[spec].colours || [];
+
+            const thresholdEl = colourReqs.map((c, i) => {
+                const numIcons = Math.max(...breaks);
+                const dots = range(0, numIcons).map(j => {
+                    const unmet = teamColours[c] < j + 1;
+                    const caption = breaks.includes(j + 1)
+                        ? '+ x'
+                        : '';
+
+                    const reqClass = unmet
+                        ? 'unmet'
+                        : '';
+
+                    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 className="thresholds" key={i} alt={t}>
-                        {threshold}
+                    <div key={i} className="spec-goals">
+                        {dots}
                     </div>
                 );
-            }) : null;
+            });
+
             return (
                 <div className="info-spec">
                     <div>
                         <div> {value.spec} </div>
                         <div> {SPEC_CONSTANT[value.spec].description} </div>
-                        {breaks}
+                        <div className="thresholds">
+                            {thresholdEl}
+                        </div>
                     </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
                         unequip