cryp box

html-client/cryps.css

@@ -63,16 +63,15 @@ button:hover {
     text-align: right;
 }
 
-.ping-svg {
-    background-color: black;
-    height: 1em;
+.header-status svg {
     margin-left: 1em;
+    height: 1em;
+    background-color: black;
 }
 
 .ping-path {
-    stroke: #f5f5f5;
     fill: none;
-    stroke-width: 4;
+    stroke-width: 4px;
     stroke-dasharray: 121, 242;
     animation: pulse 2s infinite linear;
 }
@@ -194,7 +193,11 @@ button:hover {
 .cryp-box {
     display: flex;
     flex-wrap: wrap;
-    padding: 0;
+    /*
+        this controls the size of the box
+        as it fills the whole container
+    */
+    padding: 0 2em 0 0;
     margin: 0 0 2em 0;
 }
 
@@ -208,20 +211,33 @@ button:hover {
     width: 50%;
 }
 
-.cryp-skill-btn:first-child {
-    margin: 0 0 0 -1px;
-}
-
 .cryp-skill-btn {
     font-size: 125%;
     border-width: 1px;
     width: 100%;
     height: 25%;
     padding: 0;
-    margin: -1px 0 0 -1px;
+    margin: 0;
+    border-left-width: 0px;
+    border-bottom-width: 0px;
+}
+
+.cryp-skill-btn:last-child {
+    border-bottom-width: 1px;
 }
 
 .cryp-box .stats {
+    display: flex;
     width: 100%;
+    text-align: center;
 }
 
+.cryp-box .stats figure {
+    border-top-width: 0;
+    flex: 1 1 0;
+}
+
+.cryp-box .stats svg {
+    height: 1em;
+    stroke-width: 2px;
+}

html-client/src/components/instance.component.jsx

@@ -1,24 +1,33 @@
 const preact = require('preact');
 // const key = require('keymaster');
+const range = require('lodash/range');
 
 const VboxContainer = require('./vbox.container');
 const molecule = require('./molecule');
+const saw = require('./saw.component');
 
 function Cryp(cryp) {
-    const skills = cryp.skills.map((s, i) => (
-        <button key={i} className="cryp-skill-btn" >{s.skill}</button>
-    ));
+    const skills = range(0, 4).map((i) => {
+        const s = cryp.skills[i]
+            ? cryp.skills[i].skill
+            : (<span>&nbsp;</span>);
+
+        return <button key={i} className="cryp-skill-btn" >{s}</button>;
+    });
 
     const stats = [
-        'hp',
-        'green_damage',
-        'red_shield',
-        'red_damage',
-        'blue_damage',
-        'blue_shield',
-        'speed',
+        { stat: 'hp', colour: '#1FF01F' },
+        { stat: 'green_damage', colour: '#1FF01F' },
+        { stat: 'red_shield', colour: '#a52a2a' },
+        { stat: 'red_damage', colour: '#a52a2a' },
+        { stat: 'blue_shield', colour: '#3498db' },
+        { stat: 'blue_damage', colour: '#3498db' },
+        { stat: 'speed', colour: '#FFD123' },
     ].map((s, i) => (
-        <span key={i} >{cryp[s].stat} {cryp[s].value}</span>
+        <figure key={i} >
+            {saw(s.colour)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
     ));
 
     return (
@@ -46,7 +55,7 @@ function InstanceComponent(args) {
 
     if (!instance) return <div>...</div>;
 
-    let cryps = instance.cryps.map(Cryp);
+    const cryps = instance.cryps.map(Cryp);
 
     return (
         <section>

html-client/src/components/login.component.jsx

@@ -1,14 +1,13 @@
 // eslint-disable-next-line
 const preact = require('preact');
 
+const saw = require('./saw.component');
+
 function renderLogin({ account, submitLogin, submitRegister }) {
     if (account) return (
         <div className="header-status">
             <h3 className="header-username">{account.name}</h3>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" className="ping-svg">
-              <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
-              <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
-            </svg>
+            {saw('whitesmoke')}
         </div>
     );
 

html-client/src/components/saw.component.jsx

@@ -0,0 +1,10 @@
+const preact = require('preact');
+
+module.exports = function saw(colour) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={{ stroke: colour }}>
+          <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
+          <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
+        </svg>
+    );
+}