wip

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