instance cryp now grid

client/cryps.css

@@ -131,7 +131,6 @@ button.action {
 }
 
 
-
 svg {
     flex: 1;
     fill: none;
@@ -162,6 +161,23 @@ table td {
     text-transform: uppercase;
 }
 
+table td svg {
+    stroke-width: 2px;
+    height: 96%;
+    vertical-align: text-bottom;
+}
+
+table .highlight {
+    background: whitesmoke;
+    color: black;
+    font-weight: bold;
+}
+
+button[disabled] {
+    color: #333;
+    border-color: #333;
+}
+
 /*
     COLOURS
 */

client/instance.css

@@ -121,17 +121,6 @@
     margin: 0;
 }
 
-table .highlight {
-    background: whitesmoke;
-    color: black;
-    font-weight: bold;
-}
-
-button[disabled] {
-    color: #333;
-    border-color: #333;
-}
-
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
     color: black;
 }
@@ -183,70 +172,76 @@ button[disabled] {
     color: black;
 }
 
-table td svg {
-    stroke-width: 2px;
-    height: 96%;
-    vertical-align: text-bottom;
-}
-
 .spacer {
     flex: 1 0 25%;
 }
 
 /* CRYP BOX */
 .instance-cryp {
-    flex: 1 1 auto;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-areas: 
+        "av av av sk sk"
+        "av av av sk sk"
+        "av av av sk sk"
+        "sp sp sp sp sp";
 
-    display: flex;
-    flex-flow: column;
-    border: 1px solid whitesmoke;
-    margin-left: 1em;
     max-width: 350px;
+    max-height: 350px;
+    margin-left: 1em;
+    border: 1px solid whitesmoke;
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
 
-.instance-cryp-top {
+.instance-cryp .avatar {
+    grid-area: av;
     display: flex;
     flex: 1 1 auto;
-    width: 100%;
     justify-content: center;
-    align-items: stretch;
 }
 
-.instance-cryp figure {
+.instance-cryp .avatar figure {
     margin: 0;
-    flex: 0 0 50%;
+    height: 75%;
     text-align: center;
     box-sizing: border-box;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-end;
 }
 
-.instance-cryp .stats {
-    flex: 0 0 20%;
-    width: 100%;
+.instance-cryp .avatar figcaption {
+    font-size: 90%;
+}
+
+.instance-cryp .specs {
+    grid-area: sp;
     display: flex;
+    flex: 1;
+    justify-content: center;
     border-top: 1px solid whitesmoke;
 }
 
-.stats figure {
-    flex: 1 1 0;
+.instance-cryp .specs figure {
+    flex: 1;
     border: 0;
     align-items: center;
     padding: 0.5em 0 0 0;
+    text-align: center;
 }
 
-.instance-cryp .stats figcaption {
+.instance-cryp .specs figcaption {
     font-size: 75%;
 }
 
 .instance-cryp .skills {
+    grid-area: sk;
     display: flex;
-    flex-flow: row wrap;
-    flex: 1 1 50%;
+    flex-flow: column;
+}
+
+.instance-cryp .skills button {
     height: 100%;
-}
+    width: 100%;
+}

client/src/components/instance.cryps.jsx

@@ -76,7 +76,9 @@ function Cryp(props) {
         }
 
         const classes = `right ${skill ? '' : 'action'}`;
-        return <button key={i} className={classes} onClick={skillClick} >{s}</button>;
+        return (
+            <button key={i} className={classes} onClick={skillClick} >{s}</button>
+        );
     });
 
     function onClick(e) {
@@ -133,16 +135,16 @@ function Cryp(props) {
 
     return (
         <div key={cryp.id} className="instance-cryp" onClick={onClick} >
-            <div className="instance-cryp-top">
+            <div className="avatar">
                 <figure className="img">
                     {crypAvatar(cryp.name)}
                     <figcaption>{cryp.name}</figcaption>
                 </figure>
-                <div className="skills">
-                    {skills}
-                </div>
             </div>
-            <div className="stats">
+            <div className="skills">
+                {skills}
+            </div>
+            <div className="specs">
                 {specs}
             </div>
         </div>

server/src/instance.rs

@@ -275,7 +275,7 @@ impl Instance {
     fn next_round(&mut self) -> &mut Instance {
         self.phase = InstancePhase::InProgress;
         self.phase_end = Utc::now()
-            .checked_add_signed(Duration::seconds(150))
+            .checked_add_signed(Duration::seconds(15000))
             .expect("could not set phase end");