thresholds lineup

client/cryps.css

@@ -402,10 +402,25 @@ header {
 /*
     INFO
 */
-.thresholds {
+.thresholds .spec-goals {
     display: flex;
-    flex-direction: row;
+    justify-content: space-around;
-    justify-content: left;
+}
+
+.info-spec {
+    margin-top: 1em;
+}
+
+.spec-goals figure {
+    margin: 1em 0;
+}
+
+.spec-goals figure svg {
+    height: 1em;
+}
+
+.spec-goals .unmet {
+    opacity: 0.5;
 }
 
 .info-cryp .skills {

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 { spec } = value;
-                const threshold = thresholds(t, value.spec);
+            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 (
-                    <div className="thresholds" key={i} alt={t}>
+                        <figure key={j} alt={c.colour} className={reqClass} >
-                        {threshold}
+                            {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
+                            <figcaption>{caption}</figcaption>
+                        </figure>
+                    );
+                });
+
+                return (
+                    <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

client/src/utils.jsx

@@ -92,9 +92,9 @@ const SPECS = {
 };
 
 const COLOUR_ICONS = {
-    red: { colour: 'red', caption: 'red', svg: shapes.circle },
+    red: { colour: 'red', caption: 'red', svg: shapes.hexagon },
-    blue: { colour: 'blue', caption: 'blue', svg: shapes.circle },
+    blue: { colour: 'blue', caption: 'blue', svg: shapes.hexagon },
-    green: { colour: 'green', caption: 'green', svg: shapes.circle },
+    green: { colour: 'green', caption: 'green', svg: shapes.hexagon },
 };
 
 module.exports = {

server/WORKLOG.md

@@ -23,10 +23,14 @@
 * instance
   * cryp / vbox page separation
 
-
-
-
 *SERVER*
+var / skill info rpc
+  thresholds / bonuses
+  sell cost
+  etc
+
+change initial vbox to be more intuitive
+
 siphon might have a prob
 put ticks on stack at start of phase