mnml/client/src/components/anims/slay.jsx

const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;

const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');

const duration = TIMES.TARGET_DURATION_MS;


function projectile(x, y, radius, colour) {
    return (
        <circle
            cx={x}
            cy={y}
            r={radius}
            fill="url(#grad1)"
            stroke-width="2"
            stroke={colour}
        />
    );
}

function sword(colour) {
    return (
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
            <g transform="rotate(90, 640, 360) translate(0,720) scale(0.1,-0.1)" fill={colour} stroke={colour} filter="url(#explosion)" id="sword">
                <path d="M4110 5071 c-294 -119 -436 -228 -457 -350 -4 -25 -7 -230 -6 -454 2 -380 1 -408 -15 -402 -9 4 -48 16 -87 26 -160 41 -215 44 -815 41 -719 -4 -1088 13 -1475 69 -270 38 -384 75 -468 148 -67 58 -111 75 -193 74 -104 -1 -204 -59 -264 -153 -130 -202 -159 -698 -59 -998 62 -188 174 -282 335 -282 77 0 114 14 174 67 87 77 198 114 456 152 386 56 724 73 1459 70 676 -2 728 1 937 68 15 4 16 -29 15 -419 -2 -500 -4 -492 93 -582 45 -41 99 -74 217 -133 87 -43 182 -86 212 -96 172 -55 197 16 78 226 -114 202 -160 347 -187 587 -16 144 -27 371 -18 376 4 3 299 0 655 -5 2030 -31 2627 -35 3953 -23 903 8 1433 17 1665 28 l340 16 450 79 c248 44 491 88 540 99 234 50 777 180 796 190 18 10 19 14 7 26 -7 8 -198 57 -423 109 -346 80 -483 106 -885 170 -417 66 -517 78 -815 100 -312 24 -424 27 -1370 36 -1039 11 -2548 7 -3645 -10 -327 -5 -748 -11 -934 -13 l-339 -3 2 75 c3 130 22 331 41 441 25 147 71 276 142 404 34 61 70 127 80 147 21 42 24 108 6 126 -23 23 -100 13 -198 -27z"/>
            </g>
        </svg>
    );
}

class AttackCharge extends Component {
    constructor(props) {
        super();
        this.animations = [];
        this.colour = '#a52a2a';
        const points = new Array(30).fill(0);
        this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
    }

    render() {
        return (
            <svg
                class={'skill-animation'}
                version="1.1"
                id="slay"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 300 400">
                <defs>
                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
                        <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
                        <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
                    </radialGradient>
                </defs>
                <filter id="explosion">
                    <feGaussianBlur stdDeviation="4"/>
                    <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>

                </filter>
                {sword(this.colour)}
                {this.charges}
            </svg>
        );
    }

    componentDidMount() {
        let rotate = 0; // Self target value
        if (this.props.direction.y) {
            if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
            else {
                rotate = this.props.direction.y > 0
                    ? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
                    : -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
            }
        } else if (this.props.direction.x) {
            rotate = this.props.direction.x > 0 ? 270 : 90;
        }

        anime.set('#slay', {
            rotate,
        });

        anime.set('#slay', {
            translateY: -400,
            translateX: 0,
        });
        anime.set('#explosion feDisplacementMap', {
            scale: 100,
        });

        anime.set('#sword', {
            fill: this.colour,
            stroke: this.colour,
        });

        this.animations.push(anime({
            targets: '#slay',
            opacity: [
                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
                {
                    value: 0,
                    delay: TIMES.TARGET_DURATION_MS * 0.7 + TIMES.POST_SKILL_DURATION_MS * 0.8,
                    duration: TIMES.POST_SKILL_DURATION_MS * 0.2,
                }],
            translateY: 0,
            translateX: 0,
            loop: false,
            delay: TIMES.TARGET_DELAY_MS,
            duration: (duration * 1 / 2),
            easing: 'easeInQuad',
        }));
        this.animations.push(anime({
            targets: '#explosion feDisplacementMap',
            scale: 10000,
            loop: false,
            delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
            duration: (duration * 1 / 2),
            easing: 'easeInQuad',
        }));

        this.animations.push(anime({
            targets: '#sword',
            fill: '#1FF01F',
            stroke: '#1FF01F',
            delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
        }));

        const projectiles = document.querySelectorAll('#slay circle');
        projectiles.forEach(proj => {
            this.animations.push(anime({
                targets: proj,
                cx: Math.random() * 250 + 25,
                cy: Math.random() * 200 - 100,
                delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
                duration: (TIMES.POST_SKILL_DURATION_MS * 0.3),
                easing: 'easeInQuad',
            }));
        });
    }

    componentWillUnmount() {
        for (let i = this.animations.length - 1; i >= 0; i--) {
            this.animations[i].reset();
        }
    }
}

module.exports = AttackCharge;