game-cryp

client/src/components/game.component.jsx

@@ -150,7 +150,7 @@ function GamePanel(props) {
         return (
             <div
                 key={i}
-                className={`cryp-box ${ko} ${classes}`}
+                className={`game-cryp ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
                 <div className="stats">

client/src/components/game.cryp.jsx

@@ -89,7 +89,7 @@ function GameCryp(props) {
         <div
             style={ activeSkill ? { cursor: 'pointer' } : {}}
             onClick={onClick}
-            className={`cryp-box ${ko} ${classes}`} >
+            className={`game-cryp ${ko} ${classes}`} >
             <div className="stats">
                 {stats}
             </div>

client/src/components/instance.cryps.jsx

@@ -124,17 +124,19 @@ function Cryp(props) {
     return (
         <div
             key={cryp.id}
-            className="cryp-box"
+            className="game-cryp"
             onDragOver={onDragOver}
             onDrop={onDrop}
             style={border}
             >
-            <figure className="img" onClick={onClick}>
-                {crypAvatar(cryp.name)}
-                <figcaption>{cryp.name}</figcaption>
-            </figure>
-            <div className="skills">
-                {skills}
+            <div className="game-cryp-top">
+                <figure className="img" onClick={onClick}>
+                    {crypAvatar(cryp.name)}
+                    <figcaption>{cryp.name}</figcaption>
+                </figure>
+                <div className="skills">
+                    {skills}
+                </div>
             </div>
             <div className="stats">
                 {specs}