From 26136e23f541647fb927578d3f09ddcd845a1772 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 2 Apr 2019 15:24:33 +1100
Subject: [PATCH] game wip

---
 html-client/cryps.css                         | 14 ++++++++++-
 html-client/src/components/game.component.jsx | 24 +++++++++----------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/html-client/cryps.css b/html-client/cryps.css
index a70ccdfe..d2c585f5 100755
--- a/html-client/cryps.css
+++ b/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 {
diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx
index 1bf0dab9..0f80e7d2 100644
--- a/html-client/src/components/game.component.jsx
+++ b/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>
-            <div className="row">
-                <div className="three columns">
+        <main>
+            <div className="game">
+                <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>
     );
 }