yeah boi

client/assets/styles/instance.css

@@ -303,11 +303,10 @@
     color: #666;
 }
 
-
-
 /* Equipment */
 .equip {
     display: flex;
+    margin: 1.5em 0;
     text-align: center;
 }
 
@@ -360,7 +359,7 @@
     margin-bottom: 0.5em;
 }
 
-button.equip {
+button.equipping {
     animation: equip-skill 1s infinite ease-in-out alternate;
 }
 

client/src/components/instance.cryps.jsx

@@ -18,7 +18,21 @@ const addState = connect(
             return ws.sendVboxApply(instance.id, crypId, i);
         }
 
-        return { instance, player, account, sendInstanceReady, sendVboxApply, itemInfo, itemEquip, activeCryp };
+        function sendUnequip(crypId, item) {
+            return ws.sendVboxUnequip(instance.id, crypId, item);
+        }
+
+        return {
+            instance,
+            player,
+            account,
+            sendInstanceReady,
+            sendVboxApply,
+            itemInfo,
+            itemEquip,
+            activeCryp,
+            sendUnequip,
+        };
     },
 
     function receiveDispatch(dispatch) {
@@ -63,6 +77,7 @@ function Cryp(props) {
         setItemEquip,
         itemInfo,
         setInfo,
+        sendUnequip,
     } = props;
 
     function onClick(e) {
@@ -74,7 +89,6 @@ function Cryp(props) {
     }
 
     function hoverInfo(e, info) {
-        console.log(info);
         if (!info) return false;
         e.stopPropagation();
         return setInfo(info);
@@ -98,14 +112,25 @@ function Cryp(props) {
             return true;
         }
 
+        function skillDblClick(e) {
+            if (!skill) return false;
+            sendUnequip(cryp.id, skill.skill);
+            setActiveCryp(null);
+            setItemUnequip(null);
+            e.stopPropagation();
+            e.preventDefault();
+            return true;
+        }
+
         // const action = skill ? '' : 'action';
-        const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equip' : '';
+        const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
         const classes = `${equip}`;
         return (
             <button
                 key={i}
                 className={classes}
                 onClick={skillClick}
+                onDblClick={skillDblClick}
                 onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
                 {s}
             </button>
@@ -130,8 +155,22 @@ function Cryp(props) {
             setActiveCryp(cryp);
         }
 
+        function specDblClick(e) {
+            sendUnequip(cryp.id, s);
+            setActiveCryp(null);
+            setItemUnequip(null);
+            e.stopPropagation();
+            e.preventDefault();
+            return true;
+        }
+
+
         return (
-            <figure key={i} onClick={specClick} onMouseOver={e => hoverInfo(e, s)} >
+            <figure
+                key={i}
+                onClick={specClick}
+                onDblClick={specDblClick}
+                onMouseOver={e => hoverInfo(e, s)} >
                 {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
                 <figcaption>{SPECS[s].caption}</figcaption>
             </figure>
@@ -204,6 +243,7 @@ function InstanceCryps(props) {
         setVboxHighlight,
         setItemUnequip,
         setItemEquip,
+        sendUnequip,
     } = props;
 
     if (!player) return false;
@@ -221,6 +261,7 @@ function InstanceCryps(props) {
         setActiveCryp,
         itemInfo,
         setVboxHighlight,
+        sendUnequip,
     }));
 
     const classes = `cryp-list`;

client/src/components/instance.equip.jsx

@@ -59,7 +59,7 @@ function Equipment(props) {
     const isSkill = fullInfo && fullInfo.skill;
     const isSpec = fullInfo && fullInfo.spec;
 
-    function boundClick(e, i) {
+    function skillClick(e, i) {
         if (itemUnequip && activeCryp) return false;
         const value = vbox.bound[i];
         setItemEquip(i);
@@ -89,7 +89,7 @@ function Equipment(props) {
         const item = convertItem(vbox.bound[i]);
         if (skillList.includes(item)) {
             return (
-                <button key={i} onClick={e => boundClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
+                <button key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
                     {item}
                 </button>
             );
@@ -100,7 +100,7 @@ function Equipment(props) {
         const item = convertItem(vbox.bound[i]);
         if (specList.includes(item)) {
             return (
-                <figure key={i} onClick={e => boundClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
+                <figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
                     {SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
                     <figcaption>{SPECS[item].caption}</figcaption>
                 </figure>