mobile skillz

client/cryps.css

@@ -816,12 +816,7 @@ CRYP DAMAGE
     }
 
     .cryp-box {
-        margin: 0;
+        margin: 0 0.2em;
-        border-left-width: 0px;
-    }
-
-    .cryp-box:first-child {
-        border-left-width: 1px;
     }
 
     .spawn-btn button {

client/src/components/game.component.jsx

@@ -6,6 +6,7 @@ const molecule = require('./molecule');
 const { STATS, eventClasses, getCombatText } = require('../utils');
 
 const GameCryp = require('./game.cryp');
+const SkillBtn = require('./skill.btn');
 
 // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
 
@@ -97,7 +98,7 @@ function GamePanel(props) {
     }
 
     function PlayerTeam(team) {
-        const cryps = team.cryps.map((c, i) => <GameCryp key={i} cryp={c} />);
+        const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);
 
         return (
             <div className="team-player cryp-list">
@@ -152,15 +153,16 @@ function GamePanel(props) {
         ? <div>&nbsp;</div>
         : playerTeam.cryps.map((c, i) => stackElement(c, i));
 
-    // const mobileSkills = activeCryp
+    const mobileSkills = activeCryp && activeCryp.green_life.value
-    //     ? range(0, 3).map(i => Skill(activeCryp, i, true))
+        ? range(0, 3).map(i => <SkillBtn key={i} cryp={activeCryp} i={i} mobile={true} />)
-    //     : (<div/>);
+        : (<div/>);
 
     return (
         <main className="game" onClick={() => setActiveCryp(null)} >
             {header}
             {PlayerTeam(playerTeam, setActiveSkill)}
             <div className="mobile-skills">
+                {mobileSkills}
             </div>
             <div className="selected-skills">
                 {selectedSkills}

client/src/components/game.cryp.jsx

@@ -6,6 +6,8 @@ const molecule = require('./molecule');
 const actions = require('../actions');
 const { STATS, eventClasses, getCombatText } = require('../utils');
 
+const SkillBtn = require('./skill.btn');
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -37,15 +39,11 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function setActiveSkill(crypId, skill) {
-            dispatch(actions.setActiveSkill(crypId, skill));
-        }
-
         function setActiveCryp(cryp) {
             dispatch(actions.setActiveCryp(cryp));
         }
 
-        return { setActiveSkill, setActiveCryp };
+        return { setActiveCryp };
     }
 );
 
@@ -56,58 +54,16 @@ function GameCryp(props) {
         resolution,
 
         activeSkill,
-        setActiveSkill,
         setActiveCryp,
         selectSkillTarget,
     } = props;
 
     const ko = cryp.green_life.value === 0 ? 'ko' : '';
 
-    function Skill(i, mobile) {
-        const s = cryp.skills[i];
-        if (!s) {
-            return (
-                <button
-                    disabled='true'
-                    key={i}
-                    className='cryp-skill-btn disabled'>
-                    <span>&nbsp;</span>
-                </button>
-            );
-        }
-
-        const side = mobile
-            ? 'top'
-            : 'right';
-
-        const cdText = cryp.skills[i].cd > 0
-            ? `- ${s.cd}`
-            : '';
-
-        const highlight = activeSkill
-            ? activeSkill.crypId === cryp.id && activeSkill.skill === s
-            : false;
-
-        function onClick(e) {
-            e.stopPropagation();
-            return setActiveSkill(cryp.id, s.skill);
-        }
-
-        return (
-            <button
-                key={i}
-                disabled={!!cdText || ko}
-                className={`cryp-skill-btn ${side} ${highlight ? 'active' : ''}`}
-                type="submit"
-                onClick={onClick}>
-                {s.skill} {cdText}
-            </button>
-        );
-    }
-
     const classes = eventClasses(resolution, cryp);
 
-    const skills = range(0, 3).map(i => Skill(i));
+    const skills = range(0, 3)
+        .map(i => <SkillBtn key={i} cryp={cryp} i={i} />);
 
     const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
         <figure key={j} alt={s.stat}>

client/src/components/skill.btn.jsx

@@ -0,0 +1,77 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            activeSkill,
+        } = state;
+
+        return {
+            activeSkill,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setActiveSkill(crypId, skill) {
+            dispatch(actions.setActiveSkill(crypId, skill));
+        }
+
+        return { setActiveSkill };
+    }
+);
+
+
+function Skill(props) {
+    const {
+        cryp,
+        i,
+        mobile,
+        activeSkill,
+        setActiveSkill,
+    } = props;
+
+    const s = cryp.skills[i];
+    const ko = cryp.green_life.value === 0 ? 'ko' : '';
+
+    if (!s) {
+        return (
+            <button
+                disabled='true'
+                className='cryp-skill-btn disabled'>
+                <span>&nbsp;</span>
+            </button>
+        );
+    }
+
+    const side = mobile
+        ? 'top'
+        : 'right';
+
+    const cdText = cryp.skills[i].cd > 0
+        ? `- ${s.cd}`
+        : '';
+
+    const highlight = activeSkill
+        ? activeSkill.crypId === cryp.id && activeSkill.skill === s
+        : false;
+
+    function onClick(e) {
+        e.stopPropagation();
+        return setActiveSkill(cryp.id, s.skill);
+    }
+
+    return (
+        <button
+            disabled={!!cdText || ko}
+            className={`cryp-skill-btn ${side} ${highlight ? 'active' : ''}`}
+            type="submit"
+            onClick={onClick}>
+            {s.skill} {cdText}
+        </button>
+    );
+}
+
+module.exports = addState(Skill);