highlight empty skill slots, bug fixes

client/instance.css

@@ -320,6 +320,7 @@
 .instance-equip .items {
     display: flex;
     justify-content: center;
+    flex: 1 1 100%;
 }
 
 .instance-equip .label {
@@ -331,7 +332,6 @@
 }
 .instance-equip .skills {
     display: flex;
-    min-height: 100px;
     flex-direction: column;
 }
 
@@ -349,6 +349,23 @@
 
 }
 
+button.equip {
+    animation: equip-skill 1s infinite ease-in-out alternate;
+}
+
+@keyframes equip-skill {
+    0% {
+        background-color: black;
+        box-shadow: inset 0 0 0 0 whitesmoke;
+    }
+
+    100% {
+        background-color: #181818;
+        box-shadow: inset 0.5em 0 0 0 whitesmoke;
+    }
+}
+
+
 .instance-equip .specs {
     display: flex;
     padding-left: 50px;

client/src/components/info.component.jsx

@@ -55,10 +55,12 @@ function Info(args) {
         }
 
         if (type === 'skill') {
+            const skillInfo = SKILLS[value.skill];
+            const description = skillInfo ? skillInfo.description : '?????';
             return (
                 <div className="info-skill">
                     <div> {value.skill} </div>
-                    <div> {SKILLS[value.skill].description} </div>
+                    <div> {description} </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
                     unequip
                     </button>
@@ -165,7 +167,7 @@ function Info(args) {
         if (activeCryp) return false;
         if (!player) return false;
 
-        if (combiner[0] !== null) {
+        if (!(combiner.every(u => u === null))) {
             const filteredCombos = vboxInfo.combos
                 .filter(combo => combiner.every(u => u === null
                     || combo.units.includes(player.vbox.bound[u])));

client/src/components/instance.cryps.jsx

@@ -51,6 +51,7 @@ function Cryp(props) {
     const {
         activeVar,
         cryp,
+        player,
         sendVboxApply,
         setInfo,
         setActiveCryp,
@@ -64,12 +65,22 @@ function Cryp(props) {
         return false;
     }
 
+    function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
+        return setActiveCryp(cryp);
+    }
+
+    const { vbox } = player;
+    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, 3).map(i => {
         const skill = cryp.skills[i];
         const s = skill
             ? skill.skill
             : (<span>&nbsp;</span>);
-
         function skillClick(e) {
             if (!skill && activeVar !== null) return sendVboxApply(cryp.id, activeVar);
             if (!skill) setHighlight('skill');
@@ -78,19 +89,14 @@ function Cryp(props) {
             return setActiveCryp(cryp);
         }
 
-        const classes = `right ${skill ? '' : 'action'}`;
+        const action = skill ? '' : 'action';
+        const equip = skillList.includes(vbox.bound[activeVar]) && !skill ? 'equip' : '';
+        const classes = `right ${action} ${equip}`;
         return (
             <button key={i} className={classes} onClick={skillClick} >{s}</button>
         );
     });
 
-    function onClick(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
-        return setActiveCryp(cryp);
-    }
-
     const specs = range(0, 6).map(i => {
         const s = cryp.specs[i];
 
@@ -215,7 +221,7 @@ function InstanceCryps(props) {
     if (instance.phase === 'Lobby') return false;
 
     const cryps = player.cryps.map((c, i) => Cryp({
-        activeVar, cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
+        activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
     const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;

server/src/vbox.rs

@@ -272,6 +272,7 @@ impl From<Skill> for Var {
             Skill::Curse => Var::Curse,
             Skill::Clutch => Var::Clutch,
             Skill::Decay => Var::Decay,
+            Skill::Debuff => Var::Debuff,
             Skill::Haste => Var::Haste,
             Skill::Hostility => Var::Hostility,
             Skill::Heal => Var::Heal,
@@ -551,7 +552,7 @@ impl Vbox {
 
         // actually move
         self.bound.push(self.free[i].remove(j));
-        self.bound.sort_unstable();
+        // self.bound.sort_unstable();
 
         Ok(self)
     }