fast unequip items

client/instance.css

@@ -310,7 +310,8 @@
 
 .equip .items {
     display: flex;
-    flex-flow: row;
+    flex: 1 0 100%;
+    justify-content: space-around;
 }
 
 .label {
@@ -322,8 +323,21 @@
     border: 2px solid #222;
 }
 
+.equip .highlight {
+    animation: equip-bg 1s infinite ease-in-out alternate;
+}
+
+@keyframes equip-bg {
+    0% {
+        background-color: black;
+    }
+
+    100% {
+        background-color: #181818;
+    }
+}
+
 .equip .skills button {
-    flex: 1;
     color: whitesmoke;
     font-size: 16pt;
     padding: 5px;
@@ -349,7 +363,6 @@ button.equip {
 }
 
 .equip .specs figure {
-    flex: 1;
     border: 0;
     text-align: center;
 }

client/src/components/instance.equip.jsx

@@ -7,9 +7,13 @@ const { convertVar, SPECS } = require('./../utils');
 
 const addState = connect(
     function receiveState(state) {
-        const { player, vboxInfo } = state;
+        const { player, vboxInfo, info, ws, instance } = state;
 
-        return { player, vboxInfo };
+        function sendUnequip(crypId, item) {
+            return ws.sendVboxUnequip(instance.id, crypId, item);
+        }
+
+        return { player, vboxInfo, info, sendUnequip };
     },
 
     function receiveDispatch(dispatch) {
@@ -33,12 +37,16 @@ const addState = connect(
 function Equipment(props) {
     const {
         player,
+        info,
         vboxInfo,
+        sendUnequip,
         setInfo,
         setActiveVar,
     } = props;
 
     const { vbox } = player;
+    const infoType = info ? info[0] : false;
+    const infoValue = info ? info[1] : false;
 
     function boundClick(e, i) {
         const value = vbox.bound[i];
@@ -47,10 +55,25 @@ function Equipment(props) {
         return false;
     }
 
+    function skillUnequip(e) {
+        e.stopPropagation();
+        if (infoType === 'skill') sendUnequip(infoValue.cryp.id, infoValue.skill);
+        return true;
+    }
+
+    function specUnequip(e) {
+        e.stopPropagation();
+        if (infoType === 'spec') sendUnequip(infoValue.cryp.id, infoValue.spec);
+        return true;
+    }
+    const skillClass = infoType === 'skill' ? 'skills highlight' : 'skills';
+    const specClass = infoType === 'spec' ? 'specs highlight' : 'specs';
+
     // const classes = `right ${skill ? '' : 'action'}`;
     const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
     const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
 
+
     const skills = range(0, 9).map(i => {
         const item = convertVar(vbox.bound[i]);
         if (skillList.includes(item)) {
@@ -76,13 +99,13 @@ function Equipment(props) {
 
     return (
         <div className="equip" >
-            <div className="skills">
+            <div className={skillClass} onClick={e => skillUnequip(e)}>
                 <h3>Skills</h3>
                 <div className ="items">
                     {skills}
                 </div>
             </div>
-            <div className="specs">
+            <div className={specClass} onClick={e => specUnequip(e)}>
                 <h3>Specs</h3>
                 <div className ="items">
                     {specs}