more wip

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

@@ -6,16 +6,32 @@ const molecule = require('./molecule');
 
 function Cryp(cryp) {
     const skills = cryp.skills.map((s, i) => (
-        <button className="cryp-skill-btn" >{s.skill}</button>
+        <button key={i} className="cryp-skill-btn" >{s.skill}</button>
     ));
+
+    const stats = [
+        'hp',
+        'green_damage',
+        'red_shield',
+        'red_damage',
+        'blue_damage',
+        'blue_shield',
+        'speed',
+    ].map((s, i) => (
+        <span key={i} >{cryp[s].stat} {cryp[s].value}</span>
+    ));
+
     return (
         <div className="cryp-box">
-            <figure className="cryp-img">
+            <figure className="img">
                 {molecule}
             </figure>
             <div className="skills">
                 {skills}
             </div>
+            <div className="stats">
+                {stats}
+            </div>
         </div>
     );
 }
@@ -43,7 +59,7 @@ function InstanceComponent(args) {
                     </button>
                 </div>
                 <div className="six columns">
-                    <h4>next game against: mmmmmashy</h4>
+                    <div>&nbsp;</div>
                 </div>
                 <div className="three columns">
                     <button

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

@@ -71,7 +71,10 @@ function Vbox(args) {
 
     return (
         <div className="three columns">
-            <h3>VBOX <span className="u-pull-right">{vbox.bits}b</span></h3>
+            <div className="vbox-hdr">
+                <div>VBOX</div>
+                <h3>{vbox.bits}b</h3>
+            </div>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxDiscard()}>