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) => (
-
- {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
- {Math.min(teamColours[c], t)} / {t}
-
- ))
- );
- }
-
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 (
+
+ {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
+ {caption}
+
+ );
+ });
+
return (
-
- {threshold}
+
+ {dots}
);
- }) : null;
+ });
+
return (
{value.spec}
{SPEC_CONSTANT[value.spec].description}
- {breaks}
+
+ {thresholdEl}
+