From bab62afba237f26136ede221981e2fea5c6795e0 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 16 May 2019 18:12:35 +1000
Subject: [PATCH] wip

---
 client/instance.css                      | 75 +++++++++++++-----------
 client/src/components/instance.cryps.jsx | 10 ++--
 client/src/components/instance.equip.jsx | 11 +---
 client/src/components/vbox.component.jsx |  6 +-
 client/src/socket.jsx                    |  3 +-
 client/styles.css                        | 19 ++----
 6 files changed, 58 insertions(+), 66 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index fdd7d1a2..918a1854 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -73,8 +73,8 @@
     flex: 1 0 100%;
 }
 
-.vbox-hdr div:first-child {
-    flex-grow: 1;
+.vbox-hdr h3 {
+    flex: 1;
 }
 
 .vbox-hdr .bits {
@@ -117,15 +117,16 @@
 
 .instance-cryp {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: min-content 1fr min-content min-content;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content min-content min-content min-content min-content min-content;
     grid-template-areas:
-        "specs  specs"
-        "avatar skills"
-        "name   skills"
-        "stats  stats";
-    margin-left: 1em;
-    border: 1px solid whitesmoke;
+        "name   "
+        "avatar "
+        "skills"
+        "stats  "
+        "specs  ";
+    margin: 0 2em;
+    /*border: 1px solid whitesmoke;*/
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
@@ -170,22 +171,36 @@
 .instance-cryp .skills {
     grid-area: skills;
     display: flex;
-    flex-flow: column;
-    min-width: 150px;
+    flex-flow: row;
+    border-width: 0px;
 }
 
 .instance-cryp .skills button {
     height: 100%;
     width: 100%;
     padding: 10px;
+    border-width: 0px;
 }
 
+/*button.action {
+    animation: action 1s infinite ease-in-out alternate;
+}
+
+@keyframes action {
+    0% {
+        box-shadow: inset 0 0 0 0 whitesmoke;
+    }
+    100% {
+        box-shadow: inset 0.5em 0 0 0 whitesmoke;
+    }
+}
+*/
 .instance-cryp .specs {
     grid-area: specs;
     display: flex;
     flex: 1;
     justify-content: center;
-    border-bottom: 1px solid whitesmoke;
+    border-width: 0px;
 }
 
 .instance-cryp .specs figure {
@@ -208,7 +223,7 @@
     grid-template-areas:
         "dl sl ll"
         "st st st";
-    border-top: 1px solid whitesmoke;
+    border-width: 0px;
 }
 
 .instance-cryp .stats figcaption {
@@ -257,38 +272,32 @@
 
 
 /* Equipment */
-.instance-equip {
-    grid-area: e;
+.equip {
     display: flex;
-    min-height: 15%;
-    padding-bottom: 1em;
+    margin: 1em 0;
 }
 
-.instance-equip .items {
+.equip .specs {
     display: flex;
-    flex: 1 1 100%;
+    flex: 1;
 }
 
-.instance-equip .label {
-    display: flex;
-    font-size: 20pt;
-
+.label {
+    flex: 1 0 100%;
 }
-.instance-equip .skills {
+
+.equip .skills {
     display: flex;
+    flex: 1;
     flex-direction: column;
 }
 
-.instance-equip .skills button {
+.equip .skills button {
     flex: 1 1 100%;
     color: whitesmoke;
     font-size: 16pt;
     padding: 5px;
     border-width: 0px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    border-right-width: 1px;
-    border-top-width: 1px;
     height: 100%;
 
 }
@@ -310,13 +319,13 @@ button.equip {
 }
 
 
-.instance-equip .specs {
+.equip .specs {
     display: flex;
     padding-left: 5%;
     flex-direction: column;
 }
 
-.instance-equip .specs figure {
+.equip .specs figure {
     flex: 1;
     border: 0;
     padding: 0.5em 1em 0 0;
@@ -340,6 +349,6 @@ button.equip {
 }
 
 
-.instance-equip .specs figcaption {
+.equip .specs figcaption {
     font-size: 75%;
 }
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index e291a04c..7a1663de 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -111,7 +111,7 @@ function Cryp(props) {
         if (!s) {
             const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray';
             return (
-                <figure key={i} onClick={blankSpecClick}>
+                <figure key={i} onClick={blankSpecClick} className={equip} >
                     {shapes.diamond(`stat-icon ${equip}`)}
                     <figcaption>+</figcaption>
                 </figure>
@@ -155,7 +155,7 @@ function Cryp(props) {
     return (
         <div key={cryp.id} className="instance-cryp" onClick={onClick} >
             {crypAvatar(cryp.name)}
-            <div className="name" >{cryp.name}</div>
+            <h2 className="name" >{cryp.name}</h2>
             <div className="skills">
                 {skills}
             </div>
@@ -163,13 +163,13 @@ function Cryp(props) {
                 {specs}
             </div>
             <div className="stats">
-                <div className="damage-label">
+                <div className="damage-label label">
                     Damage
                 </div>
-                <div className="speed-label">
+                <div className="speed-label label">
                     Speed
                 </div>
-                <div className="life-label">
+                <div className="life-label label">
                     Life
                 </div>
                 <div className="icons">
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index 790d1231..a8a77ade 100644
--- a/client/src/components/instance.equip.jsx
+++ b/client/src/components/instance.equip.jsx
@@ -74,23 +74,16 @@ function Equipment(props) {
         } return false;
     });
 
-    const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
-    const specLabel = specs.every(i => i === false) ? '' : 'Specs';
-
     return (
         <div className="equip" >
             <div className="skills">
-                <div className="label">
-                    {skillLabel}
-                </div>
+                <h3>Skills</h3>
                 <div className ="items">
                     {skills}
                 </div>
             </div>
             <div className="specs">
-                <div className="label">
-                    {specLabel}
-                </div>
+                <h3>Specs</h3>
                 <div className ="items">
                     {specs}
                 </div>
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index b6e051f4..1e5853ae 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -218,7 +218,7 @@ function Vbox(args) {
         <div className={classes}>
             <div className='vbox-box' onClick={() => setReclaiming(false)} >
                 <div className="vbox-hdr">
-                    <div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div>
+                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
                     <div className="bits" >{vbox.bits}b</div>
                 </div>
                 <button
@@ -233,7 +233,7 @@ function Vbox(args) {
                 </table>
             </div>
             <div className='vbox-inventory' onClick={() => setReclaiming(false)} >
-                <span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span>
+                <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                 <button
                     className={reclaimClass}
                     onClick={reclaimClick}>
@@ -246,7 +246,7 @@ function Vbox(args) {
                 </table>
             </div>
             <div className="vbox-combiner">
-                <span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
+                <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
                 <button
                     className="instance-btn instance-ui-btn vbox-btn"
                     onClick={() => sendVboxCombine()}>
diff --git a/client/src/socket.jsx b/client/src/socket.jsx
index 77922fd5..d6847e9e 100644
--- a/client/src/socket.jsx
+++ b/client/src/socket.jsx
@@ -311,9 +311,8 @@ function createSocket(events) {
                 events.setAccount(account);
                 sendAccountInstances();
                 sendAccountCryps();
-                // console.log(testGame);
                 // events.setGame(testGame(account.id));
-                clearGameStateTimeout();
+                // clearGameStateTimeout();
             }
 
             sendPing();
diff --git a/client/styles.css b/client/styles.css
index 1a24dd33..32338495 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -46,6 +46,11 @@ h2 {
     margin: 0;
 }
 
+h3 {
+    font-size: 1.25em;
+    margin: 0;
+}
+
 figure {
     margin: 0;
 }
@@ -151,20 +156,6 @@ button.left:hover, button.left:focus {
     box-shadow: inset 0.5em 0 0 0 whitesmoke;
 }
 
-button.action {
-    animation: action 1s infinite ease-in-out alternate;
-}
-
-@keyframes action {
-    0% {
-        box-shadow: inset 0 0 0 0 whitesmoke;
-    }
-    100% {
-        box-shadow: inset 0.5em 0 0 0 whitesmoke;
-    }
-}
-
-
 svg {
     fill: none;
     stroke: whitesmoke;