From 1abc72e97ee464bc7abda5c60e658f27558fc94b Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 19 May 2019 20:06:52 +1000
Subject: [PATCH] cryp names are back

---
 client/assets/styles/game.css            | 24 +++++++++++++++++++-----
 client/src/components/game.component.jsx | 13 ++++---------
 client/src/components/game.cryp.jsx      |  3 +++
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index c016ce0a..cb6639ee 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -36,14 +36,20 @@
 
 .opponent .game-cryp {
     align-items: flex-start;
-    grid-template-rows: min-content min-content 2fr;
+    grid-template-rows: min-content min-content min-content 2fr;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
         "stats  stats"
+        "name   ."
         "effects effects"
         "avatar target";
 }
 
+.opponent .game-cryp .name {
+    margin-bottom: 0;
+    margin-top: 0.25em;
+}
+
 .game-cryp {
     display: grid;
 
@@ -54,10 +60,11 @@
     grid-template-rows: 1fr 2fr 1fr min-content;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
-        "skills ."
-        "avatar target"
-        "effects effects"
-        "stats  stats ";
+        "skills     ."
+        "avatar     target"
+        "effects    effects"
+        "name       ."
+        "stats      stats ";
 
     transition-property: all;
     transition-duration: 0.5s;
@@ -79,6 +86,13 @@
     grid-area: avatar;
 }
 
+.game-cryp .name {
+    width: 100%;
+    margin-bottom: 0.25em;
+    text-align: center;
+    grid-area: name;
+}
+
 .game-cryp .stats {
     grid-area: stats;
     display: flex;
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index b9151889..e297bc01 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -144,15 +144,10 @@ function GamePanel(props) {
                 className={`game-cryp ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
-                <div className="stats">
-                    {stats}
-                </div>
-                <div className="effects">
-                    {effects}
-                </div>
-                <div className="targeting">
-                    {targeting}
-                </div>
+                <div className="stats">{stats}</div>
+                <h3 className="name" >{cryp.name}</h3>
+                <div className="effects">{effects}</div>
+                <div className="targeting">{targeting}</div>
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index def959d9..2f29b81d 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -86,6 +86,9 @@ function GameCryp(props) {
         <div
             style={ activeSkill ? { cursor: 'pointer' } : {}}
             className={`game-cryp ${ko} ${classes}`} >
+            <h3 className="name">
+                {cryp.name}
+            </h3>
             <div className="skills">
                 {skills}
             </div>