diff --git a/client/game.css b/client/game.css index 2ff6599c..3c425812 100644 --- a/client/game.css +++ b/client/game.css @@ -35,10 +35,11 @@ .opponent .game-cryp { - grid-template-rows: 1fr 2fr 1fr; + grid-template-rows: 1fr 1fr 2fr; grid-template-columns: 1fr min-content 1fr; grid-template-areas: - "stats stats effects" + "stats stats ." + "avatar effects ." "avatar target ."; } @@ -50,12 +51,13 @@ /*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-rows: 1fr 2fr 1fr; grid-template-areas: - "skills . ." - "avatar target ." - "stats stats effects"; + "skills skills ." + "avatar target ." + "avatar effects ." + "stats stats ."; transition-property: all; transition-duration: 0.5s; @@ -122,6 +124,7 @@ */ .game-cryp .effects { + grid-area: effects; font-size: 1.5em; white-space: nowrap; } diff --git a/client/src/test.game.js b/client/src/test.game.js index 6e200088..75267b30 100644 --- a/client/src/test.game.js +++ b/client/src/test.game.js @@ -362,7 +362,10 @@ const game = { "cd": null } ], - "effects": [], + "effects": [{ + effect: "Sustain", + duration: 2, + }], "specs": [], "colours": { "red": 0, @@ -439,7 +442,10 @@ const game = { "cd": null } ], - "effects": [], + "effects": [{ + effect: "Release", + duration: 2, + }], "specs": [], "colours": { "red": 0, @@ -506,7 +512,10 @@ const game = { "cd": null } ], - "effects": [], + "effects": [{ + effect: "Decay", + duration: 2, + }], "specs": [], "colours": { "red": 0,