diff --git a/client/animations.test.js b/client/animations.test.js index fa76c5dd..3271b840 100644 --- a/client/animations.test.js +++ b/client/animations.test.js @@ -1,8 +1,14 @@ require('./assets/styles/styles.less'); -require('./assets/styles/styles.mobile.css'); +require('./assets/styles/menu.less'); +require('./assets/styles/nav.less'); +require('./assets/styles/footer.less'); +require('./assets/styles/account.less'); +require('./assets/styles/controls.less'); require('./assets/styles/instance.less'); +require('./assets/styles/vbox.less'); +require('./assets/styles/game.less'); +require('./assets/styles/player.less'); +require('./assets/styles/styles.mobile.css'); require('./assets/styles/instance.mobile.css'); -require('./assets/styles/game.css'); -// kick it off require('./src/animations.test.jsx'); diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 83ab40d9..3ca91487 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -93,6 +93,18 @@ dl { "main ctrl"; padding: 0.5em 1em; + + &.animations-test { + grid-template-columns: 1fr 9fr 1fr; + grid-template-areas: + "hdr hdr ctrl" + "nav main ctrl" + "nav main ctrl"; + + nav { + display: initial; + } + } } main { diff --git a/client/src/animations.test.jsx b/client/src/animations.test.jsx index 2127ab35..5a676a23 100644 --- a/client/src/animations.test.jsx +++ b/client/src/animations.test.jsx @@ -55,7 +55,7 @@ document.fonts.load('16pt "Jura"').then(() => { const Animations = () => ( -
+
@@ -69,24 +69,6 @@ document.fonts.load('16pt "Jura"').then(() => { }); const SKILLS = [ - 'Absorb', - 'Absorption', - 'Amplify', - 'Attack', - 'Banish', - 'Bash', - 'Blast', - 'Block', - 'Break', - 'Buff', - 'Chaos', - 'CounterAttack', - 'Counter', - 'Curse', - 'Debuff', - 'Decay', - 'DecayTick', - 'Electrify', 'Electrocute', 'ElectrocuteTick', 'Haste', @@ -113,4 +95,22 @@ const SKILLS = [ 'Sustain', 'Triage', 'TriageTick', + 'Absorb', + 'Absorption', + 'Amplify', + 'Attack', + 'Banish', + 'Bash', + 'Blast', + 'Block', + 'Break', + 'Buff', + 'Chaos', + 'CounterAttack', + 'Counter', + 'Curse', + 'Debuff', + 'Decay', + 'DecayTick', + 'Electrify', ]; diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 37cac718..066fe1c5 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -1,9 +1,9 @@ const preact = require('preact'); const { Component } = require('preact'); -const anime = require('animejs').default; const { connect } = require('preact-redux'); +const anime = require('animejs').default; -const { TIMES } = require('../../constants'); +const { TIMES, COLOURS } = require('../../constants'); const addState = connect( function receiveState(state) { @@ -12,116 +12,67 @@ const addState = connect( } ); -function laser(dimensions, colour) { - const { x, y, length } = dimensions; - return ( - - ); -} - class Strike extends Component { constructor(props) { super(); - this.team = props.team; + this.props = props; this.animations = []; - this.colour = props.colour; - - const coord = [0, 50, 100, 150, 200]; - const points = coord.map(pos => ({ - x: pos + Math.random() * 40, - y: 50 + Math.random() * 100, - length: 150 + Math.random() * 150, - })); - this.charges = points.map(pos => laser(pos, this.colour)); } render() { return ( - - - - - - - - - - + viewBox="0 0 400 400"> + + + - {this.charges} + + + ); } 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('#strike', { - rotate, - }); - - anime.set('#strike', { - translateY: (window.screen.height) * 0.35 * this.props.direction.y, - translateX: 0, - }); - this.animations.push(anime({ - targets: '#strike', - 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: '#strike', - translateY: 0, - translateX: 0, - loop: false, + targets: ['#strike rect'], + easing: 'easeOutExpo', + y: [400, 200, 200], + x: [200, 0, 200], + height: [200, 10, 0], + width: [20, 400, 0], delay: TIMES.TARGET_DELAY_MS, - duration: (TIMES.TARGET_DURATION_MS * 1 / 2), - easing: 'easeInQuad', + duration: TIMES.TARGET_DURATION_MS, })); + this.animations.push(anime({ - targets: '#strikeFilter feDisplacementMap', - scale: 200, - loop: false, - delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4), - easing: 'easeInQuad', + targets: ['#strikeFilter feTurbulence', '#strikeFilter feDisplacementMap'], + baseFrequency: 2, + scale: 50, + numOctaves: 5, + easing: 'easeOutSine', + delay: TIMES.TARGET_DELAY_MS + (TIMES.TARGET_DURATION_MS / 3), + duration: TIMES.TARGET_DURATION_MS / 2, })); } + // 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(Strike); diff --git a/server/src/effect.rs b/server/src/effect.rs index 83c445d9..f9e5c05d 100644 --- a/server/src/effect.rs +++ b/server/src/effect.rs @@ -154,7 +154,7 @@ impl Effect { }, _ => { - info!("{:?} does not have a mod effect", self); + warn!("{:?} does not have a mod effect", self); return value; }, }