ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove animCb and animation delays

Browse Source
This commit is contained in:
Mashy 2019-12-09 12:00:48 +10:00
parent d33cda012e
commit 994d1c8fb0
42 changed files with 102 additions and 729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/anims/absorb.jsx
View File

@ -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;

16
client/src/components/anims/amplify.jsx
View File

@ -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;

9
client/src/components/anims/attack.jsx
View File

@ -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;

1
client/src/components/anims/banish.jsx
View File

@ -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,

18
client/src/components/anims/bash.circle.jsx
View File

@ -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;

17
client/src/components/anims/bash.jsx
View File

@ -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;

30
client/src/components/anims/blast.jsx
View File

@ -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;

13
client/src/components/anims/block.jsx
View File

@ -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;

17
client/src/components/anims/break.jsx
View File

@ -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;

16
client/src/components/anims/buff.jsx
View File

@ -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;

17
client/src/components/anims/chaos.jsx
View File

@ -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;

17
client/src/components/anims/counter.jsx
View File

@ -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;

16
client/src/components/anims/curse.jsx
View File

@ -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;

16
client/src/components/anims/debuff.jsx
View File

@ -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;

14
client/src/components/anims/decay.jsx
View File

@ -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;

14
client/src/components/anims/electrify.jsx
View File

@ -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;

13
client/src/components/anims/electrocute.jsx
View File

@ -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;

16
client/src/components/anims/haste.jsx
View File

@ -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;

14
client/src/components/anims/heal.jsx
View File

@ -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;

14
client/src/components/anims/hex.jsx
View File

@ -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;

18
client/src/components/anims/hybrid.jsx
View File

@ -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;

18
client/src/components/anims/intercept.jsx
View File

@ -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;

1
client/src/components/anims/invert.jsx
View File

@ -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',

14
client/src/components/anims/link.jsx
View File

@ -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;

15
client/src/components/anims/purge.jsx
View File

@ -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;

16
client/src/components/anims/purify.jsx
View File

@ -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;

15
client/src/components/anims/recharge.jsx
View File

@ -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;

83
client/src/components/anims/red.block.jsx
View File

@ -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);

89
client/src/components/anims/red.circles.jsx
View File

@ -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);

13
client/src/components/anims/reflect.jsx
View File

@ -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;

21
client/src/components/anims/restrict.jsx
View File

@ -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;

18
client/src/components/anims/ruin.jsx
View File

@ -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;

20
client/src/components/anims/silence.jsx
View File

@ -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;

18
client/src/components/anims/siphon.jsx
View File

@ -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;

18
client/src/components/anims/siphon.tick.jsx
View File

@ -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;

31
client/src/components/anims/slay.jsx
View File

@ -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;

29
client/src/components/anims/sleep.jsx
View File

@ -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;

24
client/src/components/anims/strike.jsx
View File

@ -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;

15
client/src/components/anims/stun.jsx
View File

@ -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;

23
client/src/components/anims/sustain.jsx
View File

@ -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;

12
client/src/components/anims/triage.jsx
View File

@ -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;

11
client/src/components/anims/triage.tick.jsx
View File

@ -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;