Thresholds for specs

client/cryps.css

@@ -512,4 +512,10 @@ header {
     align-items: center;
     padding-left: 2em;
     flex: 1;
-}
+}
+
+.thresholds {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+}

client/src/components/constants.jsx

@@ -190,62 +190,79 @@ module.exports = {
 
             GreenDamageI: {
                 description: 'Increases green damage',
+                colours: ['green'],
+                thresholds: [5, 10, 20],
             },
 
             RedDamageI: {
                 description: 'Increased red damage',
+                colours: ['red'],
+                thresholds: [5, 10, 20],
             },
 
             BlueDamageI: {
                 description: 'Increased blue damage',
+                colours: ['blue'],
+                thresholds: [5, 10, 20],
             },
 
             GRDI: {
                 description: 'Increased green and red damage',
+                colours: ['green', 'red'],
+                thresholds: [2, 5, 10],
             },
 
             GBDI: {
                 description: 'Increased green and blue damage',
+                colours: ['green', 'blue'],
+                thresholds: [2, 5, 10],
             },
 
             RBDI: {
                 description: 'Increased red and blue damage',
+                colours: ['red', 'blue'],
+                thresholds: [2, 5, 10],
             },
 
-            Speed: {
-                description: 'Increases speed of cryp',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-
             Hp: {
                 description: 'Increases life',
                 upgrades: 'combine with 2 red / blue / green',
-
             },
 
             LifeI: {
                 description: 'Increases life',
+                colours: ['green'],
+                thresholds: [5, 10, 20],
             },
 
             RedShieldI: {
                 description: 'Increased red shield',
+                colours: ['red'],
+                thresholds: [5, 10, 20],
             },
 
             BlueShieldI: {
                 description: 'Increased blue shield',
+                colours: ['blue'],
+                thresholds: [5, 10, 20],
             },
 
             LRSI: {
                 description: 'Increased life and red shield',
+                colours: ['green', 'red'],
+                thresholds: [2, 5, 10],
             },
 
             LBSI: {
                 description: 'Increased life and blue shield',
+                colours: ['green', 'blue'],
+                thresholds: [2, 5, 10],
             },
 
             RBSI: {
                 description: 'Increased red and blue shield',
+                colours: ['red', 'blue'],
+                thresholds: [2, 5, 10],
             },
 
             Speed: {
@@ -255,26 +272,38 @@ module.exports = {
 
             RedSpeedI: {
                 description: 'Increases red speed',
+                colours: ['red'],
+                thresholds: [5, 10, 20],
             },
 
             BlueSpeedI: {
                 description: 'Increases blue speed',
+                colours: ['blue'],
+                thresholds: [5, 10, 20],
             },
 
             GreenSpeedI: {
                 description: 'Increases green speed',
+                colours: ['green'],
+                thresholds: [5, 10, 20],
             },
 
             GRSpeedI: {
                 description: 'Increases green and red speed',
+                colours: ['green', 'red'],
+                thresholds: [2, 5, 10],
             },
 
             GBSpeedI: {
                 description: 'Increases green and blue speed',
+                colours: ['green', 'blue'],
+                thresholds: [2, 5, 10],
             },
 
             RBSpeedI: {
                 description: 'Increases red and blue speed',
+                colours: ['red', 'blue'],
+                thresholds: [2, 5, 10],
             },
         },
 

client/src/components/game.component.jsx

@@ -5,8 +5,6 @@ const molecule = require('./molecule');
 
 const { STATS } = require('../utils');
 
-console.log(STATS);
-
 // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
 
 function GamePanel(props) {
@@ -142,7 +140,7 @@ function GamePanel(props) {
                         {skills}
                     </div>
                 </div>
-                <div className="stats">
+                <div className="cryp-box">
                     {stats}
                 </div>
             </div>

client/src/components/info.component.jsx

@@ -1,13 +1,21 @@
 const preact = require('preact');
 const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
+const { COLOUR_ICONS } = require('../utils');
 
 function Info(args) {
     const {
         info,
         sendUnequip,
+        instance,
     } = args;
     if (!info.length) return (<div className="instance-info">&nbsp;</div>);
-
+    let red = 0; let blue = 0; let green = 0;
+    instance.cryps.forEach(cryp => {
+        red += cryp.colours.red;
+        blue += cryp.colours.blue;
+        green += cryp.colours.green;
+    });
+    const teamColours = { red, blue, green };
     const [type, value] = info;
     if (type === 'item') {
         let itemDetails;
@@ -17,7 +25,7 @@ function Info(args) {
             itemDetails = SPECS[value];
         } else if (COLOURS[value]) {
             itemDetails = COLOURS[value];
-        } console.log(itemDetails);
+        }
         return (
             <div className="instance-info">
                 {value} - {itemDetails.description}
@@ -38,12 +46,34 @@ function Info(args) {
             </div>
         );
     }
+
+    function thresholds(t, spec) {
+        return (
+            SPECS[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 = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
+            const threshold = thresholds(t, value.spec);
+            return (
+                <div className="thresholds" key={i} alt={t}>
+                    {threshold}
+                </div>
+            );
+        }) : null;
         return (
             <div className="instance-info">
                 <div>
                     <div> {value.spec} </div>
                     <div> {SPECS[value.spec].description} </div>
+                    {breaks}
                 </div>
                 <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
                     unequip

client/src/components/info.container.jsx

@@ -11,7 +11,7 @@ const addState = connect(
             return ws.sendVboxUnequip(instance.instance, crypId, item);
         }
 
-        return { info, sendUnequip };
+        return { info, sendUnequip, instance };
     }
 /*
     function receiveDispatch(dispatch) {

client/src/utils.jsx

@@ -91,6 +91,12 @@ 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 },
+};
+
 module.exports = {
     stringSort,
     numSort,
@@ -99,4 +105,5 @@ module.exports = {
     NULL_UUID,
     STATS,
     SPECS,
+    COLOUR_ICONS,
 };