cryp names are back

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;

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)} >

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>