isntance wip

html-client/cryps.css

@@ -1,6 +1,7 @@
 /*
     GLOBAL
 */
+
 html, body, .cryps {
     width: 100%;
     height: 100%;
@@ -25,10 +26,6 @@ html {
   box-sizing: inherit;
 }
 
-h2 {
-    font-size: 2em;
-}
-
 
 /* main container */
 .cryps {
@@ -184,7 +181,37 @@ header {
     INSTANCE
 */
 
-.green-btn:hover {
+
+.instance {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.instance-hdr {
+    display: flex;
+    flex-flow: row;
+
+    flex: 1 0 100%
+}
+
+.instance-info {
+    flex: 1 0 50%;
+}
+
+.instance .spacer {
+    flex: 1;
+}
+
+.menu-btn {
+    flex: 1 0 33%;
+}
+
+.ready-btn {
+    flex: 1 0 50%;
+}
+
+}
+.ready-btn:hover {
     transition-property: all;
     transition-duration: 2s;
     transition-timing-function: ease;
@@ -195,24 +222,35 @@ header {
 
 .instance-ui-btn {
     font-size: 100%;
-    min-width: 100%;
     padding: 0;
 }
 
+.vbox {
+    flex: 1 0 25%;
+
+    display: flex;
+    flex-flow: row wrap;
+    align-content: flex-start;
+}
+
 .vbox-hdr {
     display: flex;
     align-items: flex-end;
+
+    flex: 1 0 100%;
 }
 
-.vbox-hdr div {
+.vbox-hdr div:first-child {
     flex-grow: 1;
 }
 
-.vbox-hdr h3 {
-    margin: 0;
+.vbox-hdr .bits {
+    font-size: 2em;
+    line-height: 1em;
 }
 
 .vbox-btn {
+    flex: 1 0 100%;
     margin: 0;
     padding: 0 0.5em;
     background-color: whitesmoke;
@@ -238,7 +276,7 @@ header {
 }
 
 .spacer {
-    min-width: 100%;
+    flex: 1;
 }
 
 .cryp-list {
@@ -246,11 +284,20 @@ header {
     flex-flow: column;
 }
 
+.instance-cryp-list {
+    padding-left: 2em;
+    flex: 0 0 25%;
+
+    display: flex;
+    flex-flow: column;
+}
+
 /* CRYP BOX */
 .cryp-box {
+    flex: 0 1 auto;
+
     display: flex;
     flex-flow: row wrap;
-    justify-content: center;
     /*
         this controls the size of the box
         as it fills the whole container
@@ -311,6 +358,7 @@ header {
     margin: 0;
     border-bottom-width: 0px;
     border-left-width: 1px;
+    border-right-width: 0px;
 }
 
 .cryp-skill-btn:first-child {

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

@@ -24,17 +24,13 @@ function renderBody(props) {
     const { game, instance } = props;
     if (game) {
         return (
-            <div>
-                <GameContainer />
-            </div>
+            <GameContainer />
         );
     }
 
     if (instance) {
         return (
-            <div>
-                <InstanceContainer />
-            </div>
+            <InstanceContainer />
         );
     }
 

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

@@ -10,7 +10,6 @@ function renderHeader() {
                 cryps.gg
             </h1>
             <LoginContainer />
-            <ParticleContainer />
         </header>
     );
 }

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

@@ -19,7 +19,7 @@ function Info(args) {
     }
 
     return (
-        <div className="six columns">
+        <div className="instance-info">
             <div> {JSON.stringify(info)} </div>
             <div> {JSON.stringify(desc)} </div>
         </div>

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

@@ -81,32 +81,26 @@ function InstanceComponent(args) {
 
     return (
         <section className="instance" >
-            <div className="row">
-                <div className="three columns">
-                    <button
-                        className="instance-btn instance-ui-btn left"
-                        onClick={quit}>
-                        Menu
-                    </button>
-                </div>
-                <div className="three columns">
+            <div className="instance-hdr">
+                <button
+                    className="instance-btn instance-ui-btn menu-btn left"
+                    onClick={quit}>
+                    Menu
+                </button>
+                <div className="spacer">
                     <div>&nbsp;</div>
                 </div>
-                <div className="six columns">
-                    <button
-                        className="instance-btn instance-ui-btn green-btn"
-                        onClick={() => sendInstanceReady()}>
-                        Ready
-                    </button>
-                </div>
+                <button
+                    className="instance-btn instance-ui-btn ready-btn"
+                    onClick={() => sendInstanceReady()}>
+                    Ready
+                </button>
             </div>
-            <div className="row">
-                <VboxContainer />
-                <div className="three columns instance-cryp-list">
-                    {cryps}
-                </div>
-                <InfoContainer />
+            <VboxContainer />
+            <div className="instance-cryp-list">
+                {cryps}
             </div>
+            <InfoContainer />
         </section>
     );
 }

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

@@ -121,10 +121,10 @@ function Vbox(args) {
     );
 
     return (
-        <div className="three columns">
+        <div className="vbox">
             <div className="vbox-hdr">
                 <div>VBOX</div>
-                <h3>{vbox.bits}b</h3>
+                <div className="bits" >{vbox.bits}b</div>
             </div>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"