wip

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 {

client/src/components/game.component.jsx

@@ -153,22 +153,19 @@ function GamePanel(props) {
                 className={`cryp-box ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
-                <div className="cryp-box-top">
+                <div className="stats">
+                    {stats}
+                </div>
                 <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>
-            </div>
         );
     }
 

client/src/components/game.cryp.jsx

@@ -81,27 +81,31 @@ 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">
+            <div className="stats">
+                {stats}
+            </div>
+            <div className="effects">
+                {effects}
+            </div>
             <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>
     );
 }
 

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),
+            translateY: () => anime.random(0, -40),
-            rotate: () => anime.random(-35, 35),
+            rotate: () => anime.random(-15, 15),
             duration: () => anime.random(5000, 6000),
             delay: () => anime.random(0, 1000),
             direction: 'alternate',

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);
     }
 }