From 2f9c1aeda3c3584a2ebab0a5e95baccff7b455a0 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 30 Jun 2019 12:28:35 +1000
Subject: [PATCH] buff debuff

---
 client/src/components/animations.jsx   |  6 ++-
 client/src/components/anims/buff.jsx   | 51 +++++++++++++++++++++++++
 client/src/components/anims/debuff.jsx | 53 ++++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/anims/buff.jsx
 create mode 100644 client/src/components/anims/debuff.jsx

diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index 35fccff1..8a45f553 100644
--- a/client/src/components/animations.jsx
+++ b/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}/>;
diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx
new file mode 100644
index 00000000..e056c2cb
--- /dev/null
+++ b/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;
diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
new file mode 100644
index 00000000..5c33047a
--- /dev/null
+++ b/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;