From 9c1f0ba9e9b2e2f83fc13b89d763525cd2b2c5e9 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 8 Oct 2019 12:52:22 +1100
Subject: [PATCH] position absolute game

---
 client/assets/styles/game.less               | 41 +++++++++++++++-----
 client/src/components/instance.component.jsx |  3 +-
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less
index 8ea9ddf3..0e2c87e2 100644
--- a/client/assets/styles/game.less
+++ b/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;
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 0da7dced..56aa0e7d 100644
--- a/client/src/components/instance.component.jsx
+++ b/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;
     }
 }