diff --git a/client/game.css b/client/game.css index 3c425812..a126db73 100644 --- a/client/game.css +++ b/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; } diff --git a/client/src/test.game.js b/client/src/test.game.js index 75267b30..b5d3a648 100644 --- a/client/src/test.game.js +++ b/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,