From 77de692a0f9e5811269d7ebc46b54da77df34bd5 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 2 May 2019 15:17:08 +1000
Subject: [PATCH] wip

---
 client/cryps.css                         | 44 +++++++++++-------------
 client/src/components/game.component.jsx | 21 +++++------
 client/src/components/game.cryp.jsx      | 28 ++++++++-------
 client/src/events.jsx                    |  4 +--
 server/src/instance.rs                   |  2 +-
 5 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index a9538803..93ab8de7 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -228,7 +228,7 @@ header {
 
 .ping-text {
     margin-left: 1em;
-    min-width: 2em;
+    min-width: 3em;
     display: inline-block;
 }
 
@@ -515,7 +515,7 @@ table td svg {
 
     display: flex;
     flex-flow: column;
-    height: 95%;
+    height: 94%;
     padding: 0 2em 0 2em;
 
     min-width: 300px;
@@ -586,8 +586,7 @@ table td svg {
     flex: 1 1 100%;
 
     display: flex;
-    flex-flow: column;
-    border: 1px solid whitesmoke;
+    /*border: 1px solid whitesmoke;*/
     margin-bottom: 1em;
     justify-content: center;
 
@@ -614,21 +613,18 @@ table td svg {
     margin: 0;
     flex: 0 0 50%;
     text-align: center;
-    box-sizing: border-box;
     display: flex;
     flex-flow: column;
     justify-content: flex-end;
 }
 
 .cryp-box .stats {
-    flex: 0 0 20%;
-    width: 100%;
     display: flex;
-    border-top: 1px solid whitesmoke;
+    flex-flow: row wrap;
 }
 
 .stats figure {
-    flex: 1 1 0;
+    flex: 1 1 100%;
     border: 0;
     align-items: center;
     padding: 0.5em 0 0 0;
@@ -646,18 +642,18 @@ table td svg {
 }
 
 .cryp-box .effects {
-    height: 100%;
+    max-height: 100%;
     font-size: 1.5em;
 }
 
 .cryp-skill-btn {
     flex: 1 1 100%;
     font-size: 16pt;
-    border-width: 1px;
     padding: 0;
     margin: 0;
+    border-width: 0px;
     border-bottom-width: 0px;
-    border-left-width: 1px;
+    border-left-width: 0px;
     border-right-width: 0px;
 }
 
@@ -722,10 +718,12 @@ table td svg {
 
 .team-opponent {
     padding: 0;
+    align-items: flex-end;
 }
 
-.team-opponent .cryp-box .img {
+.team-opponent .stats {
     order: 5;
+    align-items: flex-end;
 }
 
 /*.logs {
@@ -759,17 +757,17 @@ CRYP DAMAGE
 
 .cryp-box.active-skill {
     filter: drop-shadow(0 0 0.2em silver);
-    border-color: silver;
+    /*border-color: silver;*/
 }
 
 .cryp-box.red-damage {
     filter: drop-shadow(0 0 0.2em red);
     color: red;
-    border-color: red;
+    /*border-color: red;*/
 }
 
 .red-damage button {
-    border: 1px solid red;
+    /*border: 1px solid red;*/
     color: red;
 }
 
@@ -778,17 +776,17 @@ CRYP DAMAGE
 }
 
 .red-damage .stats {
-    border-top: 1px solid red;
+    /*border-top: 1px solid red;*/
 }
 
 .cryp-box.blue-damage {
     filter: drop-shadow(0 0 0.2em blue);
     color: blue;
-    border-color: blue;
+    /*border-color: blue;*/
 }
 
 .blue-damage button {
-    border: 1px solid blue;
+    /*border: 1px solid blue;*/
     color: blue;
 }
 
@@ -797,17 +795,17 @@ CRYP DAMAGE
 }
 
 .blue-damage .stats {
-    border-top: 1px solid blue;
+    /*border-top: 1px solid blue;*/
 }
 
 .cryp-box.green-damage {
     filter: drop-shadow(0 0 0.2em green);
     color: green;
-    border-color: green;
+    /*border-color: green;*/
 }
 
 .green-damage button {
-    border: 1px solid green;
+    /*border: 1px solid green;*/
     color: green;
 }
 
@@ -816,7 +814,7 @@ CRYP DAMAGE
 }
 
 .green-damage .stats {
-    border-top: 1px solid green;
+    /*border-top: 1px solid green;*/
 }
 
 .cryp-box.purple-damage {
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index d3604a3a..5c58be82 100644
--- a/client/src/components/game.component.jsx
+++ b/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>
         );
     }
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index cf448b1a..6e0d312e 100644
--- a/client/src/components/game.cryp.jsx
+++ b/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>
     );
 }
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 3a2a1613..bbbeedf0 100644
--- a/client/src/events.jsx
+++ b/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',
diff --git a/server/src/instance.rs b/server/src/instance.rs
index febcb520..fda29ca7 100644
--- a/server/src/instance.rs
+++ b/server/src/instance.rs
@@ -834,6 +834,6 @@ mod tests {
         assert_eq!(instance.rounds.len(), 2);
         assert!(instance.players.iter().all(|p| !p.ready));
 
-        println!("{:#?}", instance);
+        // println!("{:#?}", instance);
     }
 }