game.jsx changes

client/src/components/game.jsx

@@ -1,6 +1,6 @@
 const preact = require('preact');
 const key = require('keymaster');
-
+const Phaser = require('./phaser.container');
 const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
 
 function GamePanel(props) {
@@ -158,25 +158,30 @@ function GamePanel(props) {
     }
     return (
         <section className="columns">
-            <div className="column is-2 title is-1">
+            <div className="column is-1">
-                {phaseText(game.phase)}
             </div>
-            <div className="column is-4">
+            <div className="column is-6">
-                {PlayerTeam(playerTeam, setActiveSkill)}
+                <Phaser />
+                <section className="columns">
+                    <div className="column is-6">
+                        {PlayerTeam(playerTeam, setActiveSkill)}
+                    </div>            
+                    <div className="column is-6">
+                        <div>
+                            {otherTeams.map(OpponentTeam)}
+                        </div>
+                        <div>
+                            {incoming}
+                        </div>
+                    </div>
+                </section>
             </div>
-            <div className="column is-4">
+            <div className="column is-3">
-                <div>
+                <div className="title is-4">{phaseText(game.phase)}</div>
-                    {otherTeams.map(OpponentTeam)}
+                <div> log </div>
-                </div>
-                <div>
-                    {incoming}
-                </div>
-            </div>
-            <div className="column is-2">
-                <div className="title is-4">log</div>
             </div>
         </section>
-    );
+    )
 }
 
 module.exports = GamePanel;