mobile styles

client/cryps.css

@@ -29,10 +29,12 @@ html {
 
 h1 {
     font-size: 2em;
+    margin: 0;
 }
 
 h2 {
     font-size: 1.5em;
+    margin: 0;
 }
 
 
@@ -161,7 +163,6 @@ svg {
 header {
     display: flex;
     flex-flow: row;
-    flex: 1;
 }
 
 .header-title {
@@ -205,7 +206,7 @@ header {
     display: flex;
     flex-flow: row wrap;
 
-    flex: 0 0 50%;
+    flex: 1;
 }
 
 .menu-cryp-ctr {
@@ -257,7 +258,7 @@ header {
 }
 
 .menu-instance-list {
-    flex: 0 0 50%;
+    flex: 1;
     flex-flow: row wrap;
 
     display: flex;
@@ -428,21 +429,21 @@ header {
     flex-flow: column;
 }
 
-.cryp-box .stats {
+.stats {
     flex: 0 0 20%;
     width: 100%;
     display: flex;
     border-top: 1px solid whitesmoke;
 }
 
-.cryp-box .stats figure {
+.stats figure {
     flex: 1 1 0;
     border: 0;
     align-items: center;
     padding: 0.5em 0 0 0;
 }
 
-.cryp-box .stats figcaption {
+.stats figcaption {
     font-size: 75%;
 }
 
@@ -528,7 +529,19 @@ header {
     flex: 1;
 }
 
+@media (max-width: 1000px) {
+    .selected-skills {
+        display: none;
+    }
+}
+
 @media (max-width: 800px) {
+    main {
+        flex: 1;
+        flex-flow: column;
+        justify-content: space-between;
+    }
+
     .cryps {
         font-size: 0.75em;
         padding: 0 1em;
@@ -539,23 +552,53 @@ header {
         height: unset;
     }
 
+    .cryp-box-top figure {
+        flex: 1;
+    }
+
     .menu-instance-btn {
         font-size: 1em;
     }
 
-    .cryp-list {
-        height: unset;
-        padding: 0;
+    .instance-hdr {
+        flex: unset;
+        width: 100%;
     }
 
+    .cryp-list {
+        display: flex;
+        flex-flow: row;
+
+        height: unset;
+        width: 100%;
+
+        padding: 0;
+        flex: unset;
+    }
+
+    .cryp-box {
+        margin: 0.5em;
+    }
+
+    .cryp-box .skills {
+        display: none;
+    }
+
+
     .selected-skills {
+        display: block;
+    }
+
+    .cryp-box .stats figure {
+        padding: 0.2em 0;
+    }
+
+    .stat-icon {
+        height: 1em;
+    }
+
+    .stats figcaption {
         display: none;
     }
 
 }
-
-@media (max-width: 1000px) {
-    .selected-skills {
-        display: none;
-    }
-}

client/src/components/game.component.jsx

@@ -116,8 +116,8 @@ function GamePanel(props) {
             );
         });
 
-        const stats = Object.values(STATS).map((s, i) => (
-            <figure key={i} alt={s.stat}>
+        const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
+            <figure key={j} alt={s.stat}>
                 {s.svg(`stat-icon ${s.colour}`)}
                 <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
             </figure>

client/src/components/vbox.component.jsx

@@ -29,7 +29,7 @@ function Vbox(args) {
 
     // lots of rubbish to make it flow nice
     function boundClick(i) {
-        if (reclaiming) {
+        if (reclaiming && i) {
             return sendVboxReclaim(i);
         }
 
@@ -119,7 +119,7 @@ function Vbox(args) {
     );
 
     return (
-        <div className="vbox">
+        <div className="vbox" onClick={() => setReclaiming(false)} >
             <div className="vbox-hdr">
                 <div>VBOX</div>
                 <div className="bits" >{vbox.bits}b</div>