From 15b76a1ca2812904be8db432481c46f47f3b622e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 8 Apr 2019 14:55:39 +1000
Subject: [PATCH] thresholds lineup

---
 client/cryps.css                         | 21 +++++++++--
 client/src/components/info.component.jsx | 48 +++++++++++++++---------
 client/src/utils.jsx                     |  6 +--
 server/WORKLOG.md                        | 10 +++--
 4 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index 1fe6e278..2d9969c1 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -402,10 +402,25 @@ header {
 /*
     INFO
 */
-.thresholds {
+.thresholds .spec-goals {
     display: flex;
-    flex-direction: row;
-    justify-content: left;
+    justify-content: space-around;
+}
+
+.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 {
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index d865b3cf..17fdfa21 100644
--- a/client/src/components/info.component.jsx
+++ b/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
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index dd6de3f0..2f9398e3 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -92,9 +92,9 @@ const SPECS = {
 };
 
 const COLOUR_ICONS = {
-    red: { colour: 'red', caption: 'red', svg: shapes.circle },
-    blue: { colour: 'blue', caption: 'blue', svg: shapes.circle },
-    green: { colour: 'green', caption: 'green', svg: shapes.circle },
+    red: { colour: 'red', caption: 'red', svg: shapes.hexagon },
+    blue: { colour: 'blue', caption: 'blue', svg: shapes.hexagon },
+    green: { colour: 'green', caption: 'green', svg: shapes.hexagon },
 };
 
 module.exports = {
diff --git a/server/WORKLOG.md b/server/WORKLOG.md
index 71b3a841..7c64d680 100644
--- a/server/WORKLOG.md
+++ b/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