icon stuff

client/src/animations.socket.jsx

@@ -41,7 +41,10 @@ function createSocket(store) {
             store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
 
             if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
-            if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
+            if (sequence.includes('END_SKILL')) {
+                store.dispatch(actions.setAnimTarget(anims.animTarget));
+                if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb));
+            }
             if (sequence.includes('POST_SKILL')) {
                 // timeout to prevent text classes from being added too soon
                 setTimeout(
@@ -49,15 +52,14 @@ function createSocket(store) {
                     timeout - TIMES.POST_SKILL_DURATION_MS
                 );
             }
-
             return setTimeout(() => {
                 store.dispatch(actions.setAnimSource(null));
                 store.dispatch(actions.setAnimTarget(null));
                 store.dispatch(actions.setAnimText(null));
                 store.dispatch(actions.setAnimFocus([]));
-                // We currently need another small timeout so that everything can properly dismount / unload
-                // Otherwise 3 x Attack on same target will only render the first time
-                return setTimeout(cb, 200);
+                if (!sequence.includes('END_SKILL')
+                    || ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
+                return true;
             }, timeout);
         }, err => {
             if (err) return console.error(err);

client/src/components/instance.constructs.jsx

@@ -144,7 +144,7 @@ function Construct(props) {
 
         if (!s) {
             const equipping = specList.includes(vbox.bound[itemEquip]);
-            const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
+            const classes = `${equipping ? 'equipping' : 'gray'} empty`;
             return (
                 <button key={i} class={classes} disabled={!equipping} >
                     {shapes.None()}

client/src/components/shapes.jsx

@@ -33,7 +33,7 @@ module.exports = {
     RedPower: () => circle(['red']),
     GreenPower: () => circle(['green']),
     BluePower: () => circle(['blue']),
-    Speed: () => triangle(['white']),
+    SpeedStat: () => triangle(['white']),
 
 
     // specs
@@ -58,12 +58,11 @@ module.exports = {
         <figcaption>Life</figcaption>
     </figure>,
 
-    // Speed:
-    // <figure>
-    //     {triangle(['white'])}
-    //     <figcaption>Speed</figcaption>
-    // </figure>,
-
+    Speed: () =>
+    <figure>
+        {triangle(['white'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
 
     // Lifes Upgrades
     LifeGG: () =>

client/src/components/svgs/diamond.jsx

@@ -4,9 +4,9 @@ module.exports = function triangle(classes) {
     return (
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 200 200" class={classes} transform="rotate(45)" >
-            <rect x="10" y="10" width="180" height="180"/>
-            <rect x="40" y="40" width="120" height="120"/>
-            <rect x="70" y="70" width="60" height="60"/>
+            <rect x="25" y="25" width="175" height="175"/>
+            <rect x="55" y="55" width="115" height="115"/>
+            <rect x="85" y="85" width="55" height="55"/>
         </svg>
     );
 };

client/src/utils.jsx

@@ -63,7 +63,7 @@ const STATS = {
         colour: 'blue',
         svg: shapes.circle,
     },
-    Speed: {
+    SpeedStat: {
         stat: 'speed',
         colour: 'white',
         svg: shapes.triangle,