mostly working

client/assets/styles/instance.css

@@ -125,11 +125,11 @@
 
 .cryp-list {
     grid-area: cryps;
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr;
+    flex: 1 1 auto;
 }
 
-.instance-cryp {
+.instance-cryp, .instance-cryp-active {
     display: grid;
     grid-template-rows: min-content min-content min-content 250px min-content;
     grid-template-areas:
@@ -152,49 +152,50 @@
     margin-left: 0;
 }
 
-.instance-cryp .name {
+.cryp-list .name {
     grid-area: name;
     margin-bottom: 0.5em;
 }
 
-.instance-cryp .avatar {
+.cryp-list .avatar {
     grid-area: avatar;
     display: flex;
     flex: 1 1 auto;
 }
 
-.instance-cryp img {
+.cryp-list img {
     justify-self: center;
     grid-area: avatar;
     min-width: 150px;
 }
 
-.instance-cryp .name {
+.cryp-list .name {
     text-align: center;
 }
 
-.instance-cryp .avatar figure {
+.cryp-list .avatar figure {
     margin: 0;
     height: 80%;
     text-align: center;
     box-sizing: border-box;
 }
 
-.instance-cryp .avatar figcaption {
+.cryp-list .avatar figcaption {
     font-size: 90%;
 }
 
-.instance-cryp .skills {
+.cryp-list .skills {
     grid-area: skills;
     display: flex;
     border-width: 0px;
 }
 
-.instance-cryp .skills button {
+.cryp-list .skills button {
     flex: 1;
     border-width: 0px;
 }
 
+
 /*button.action {
     animation: action 1s infinite ease-in-out alternate;
 }
@@ -208,7 +209,7 @@
     }
 }
 */
-.instance-cryp .specs {
+.cryp-list .specs {
     margin-top: 1em;
     grid-area: specs;
     display: flex;
@@ -217,18 +218,18 @@
     border-width: 0px;
 }
 
-.instance-cryp .specs figure {
+.cryp-list .specs figure {
     flex: 1;
     border: 0;
     align-items: center;
     text-align: center;
 }
 
-.instance-cryp .specs figcaption {
+.cryp-list .specs figcaption {
     font-size: 75%;
 }
 
-.instance-cryp .stats {
+.cryp-list .stats {
     grid-area: stats;
     display: grid;
     grid-template-rows: 1fr 3fr;
@@ -239,11 +240,11 @@
     border-width: 0px;
 }
 
-.instance-cryp .stats figcaption {
+.cryp-list .stats figcaption {
     font-size: 75%;
 }
 
-.instance-cryp .stats .icons {
+.cryp-list .stats .icons {
     grid-area: st;
     display: flex;
     flex-flow: row;
@@ -261,25 +262,25 @@
     fill: none;
 }
 
-.instance-cryp .stat-icon {
+.cryp-list .stat-icon {
     width: 100%;
 }
 
-.instance-cryp .stats .damage-label {
+.cryp-list .stats .damage-label {
     grid-area: dl;
     display: flex;
     justify-content: center;
     color: #666;
 }
 
-.instance-cryp .stats .speed-label {
+.cryp-list .stats .speed-label {
     grid-area: sl;
     display: flex;
     justify-content: center;
     color: #666;
 }
 
-.instance-cryp .stats .life-label {
+.cryp-list .stats .life-label {
     grid-area: ll;
     display: flex;
     justify-content: center;

client/assets/styles/instance.mobile.css

@@ -2,42 +2,17 @@
     .instance {
         display: grid;
         grid-template-columns: 100%;
-        grid-template-rows: min-content min-content min-content min-content;
+        grid-template-rows: repeat(4, min-content);
         grid-template-areas:
             "top"
             "controls"
             "first"
             "second"
     }
-
+    /* Default view */
     .instance .equip { display: none; }
     .instance .info { display: none; }
     .instance .cryp-list { display: none; }
-     #toggle-vbox-label {
-        text-align: center;
-        border: 2px solid #555;
-     }
-     #toggle-vbox-label:after{
-        content: "Cryps";
-    }
-
-    #toggle-vbox:checked ~ #toggle-vbox-label:after{
-        content: "Vbox";
-    }
-
-    #toggle-vbox:checked ~ .vbox { display: none; }
-    #toggle-vbox:checked ~ .cryp-list { 
-        display: initial; 
-        grid-area: second;
-    }
-    #toggle-vbox:checked ~ .equip { 
-        display: initial;
-        grid-area: first;
-    }
-
-
-
-
     .vbox {
         grid-area: first;
         display: grid;
@@ -56,6 +31,34 @@
     .vbox-combiner {
         margin-left: 0;
     }
+    /* Toggled view (cryps)*/
+    #toggle-vbox-label {
+        text-align: center;
+        border: 2px solid #555;
+     }
+     #toggle-vbox-label:after{
+        content: "Cryps";
+    }
+
+    #toggle-vbox:checked ~ #toggle-vbox-label:after{
+        content: "Vbox";
+    }
+
+    #toggle-vbox:checked ~ .vbox { display: none; }
+    #toggle-vbox:checked ~ .equip { 
+        grid-area: first;
+        display: initial;
+    }
+    
+    #toggle-vbox:checked ~ .cryp-list { 
+        grid-area: second;
+        display: flex;
+        justify-content: center;
+        flex-flow: row wrap;
+        flex: 1;
+        width: 100%;
+    }
+
 
     #toggle-vbox { display: none; }
 
@@ -69,5 +72,69 @@
         margin-right: 0.5em;
     }
 
+    .cryp-list .skills {
+        flex-flow: row;
+        align-items: stretch;
+    }
+
+    .instance-cryp {
+        flex: 1;
+        display: grid;
+        grid-template-rows: min-content min-content;
+        grid-template-areas:
+            "name   "
+            "avatar "
+        /*margin: 0 2em;*/
+        padding: 0.5em;
+        border: 2px solid #222;
+        transition-property: all;
+        transition-duration: 0.5s;
+        transition-delay: 0;
+        transition-timing-function: ease;
+    }
+    .instance-cryp img {
+        width: 35px;
+    }
+
+    .instance-cryp .skills {
+        display: none;
+    }
+
+    .instance-cryp .specs {
+        display: none;
+    }
+
+    .instance-cryp .stats {
+        display: none;
+    }
+
+
+    .instance-cryp-active {
+        flex: 1;
+        order: 3;
+        display: grid;
+        grid-template-rows: min-content min-content min-content min-content min-content;
+        grid-template-areas:
+            "name   "
+            "skills "
+            "specs  "
+            "avatar "
+            "stats  ";
+
+        /*margin: 0 2em;*/
+        padding: 0.5em;
+        border: 2px solid #222;
+        transition-property: all;
+        transition-duration: 0.5s;
+        transition-delay: 0;
+        transition-timing-function: ease;
+    }
+
+    .instance-cryp-active img {
+        width: 55px;
+    }
+
+
+    /* Cryp Stuff */
 
 }

client/assets/styles/styles.css

@@ -508,10 +508,6 @@ main .top {
     svg {
         height: 1em;
     }
-
-    .instance-cryp .skills {
-        flex-flow: column;
-    }
 }
 
 /* Mobile Nav*/

client/src/components/instance.cryps.jsx

@@ -8,7 +8,7 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar } = state;
+        const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar, activeCryp } = state;
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.id);
@@ -18,7 +18,7 @@ const addState = connect(
             return ws.sendVboxApply(instance.id, crypId, i);
         }
 
-        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar, activeCryp };
     },
 
     function receiveDispatch(dispatch) {
@@ -49,6 +49,7 @@ const addState = connect(
 
 function Cryp(props) {
     const {
+        activeCryp,
         activeVar,
         cryp,
         player,
@@ -137,6 +138,8 @@ function Cryp(props) {
             <figcaption>{cryp[s.stat].value}</figcaption>
         </figure>
     ));
+    const activeId = activeCryp ? activeCryp.id : false;
+    const crypClass = activeId === cryp.id ? 'instance-cryp-active' : 'instance-cryp';
 
     // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
     // const colours = mapValues(cryp.colours, c => {
@@ -152,7 +155,7 @@ 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 key={cryp.id} className={crypClass} onClick={onClick} >
             {crypAvatar(cryp.name)}
             <h2 className="name" >{cryp.name}</h2>
             <div className="skills">
@@ -181,6 +184,7 @@ function Cryp(props) {
 
 function InstanceCryps(props) {
     const {
+        activeCryp,
         activeVar,
         player,
         instance,
@@ -198,7 +202,7 @@ function InstanceCryps(props) {
     if (instance.phase === 'Lobby') return false;
 
     const cryps = player.cryps.map((c, i) => Cryp({
-        activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
+        activeCryp, activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
     const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;