From 5cfd3db4c68c50c7978bb8ef5560980621138b7d Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Fri, 3 May 2019 19:25:14 +1000
Subject: [PATCH] stuff for mobile

---
 client/cryps.css                           | 15 +++------------
 client/src/components/game.component.jsx   | 15 ++++++++++++---
 client/src/components/skill.btn.jsx        |  2 +-
 client/src/components/targeting.arrows.jsx |  2 +-
 4 files changed, 17 insertions(+), 17 deletions(-)

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)}
-            <div className="mobile-spacer">&nbsp;</div>
             <TargetingArrows />
             {otherTeams.map(OpponentTeam)}
         </main>
diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx
index 788a0d39..5627e368 100644
--- a/client/src/components/skill.btn.jsx
+++ b/client/src/components/skill.btn.jsx
@@ -53,7 +53,7 @@ function Skill(props) {
         : '';
 
     const cdText = cryp.skills[i].cd > 0
-        ? `- ${s.cd}`
+        ? `- ${s.cd}T`
         : '';
 
     const highlight = activeSkill
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 11266a6d..214075cb 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -56,7 +56,7 @@ function TargetSvg(args) {
         : outgoing.map(getPath);
 
     return (
-        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg">
+        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg" transform='rotate(-90)'>
             {arrows}
         </svg>
     );