yehhhh

client/cryps.css

@@ -655,21 +655,22 @@ table td svg {
     transition-timing-function: ease;
 }
 
-.game-cryp figure {
+.game-cryp .img {
     text-align: center;
+    flex: 1 0 25%;
 }
 
 .game-cryp .stats {
-    flex: 1 0 20%;
     display: flex;
-    flex-flow: row wrap;
+    flex: 1 0 20%;
+    flex-flow: column;
 }
 
 .stats figure {
-    flex: 1 1 100%;
+    width: 100%;
     border: 0;
-    align-items: center;
     padding: 0.5em 0 0 0;
+    text-align: center;
 }
 
 .stats figcaption {
@@ -679,17 +680,18 @@ table td svg {
 .game-cryp .skills {
     display: flex;
     flex-flow: row wrap;
-    flex: 1 1 50%;
+    flex: 1 0 25%;
     height: 100%;
 }
 
-.resolving .skills button {
-    display: none;
-}
-
 .game-cryp .effects {
     max-height: 100%;
     font-size: 1.5em;
+    flex: 1;
+}
+
+.resolving .skills button {
+    display: none;
 }
 
 .instance-cryp button, .info-cryp button {
@@ -785,15 +787,6 @@ table td svg {
     padding: 0;
 }
 
-.team-opponent {
-    padding: 0;
-    align-items: flex-end;
-}
-
-.team-opponent .stats {
-    order: 5;
-}
-
 .stack-line {
     display: flex;
     align-items: center;

client/src/components/game.component.jsx

@@ -99,28 +99,6 @@ function GamePanel(props) {
         </div>
     );
 
-    function stackElement(c, i) {
-        let skills = game.stack.filter(s => s.source_cryp_id === c.id).map((s, j) => {
-            const target = findCryp(s.target_cryp_id);
-            return (
-                <div key={j}>{s.skill} -> {target.name}</div>
-            );
-        });
-
-        if (!skills.length) skills = (<div>&nbsp;</div>);
-
-        const effects = c.effects.map((e, j) => <div key={j}>{e.effect} - {e.duration}T</div>);
-
-        return (
-            <div
-                key={i}
-                className="stack-line">
-                {effects}
-                {skills}
-            </div>
-        );
-    }
-
     function PlayerTeam(team) {
         const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);
 
@@ -147,12 +125,18 @@ function GamePanel(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
                 key={i}
                 className={`game-cryp ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
+                <div className="skills">
+                </div>
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >
@@ -160,7 +144,7 @@ function GamePanel(props) {
                     {combatTextEl}
                 </figure>
                 <div className="effects">
-                    {cryp.effects.map(c => <span key={c.effect}>{c.effect} - {c.duration}T</span>)}
+                    {effects}
                 </div>
                 <div className="stats">
                     {stats}