From 4280f52781013250a197a91c324427220c3970aa Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 16 May 2019 16:25:52 +1000
Subject: [PATCH] instance wip

---
 client/instance.css                      | 27 ++++++++++++++++--------
 client/src/components/instance.cryps.jsx |  8 ++-----
 client/src/components/nav.jsx            |  1 -
 client/src/socket.jsx                    |  2 +-
 client/styles.css                        |  2 +-
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index c8ec09e4..984e4917 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -147,30 +147,39 @@
 .instance-cryp {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: min-content auto min-content;
+    grid-template-rows: min-content 1fr min-content min-content;
     grid-template-areas:
-        "sp sp"
-        "av sk"
-        "st st";
+        "specs  specs"
+        "avatar skills"
+        "name   skills"
+        "stats  stats";
     margin-left: 1em;
     border: 1px solid whitesmoke;
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
-    max-height: 450px;
+    /*max-height: 450px;*/
 }
 
 .instance-cryp:first-child {
     margin-left: 0;
 }
 
+.instance-cryp .name {
+    grid-area: name;
+}
+
 .instance-cryp .avatar {
-    grid-area: av;
+    grid-area: avatar;
     display: flex;
     flex: 1 1 auto;
 }
 
+.instance-cryp img {
+    grid-area: avatar;
+}
+
 .instance-cryp .avatar figure {
     margin: 0;
     height: 80%;
@@ -183,7 +192,7 @@
 }
 
 .instance-cryp .skills {
-    grid-area: sk;
+    grid-area: skills;
     display: flex;
     flex-flow: column;
     min-width: 150px;
@@ -196,7 +205,7 @@
 }
 
 .instance-cryp .specs {
-    grid-area: sp;
+    grid-area: specs;
     display: flex;
     flex: 1;
     justify-content: center;
@@ -216,7 +225,7 @@
 }
 
 .instance-cryp .stats {
-    grid-area: st;
+    grid-area: stats;
     display: grid;
     grid-template-rows: 1fr 3fr;
     grid-template-columns: 3fr 1fr 3fr;
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index b904759d..cdc22d85 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -154,12 +154,8 @@ function Cryp(props) {
     // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
     return (
         <div key={cryp.id} className="instance-cryp" onClick={onClick} >
-            <div className="avatar">
-                <figure className="img">
-                    {crypAvatar(cryp.name)}
-                    <figcaption>{cryp.name}</figcaption>
-                </figure>
-            </div>
+            {crypAvatar(cryp.name)}
+            <div className="name" >{cryp.name}</div>
             <div className="skills">
                 {skills}
             </div>
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index afe5821f..b2cfba05 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -35,7 +35,6 @@ function Nav(args) {
         <nav>
             <h2>Instances</h2>
             <button>list</button>
-            <button>create</button>
             <hr />
             {joined}
         </nav>
diff --git a/client/src/socket.jsx b/client/src/socket.jsx
index a490a28c..77922fd5 100644
--- a/client/src/socket.jsx
+++ b/client/src/socket.jsx
@@ -1,7 +1,7 @@
 const toast = require('izitoast');
 const cbor = require('borc');
 
-// const testGame = require('./test.game');
+const testGame = require('./test.game');
 
 const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://cryps.gg/ws' : 'ws://localhost:40000';
 
diff --git a/client/styles.css b/client/styles.css
index d47e7366..7d81d5fd 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -23,7 +23,7 @@ html, body, main {
     /*padding: 0 20%;*/
 
     /* stops inspector going skitz*/
-    overflow: hidden;
+    /*overflow: hidden;*/
 }
 
 html {