game-cryp

client/cryps.css

@@ -582,7 +582,7 @@ table td svg {
 
 
 /* CRYP BOX */
-.cryp-box {
+.game-cryp {
     flex: 1 1 100%;
 
     display: flex;
@@ -596,7 +596,7 @@ table td svg {
     transition-timing-function: ease;
 }
 
-.cryp-box figure {
+.game-cryp figure {
     margin: 0;
     flex: 0 0 50%;
     text-align: center;
@@ -605,7 +605,7 @@ table td svg {
     justify-content: flex-end;
 }
 
-.cryp-box .stats {
+.game-cryp .stats {
     flex: 1 0 25%;
     align-items: flex-start;
     display: flex;
@@ -623,14 +623,14 @@ table td svg {
     font-size: 75%;
 }
 
-.cryp-box .skills {
+.game-cryp .skills {
     display: flex;
     flex-flow: row wrap;
     flex: 1 1 50%;
     height: 100%;
 }
 
-.cryp-box .effects {
+.game-cryp .effects {
     max-height: 100%;
     font-size: 1.5em;
 }
@@ -682,18 +682,18 @@ table td svg {
     color: whitesmoke;
 }
 
-.cryp-box.ko {
+.game-cryp.ko {
     animation: none;
     opacity: 0.5;
     /*opacity: 0.35;*/
     filter: grayscale(100%);
 }
 
-.cryp-box.ko .cryp-skill-btn:hover {
+.game-cryp.ko .cryp-skill-btn:hover {
     color: #333;
 }
 
-.cryp-box.unfocus {
+.game-cryp.unfocus {
     /*opacity: 0.65;*/
     filter: blur(5px);
 }
@@ -746,12 +746,12 @@ table td svg {
 CRYP DAMAGE
 */
 
-.cryp-box.active-skill {
+.game-cryp.active-skill {
     filter: drop-shadow(0 0 0.2em silver);
     /*border-color: silver;*/
 }
 
-.cryp-box.red-damage {
+.game-cryp.red-damage {
     filter: drop-shadow(0 0 0.2em red);
     color: red;
     /*border-color: red;*/
@@ -770,7 +770,7 @@ CRYP DAMAGE
     /*border-top: 1px solid red;*/
 }
 
-.cryp-box.blue-damage {
+.game-cryp.blue-damage {
     filter: drop-shadow(0 0 0.2em blue);
     color: blue;
     /*border-color: blue;*/
@@ -789,7 +789,7 @@ CRYP DAMAGE
     /*border-top: 1px solid blue;*/
 }
 
-.cryp-box.green-damage {
+.game-cryp.green-damage {
     filter: drop-shadow(0 0 0.2em green);
     color: green;
     /*border-color: green;*/
@@ -808,7 +808,7 @@ CRYP DAMAGE
     /*border-top: 1px solid green;*/
 }
 
-.cryp-box.purple-damage {
+.game-cryp.purple-damage {
     filter: drop-shadow(0 0 0.2em purple);
     color: purple;
     border-color: purple;
@@ -894,7 +894,7 @@ CRYP DAMAGE
     }
 
     /*fucken beats me why needed */
-    .cryp-box .skills {
+    .game-cryp .skills {
         height: unset;
     }
 
@@ -926,7 +926,7 @@ CRYP DAMAGE
         text-align: center;
     }
 
-    .cryp-box {
+    .game-cryp {
         margin: 0 0.2em;
         flex-flow: column-reverse;
     }
@@ -937,7 +937,7 @@ CRYP DAMAGE
         width: 100%;
     }
 
-    .cryp-box .skills {
+    .game-cryp .skills {
         display: none;
     }
 
@@ -969,7 +969,7 @@ CRYP DAMAGE
         border-width: 0px;
     }
 
-    .cryp-box .stats {
+    .game-cryp .stats {
         flex-flow: row;
         padding: 0.2em 0;
     }

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,11 +124,12 @@ function Cryp(props) {
     return (
         <div
             key={cryp.id}
-            className="cryp-box"
+            className="game-cryp"
             onDragOver={onDragOver}
             onDrop={onDrop}
             style={border}
             >
+            <div className="game-cryp-top">
                 <figure className="img" onClick={onClick}>
                     {crypAvatar(cryp.name)}
                     <figcaption>{cryp.name}</figcaption>
@@ -136,6 +137,7 @@ function Cryp(props) {
                 <div className="skills">
                     {skills}
                 </div>
+            </div>
             <div className="stats">
                 {specs}
             </div>