wip

client/cryps.css

@@ -596,19 +596,6 @@ table td svg {
     transition-timing-function: ease;
 }
 
-.cryp-box-top {
-    display: flex;
-    flex: 1 1 75%;
-    width: 100%;
-    justify-content: center;
-    align-items: stretch;
-}
-
-.cryp-box .particle {
-    position: fixed;
-    z-index: -10;
-}
-
 .cryp-box figure {
     margin: 0;
     flex: 0 0 50%;
@@ -678,11 +665,23 @@ table td svg {
     margin-right: 0.5em;
 }
 
+.cryp-skill-btn {
+    color: #333333;
+}
+
+.cryp-skill-btn.active {
+    color: whitesmoke;
+}
+
 .cryp-skill-btn[disabled] {
     color: #333333;
     font-size: 14pt;
 }
 
+.cryp-skill-btn:hover {
+    color: whitesmoke;
+}
+
 .cryp-box.ko {
     animation: none;
     opacity: 0.5;
@@ -690,6 +689,10 @@ table td svg {
     filter: grayscale(100%);
 }
 
+.cryp-box.ko .cryp-skill-btn:hover {
+    color: #333;
+}
+
 .cryp-box.unfocus {
     /*opacity: 0.65;*/
     filter: blur(5px);
@@ -728,20 +731,6 @@ table td svg {
     align-items: flex-end;
 }
 
-/*.logs {
-    flex: 0 0 100%;
-}
-*/
-.selected-skills {
-    flex: 1 1 25%;
-
-    display: flex;
-    flex-flow: column;
-    height: 95%;
-    padding: 0 2em 0 2em;
-    justify-content: center;
-}
-
 .stack-line {
     display: flex;
     align-items: center;
@@ -842,11 +831,6 @@ CRYP DAMAGE
 /*
     MOBILE
 */
-@media (max-width: 1000px) {
-    .selected-skills {
-        display: none;
-    }
-}
 
 @media (max-width: 800px) {
     h2 {
@@ -856,11 +840,13 @@ CRYP DAMAGE
     main {
         flex: 1 1 auto;
         flex-flow: column;
+        overflow: hidden;
     }
 
     main.game {
         flex-flow: column-reverse;
         justify-content: space-between;
+        height: 100%;
     }
 
     main.game .instance-hdr {
@@ -912,11 +898,6 @@ CRYP DAMAGE
         height: unset;
     }
 
-    .cryp-box-top figure {
-        flex: 1;
-        font-size: 60%;
-    }
-
     .menu-instance-btn {
         font-size: 1em;
     }
@@ -947,6 +928,7 @@ CRYP DAMAGE
 
     .cryp-box {
         margin: 0 0.2em;
+        flex-flow: column-reverse;
     }
 
     .spawn-btn button {
@@ -959,8 +941,13 @@ CRYP DAMAGE
         display: none;
     }
 
-    .selected-skills {
+    .mobile-spacer {
+        flex: 1 1 25%;
+        flex-flow: column;
         display: block;
+        height: 95%;
+        padding: 0 2em 0 2em;
+        justify-content: center;
     }
 
     .mobile-skills {
@@ -977,21 +964,13 @@ CRYP DAMAGE
     .cryp-skill-btn {
         flex: 1;
         font-size: 16pt;
-        border-width: 1px;
         padding: 0;
         margin: 0;
-        border-bottom-width: 0px;
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-right-width: 0px;
+        border-width: 0px;
     }
 
-    .cryp-skill-btn:first-child {
-        border-top-width: 1px;
-        border-left-width: 0px;
-    }
-
-    .cryp-box .stats figure {
+    .cryp-box .stats {
+        flex-flow: row;
         padding: 0.2em 0;
     }
 

client/src/components/game.component.jsx

@@ -179,10 +179,6 @@ function GamePanel(props) {
         );
     }
 
-    const selectedSkills = resolution
-        ? <div>&nbsp;</div>
-        : playerTeam.cryps.map((c, i) => stackElement(c, i));
-
     const mobileSkills = activeCryp && activeCryp.green_life.value
         ? range(0, 3).map(i => <SkillBtn key={i} cryp={activeCryp} i={i} mobile={true} />)
         : (<div/>);
@@ -195,9 +191,7 @@ function GamePanel(props) {
             <div className="mobile-skills">
                 {mobileSkills}
             </div>
-            <div className="selected-skills">
-                {selectedSkills}
-            </div>
+            <div className="mobile-spacer">&nbsp;</div>
             {otherTeams.map(OpponentTeam)}
         </main>
     );

client/src/components/skill.btn.jsx

@@ -7,10 +7,12 @@ const addState = connect(
     function receiveState(state) {
         const {
             activeSkill,
+            game,
         } = state;
 
         return {
             activeSkill,
+            game,
         };
     },
 
@@ -27,6 +29,7 @@ const addState = connect(
 function Skill(props) {
     const {
         cryp,
+        game,
         i,
         mobile,
         activeSkill,
@@ -63,13 +66,28 @@ function Skill(props) {
         return setActiveSkill(cryp.id, s.skill);
     }
 
+    function findCryp(id) {
+        const team = game.players.find(t => t.cryps.find(c => c.id === id));
+        if (team) return team.cryps.find(c => c.id === id);
+        return null;
+    }
+
+    const [target] = game.stack.filter(stack => stack.source_cryp_id === cryp.id && stack.skill === s.skill)
+        .map(stack => findCryp(stack.target_cryp_id));
+
+    const targetText = target
+        ? `-> ${target.name}`
+        : '';
+
+    console.log(target);
+
     return (
         <button
             disabled={!!cdText || ko}
-            className={`cryp-skill-btn ${side} ${highlight ? 'active' : ''}`}
+            className={`cryp-skill-btn ${side} ${(target || highlight) ? 'active' : ''}`}
             type="submit"
             onClick={onClick}>
-            {s.skill} {cdText}
+            {s.skill} {cdText} {targetText}
         </button>
     );
 }