select targets

client/src/actions.jsx

@@ -17,7 +17,7 @@ export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING';
 export const setActiveIncoming = (value) => ({ type: SET_ACTIVE_INCOMING, value });
 
 export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
-export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: { crypId, skill} });
+export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value:  crypId ? { crypId, skill} : null });
 
 export const SET_WS = 'SET_WS';
 export const setWs = (value) => ({ type: SET_WS, value });

client/src/components/game.container.js

@@ -6,7 +6,7 @@ const Game = require('./game');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, game, account, activeSkill } = state;
+        const { ws, game, account, activeSkill, activeIncoming } = state;
         function selectSkillTarget(targetTeamId) {
             if (activeSkill) {
                 return ws.sendGameSkill(game.id, activeSkill.crypId, targetTeamId, activeSkill.skill);
@@ -14,18 +14,27 @@ const addState = connect(
             return false;
         }
 
-        function sendGameTarget(crypId, skillId) {
-            return ws.sendGameTarget(game.id, crypId, skillId);
+        function selectIncomingTarget(crypId) {
+            if (activeIncoming) {
+                return ws.sendGameTarget(game.id, crypId, activeIncoming);
+            }
+            return false;
         }
 
-        return { game, account, activeSkill, selectSkillTarget, sendGameTarget };
+        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
     },
+
     function receiveDispatch(dispatch) {
         function setActiveSkill(crypId, skill) {
             dispatch(actions.setActiveSkill(crypId, skill))
         }
 
-        return { setActiveSkill };
+        function setActiveIncoming(skillId) {
+            dispatch(actions.setActiveIncoming(skillId))
+        }
+
+
+        return { setActiveSkill, setActiveIncoming };
     }
 
 );

client/src/components/game.jsx

@@ -1,19 +1,44 @@
 const preact = require('preact');
 
-function GamePanel({ game, activeSkill, setActiveSkill, selectSkillTarget, account }) {
+function GamePanel(props) {
+    const {
+        game,
+        activeSkill,
+        activeIncoming,
+        setActiveSkill,
+        setActiveIncoming,
+        selectSkillTarget,
+        selectIncomingTarget,
+        account
+    } = props;
+
     if (!game) return <div>...</div>;
 
     const otherTeams = game.teams.filter(t => t.id !== account.id);
 
     const playerTeam = game.teams.find(t => t.id === account.id);
 
-    const incoming = playerTeam.incoming.map((inc, i) => (
-        <div key={inc}>{JSON.stringify(inc)}</div>
-    ));
+    const incoming = playerTeam.incoming.map(inc => {
+        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)}>
+                    {inc.skill}
+                </button>
+            </div>
+        );
+    });
 
     function PlayerCrypCard(cryp) {
+        if (activeIncoming) console.log('should be a pointer');
         return (
-            <div key={cryp.id}
+            <div
+                key={cryp.id}
+                style={ activeIncoming ? { cursor: 'pointer' } : {}}
+                onClick={() => selectIncomingTarget(cryp.id)}
                 className="tile is-vertical">
                 <div className="tile is-child">
                     <div className="columns" >
@@ -33,7 +58,6 @@ function GamePanel({ game, activeSkill, setActiveSkill, selectSkillTarget, accou
 
                     <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
                     <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
-
                 </div>
                 <button
                     className="button is-dark is-fullwidth"
@@ -96,16 +120,6 @@ function GamePanel({ game, activeSkill, setActiveSkill, selectSkillTarget, accou
         )
     }
 
-    // const targetBtn = playerTeam.incoming.map(i => (
-    //     <button
-    //         key={i.id}
-    //         className="button is-dark is-fullwidth"
-    //         type="submit"
-    //         onClick={() => sendGameTarget(playerTeam.cryps[0].id, i.id)}>
-    //         take the hit
-    //     </button>
-    // ));
-
     // style={{ "min-height": "100%" }}
 
     return (

client/src/main.jsx

@@ -18,6 +18,7 @@ const store = createStore(
     combineReducers({
         activeItem: reducers.activeItemReducer,
         activeSkill: reducers.activeSkillReducer,
+        activeIncoming: reducers.activeIncomingReducer,
         account: reducers.accountReducer,
         game: reducers.gameReducer,
         cryps: reducers.crypsReducer,

client/src/socket.jsx

@@ -115,10 +115,12 @@ function createSocket(store) {
 
     function sendGameSkill(gameId, crypId, targetTeamId, skill) {
         send({ method: 'game_skill', params: { game_id: gameId, cryp_id: crypId, target_team_id: targetTeamId, skill } });
+        store.dispatch(actions.setActiveSkill(null));
     }
 
     function sendGameTarget(gameId, crypId, skillId) {
         send({ method: 'game_target', params: { game_id: gameId, cryp_id: crypId, skill_id: skillId } });
+        store.dispatch(actions.setActiveIncoming(null));
     }
 
     function sendItemUse(item, target) {