diff --git a/client/src/components/anims/absorb.jsx b/client/src/components/anims/absorb.jsx
index d4f99252..39b15234 100644
--- a/client/src/components/anims/absorb.jsx
+++ b/client/src/components/anims/absorb.jsx
@@ -1,21 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
-
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
-// shamelessly lifted from teh anime docs
-// https://animejs.com/documentation/#svgAttr
-
 class Absorb extends Component {
     constructor() {
         super();
@@ -56,7 +44,7 @@ class Absorb extends Component {
         this.animations.push(anime({
             targets: ['#absorb'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -66,8 +54,6 @@ class Absorb extends Component {
             targets: ['#absorb polygon'],
             points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
             easing: 'easeOutExpo',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -76,8 +62,6 @@ class Absorb extends Component {
             strokeWidth: [2, 1],
             easing: 'easeInOutSine',
             direction: 'alternate',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -90,8 +74,7 @@ class Absorb extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Absorb);
+module.exports = Absorb;
diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx
index 86b67c7d..9dc087a0 100644
--- a/client/src/components/anims/amplify.jsx
+++ b/client/src/components/anims/amplify.jsx
@@ -5,13 +5,6 @@ const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Amplify extends Component {
     constructor() {
         super();
@@ -43,7 +36,7 @@ class Amplify extends Component {
         this.animations.push(anime({
             targets: ['#amplify'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -54,8 +47,6 @@ class Amplify extends Component {
             d: [{ value: altPath }],
             stroke: ['#3050f8', '#a52a2a'],
             easing: 'easeInOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -64,8 +55,6 @@ class Amplify extends Component {
             baseFrequency: 0.15,
             scale: 4,
             easing: 'easeInOutExpo',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -78,8 +67,7 @@ class Amplify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Amplify);
+module.exports = Amplify;
diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx
index 0f5dd317..01c239f3 100644
--- a/client/src/components/anims/attack.jsx
+++ b/client/src/components/anims/attack.jsx
@@ -5,13 +5,6 @@ const anime = require('animejs').default;
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Attack extends Component {
     constructor(props) {
         super();
@@ -62,4 +55,4 @@ class Attack extends Component {
     }
 }
 
-module.exports = addState(Attack);
+module.exports = Attack;
diff --git a/client/src/components/anims/banish.jsx b/client/src/components/anims/banish.jsx
index 12ae365a..5c43e0ce 100644
--- a/client/src/components/anims/banish.jsx
+++ b/client/src/components/anims/banish.jsx
@@ -8,7 +8,6 @@ function Banish(id, idle) {
         scaleY: 0,
         fill: '#fff',
         easing: 'easeOutElastic',
-        delay: TIMES.TARGET_DELAY_MS,
         duration: TIMES.TARGET_DURATION_MS * 0.45,
         direction: 'alternate',
         begin: idle.pause,
diff --git a/client/src/components/anims/bash.circle.jsx b/client/src/components/anims/bash.circle.jsx
index 866b5d59..8fe8c9fe 100644
--- a/client/src/components/anims/bash.circle.jsx
+++ b/client/src/components/anims/bash.circle.jsx
@@ -5,13 +5,6 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Bash extends Component {
     constructor() {
         super();
@@ -54,7 +47,7 @@ class Bash extends Component {
         this.animations.push(anime({
             targets: ['#bash'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -64,7 +57,6 @@ class Bash extends Component {
             targets: ['#bash'],
             scale: {
                 value: 1,
-                delay: TIMES.TARGET_DELAY_MS,
                 duration: TIMES.TARGET_DURATION_MS * 0.2,
                 easing: 'easeInExpo',
             },
@@ -72,10 +64,9 @@ class Bash extends Component {
                 value: 180,
                 easing: 'linear',
                 loop: true,
-                delay: TIMES.TARGET_DELAY_MS,
                 duration: TIMES.TARGET_DURATION_MS,
             },
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
+            delay: TIMES.TARGET_DURATION_MS * 0.1,
             duration: TIMES.TARGET_DURATION_MS * 0.2,
             easing: 'easeOutSine',
         }));
@@ -86,8 +77,6 @@ class Bash extends Component {
             scale: 10,
             numOctaves: 5,
             easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -100,8 +89,7 @@ class Bash extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Bash);
+module.exports = Bash;
diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx
index c8e3894d..d84eba3a 100644
--- a/client/src/components/anims/bash.jsx
+++ b/client/src/components/anims/bash.jsx
@@ -1,18 +1,10 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
 
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Bash extends Component {
     constructor() {
         super();
@@ -47,7 +39,7 @@ class Bash extends Component {
         this.animations.push(anime({
             targets: ['#bash'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -57,7 +49,6 @@ class Bash extends Component {
             targets: ['#bash'],
             scale: {
                 value: 1,
-                delay: TIMES.TARGET_DELAY_MS,
                 duration: TIMES.TARGET_DURATION_MS * 0.2,
                 easing: 'easeInExpo',
             },
@@ -74,7 +65,7 @@ class Bash extends Component {
                 { translateX: 0, translateY: 2 },
             ],
 
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
+            delay: TIMES.TARGET_DURATION_MS * 0.1,
             duration: TIMES.TARGET_DURATION_MS * 0.2,
             easing: 'easeOutSine',
         }));
@@ -90,7 +81,6 @@ class Bash extends Component {
             ],
             easing: 'easeOutSine',
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -103,8 +93,7 @@ class Bash extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Bash);
+module.exports = Bash;
diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx
index c11bdc95..cb07d51a 100644
--- a/client/src/components/anims/blast.jsx
+++ b/client/src/components/anims/blast.jsx
@@ -1,34 +1,12 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
 const anime = require('animejs').default;
 const times = require('lodash/times');
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
-function projectile(x, y, radius, colour) {
-    return (
-        <circle
-            cx={x}
-            cy={y}
-            r={radius}
-            fill="url(#grad1)"
-            stroke-width="2"
-            stroke={colour}
-            filter="url(#explosion)"
-        />
-    );
-}
-
 class Blast extends Component {
-    constructor(props) {
+    constructor() {
         super();
         this.animations = [];
     }
@@ -62,7 +40,7 @@ class Blast extends Component {
         this.animations.push(anime({
             targets: ['#blast'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.5, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -75,7 +53,6 @@ class Blast extends Component {
             `,
             style: { rotate: anime.random(-180, 180) },
             easing: 'easeOutCubic',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -88,8 +65,7 @@ class Blast extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Blast);
+module.exports = Blast;
diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx
index a962b11d..a08ce2c9 100644
--- a/client/src/components/anims/block.jsx
+++ b/client/src/components/anims/block.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Block extends Component {
     constructor() {
         super();
@@ -38,7 +30,7 @@ class Block extends Component {
         this.animations.push(anime({
             targets: ['#block'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -53,8 +45,7 @@ class Block extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Block);
+module.exports = Block;
diff --git a/client/src/components/anims/break.jsx b/client/src/components/anims/break.jsx
index 9663bce6..6fd08b47 100644
--- a/client/src/components/anims/break.jsx
+++ b/client/src/components/anims/break.jsx
@@ -1,20 +1,12 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 
 // logarithmic spiral lifted from
 // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Break extends Component {
     constructor() {
         super();
@@ -63,7 +55,7 @@ class Break extends Component {
         this.animations.push(anime({
             targets: ['#break'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -74,7 +66,6 @@ class Break extends Component {
             rotate: 180,
             easing: 'linear',
             loop: true,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -82,7 +73,6 @@ class Break extends Component {
             targets: ['#break circle'],
             easing: 'easeInSine',
             r: 300,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -93,10 +83,8 @@ class Break extends Component {
             numOctaves: 5,
             easing: 'easeOutSine',
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
-
     }
 
     // this is necessary because
@@ -107,8 +95,7 @@ class Break extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Break);
+module.exports = Break;
diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx
index 1dc54cf9..a56ef6cd 100644
--- a/client/src/components/anims/buff.jsx
+++ b/client/src/components/anims/buff.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Buff extends Component {
     constructor() {
         super();
@@ -39,7 +31,7 @@ class Buff extends Component {
         this.animations.push(anime({
             targets: ['#buff'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -50,7 +42,6 @@ class Buff extends Component {
             points: '0,190    100,10   190,190',
 
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -59,7 +50,6 @@ class Buff extends Component {
             points: '40,170    100,50   160,170',
 
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -68,7 +58,6 @@ class Buff extends Component {
             points: '70,150    100,90   130,150',
 
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -81,8 +70,7 @@ class Buff extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Buff);
+module.exports = Buff;
diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx
index 94bd40b4..2d959a7d 100644
--- a/client/src/components/anims/chaos.jsx
+++ b/client/src/components/anims/chaos.jsx
@@ -1,18 +1,10 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 const { randomPoints } = require('../../utils');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 function projectile(x, y, radius, colour) {
     return (
         <circle
@@ -74,7 +66,7 @@ class Chaos extends Component {
         this.animations.push(anime({
             targets: '.skill-anim',
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.3 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
             ],
         }));
@@ -85,7 +77,6 @@ class Chaos extends Component {
             translateY: 0,
             translateX: 0,
             loop: false,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
             easing: 'easeInQuad',
         }));
@@ -97,7 +88,6 @@ class Chaos extends Component {
             numOctaves: 5,
             easing: 'easeOutSine',
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -108,8 +98,6 @@ class Chaos extends Component {
             // cx: 150,
             // cy: 200,
             // opacity: 0,
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
             easing: 'easeInQuad',
         })));
@@ -119,8 +107,7 @@ class Chaos extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Chaos);
+module.exports = Chaos;
diff --git a/client/src/components/anims/counter.jsx b/client/src/components/anims/counter.jsx
index ec7a0399..2feb134c 100644
--- a/client/src/components/anims/counter.jsx
+++ b/client/src/components/anims/counter.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Counter extends Component {
     constructor() {
         super();
@@ -51,7 +43,7 @@ class Counter extends Component {
         this.animations.push(anime({
             targets: ['#counter'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -60,7 +52,7 @@ class Counter extends Component {
         this.animations.push(anime({
             targets: ['#counter'],
             rotateX: 180,
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS / 3,
+            delay: TIMES.TARGET_DURATION_MS / 3,
             duration: TIMES.TARGET_DURATION_MS / 2,
             easing: 'easeOutSine',
         }));
@@ -71,8 +63,6 @@ class Counter extends Component {
             scale: 10,
             numOctaves: 5,
             easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -85,8 +75,7 @@ class Counter extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Counter);
+module.exports = Counter;
diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx
index d186a4d3..088119ee 100644
--- a/client/src/components/anims/curse.jsx
+++ b/client/src/components/anims/curse.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Curse extends Component {
     constructor() {
         super();
@@ -54,7 +46,7 @@ class Curse extends Component {
         this.animations.push(anime({
             targets: ['#curse'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -64,7 +56,6 @@ class Curse extends Component {
             targets: ['#curseCircleOne', '#curseFilterOne'],
             r: 30,
             easing: 'easeInOutSine',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -72,7 +63,6 @@ class Curse extends Component {
             targets: ['#curseCircleTwo', '#curseFilterTwo'],
             r: 60,
             easing: 'easeInOutSine',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -80,7 +70,6 @@ class Curse extends Component {
             targets: ['#curseCircleThree', '#curseFilterThree'],
             r: 90,
             easing: 'easeInOutSine',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -93,8 +82,7 @@ class Curse extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Curse);
+module.exports = Curse;
diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
index 14bbab7a..0fb69f26 100644
--- a/client/src/components/anims/debuff.jsx
+++ b/client/src/components/anims/debuff.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Debuff extends Component {
     constructor() {
         super();
@@ -41,7 +33,7 @@ class Debuff extends Component {
         this.animations.push(anime({
             targets: ['#debuff'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -52,7 +44,6 @@ class Debuff extends Component {
             points: '0,190    100,10   190,190',
 
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -61,7 +52,6 @@ class Debuff extends Component {
             points: '40,170    100,50   160,170',
 
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -70,7 +60,6 @@ class Debuff extends Component {
             points: '70,150    100,90   130,150',
 
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -83,8 +72,7 @@ class Debuff extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Debuff);
+module.exports = Debuff;
diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx
index 5b1c8b4a..6d2cda92 100644
--- a/client/src/components/anims/decay.jsx
+++ b/client/src/components/anims/decay.jsx
@@ -2,17 +2,9 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 const times = require('lodash/times');
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Decay extends Component {
     constructor() {
         super();
@@ -40,7 +32,7 @@ class Decay extends Component {
         this.animations.push(anime({
             targets: ['#decay'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -55,7 +47,6 @@ class Decay extends Component {
                 rotate(${anime.random(-15, 15)})
             `,
             easing: 'easeOutSine',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -68,8 +59,7 @@ class Decay extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Decay);
+module.exports = Decay;
diff --git a/client/src/components/anims/electrify.jsx b/client/src/components/anims/electrify.jsx
index 06ed0e20..752410dc 100644
--- a/client/src/components/anims/electrify.jsx
+++ b/client/src/components/anims/electrify.jsx
@@ -1,19 +1,10 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const times = require('lodash/times');
-const { connect } = require('preact-redux');
-
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Electrify extends Component {
     constructor() {
         super();
@@ -57,7 +48,7 @@ class Electrify extends Component {
         this.animations.push(anime({
             targets: ['#electrify'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -109,8 +100,7 @@ class Electrify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Electrify);
+module.exports = Electrify;
diff --git a/client/src/components/anims/electrocute.jsx b/client/src/components/anims/electrocute.jsx
index 581a3db6..5b81011f 100644
--- a/client/src/components/anims/electrocute.jsx
+++ b/client/src/components/anims/electrocute.jsx
@@ -1,19 +1,11 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const times = require('lodash/times')
-const { connect } = require('preact-redux');
 
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Electrocute extends Component {
     constructor() {
         super();
@@ -55,7 +47,7 @@ class Electrocute extends Component {
         this.animations.push(anime({
             targets: ['#electrify'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -101,8 +93,7 @@ class Electrocute extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Electrocute);
+module.exports = Electrocute;
diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx
index fac90bb0..e9eb7744 100644
--- a/client/src/components/anims/haste.jsx
+++ b/client/src/components/anims/haste.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Haste extends Component {
     constructor() {
         super();
@@ -49,7 +41,7 @@ class Haste extends Component {
         this.animations.push(anime({
             targets: ['#haste'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -59,7 +51,6 @@ class Haste extends Component {
             targets: ['#haste g'],
             stroke: [COLOURS.GREEN, COLOURS.RED],
             easing: 'easeInOutSine',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS * 0.75,
         }));
 
@@ -69,8 +60,6 @@ class Haste extends Component {
             scale: 10,
             numOctaves: 5,
             easing: 'easeInOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -83,8 +72,7 @@ class Haste extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Haste);
+module.exports = Haste;
diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx
index 6e84c81b..2e0da4f9 100644
--- a/client/src/components/anims/heal.jsx
+++ b/client/src/components/anims/heal.jsx
@@ -1,18 +1,10 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 const { randomPoints } = require('../../utils');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 function projectile(x, y, radius, colour) {
     return (
         <circle
@@ -60,7 +52,7 @@ class Heal extends Component {
         this.animations.push(anime({
             targets: ['#heal'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS / 4, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -70,7 +62,6 @@ class Heal extends Component {
             targets: ['#heal circle'],
             cx: 150,
             cy: 200,
-            delay: TIMES.TARGET_DELAY_MS * 4,
             duration: TIMES.TARGET_DURATION_MS * 0.9,
             easing: 'easeOutCirc',
             direction: 'reverse',
@@ -81,8 +72,7 @@ class Heal extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Heal);
+module.exports = Heal;
diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx
index fb31b373..952ace85 100644
--- a/client/src/components/anims/hex.jsx
+++ b/client/src/components/anims/hex.jsx
@@ -1,16 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
 // shamelessly lifted from teh anime docs
 // https://animejs.com/documentation/#svgAttr
 
@@ -54,7 +47,7 @@ class Hex extends Component {
         this.animations.push(anime({
             targets: ['#hex'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -65,7 +58,6 @@ class Hex extends Component {
             points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
             easing: 'easeOutExpo',
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -75,7 +67,6 @@ class Hex extends Component {
             easing: 'easeInOutSine',
             direction: 'alternate',
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -88,8 +79,7 @@ class Hex extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Hex);
+module.exports = Hex;
diff --git a/client/src/components/anims/hybrid.jsx b/client/src/components/anims/hybrid.jsx
index 89884a32..cb4be7ca 100644
--- a/client/src/components/anims/hybrid.jsx
+++ b/client/src/components/anims/hybrid.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Hybrid extends Component {
     constructor() {
         super();
@@ -94,12 +86,11 @@ class Hybrid extends Component {
         this.animations.push(anime({
             targets: ['#hybrid'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             transform: {
                 value: ['rotate(0)', 'rotate(360)'],
-                delay: TIMES.TARGET_DELAY_MS,
                 duration: TIMES.TARGET_DURATION_MS,
                 direction: 'alternate',
             },
@@ -110,7 +101,6 @@ class Hybrid extends Component {
             r: [10, anime.random(10, 30)],
             targets: ['#hybrid circle.green-one'],
             cx: [50, 250, 50, 250],
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInOutSine',
             loop: true,
@@ -120,7 +110,6 @@ class Hybrid extends Component {
             r: [10, anime.random(10, 30)],
             targets: ['#hybrid circle.green-two'],
             cy: [250, 50, 250, 50],
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInOutSine',
             loop: true,
@@ -131,7 +120,6 @@ class Hybrid extends Component {
             targets: ['#hybrid circle.bluewhite-one'],
             fill: [COLOURS.WHITE, COLOURS.BLUE],
             cy: [50, 250, 50, 250],
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInOutSine',
             loop: true,
@@ -142,7 +130,6 @@ class Hybrid extends Component {
             targets: ['#hybrid circle.bluewhite-two'],
             cx: [250, 50, 250, 50],
             fill: [COLOURS.WHITE, COLOURS.BLUE],
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInOutSine',
             loop: true,
@@ -153,8 +140,7 @@ class Hybrid extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Hybrid);
+module.exports = Hybrid;
diff --git a/client/src/components/anims/intercept.jsx b/client/src/components/anims/intercept.jsx
index 5049febf..7cd5f43e 100644
--- a/client/src/components/anims/intercept.jsx
+++ b/client/src/components/anims/intercept.jsx
@@ -1,7 +1,5 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
-
 const anime = require('animejs').default;
 
 const {
@@ -9,13 +7,6 @@ const {
     COLOURS,
 } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Intercept extends Component {
     constructor() {
         super();
@@ -47,7 +38,7 @@ class Intercept extends Component {
         this.animations.push(anime({
             targets: ['#intercept'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -61,7 +52,6 @@ class Intercept extends Component {
             ],
             strokeWidth: 0,
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInCubic',
             // direction: 'reverse',
@@ -70,7 +60,6 @@ class Intercept extends Component {
         this.animations.push(anime({
             targets: ['#intercept rect'],
             y: 96,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInCubic',
             // direction: 'reverse',
@@ -82,8 +71,6 @@ class Intercept extends Component {
             scale: 10,
             numOctaves: 5,
             easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -96,8 +83,7 @@ class Intercept extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Intercept);
+module.exports = Intercept;
diff --git a/client/src/components/anims/invert.jsx b/client/src/components/anims/invert.jsx
index ac083bea..de8a6989 100644
--- a/client/src/components/anims/invert.jsx
+++ b/client/src/components/anims/invert.jsx
@@ -6,7 +6,6 @@ function Invert(id, idle) {
     return anime({
         targets: [document.getElementById(id)],
         rotate: 180,
-        delay: TIMES.TARGET_DELAY_MS,
         duration: TIMES.TARGET_DURATION_MS * 0.45,
         easing: 'easeInOutElastic',
         direction: 'alternate',
diff --git a/client/src/components/anims/link.jsx b/client/src/components/anims/link.jsx
index 66ecdaf4..0d62bf7c 100644
--- a/client/src/components/anims/link.jsx
+++ b/client/src/components/anims/link.jsx
@@ -1,18 +1,10 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
 
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Link extends Component {
     constructor() {
         super();
@@ -68,7 +60,7 @@ class Link extends Component {
         this.animations.push(anime({
             targets: ['#link'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: 1000 },
+                { value: 1, duration: 1000 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -78,7 +70,6 @@ class Link extends Component {
             targets: ['#link path'],
             strokeDashoffset: [anime.setDashoffset, 0],
             duration: TIMES.TARGET_DURATION_MS * 0.8,
-            delay: TIMES.TARGET_DELAY_MS,
             easing: 'easeInOutSine',
         });
     }
@@ -91,8 +82,7 @@ class Link extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Link);
+module.exports = Link;
diff --git a/client/src/components/anims/purge.jsx b/client/src/components/anims/purge.jsx
index 25cc6bdd..dcd79e20 100644
--- a/client/src/components/anims/purge.jsx
+++ b/client/src/components/anims/purge.jsx
@@ -1,17 +1,8 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
-
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Purge extends Component {
     constructor() {
         super();
@@ -51,7 +42,7 @@ class Purge extends Component {
         this.animations.push(anime({
             targets: ['#purge'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -60,7 +51,6 @@ class Purge extends Component {
         this.animations.push(anime({
             targets: ['#purge g'],
             strokeWidth: [15, 0],
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInSine',
         }));
@@ -81,8 +71,7 @@ class Purge extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Purge);
+module.exports = Purge;
diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx
index 1e605b79..0f8e3593 100644
--- a/client/src/components/anims/purify.jsx
+++ b/client/src/components/anims/purify.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 function projectile(x, y, radius, colour) {
     return (
         <circle
@@ -80,7 +72,7 @@ class Purify extends Component {
         this.animations.push(anime({
             targets: ['#purify'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -89,7 +81,7 @@ class Purify extends Component {
         this.animations.push(anime({
             targets: ['#block'],
             opacity: [
-                { value: 0, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS },
+                { value: 0, duration: TIMES.TARGET_DURATION_MS },
             ],
             easing: 'easeInOutSine',
         }));
@@ -102,7 +94,6 @@ class Purify extends Component {
             easing: 'easeInOutSine',
             cx: 128,
             cy: 24,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -115,8 +106,7 @@ class Purify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Purify);
+module.exports = Purify;
diff --git a/client/src/components/anims/recharge.jsx b/client/src/components/anims/recharge.jsx
index 164dacd4..18ebeaa3 100644
--- a/client/src/components/anims/recharge.jsx
+++ b/client/src/components/anims/recharge.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Recharge extends Component {
     constructor() {
         super();
@@ -59,7 +51,7 @@ class Recharge extends Component {
         this.animations.push(anime({
             targets: ['#recharge'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -71,7 +63,6 @@ class Recharge extends Component {
             easing: 'easeInOutSine',
             direction: 'alternate',
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -82,7 +73,6 @@ class Recharge extends Component {
             numOctaves: 5,
 
             easing: 'easeOutSine',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -95,8 +85,7 @@ class Recharge extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Recharge);
+module.exports = Recharge;
diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx
deleted file mode 100644
index 515bcb27..00000000
--- a/client/src/components/anims/red.block.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-const preact = require('preact');
-const { Component } = require('preact');
-const anime = require('animejs').default;
-const { connect } = require('preact-redux');
-
-const { TIMES } = require('../../constants');
-
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
-class Block extends Component {
-    constructor() {
-        super();
-        this.animations = [];
-    }
-
-    render() {
-        return (
-            <svg
-                class="skill-animation red"
-                version="1.1"
-                id="block"
-                xmlns="http://www.w3.org/2000/svg"
-                style={{ transform: 'rotate(180deg)' }}
-                viewBox="0 0 256 256">
-                <filter id='blockFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
-                <polygon
-                    points='128,168 80,240 176,240'
-                    style={{ filter: 'url("#blockFilter")' }}
-                    id="charge"/>
-                <polyline
-                    points='176,240 212,216 128,96 44,216 80,240'
-                    style={{ filter: 'url("#blockFilter")' }}
-                    id="charge"/>
-                <polyline
-                    points='212,216 248,192 128,24 8,192 44,216'
-                    style={{ filter: 'url("#blockFilter")' }}
-                    id="charge"/>
-            </svg>
-        );
-    }
-
-    componentDidMount() {
-        this.animations.push(anime({
-            targets: ['#block'],
-            opacity: [
-                { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
-                { value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION },
-            ],
-            easing: 'easeInOutSine',
-        }));
-
-        this.animations.push(anime({
-            targets: ['#blockFilter feTurbulence', ' #blockFilter feDisplacementMap'],
-            baseFrequency: 0,
-            scale: 1,
-            easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_FADE_IN_DELAY,
-            duration: TIMES.TARGET_DURATION_MS,
-        }));
-    }
-
-    // this is necessary because
-    // skipping / timing / unmounting race conditions
-    // can cause the animations to cut short, this will ensure the values are reset
-    // because preact will recycle all these components
-    componentWillUnmount() {
-        for (let i = this.animations.length - 1; i >= 0; i--) {
-            this.animations[i].reset();
-        }
-        this.props.animCb && this.props.animCb();
-    }
-}
-
-module.exports = addState(Block);
diff --git a/client/src/components/anims/red.circles.jsx b/client/src/components/anims/red.circles.jsx
deleted file mode 100644
index a919dac4..00000000
--- a/client/src/components/anims/red.circles.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-const preact = require('preact');
-const { Component } = require('preact');
-const anime = require('animejs').default;
-const { connect } = require('preact-redux');
-
-const { TIMES } = require('../../constants');
-
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
-class Intercept extends Component {
-    constructor() {
-        super();
-        this.animations = [];
-    }
-
-    render({ player }) {
-        return (
-            <svg
-                class="skill-animation red"
-                version="1.1"
-                id="intercept"
-                xmlns="http://www.w3.org/2000/svg"
-                style={{
-                    transform: player ? 'rotate3d(1, 0, 0, 180deg)' : '',
-                }}
-                viewBox="0 0 128 128">
-                <filter id='interceptFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
-                <g filter="url(#interceptFilter)">
-                    <circle cx="64" cy="128" r="48" />
-                    <circle cx="64" cy="128" r="32" />
-                    <circle cx="64" cy="128" r="16" />
-                </g>
-            </svg>
-        );
-    }
-
-    componentDidMount() {
-        this.animations.push(anime({
-            targets: ['#intercept'],
-            opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-            ],
-            easing: 'easeInOutSine',
-        }));
-
-        this.animations.push(anime({
-            targets: ['#intercept'],
-            scale: 3,
-            strokeWidth: 0,
-
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS,
-            easing: 'easeInOutCubic',
-        }));
-
-        this.animations.push(anime({
-            targets: ['#interceptFilter feTurbulence', '#interceptFilter feDisplacementMap'],
-            baseFrequency: 2,
-            scale: 10,
-            numOctaves: 5,
-            easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS,
-        }));
-    }
-
-    // this is necessary because
-    // skipping / timing / unmounting race conditions
-    // can cause the animations to cut short, this will ensure the values are reset
-    // because preact will recycle all these components
-    componentWillUnmount() {
-        for (let i = this.animations.length - 1; i >= 0; i--) {
-            this.animations[i].reset();
-        }
-        this.props.animCb && this.props.animCb();
-    }
-}
-
-module.exports = addState(Intercept);
diff --git a/client/src/components/anims/reflect.jsx b/client/src/components/anims/reflect.jsx
index 7b1d501f..22eb705f 100644
--- a/client/src/components/anims/reflect.jsx
+++ b/client/src/components/anims/reflect.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Refl extends Component {
     constructor() {
         super();
@@ -54,7 +46,7 @@ class Refl extends Component {
         this.animations.push(anime({
             targets: ['#reflect'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -77,8 +69,7 @@ class Refl extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Refl);
+module.exports = Refl;
diff --git a/client/src/components/anims/restrict.jsx b/client/src/components/anims/restrict.jsx
index 875d6a5a..d88afb34 100644
--- a/client/src/components/anims/restrict.jsx
+++ b/client/src/components/anims/restrict.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Restrict extends Component {
     constructor() {
         super();
@@ -42,7 +34,7 @@ class Restrict extends Component {
         this.animations.push(anime({
             targets: ['#restrict'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -52,12 +44,11 @@ class Restrict extends Component {
             targets: ['#restrict'],
             scale: {
                 value: 1,
-                delay: TIMES.TARGET_DELAY_MS,
                 duration: TIMES.TARGET_DURATION_MS * 0.2,
                 easing: 'easeInExpo',
             },
 
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
+            delay: TIMES.TARGET_DURATION_MS * 0.1,
             duration: TIMES.TARGET_DURATION_MS * 0.2,
             easing: 'easeOutSine',
         }));
@@ -69,7 +60,6 @@ class Restrict extends Component {
             numOctaves: 5,
             easing: 'easeOutSine',
 
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -78,7 +68,7 @@ class Restrict extends Component {
 
             d: 'M 124 8 L 8 124',
 
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            delay: TIMES.TARGET_DURATION_MS * 0.4,
             duration: TIMES.TARGET_DURATION_MS * 0.4,
             easing: 'easeOutSine',
         }));
@@ -88,7 +78,7 @@ class Restrict extends Component {
 
             d: 'M 124 124 L 8 8',
 
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            delay: TIMES.TARGET_DURATION_MS * 0.4,
             duration: TIMES.TARGET_DURATION_MS * 0.4,
             easing: 'easeOutSine',
         }));
@@ -102,8 +92,7 @@ class Restrict extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Restrict);
+module.exports = Restrict;
diff --git a/client/src/components/anims/ruin.jsx b/client/src/components/anims/ruin.jsx
index c7a4423f..1bca34bc 100644
--- a/client/src/components/anims/ruin.jsx
+++ b/client/src/components/anims/ruin.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Ruin extends Component {
     constructor() {
         super();
@@ -75,7 +67,7 @@ class Ruin extends Component {
         this.animations.push(anime({
             targets: ['#ruin'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -86,7 +78,6 @@ class Ruin extends Component {
             rotate: 180,
             easing: 'linear',
             loop: true,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -99,12 +90,7 @@ class Ruin extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        try {
-            this.props.animCb && this.props.animCb();
-        } catch (e) {
-            console.log(e);
-        }
     }
 }
 
-module.exports = addState(Ruin);
+module.exports = Ruin;
diff --git a/client/src/components/anims/silence.jsx b/client/src/components/anims/silence.jsx
index f46dcced..f895d3d6 100644
--- a/client/src/components/anims/silence.jsx
+++ b/client/src/components/anims/silence.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
 const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Silence extends Component {
     constructor() {
         super();
@@ -47,7 +39,7 @@ class Silence extends Component {
         this.animations.push(anime({
             targets: ['#silence'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -58,12 +50,11 @@ class Silence extends Component {
             rotate: [90, 90],
             scale: {
                 value: 1,
-                delay: TIMES.TARGET_DELAY_MS,
                 duration: TIMES.TARGET_DURATION_MS * 0.2,
                 easing: 'easeInExpo',
             },
 
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
+            delay: TIMES.TARGET_DURATION_MS * 0.1,
             duration: TIMES.TARGET_DURATION_MS * 0.2,
             easing: 'easeOutSine',
         }));
@@ -73,7 +64,7 @@ class Silence extends Component {
 
             d: 'M 124 8 L 8 124',
 
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            delay: TIMES.TARGET_DURATION_MS * 0.4,
             duration: TIMES.TARGET_DURATION_MS * 0.4,
             easing: 'easeOutSine',
         }));
@@ -83,7 +74,7 @@ class Silence extends Component {
 
             d: 'M 124 124 L 8 8',
 
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            delay: TIMES.TARGET_DURATION_MS * 0.4,
             duration: TIMES.TARGET_DURATION_MS * 0.4,
             easing: 'easeOutSine',
         }));
@@ -97,8 +88,7 @@ class Silence extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Silence);
+module.exports = Silence;
diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx
index 5a286eb7..f3c4b802 100644
--- a/client/src/components/anims/siphon.jsx
+++ b/client/src/components/anims/siphon.jsx
@@ -1,19 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const duration = TIMES.TARGET_DURATION_MS;
-
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Siphon extends Component {
     constructor() {
         super();
@@ -43,7 +33,7 @@ class Siphon extends Component {
         this.animations.push(anime({
             targets: '.skill-anim',
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.3 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
             ],
         }));
@@ -51,8 +41,7 @@ class Siphon extends Component {
         anime({
             targets: '#siphon',
             r: 0,
-            delay: TIMES.TARGET_DELAY_MS,
-            duration,
+            duration: TIMES.TARGET_DURATION_MS,
             easing: 'easeInSine',
         });
     }
@@ -61,8 +50,7 @@ class Siphon extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Siphon);
+module.exports = Siphon;
diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx
index 207b986f..6d236a5f 100644
--- a/client/src/components/anims/siphon.tick.jsx
+++ b/client/src/components/anims/siphon.tick.jsx
@@ -1,18 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const duration = TIMES.TARGET_DURATION_MS;
-
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
 
 function projectile(x, y, radius, colour) {
     return (
@@ -82,7 +73,7 @@ class SiphonTick extends Component {
         anime({
             targets: '#siphon',
             r: 600,
-            duration: duration * 2 / 3,
+            duration: TIMES.TARGET_DURATION_MS * 2 / 3,
             easing: 'easeInSine',
         });
 
@@ -92,8 +83,8 @@ class SiphonTick extends Component {
                 targets: proj,
                 cx: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
                 cy: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)),
-                delay: (Math.random() * duration * 1 / 2),
-                duration,
+                delay: (Math.random() * TIMES.TARGET_DURATION_MS * 1 / 2),
+                duration: TIMES.TARGET_DURATION_MS,
                 easing: 'easeOutQuad',
             });
         });
@@ -103,8 +94,7 @@ class SiphonTick extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(SiphonTick);
+module.exports = SiphonTick;
diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx
index a65de8cd..b3631ffd 100644
--- a/client/src/components/anims/slay.jsx
+++ b/client/src/components/anims/slay.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 function projectile(x, y, radius, colour) {
     return (
         <circle
@@ -92,16 +84,12 @@ class Slay extends Component {
         this.animations.push(anime({
             targets: '#slay',
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                {
-                    value: 0,
-                    delay: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.2,
-                    duration: TIMES.POST_SKILL_DURATION_MS * 0.3,
-                }],
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
             translateY: 0,
             translateX: 0,
             loop: false,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: (TIMES.TARGET_DURATION_MS * 0.5),
             easing: 'easeInQuad',
         }));
@@ -110,15 +98,15 @@ class Slay extends Component {
             targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
             baseFrequency: 10,
             scale: 100,
-            delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.5),
-            duration: (TIMES.TARGET_DURATION_MS * 0.5),
+            delay: TIMES.TARGET_DURATION_MS * 0.4,
+            duration: TIMES.TARGET_DURATION_MS * 0.3,
             easing: 'easeInQuad',
         }));
 
         this.animations.push(anime({
             targets: '#sword',
             opacity: 0,
-            delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS),
+            delay: TIMES.TARGET_DURATION_MS * 0.7,
         }));
 
         const projectiles = document.querySelectorAll('#slay circle');
@@ -127,8 +115,8 @@ class Slay extends Component {
                 targets: proj,
                 cx: Math.random() * 250 + 25,
                 cy: Math.random() * 200 - 100,
-                delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.2),
-                duration: (TIMES.POST_SKILL_DURATION_MS * 0.3),
+                delay: TIMES.TARGET_DURATION_MS * 0.7,
+                duration: TIMES.TARGET_DURATION_MS * 0.3,
                 easing: 'easeInQuad',
             }));
         });
@@ -138,8 +126,7 @@ class Slay extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Slay);
+module.exports = Slay;
diff --git a/client/src/components/anims/sleep.jsx b/client/src/components/anims/sleep.jsx
index 307d8476..ba861d46 100644
--- a/client/src/components/anims/sleep.jsx
+++ b/client/src/components/anims/sleep.jsx
@@ -1,7 +1,6 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 const { randomPoints } = require('../../utils');
@@ -9,13 +8,6 @@ const { randomPoints } = require('../../utils');
 // logarithmic spiral lifted from
 // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 function projectile(x, y, radius, colour) {
     return (
         <circle
@@ -81,7 +73,7 @@ class Sleep extends Component {
         this.animations.push(anime({
             targets: ['#sleep'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
         }));
@@ -91,28 +83,17 @@ class Sleep extends Component {
             rotate: 180,
             easing: 'linear',
             loop: true,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS,
         }));
 
         this.animations.push(anime({
             targets: ['#stun'],
             opacity: [
-                { value: 0, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
         }));
 
-/*        this.animations.push(anime({
-            targets: ['#heal'],
-            opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.TARGET_DURATION_MS * 0.3 },
-                { value: 0, delay: TIMES.POST_SKILL_DURATION_MS * 0.6, duration: TIMES.POST_SKILL_DURATION_MS * 0.4 },
-            ],
-            easing: 'easeInOutSine',
-        }));
-*/
-
         this.animations.push(anime({
             targets: ['#charges'],
             opacity: 1,
@@ -125,11 +106,10 @@ class Sleep extends Component {
             targets: ['#charges'],
             cx: 0,
             cy: 0,
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.75,
+            delay: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.75,
             duration: TIMES.POST_SKILL_DURATION_MS * 0.25,
             easing: 'easeInOutSine',
         }));
-
     }
 
     // this is necessary because
@@ -140,8 +120,7 @@ class Sleep extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Sleep);
+module.exports = Sleep;
diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx
index d972c37b..b6d129fb 100644
--- a/client/src/components/anims/strike.jsx
+++ b/client/src/components/anims/strike.jsx
@@ -1,31 +1,16 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const { connect } = require('preact-redux');
 const anime = require('animejs').default;
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Strike extends Component {
-    constructor(props) {
+    constructor() {
         super();
-        this.props = props;
         this.animations = [];
     }
 
     render() {
-        // const { x, y } = (this.props && this.props.direction) || { x: 0, y: 0 };
-        // const angle = (Math.atan(y / x) * (180 / Math.PI)) + 90;
-        // console.log(x, -y);
-        // console.log(angle);
-        // can't get this shit to work
-
         return (
             <svg
                 class="strike-anim"
@@ -54,7 +39,6 @@ class Strike extends Component {
             x: [200, 0, 200],
             height: [200, 10, 0],
             width: [20, 400, 0],
-            delay: TIMES.TARGET_DELAY_MS * 0.5,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -64,7 +48,7 @@ class Strike extends Component {
             scale: 50,
             numOctaves: 5,
             easing: 'easeOutSine',
-            delay: TIMES.TARGET_DELAY_MS + (TIMES.TARGET_DURATION_MS / 3),
+            delay: TIMES.TARGET_DURATION_MS / 3,
             duration: TIMES.TARGET_DURATION_MS / 2,
         }));
     }
@@ -77,9 +61,7 @@ class Strike extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
-
 }
 
-module.exports = addState(Strike);
+module.exports = Strike;
diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx
index 11b911d9..17b81299 100644
--- a/client/src/components/anims/stun.jsx
+++ b/client/src/components/anims/stun.jsx
@@ -1,20 +1,11 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES } = require('../../constants');
 
-// logarithmic spiral lifted from
 // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Stun extends Component {
     constructor() {
         super();
@@ -54,7 +45,7 @@ class Stun extends Component {
         this.animations.push(anime({
             targets: ['#stun'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -65,7 +56,6 @@ class Stun extends Component {
             rotate: 180,
             easing: 'linear',
             loop: true,
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
     }
@@ -78,8 +68,7 @@ class Stun extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Stun);
+module.exports = Stun;
diff --git a/client/src/components/anims/sustain.jsx b/client/src/components/anims/sustain.jsx
index d93febc3..14d843a3 100644
--- a/client/src/components/anims/sustain.jsx
+++ b/client/src/components/anims/sustain.jsx
@@ -1,17 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class Sustain extends Component {
     constructor() {
         super();
@@ -54,7 +46,7 @@ class Sustain extends Component {
         this.animations.push(anime({
             targets: ['#sustain'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -67,7 +59,7 @@ class Sustain extends Component {
                 {
                     stroke: [COLOURS.GREEN, COLOURS.RED],
                     fill: [null, COLOURS.RED],
-                    delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.2,
+                    delay: TIMES.TARGET_DURATION_MS * 0.2,
                     duration: TIMES.TARGET_DURATION_MS * 0.6,
                     easing: 'easeInOutSine',
                 },
@@ -82,13 +74,12 @@ class Sustain extends Component {
                 {
                     stroke: [COLOURS.GREEN, COLOURS.RED],
                     fill: [null, COLOURS.RED],
-                    delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.5,
+                    delay: TIMES.TARGET_DURATION_MS * 0.5,
                     duration: TIMES.TARGET_DURATION_MS * 0.6,
                     easing: 'easeInOutSine',
                 },
             ],
             points: '176,240 212,216 128,96 44,216 80,240',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -98,13 +89,12 @@ class Sustain extends Component {
                 {
                     stroke: [COLOURS.GREEN, COLOURS.RED],
                     fill: [null, COLOURS.RED],
-                    delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.8,
+                    delay: TIMES.TARGET_DURATION_MS * 0.8,
                     duration: TIMES.TARGET_DURATION_MS * 0.4,
                     easing: 'easeInOutSine',
                 },
             ],
             points: '212,216 248,192 128,24 8,192 44,216',
-            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -114,7 +104,7 @@ class Sustain extends Component {
             scale: 10,
             numOctaves: 5,
             easing: 'easeOutSine',
-            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            delay: TIMES.TARGET_DURATION_MS * 0.4,
             duration: TIMES.TARGET_DURATION_MS * 0.3 + TIMES.POST_SKILL_DURATION_MS,
         }));
     }
@@ -127,8 +117,7 @@ class Sustain extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Sustain);
+module.exports = Sustain;
diff --git a/client/src/components/anims/triage.jsx b/client/src/components/anims/triage.jsx
index 7eb7678e..7fd14017 100644
--- a/client/src/components/anims/triage.jsx
+++ b/client/src/components/anims/triage.jsx
@@ -6,13 +6,6 @@ const { connect } = require('preact-redux');
 const { TIMES, COLOURS } = require('../../constants');
 const { randomPoints } = require('../../utils');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 function projectile(x, y, radius, colour) {
     return (
         <circle
@@ -60,7 +53,7 @@ class Triage extends Component {
         this.animations.push(anime({
             targets: ['#triage'],
             opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
                 { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
@@ -80,8 +73,7 @@ class Triage extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(Triage);
+module.exports = Triage;
diff --git a/client/src/components/anims/triage.tick.jsx b/client/src/components/anims/triage.tick.jsx
index ecda83f1..96952c5e 100644
--- a/client/src/components/anims/triage.tick.jsx
+++ b/client/src/components/anims/triage.tick.jsx
@@ -1,7 +1,6 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
-const { connect } = require('preact-redux');
 
 const { TIMES, COLOURS } = require('../../constants');
 const { randomPoints } = require('../../utils');
@@ -18,13 +17,6 @@ function projectile(x, y, radius, colour) {
     );
 }
 
-const addState = connect(
-    function receiveState(state) {
-        const { animCb } = state;
-        return { animCb };
-    }
-);
-
 class TriageTick extends Component {
     constructor(props) {
         super();
@@ -79,8 +71,7 @@ class TriageTick extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb && this.props.animCb();
     }
 }
 
-module.exports = addState(TriageTick);
+module.exports = TriageTick;