mob styles

client/cryps.css

@@ -38,6 +38,10 @@ h2 {
 }
 
 
+figure {
+    margin: 0;
+}
+
 /* main container */
 .cryps {
     padding: 0 2em;
@@ -397,6 +401,28 @@ header {
     justify-content: left;
 }
 
+.info-stats {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+}
+
+.info-stats .speed {
+    flex: 1 0 100%;
+}
+
+.info-stats figure {
+    flex: 0 0 30%;
+    border: 0;
+    margin: 1em 0;
+    text-align: center;
+}
+
+.info-stats .stat-icon {
+    height: 2.5em;
+}
+
+
 /* CRYP BOX */
 .cryp-box {
     flex: 1 1 100%;
@@ -573,7 +599,7 @@ header {
 
     .cryps {
         font-size: 0.75em;
-        padding: 0 1em;
+        padding: 0 0.5em;
     }
 
     /*fucken beats me why needed */
@@ -606,6 +632,10 @@ header {
         flex: unset;
     }
 
+    .instance-info {
+        flex: 1;
+    }
+
     .cryp-box {
         margin: 0.5em;
     }

client/src/components/info.component.jsx

@@ -1,6 +1,6 @@
 const preact = require('preact');
 const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
-const { COLOUR_ICONS } = require('../utils');
+const { COLOUR_ICONS, STATS } = require('../utils');
 
 function Info(args) {
     const {
@@ -83,20 +83,16 @@ function Info(args) {
     }
 
     if (type === 'cryp') {
-        const stats = [
-            { stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
-            { stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
-            { stat: 'red_damage', disp: 'Red Damage', colour: '#a52a2a' },
-            { stat: 'blue_damage', disp: 'Blue Damage', colour: '#3498db' },
-            { stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
-            { stat: 'speed', disp: 'Speed', colour: '#FFD123' },
-        ].map((s, i) => (
-            <div key={i}>{s.disp}: {value[s.stat].base} {String.fromCharCode(8594)} {value[s.stat].max}</div>
+        const cryp = value;
+        const stats = Object.values(STATS).map((s, j) => (
+            <figure key={j} alt={s.stat} className={s.stat}>
+                {s.svg(`stat-icon ${s.colour}`)}
+                <figcaption>{cryp[s.stat].value}</figcaption>
+            </figure>
         ));
         return (
             <div className="instance-info">
-                <h5>{value.name}</h5>
+                <h5>{cryp.name}</h5>
                 <div className="info-stats">
                     {stats}
                 </div>

client/src/components/instance.component.jsx

@@ -40,12 +40,12 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
         return setInfo('cryp', cryp);
     }
 
-    const specs = (cryp.specs.length > 0) ? cryp.specs.map((s, i) => (
+    const specs = cryp.specs.map((s, i) => (
         <figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
             {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
             <figcaption>{SPECS[s].caption}</figcaption>
         </figure>
-    )) : null;
+    ));
 
     return (
         <div

client/src/utils.jsx

@@ -55,13 +55,13 @@ function requestAvatar(name) {
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
-    hp: { stat: 'hp', colour: 'green', svg: shapes.square },
-    greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.diamond },
-    redShield: { stat: 'red_shield', colour: 'red', svg: shapes.hexagon },
-    redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.pentagon },
-    blueShield: { stat: 'blue_shield', colour: 'blue', svg: shapes.squircle },
-    blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
     speed: { stat: 'speed', colour: '', svg: shapes.triangle },
+    redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.circle },
+    greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.circle },
+    blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
+    redShield: { stat: 'red_shield', colour: 'red', svg: shapes.square },
+    hp: { stat: 'hp', colour: 'green', svg: shapes.square },
+    blueShield: { stat: 'blue_shield', colour: 'blue', svg: shapes.square },
 };
 
 const SPECS = {

server/WORKLOG.md

@@ -17,8 +17,13 @@
 ## NOW
 
 *CLIENT*
-show cooldowns
-icons change with %
+* general
+  * icons change with %
+* instance
+  * cryp / vbox page separation
+
+
+
 
 *SERVER*
 siphon might have a prob