From 2f6a15d64def7dc91d2b32f6a053c5ed5520faaf Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Fri, 3 May 2019 12:16:54 +1000
Subject: [PATCH] yehhhh

---
 client/cryps.css                         | 31 +++++++++---------------
 client/src/components/game.component.jsx | 30 ++++++-----------------
 2 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index 3c34a52f..16d1f247 100644
--- a/client/cryps.css
+++ b/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;
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 2b572aef..59cc972e 100644
--- a/client/src/components/game.component.jsx
+++ b/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}