cant send skills

html-client/src/components/game.jsx

@@ -1,5 +1,8 @@
 const preact = require('preact');
 const key = require('keymaster');
+const range = require('lodash/range');
+const molecule = require('./molecule');
+const saw = require('./saw.component');
 
 const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
 
@@ -9,7 +12,6 @@ function GamePanel(props) {
         activeSkill,
         activeIncoming,
         setActiveSkill,
-        setActiveIncoming,
         selectSkillTarget,
         selectIncomingTarget,
         account,
@@ -21,21 +23,40 @@ function GamePanel(props) {
 
     const playerTeam = game.teams.find(t => t.id === account.id);
 
-    const incoming = game.stack.filter(s => s.target_team_id === playerTeam.id).map((inc) => {
-        key.unbind('1');
-        key('1', () => setActiveIncoming(inc.id));
+    function Cryp(cryp) {
+        const skills = range(0, 4).map((i) => {
+            const s = cryp.skills[i]
+                ? cryp.skills[i].skill
+                : (<span>&nbsp;</span>);
+
+            return <button key={i} className="cryp-skill-btn" type ="submit" onClick={() => setActiveSkill(cryp.id, s)}>{s}</button>;
+        });
+
+        const stats = [
+            { stat: 'hp', colour: '#1FF01F' },
+            { stat: 'red_shield', colour: '#a52a2a' },
+            { stat: 'blue_shield', colour: '#3498db' },
+        ].map((s, i) => (
+            <figure key={i} alt={s.stat}>
+                {saw(s.colour)}
+                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
+            </figure>
+        ));
+
         return (
-            <div className="tile is-child" key={inc.id}>
-                <div>{JSON.stringify(inc)}</div>
-                <button
-                    className="button is-dark is-fullwidth"
-                    type="submit"
-                    onClick={() => setActiveIncoming(inc.id)}>
-                    (1) Block skill: {inc.skill}
-                </button>
+            <div className="cryp-box">
+                <figure className="img">
+                    {molecule}
+                </figure>
+                <div className="skills">
+                    {skills}
+                </div>
+                <div className="stats">
+                    {stats}
+                </div>
             </div>
         );
-    });
+    }
 
     function PlayerCrypCard(cryp) {
         const skills = cryp.skills.map((skill, i) => {
@@ -65,24 +86,7 @@ function GamePanel(props) {
                 style={ activeIncoming ? { cursor: 'pointer' } : {}}
                 onClick={() => selectIncomingTarget(cryp.id)}
                 className="tile is-vertical">
-                <div className="tile is-child">
-                    <div className="columns" >
-                        <div className="column is-10">
-                            <p className="title">{cryp.name}</p>
-                        </div>
-                        <div className="column">
-                            <figure className="image">
-                                <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                            </figure>
-                        </div>
-
-                    </div>
-                    <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.max} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
-
-                </div>
-                {effects}
-                {skills}
+                {Cryp(cryp, setActiveSkill)}
             </div>
         );
     }
@@ -150,6 +154,7 @@ function GamePanel(props) {
                 <div className="six columns" align="center">
                     Round X
                 </div>
+
                 <div className="three columns">
                     {otherTeams.id}
                     {otherTeams.map(OpponentTeam)}