instance wip

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;

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>
+            <div className="name" >{cryp.name}</div>
             <div className="skills">
                 {skills}
             </div>

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>

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';
 

client/styles.css

@@ -23,7 +23,7 @@ html, body, main {
     /*padding: 0 20%;*/
 
     /* stops inspector going skitz*/
-    overflow: hidden;
+    /*overflow: hidden;*/
 }
 
 html {