wip

client/cryps.css

@@ -726,12 +726,16 @@ table td svg {
     margin-right: 0.5em;
 }
 
-.game-cryp button {
+.game-cryp button, .mobile-skills button {
     color: #333333;
     flex: 1 1 100%;
+    font-size: 16pt;
+    padding: 0;
+    margin: 0;
+    border-width: 0px;
 }
 
-.game-cryp button.active {
+.game-cryp button.active, .mobile-skills button {
     color: whitesmoke;
 }
 
@@ -980,6 +984,10 @@ CRYP DAMAGE
         flex: unset;
     }
 
+    .instance-cryp .skills, .instance-cryp .stats {
+        display: none;
+    }
+
     .instance-info {
         flex: 1;
     }
@@ -999,10 +1007,6 @@ CRYP DAMAGE
         width: 100%;
     }
 
-    .game-cryp .skills {
-        display: none;
-    }
-
     .mobile-spacer {
         flex: 1 1 25%;
         flex-flow: column;
@@ -1028,7 +1032,6 @@ CRYP DAMAGE
         font-size: 16pt;
         padding: 0;
         margin: 0;
-        border-width: 0px;
     }
 
     .game-cryp .stats {

client/src/components/game.component.jsx

@@ -179,18 +179,11 @@ function GamePanel(props) {
         );
     }
 
-    const mobileSkills = activeCryp && activeCryp.green_life.value
-        ? range(0, 3).map(i => <SkillBtn key={i} cryp={activeCryp} i={i} mobile={true} />)
-        : (<div/>);
-
     return (
         <main className="game" onClick={() => setActiveCryp(null)} >
             {header}
             {timer}
             {PlayerTeam(playerTeam, setActiveSkill)}
-            <div className="mobile-skills">
-                {mobileSkills}
-            </div>
             <div className="mobile-spacer">&nbsp;</div>
             {otherTeams.map(OpponentTeam)}
         </main>