diff --git a/client/cryps.css b/client/cryps.css index 575c936e..ea846a84 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -404,7 +404,7 @@ header { height: 0.25em; border: none; - margin: 0.5em 0; + margin: 1em 0; } .timer { @@ -739,7 +739,7 @@ table td svg { color: whitesmoke; } -.game-cryp button[disabled] { +.game-cryp button[disabled], .game-cryp button[disabled]:hover { color: #333333; font-size: 14pt; text-decoration: line-through @@ -908,7 +908,7 @@ CRYP DAMAGE main { flex: 1 1 auto; flex-flow: column; - overflow: hidden; + overflow-x: hidden; } main.game { @@ -1014,15 +1014,6 @@ CRYP DAMAGE width: 100%; } - .mobile-spacer { - flex: 1 1 25%; - flex-flow: column; - display: block; - height: 95%; - padding: 0 2em 0 2em; - justify-content: center; - } - .game .timer-container { order: 5; flex: unset; diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 6de8fa9a..7f36186e 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -89,9 +89,19 @@ function GamePanel(props) { const now = Date.now(); const end = Date.parse(game.phase_end); const timerPct = ((now - zero) / (end - zero) * 100); + const displayPct = resolution + ? 0 + : Math.min(timerPct, 100); + + const displayColour = playerTeam.ready + ? 'forestgreen' + : timerPct > 80 + ? 'red' + : 'whitesmoke'; + const timerStyles = { - width: `${timerPct < 100 && !resolution ? timerPct : 0}%`, - background: playerTeam.ready ? 'forestgreen' : 'whitesmoke', + width: `${displayPct}%`, + background: displayColour, }; const timer = ( @@ -169,7 +179,6 @@ function GamePanel(props) { {header} {timer} {PlayerTeam(playerTeam, setActiveSkill)} -