From 5e48a58c02f4c4b271db22fdc18887728ed32d6e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 15 May 2019 14:00:21 +1000
Subject: [PATCH 1/5] header -> top

---
 client/instance.css                          | 12 +-----------
 client/src/components/game.component.jsx     |  2 +-
 client/src/components/instance.component.jsx |  4 ++--
 client/styles.css                            |  6 ++++++
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index e3fe1ce4..a841c2e9 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -6,12 +6,6 @@
     height: 100%;
 }
 
-.instance-hdr {
-    display: flex;
-    flex-flow: column;
-    flex: 1;
-}
-
 .instance-info {
     flex: 0 1 50%;
     padding-left: 1em;
@@ -46,11 +40,7 @@
     flex-flow: row wrap;
 }
 
-.ready-btn {
-    flex: 1 0 50%;
-}
-
-.ready-btn:hover {
+.ready:hover {
     transition-property: all;
     transition-duration: 0.5s;
     transition-timing-function: ease;
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index aeea8df6..66146f6a 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -52,7 +52,7 @@ function GamePanel(props) {
     }
 
     const header = (
-        <div className="ready">
+        <div className="top">
             <button
                 className="game-btn instance-btn instance-ui-btn right"
                 onClick={() => sendGameReady()}>
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index d10380fd..5c08c07e 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -18,7 +18,7 @@ function InstanceComponent(args) {
 
     if (!instance) return false;
 
-    const rdyClasses = `instance-btn instance-ui-btn ready-btn ${player.ready ? 'ready' : ''}`;
+    const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
     const readyBtn = (
         <button
             className={rdyClasses}
@@ -49,7 +49,7 @@ function InstanceComponent(args) {
 
     return (
         <section className="instance" >
-            <div className="instance-hdr">
+            <div className="top">
                 {actionBtn}
                 {timer}
             </div>
diff --git a/client/styles.css b/client/styles.css
index a1791470..3ab0c4e3 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -549,3 +549,9 @@ figure.gray {
 }
 
 
+section .top {
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+}
+

From 92703882cef96e0ba58cbab6af4e9816140245b5 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 15 May 2019 15:02:38 +1000
Subject: [PATCH 2/5] wip

---
 client/game.css                          |  4 +++-
 client/src/components/game.component.jsx | 19 ++++++++++++-------
 client/src/components/game.cryp.jsx      | 17 +++++++++++------
 client/src/components/menu.component.jsx |  1 -
 client/src/socket.jsx                    |  2 +-
 client/styles.css                        |  6 +++---
 6 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/client/game.css b/client/game.css
index 2b9c8f82..d7eb03e4 100644
--- a/client/game.css
+++ b/client/game.css
@@ -70,8 +70,10 @@
     transition-timing-function: ease;
 }
 
-.game-cryp .img {
+.game-cryp .avatar {
     grid-area: avatar;
+    /*max-height: 50%;*/
+    height: auto;
 }
 
 .game-cryp .stats {
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 66146f6a..8855c38a 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -54,7 +54,7 @@ function GamePanel(props) {
     const header = (
         <div className="top">
             <button
-                className="game-btn instance-btn instance-ui-btn right"
+                className="instance-btn instance-ui-btn right"
                 onClick={() => sendGameReady()}>
                 Ready
             </button>
@@ -137,12 +137,17 @@ function GamePanel(props) {
                 <div className="effects">
                     {effects}
                 </div>
-                <figure
-                    className="img"
-                    onClick={() => selectSkillTarget(cryp.id)} >
-                    {crypAvatar(cryp.name)}
-                    {combatTextEl}
-                </figure>
+                <div className="avatar">
+                    <div className="targeting">
+                        <div>></div>
+                    </div>
+                    <figure
+                        className="img"
+                        onClick={() => selectSkillTarget(cryp.id)} >
+                        {crypAvatar(cryp.name)}
+                        {combatTextEl}
+                    </figure>
+                </div>
             </div>
         );
     }
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index 17d49e80..af4d5b5d 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -78,12 +78,17 @@ function GameCryp(props) {
             <div className="skills">
                 {skills}
             </div>
-            <figure
-                className="img"
-                onClick={() => selectSkillTarget(cryp.id)} >
-                {crypAvatar(cryp.name)}
-                {combatTextEl}
-            </figure>
+            <div className="avatar">
+                <div className="targeting">
+                    <div>></div>
+                </div>
+                <figure
+                    className="img"
+                    onClick={() => selectSkillTarget(cryp.id)} >
+                    {crypAvatar(cryp.name)}
+                    {combatTextEl}
+                </figure>
+            </div>
             <div className="effects">
                 {effects}
             </div>
diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx
index 5bde6a10..f144d3cd 100644
--- a/client/src/components/menu.component.jsx
+++ b/client/src/components/menu.component.jsx
@@ -147,7 +147,6 @@ function Menu(args) {
     return (
         <section className="menu">
             {instanceList()}
-            {crypList()}
         </section>
     );
 }
diff --git a/client/src/socket.jsx b/client/src/socket.jsx
index dd2e1c25..610dd8bd 100644
--- a/client/src/socket.jsx
+++ b/client/src/socket.jsx
@@ -312,7 +312,7 @@ function createSocket(events) {
                 sendAccountCryps();
             }
 
-            // sendPing();
+            sendPing();
 
             return true;
         });
diff --git a/client/styles.css b/client/styles.css
index 3ab0c4e3..97431553 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -17,9 +17,9 @@ html, body, main {
     -ms-user-select: none;
 
     /* this is the sweet nectar to keep it full page*/
-    height: 100%;
-    max-height: 100%;
-    min-height: 100%;
+    height: 100vh;
+    max-height: 100vh;
+    min-height: 100vh;
     /*padding: 0 20%;*/
 
     /* stops inspector going skitz*/

From 6cba30d2a1d275cd6261066e9c6171169f647c77 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 15 May 2019 17:22:18 +1000
Subject: [PATCH 3/5] lookin good

---
 client/game.css                          | 34 +++++++++++++++---------
 client/src/components/game.component.jsx | 18 ++++++-------
 client/src/components/game.cryp.jsx      | 18 ++++++-------
 client/src/components/menu.component.jsx |  4 +--
 client/src/utils.jsx                     |  1 +
 client/styles.css                        |  2 +-
 6 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/client/game.css b/client/game.css
index d7eb03e4..edbcfdfa 100644
--- a/client/game.css
+++ b/client/game.css
@@ -46,10 +46,10 @@
 .opponent .game-cryp {
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     grid-template-areas:
-        "stats"
-        "effects"
-        "avatar"
-        "skills";
+        ".      stats"
+        ".      effects"
+        "target avatar"
+        ".      skills";
 }
 
 .game-cryp {
@@ -57,12 +57,14 @@
 
     justify-items: center;
 
-    grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);
+    /*grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);*/
+    /*grid-template-columns: min-content minmax(0, 1fr);*/
+    grid-template-columns: min-content 1fr 1fr;
+    grid-template-rows: 1fr 2fr 1fr;
     grid-template-areas:
-        "skills"
-        "avatar"
-        "effects"
-        "stats";
+        ".      skills skills"
+        "target avatar avatar"
+        "effects stats stats";
 
     transition-property: all;
     transition-duration: 0.5s;
@@ -70,10 +72,17 @@
     transition-timing-function: ease;
 }
 
-.game-cryp .avatar {
+.game-cryp .targeting {
+    grid-area: target;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: flex-end;
+    width: 100%;
+}
+
+.game-cryp .img {
     grid-area: avatar;
-    /*max-height: 50%;*/
-    height: auto;
 }
 
 .game-cryp .stats {
@@ -86,6 +95,7 @@
     grid-area: skills;
     display: flex;
     flex-flow: column-reverse;
+    /*flex-flow: column;*/
 }
 
 /*@media (max-width: 1000px) {
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 8855c38a..4512a4e1 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -137,17 +137,15 @@ function GamePanel(props) {
                 <div className="effects">
                     {effects}
                 </div>
-                <div className="avatar">
-                    <div className="targeting">
-                        <div>></div>
-                    </div>
-                    <figure
-                        className="img"
-                        onClick={() => selectSkillTarget(cryp.id)} >
-                        {crypAvatar(cryp.name)}
-                        {combatTextEl}
-                    </figure>
+                <div className="targeting">
+                    <div>></div>
                 </div>
+                <figure
+                    className="img"
+                    onClick={() => selectSkillTarget(cryp.id)} >
+                    {crypAvatar(cryp.name)}
+                    {combatTextEl}
+                </figure>
             </div>
         );
     }
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index af4d5b5d..397362d1 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -78,17 +78,15 @@ function GameCryp(props) {
             <div className="skills">
                 {skills}
             </div>
-            <div className="avatar">
-                <div className="targeting">
-                    <div>></div>
-                </div>
-                <figure
-                    className="img"
-                    onClick={() => selectSkillTarget(cryp.id)} >
-                    {crypAvatar(cryp.name)}
-                    {combatTextEl}
-                </figure>
+            <div className="targeting">
+                <div>></div>
             </div>
+            <figure
+                className="img"
+                onClick={() => selectSkillTarget(cryp.id)} >
+                {crypAvatar(cryp.name)}
+                {combatTextEl}
+            </figure>
             <div className="effects">
                 {effects}
             </div>
diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx
index f144d3cd..cec5eb2f 100644
--- a/client/src/components/menu.component.jsx
+++ b/client/src/components/menu.component.jsx
@@ -67,7 +67,7 @@ function Menu(args) {
         // );
 
         return (
-            <section className="menu-instance-list" >
+            <div className="menu-instance-list" >
                 <table>
                     <thead>
                         <tr>
@@ -84,7 +84,7 @@ function Menu(args) {
                     </tbody>
                 </table>
                 <InstanceCreateForm />
-            </section>
+            </div>
         );
     }
 
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 8cc4bb5b..1ecedf1b 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -57,6 +57,7 @@ function crypAvatar(name) {
     return (
         <img
             src={`/molecules/${genAvatar(name)}.svg`}
+            height="500"
             onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
         />
     );
diff --git a/client/styles.css b/client/styles.css
index 97431553..8bb729a6 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -53,7 +53,7 @@ figure {
 main {
     padding: 0 2em;
     display: grid;
-    grid-template-columns: repeat(10, 10%));
+    grid-template-columns: repeat(10, 1fr);
     grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
     grid-template-areas:

From cfb4f3f3b76379002dd81488fd7f7e962cfc2f25 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 15 May 2019 17:24:53 +1000
Subject: [PATCH 4/5] yeeaahh

---
 client/game.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/game.css b/client/game.css
index edbcfdfa..481cc37b 100644
--- a/client/game.css
+++ b/client/game.css
@@ -55,7 +55,8 @@
 .game-cryp {
     display: grid;
 
-    justify-items: center;
+    /*justify-items: center;*/
+    justify-items: start;
 
     /*grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);*/
     /*grid-template-columns: min-content minmax(0, 1fr);*/
@@ -95,6 +96,7 @@
     grid-area: skills;
     display: flex;
     flex-flow: column-reverse;
+    align-items: baseline;
     /*flex-flow: column;*/
 }
 

From 64a1129100e488aa094b65686151e636c0c91ee2 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 15 May 2019 17:35:10 +1000
Subject: [PATCH 5/5] yas

---
 client/game.css                          | 16 ++++++++--------
 client/src/components/game.component.jsx |  2 +-
 client/src/components/game.cryp.jsx      |  2 +-
 client/src/test.game.js                  |  8 ++++++--
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/game.css b/client/game.css
index 481cc37b..d5fc922a 100644
--- a/client/game.css
+++ b/client/game.css
@@ -46,10 +46,10 @@
 .opponent .game-cryp {
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     grid-template-areas:
-        ".      stats"
-        ".      effects"
-        "target avatar"
-        ".      skills";
+        "stats      ."
+        "effects    ."
+        "avatar     target"
+        "skills     .";
 }
 
 .game-cryp {
@@ -60,12 +60,12 @@
 
     /*grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);*/
     /*grid-template-columns: min-content minmax(0, 1fr);*/
-    grid-template-columns: min-content 1fr 1fr;
+    grid-template-columns: 1fr min-content 1fr;
     grid-template-rows: 1fr 2fr 1fr;
     grid-template-areas:
-        ".      skills skills"
-        "target avatar avatar"
-        "effects stats stats";
+        "skills .      ."
+        "avatar target ."
+        "stats effects .";
 
     transition-property: all;
     transition-duration: 0.5s;
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 4512a4e1..935e5c1a 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -138,7 +138,7 @@ function GamePanel(props) {
                     {effects}
                 </div>
                 <div className="targeting">
-                    <div>></div>
+                    <div>{'<'}</div>
                 </div>
                 <figure
                     className="img"
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index 397362d1..1d5c5178 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -79,7 +79,7 @@ function GameCryp(props) {
                 {skills}
             </div>
             <div className="targeting">
-                <div>></div>
+                <div>{'<'}</div>
             </div>
             <figure
                 className="img"
diff --git a/client/src/test.game.js b/client/src/test.game.js
index 9c9f40ca..6e200088 100644
--- a/client/src/test.game.js
+++ b/client/src/test.game.js
@@ -94,7 +94,10 @@ const game = {
               "cd": 1
             }
           ],
-          "effects": [],
+          "effects": [{
+            effect: "Decay",
+            duration: 2,
+          }],
           "specs": [],
           "colours": {
             "red": 0,
@@ -238,7 +241,8 @@ const game = {
               "cd": 1
             }
           ],
-          "effects": [],
+          "effects": [
+          ],
           "specs": [],
           "colours": {
             "red": 0,