icon stuff

client/assets/styles/instance.less

@@ -287,66 +287,80 @@
     flex: 1 0 100%;
 }
 
+// .equipping {
+//     position: relative;
+// }
+
+// .equipping::before {
+//     content: '';
+//     position: absolute;
+//     top: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+// }
+
+// .equipping::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+//     animation-delay: 0.75s
+// }
+
+// @keyframes equipping-skill {
+//     from {
+//         transform: translate(-50%, 0) scaleX(0);
+//     }
+
+//     to {
+//         transform: translate(-50%, 0) scaleX(0.75);
+//         opacity: 1;
+//     }
+// }
+
+// .equip-spec {
+//     position: relative;
+//     stroke: #333;
+// }
+
+// .equip-spec::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+// }
+
 .equipping {
-  position: relative;
+    animation: equipping 2s infinite ease-in-out alternate;
 }
 
-.equipping::before {
+@keyframes equipping {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-}
-
-.equipping::after {
-    content: '';
-    position: absolute;
-    bottom: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-    animation-delay: 0.75s
-}
-
-@keyframes equipping-skill {
     from {
-        transform: translate(-50%, 0) scaleX(0);
+        border-color: #444;
     }
 
     to {
-        transform: translate(-50%, 0) scaleX(0.75);
+        border-color: whitesmoke;
-        opacity: 1;
     }
 }
 
-.equip-spec {
-    position: relative;
-    stroke: #333;
-}
-
-.equip-spec::after {
-    content: '';
-    position: absolute;
-    bottom: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-}
-
 .thresholds {
     display: flex;
     flex-flow: column;

client/assets/styles/vbox.less

@@ -78,9 +78,18 @@
             background: @white;
             border: 1px solid @white;
 
+            // overwrite the classes on white svg elements
             ellipse.white {
                 stroke: black;
             }
+
+            rect.white {
+                stroke: black;
+            }
+
+            polygon.white {
+                stroke: black;
+            }
         }
     }
 

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
+                if (!sequence.includes('END_SKILL')
-                // Otherwise 3 x Attack on same target will only render the first time
+                    || ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
-                return setTimeout(cb, 200);
+                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:
+    Speed: () =>
-    // <figure>
+    <figure>
-    //     {triangle(['white'])}
+        {triangle(['white'])}
-    //     <figcaption>Speed</figcaption>
+        <figcaption>Speed</figcaption>
-    // </figure>,
+    </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="25" y="25" width="175" height="175"/>
-            <rect x="40" y="40" width="120" height="120"/>
+            <rect x="55" y="55" width="115" height="115"/>
-            <rect x="70" y="70" width="60" height="60"/>
+            <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,