buff debuff

client/src/components/animations.jsx

@@ -6,6 +6,8 @@ const AttackCharge = require('./anims/attack.charge');
 const Amplify = require('./anims/amplify');
 const Blast = require('./anims/blast');
 const banish = require('./anims/banish');
+const Buff = require('./anims/buff');
+const Debuff = require('./anims/debuff');
 const Heal = require('./anims/heal');
 const Hex = require('./anims/hex');
 const Strike = require('./anims/strike');
@@ -45,10 +47,8 @@ function animations(props) {
     if (resolution.source.id === construct.id) {
         const playerTeam = game.players.find(t => t.id === account.id);
         const playerTeamIds = playerTeam.constructs.map(c => c.id);
-        playerTeamIds.sort();
         const otherTeam = game.players.find(t => t.id !== account.id);
         const otherTeamIds = otherTeam.constructs.map(c => c.id);
-        otherTeamIds.sort();
 
         const sourceIsPlayer = playerTeamIds.includes(construct.id);
         const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
@@ -92,7 +92,9 @@ function animations(props) {
             case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
             case 'Amplify': return <Amplify/>;
             case 'Banish': return banish(construct.id);
+            case 'Buff': return <Buff />;
             case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
+            case 'Debuff': return <Debuff />;
             case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
             case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;

client/src/components/anims/buff.jsx

@@ -0,0 +1,51 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Buff extends Component {
+    render() {
+        return (
+            <svg
+                id='buff'
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 300">
+                <g>
+                    <polygon class='buff-one' points='0,190    100,300   190,190'/>
+                    <polygon class='buff-two' points='40,170    100,300   160,170'/>
+                    <polygon class='buff-three' points='70,150    100,300   130,150'/>
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        anime({
+            targets: ['#buff .buff-one'],
+            points: '0,190    100,10   190,190',
+            easing: 'easeOutExpo',
+            duration: TIMES.START_SKILL,
+            complete: anim => anim.reset(),
+        });
+
+        anime({
+            targets: ['#buff .buff-two'],
+            points: '40,170    100,50   160,170',
+            easing: 'easeOutExpo',
+            duration: TIMES.START_SKILL,
+            complete: anim => anim.reset(),
+        });
+
+        anime({
+            targets: ['#buff .buff-three'],
+            points: '70,150    100,90   130,150',
+            easing: 'easeOutExpo',
+            duration: TIMES.START_SKILL,
+            complete: anim => anim.reset(),
+        });
+    }
+}
+
+module.exports = Buff;

client/src/components/anims/debuff.jsx

@@ -0,0 +1,53 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Buff extends Component {
+    render() {
+        return (
+            <svg
+                id='buff'
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 300"
+                style={{ transform: 'rotate(180deg)' }}
+                >
+                <g>
+                    <polygon class='buff-one' points='0,190    100,300   190,190'/>
+                    <polygon class='buff-two' points='40,170    100,300   160,170'/>
+                    <polygon class='buff-three' points='70,150    100,300   130,150'/>
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        anime({
+            targets: ['#buff .buff-one'],
+            points: '0,190    100,10   190,190',
+            easing: 'easeOutExpo',
+            duration: TIMES.START_SKILL,
+            complete: anim => anim.reset(),
+        });
+
+        anime({
+            targets: ['#buff .buff-two'],
+            points: '40,170    100,50   160,170',
+            easing: 'easeOutExpo',
+            duration: TIMES.START_SKILL,
+            complete: anim => anim.reset(),
+        });
+
+        anime({
+            targets: ['#buff .buff-three'],
+            points: '70,150    100,90   130,150',
+            easing: 'easeOutExpo',
+            duration: TIMES.START_SKILL,
+            complete: anim => anim.reset(),
+        });
+    }
+}
+
+module.exports = Buff;