wip

client/src/components/game.component.jsx

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

client/src/components/game.cryp.jsx

@@ -81,26 +81,30 @@ function GameCryp(props) {
         ? <div className="combat-text">{combatText}</div>
         : null;
 
+    const effects = cryp.effects.length
+        ? cryp.effects.map(c => <span key={c.effect}>{c.effect} - {c.duration}T</span>)
+        : <div>&nbsp;</div>;
+
     return (
         <div
             style={ activeSkill ? { cursor: 'pointer' } : {}}
             onClick={onClick}
             className={`cryp-box ${ko} ${classes}`} >
-            <div className="cryp-box-top">
-                <figure
-                    className="img"
-                    onClick={() => selectSkillTarget(cryp.id)} >
-                    {crypAvatar(cryp.name)}
-                    {combatTextEl}
-                    <div>{cryp.name}</div>
-                </figure>
-                <div className="skills">
-                    {skills}
-                </div>
-            </div>
             <div className="stats">
                 {stats}
             </div>
+            <div className="effects">
+                {effects}
+            </div>
+            <figure
+                className="img"
+                onClick={() => selectSkillTarget(cryp.id)} >
+                {crypAvatar(cryp.name)}
+                {combatTextEl}
+            </figure>
+            <div className="skills">
+                {skills}
+            </div>
         </div>
     );
 }

client/src/events.jsx

@@ -24,8 +24,8 @@ function registerEvents(store) {
         return anime({
             targets: 'img',
             translateX: () => anime.random(-20, 20),
-            translateY: () => anime.random(0, 40),
-            rotate: () => anime.random(-35, 35),
+            translateY: () => anime.random(0, -40),
+            rotate: () => anime.random(-15, 15),
             duration: () => anime.random(5000, 6000),
             delay: () => anime.random(0, 1000),
             direction: 'alternate',