diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css
index 9bdecc08..2769af92 100644
--- a/client/assets/styles/instance.css
+++ b/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;
}
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 03d53fe3..8eff56d3 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/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 (
@@ -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 (
- hoverInfo(e, s)} >
+ hoverInfo(e, s)} >
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
{SPECS[s].caption}
@@ -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`;
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index 7b5427b4..198c56e2 100644
--- a/client/src/components/instance.equip.jsx
+++ b/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 (
-