kang

client/game.css

@@ -35,11 +35,12 @@
 
 
 .opponent .game-cryp {
-    grid-template-rows: 1fr 1fr 2fr;
+    align-items: flex-start;
+    grid-template-rows: min-content min-content 2fr;
     grid-template-columns: 1fr min-content 1fr;
     grid-template-areas:
         "stats  stats ."
-        "avatar effects ."
+        "effects effects ."
         "avatar target .";
 }
 
@@ -48,15 +49,14 @@
 
     /*justify-items: center;*/
     justify-items: start;
+    /*align-items: flex-end;*/
 
-    /*grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);*/
-    /*grid-template-columns: min-content minmax(0, 1fr);*/
     grid-template-rows: 1fr 2fr 1fr min-content;
     grid-template-columns: 1fr min-content 1fr;
     grid-template-areas:
         "skills skills  ."
         "avatar target  ."
-        "avatar effects ."
+        "effects effects ."
         "stats  stats   .";
 
     transition-property: all;
@@ -87,6 +87,8 @@
 
 .game-cryp figure {
     padding: 0 0.5em;
+    display: flex;
+    flex-flow: column;
 }
 
 .game-cryp figcaption {
@@ -127,6 +129,8 @@
     grid-area: effects;
     font-size: 1.5em;
     white-space: nowrap;
+    width: 100%;
+    text-align: center;
 }
 
 .game-btn {
@@ -271,6 +275,6 @@ CRYP DAMAGE
 
 .img {
     position: relative;
-    /* stops them being resized to zero because of redraws*/
     height: 100%;
+    min-width: 200px;
 }

client/src/test.game.js

@@ -362,10 +362,16 @@ const game = {
               "cd": null
             }
           ],
-          "effects": [{
+          "effects": [
+          {
             effect: "Sustain",
             duration: 2,
-          }],
+          },
+          {
+            effect: "Release",
+            duration: 2,
+          },
+          ],
           "specs": [],
           "colours": {
             "red": 0,