using items

client/src/actions.jsx

@@ -13,5 +13,8 @@ export const setBattle = (value) => ({ type: SET_BATTLE, value });
 export const SET_ACTIVE_CRYP = 'SET_ACTIVE_CRYP';
 export const setActiveCryp = (value) => ({ type: SET_ACTIVE_CRYP, value });
 
+export const SET_ACTIVE_ITEM = 'SET_ACTIVE_ITEM';
+export const setActiveItem = (value) => ({ type: SET_ACTIVE_ITEM, value });
+
 export const SET_WS = 'SET_WS';
 export const setWs = (value) => ({ type: SET_WS, value });

client/src/components/cryp.list.container.js

@@ -4,12 +4,19 @@ const CrypList = require('./cryp.list');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, cryps } = state;
+        const { ws, cryps, activeItem } = state;
         function sendCombatPve(crypId) {
             return ws.sendCombatPve(crypId);
         }
 
-        return { cryps, sendCombatPve };
+        function sendItemUse(targetId) {
+            if (activeItem) {
+                return ws.sendItemUse(activeItem, targetId);
+            }
+            return false;
+        }
+
+        return { cryps, sendCombatPve, activeItem, sendItemUse };
     }
 );
 

client/src/components/cryp.list.jsx

@@ -1,11 +1,14 @@
+// eslint-disable-next-line
 const preact = require('preact');
 
-
-function CrypList({ cryps, sendCombatPve }) {
+function CrypList({ cryps, activeItem, sendCombatPve, sendItemUse }) {
     if (!cryps) return <div>not ready</div>;
     const crypPanels = cryps.map(cryp => (
 
-        <div key={cryp.id} className="tile is-vertical box">
+        <div key={cryp.id}
+            className="tile is-vertical box"
+            style={activeItem ? { cursor: 'pointer' } : {}}
+            onClick={() => sendItemUse(cryp.id)} >
             <div className="tile is-vertical is-child">
                 <div className="columns" >
                     <div className="column is-10">
@@ -25,14 +28,14 @@ function CrypList({ cryps, sendCombatPve }) {
             <button
                 className="button is-dark"
                 type="submit"
+                disabled={cryp.hp.value === 0}
                 onClick={() => sendCombatPve(cryp.id)}>
                 Start PVE
             </button>
         </div>
     ));
     return (
-        // <div className="tile is-parent is-vertical" >
-        <div>
+        <div className="tile is-parent is-vertical" >
             {crypPanels}
         </div>
     );

client/src/components/item.list.container.js

@@ -1,15 +1,19 @@
 const { connect } = require('preact-redux');
+const actions = require('../actions');
 
 const ItemList = require('./item.list');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, items } = state;
-        function sendItemUse(crypId) {
-            return ws.sendItemUse(crypId);
+        const { items } = state;
+        return { items };
+    },
+    function receiveDispatch(dispatch) {
+        function setActiveItem(id) {
+            dispatch(actions.setActiveItem(id))
         }
 
-        return { items, sendItemUse };
+        return { setActiveItem };
     }
 );
 

client/src/components/item.list.jsx

@@ -1,6 +1,7 @@
+// eslint-disable-next-line
 const preact = require('preact');
 
-function ItemList({ items, sendItemUse }) {
+function ItemList({ items, setActiveItem }) {
     if (!items) return <div>...</div>;
     const itemPanels = items.map(item => (
 
@@ -21,7 +22,7 @@ function ItemList({ items, sendItemUse }) {
             <button
                 className="button is-dark"
                 type="submit"
-                onClick={() => sendItemUse(item.id)}>
+                onClick={() => setActiveItem(item.id)}>
                 Use
             </button>
         </div>

client/src/main.jsx

@@ -15,6 +15,7 @@ const Body = require('./components/body.component');
 // Redux Store
 const store = createStore(
     combineReducers({
+        activeItem: reducers.activeItemReducer,
         account: reducers.accountReducer,
         battle: reducers.battleReducer,
         cryps: reducers.crypsReducer,

client/src/reducers.jsx

@@ -30,6 +30,16 @@ function itemsReducer(state = defaultItems, action) {
     }
 }
 
+const defaultActiveItem = null;
+function activeItemReducer(state = defaultActiveItem, action) {
+    switch (action.type) {
+    case actions.SET_ACTIVE_ITEM:
+        return action.value;
+    default:
+        return state;
+    }
+}
+
 const defaultBattle = null;
 function battleReducer(state = defaultBattle, action) {
     switch (action.type) {
@@ -51,6 +61,7 @@ function wsReducer(state = defaultWs, action) {
 }
 
 module.exports = {
+    activeItemReducer,
     battleReducer,
     accountReducer,
     crypsReducer,

client/src/socket.jsx

@@ -109,6 +109,12 @@ function createSocket(store) {
         send({ method: 'combat_pve', params: { id } });
     }
 
+    function sendItemUse(item, target) {
+        console.log(item, target);
+        send({ method: 'item_use', params: { item, target } });
+        store.dispatch(actions.setActiveItem(null));
+    }
+
 
     // -------------
     //   Handling
@@ -144,6 +150,7 @@ function createSocket(store) {
         sendAccountLogin,
         sendCombatPve,
         sendCrypSpawn,
+        sendItemUse,
         connect,
     };
 }