effects on enemies

client/cryps.css

@@ -634,6 +634,11 @@ table td svg {
     height: 100%;
 }
 
+.cryp-box .effects {
+    height: 100%;
+    font-size: 1.5em;
+}
+
 .cryp-skill-btn {
     flex: 1 1 100%;
     font-size: 16pt;
@@ -708,14 +713,8 @@ table td svg {
     padding: 0;
 }
 
-.team-opponent .cryp-box-top {
-    flex-flow: column;
-    justify-content: center;
-    align-items: stretch;
-}
-
-.team-opponent .cryp-box-top figure {
-    flex: 1;
+.team-opponent .cryp-box .img {
+    order: 5;
 }
 
 /*.logs {

client/src/components/game.component.jsx

@@ -153,11 +153,18 @@ function GamePanel(props) {
                 className={`cryp-box ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
-                <figure className="img">
-                    {crypAvatar(cryp.name)}
-                    {combatTextEl}
-                    <div>{cryp.name}</div>
-                </figure>
+                <div className="cryp-box-top">
+                    <figure
+                        className="img"
+                        onClick={() => selectSkillTarget(cryp.id)} >
+                        {crypAvatar(cryp.name)}
+                        {combatTextEl}
+                        <div>{cryp.name}</div>
+                    </figure>
+                    <div className="effects">
+                        {cryp.effects.map(c => <span key={c.effect}>{c.effect} - {c.duration}T</span>)}
+                    </div>
+                </div>
                 <div className="stats">
                     {stats}
                 </div>