wip testing more anim stuff

client/src/components/animations.jsx

@@ -1,6 +1,8 @@
 const preact = require('preact');
 
 const Attack = require('./anims/attack');
+const Strike = require('./anims/strike');
+const Test = require('./anims/test');
 
 function animations(props) {
     const { combatTextClass, combatText, stage, player, construct } = props;
@@ -8,6 +10,8 @@ function animations(props) {
     const anim = text => {
         switch (text) {
             case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
+            case 'StrikeI': return <Strike id={construct.id} stage={stage} team={player}/>;
+
             default: return text;
         }
     };
@@ -18,7 +22,11 @@ function animations(props) {
             {combatAnim}
         </div>;
     }
-
+    return (
+        <div class={combatTextClass}>
+            <Test id={construct.id} stage={stage} team={player}/>
+        </div>
+    );
     return (<div>&nbsp;</div>);
 }
 

client/src/components/anims/strike.jsx

@@ -0,0 +1,72 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+const duration = TIMES.START_SKILL;
+
+class Strike extends Component {
+    constructor(props) {
+        super();
+        this.props = props;
+        const points = [];
+        for (let i = 0; i <= 70; i += 1) {
+            const x = Math.floor(300 * Math.random());
+            const y = Math.floor(400 * Math.random());
+            points.push([x, y]);
+            this.circles = points.map((coord, j) => <circle key={j} cx={coord[0]} cy={coord[1]} r="7" stroke="#a52a2a" fill="#a52a2a" />);
+        }
+    }
+
+    render() {
+        return (
+            <svg
+                class={'skill-anim'}
+                version="1.1"
+                id="Layer_1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 400">
+                {this.circles}
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        let y = -100;
+        const daggers = document.querySelectorAll('.skill-anim circle');
+        if (this.props.stage === 'START_SKILL') {
+            if (!this.props.team) {
+                anime.set('.skill-anim', {
+                    rotate: 180,
+                });
+            } else {
+                anime.set('.skill-anim', {
+                    rotate: 0,
+                });
+            }
+        }
+
+        if (this.props.stage === 'END_SKILL') {
+            if (!this.props.team) {
+                anime.set('.skill-anim', {
+                    rotate: 0,
+                });
+            } else {
+                anime.set('.skill-anim', {
+                    rotate: 180,
+                });
+            }
+        }
+
+        anime({
+            targets: daggers,
+            cx: 150,
+            cy: y,
+            duration,
+            easing: 'easeInQuad',
+        });
+    }
+}
+
+module.exports = Strike;

client/src/components/anims/test.jsx

@@ -0,0 +1,116 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+const duration = TIMES.START_SKILL;
+
+class Attack extends Component {
+    constructor(props) {
+        super();
+        this.props = props;
+        const points = [];
+
+
+        for (let i = 0; i <= 2; i += 1) {
+            const x = Math.floor(Math.random() * 200 + 50);
+            const y = Math.floor(Math.random() * 300 + 50);
+            points.push([x, y]);
+            this.circles = points.map((coord, j) => (
+                <svg key={j}>
+                    <polygon
+                        points={`
+                            ${coord[0]},${coord[1] - 10}
+                            ${coord[0] - 20},${coord[1] + 20}
+                            ${coord[0] + 20},${coord[1] + 20}
+                        `}
+                        stroke="#a52a2a"
+                        stroke-width="2"
+
+                        id="charge"
+                    />
+                    <polyline
+                        points={`
+                            ${coord[0] + 20},${coord[1] + 20}
+                            ${coord[0] + 35},${coord[1] + 10}
+                            ${coord[0]},${coord[1] - 40}
+                            ${coord[0] - 35},${coord[1] + 10}
+                            ${coord[0] - 20},${coord[1] + 20}
+                        `}
+                        stroke="#a52a2a"
+                        stroke-width="2"
+                        id="charge"
+                    />
+                    <polyline
+                        points={`
+                            ${coord[0] + 35},${coord[1] + 10}
+                            ${coord[0] + 50},${coord[1]}
+                            ${coord[0]},${coord[1] - 70}
+                            ${coord[0] - 50},${coord[1]}
+                            ${coord[0] - 35},${coord[1] + 10}
+                        `}
+                        stroke="#a52a2a"
+                        stroke-width="2"
+                        id="charge"
+                    />
+                </svg>
+            ));
+        }
+    }
+
+    render() {
+        return (
+            <svg
+                class={'skill-anim'}
+                version="1.1"
+                id="Layer_1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 400">
+                <filter id="blurMe">
+                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
+                </filter>
+                {this.circles}
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        if (this.props.stage === 'START_SKILL') {
+            if (!this.props.team) {
+                anime.set('.skill-anim', {
+                    rotate: 180,
+                });
+            } else {
+                anime.set('.skill-anim', {
+                    rotate: 0,
+                });
+            }
+        }
+
+        if (this.props.stage === 'END_SKILL') {
+            if (!this.props.team) {
+                anime.set('.skill-anim', {
+                    rotate: 0,
+                });
+            } else {
+                anime.set('.skill-anim', {
+                    rotate: 180,
+                });
+            }
+        }
+        const stageone = document.querySelectorAll('#charge');
+        anime({
+            targets: stageone,
+            fill: '#a52a2a',
+            delay: anime.stagger(100),
+            loop: true,
+            duration: 1000,
+            easing: 'easeInQuad',
+        });
+
+
+    }
+}
+
+module.exports = Attack;