game wip

html-client/cryps.css

@@ -373,7 +373,19 @@ header {
 
 .game {
     display: flex;
-    height: 100%;
+    flex-flow: row wrap;
+}
+
+.game-back-btn {
+    flex: 0 0 25%;
+}
+
+.team-player, .team-opponent {
+    flex: 0 0 37.5%;
+}
+
+.logs {
+    flex: 25%;
 }
 
 .game-cryp-ctr {

html-client/src/components/game.component.jsx

@@ -125,7 +125,7 @@ function GamePanel(props) {
         const cryps = team.cryps.map(c => Cryp(c));
 
         return (
-            <div className="five columns cryp-list">
+            <div className="team-player cryp-list">
                 {cryps}
             </div>
         );
@@ -173,29 +173,27 @@ function GamePanel(props) {
     const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
 
     return (
-        <section>
+        <main>
-            <div className="row">
+            <div className="game">
-                <div className="three columns">
+                <div className="instance-hdr">
                     <button
-                        className="instance-btn instance-ui-btn left"
+                        className="game-back-btn instance-btn instance-ui-btn left"
                         onClick={quit}>
                         Back
                     </button>
+                    <div className="spacer">
+                        <div>&nbsp;</div>
+                    </div>
                 </div>
-                <div className="six columns">
-                    <div>&nbsp;</div>
-                </div>
-            </div>
-            <div className="row game">
                 {PlayerTeam(playerTeam, setActiveSkill)}
-                <div className="three columns">
+                <div className="team-opponent">
                     {otherTeams.map(OpponentTeam)}
                 </div>
-                <div className="four columns">
+                <div className="logs">
                     {logs}
                 </div>
             </div>
-        </section>
+        </main>
     );
 }