using items

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>