diff --git a/client/cryps.css b/client/cryps.css index 0c3e9720..f32e2f37 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -656,17 +656,11 @@ table td svg { } .game-cryp figure { - margin: 0; - flex: 0 0 50%; text-align: center; - display: flex; - flex-flow: column; - justify-content: flex-end; } .game-cryp .stats { - flex: 1 0 25%; - align-items: flex-start; + flex: 1 0 20%; display: flex; flex-flow: row wrap; } @@ -689,6 +683,10 @@ table td svg { height: 100%; } +.resolving .skills button { + display: none; +} + .game-cryp .effects { max-height: 100%; font-size: 1.5em; @@ -984,6 +982,10 @@ CRYP DAMAGE flex: unset; } + .instance-cryp .stats figure { + padding: 0.2em 0; + } + .instance-cryp .skills, .instance-cryp .stats { display: none; } diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index f7f0f061..b941b723 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -138,7 +138,7 @@ function GamePanel(props) { const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
{s.svg(`stat-icon ${s.colour}`)} -
{cryp[s.stat].value} / {cryp[s.stat].max}
+
1000 / 1000
)); @@ -179,8 +179,10 @@ function GamePanel(props) { ); } + const gameClasses = `game ${resolution ? 'resolving': ''}`; + return ( -
setActiveCryp(null)} > +
setActiveCryp(null)} > {header} {timer} {PlayerTeam(playerTeam, setActiveSkill)}