more wip

html-client/cryps.css

@@ -7,6 +7,8 @@ body {
     color: whitesmoke;
     font-size: 16pt;
     padding: 1em 2em;
+    overflow: hidden;
+    user-select: none;
 }
 
 button, input {
@@ -29,7 +31,7 @@ button:hover {
     MENU
 */
 .header {
-    margin-bottom: 2em;
+    margin-bottom: 1.5em;
 }
 
 .home-cryp {
@@ -142,12 +144,24 @@ button:hover {
     padding: 0;
 }
 
+.vbox-hdr {
+    display: flex;
+    align-items: flex-end;
+}
+
+.vbox-hdr div {
+    flex-grow: 1;
+}
+
+.vbox-hdr h3 {
+    margin: 0;
+}
+
 .vbox-btn {
     margin: 0;
     padding: 0.5em;
     background-color: whitesmoke;
     color: black;
-    user-select: none;
 }
 
 .vbox-btn:hover {
@@ -179,12 +193,14 @@ button:hover {
 /* CRYP BOX */
 .cryp-box {
     display: flex;
+    flex-wrap: wrap;
     padding: 0;
+    margin: 0 0 2em 0;
 }
 
 .cryp-box figure {
-    width: 50%;
-    margin: 0 0 2em 0;
+    margin: 0;
+    flex-grow: 1;
     border: 1px solid whitesmoke;
 }
 
@@ -197,10 +213,15 @@ button:hover {
 }
 
 .cryp-skill-btn {
-    font-size: 150%;
+    font-size: 125%;
     border-width: 1px;
     width: 100%;
     height: 25%;
     padding: 0;
     margin: -1px 0 0 -1px;
 }
+
+.cryp-box .stats {
+    width: 100%;
+}
+

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()}>