position absolute game

client/assets/styles/game.less

@@ -3,13 +3,13 @@
 
 .game {
     overflow: hidden;
-    display: grid;
-    grid-template-rows: 1fr 0.75fr 1.5fr;
-    grid-template-columns: 1fr;
-    grid-template-areas:
-        "opponent"
-        "target  "
-        "player  ";
+    // display: grid;
+    // grid-template-rows: 1fr 0.75fr 1.5fr;
+    // grid-template-columns: 1fr;
+    // grid-template-areas:
+    //     "opponent"
+    //     "target  "
+    //     "player  ";
 }
 
 .game .team {
@@ -24,11 +24,22 @@
 .player {
     grid-area: player;
     z-index: 5;
+
+    position: absolute;
+    bottom: 0;
+    height: 50%;
+    width: 90%;
 }
 
 .opponent {
     grid-area: opponent;
 
+    position: absolute;
+    top: 0;
+    height: 35%;
+    width: 90%;
+    margin-top: 0.5em;
+
     .game-construct {
         align-items: flex-start;
         grid-template-columns: 1fr 2fr;
@@ -178,12 +189,19 @@
 
 #targeting {
     grid-area: target;
-    height: 100%;
-    width: 100%;
+    // height: 100%;
+    // width: 100%;
     stroke-width: 2px;
     stroke: whitesmoke;
 }
 
+#targeting, .resolving-skill {
+    position: absolute;
+    top: 35%;
+    height: 15%;
+    width: 90%;
+}
+
 .resolving-skill {
     grid-area: target;
     align-self: center;
@@ -381,6 +399,11 @@
             }
         }
 
+        .player {
+            bottom: 10%;
+            height: 40%;
+        }
+
         .opponent {
             .game-construct {
                 display: grid;

client/src/components/instance.component.jsx

@@ -93,8 +93,6 @@ class Instance extends Component {
         if (!instance) return setTimeout(this.bindSwipes, 50);
         if (this.h) this.h.destroy();
         this.h = new Hammer(instance);
-        const display = ['vbox', 'c0', 'c1', 'c2'];
-
         this.h.on('swiperight', () => {
             const {
                 navInstance,
@@ -111,6 +109,7 @@ class Instance extends Component {
             setNavInstance((navInstance + 1) % 4);
         });
 
+        console.log('hammer gestures bound');
         return true;
     }
 }