From 0edfe553876e34f6640aa53b7864f219ac60656b Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 16 Sep 2019 13:37:15 +1000 Subject: [PATCH 1/2] animations test fixes + new strike --- client/animations.test.js | 12 ++- client/assets/styles/styles.less | 12 +++ client/src/animations.test.jsx | 38 ++++----- client/src/components/anims/strike.jsx | 113 +++++++------------------ server/src/effect.rs | 2 +- 5 files changed, 73 insertions(+), 104 deletions(-) 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; }, } From 50f2afd657baa752a2f72e85f9deb22e5216b7fd Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 16 Sep 2019 15:26:44 +1000 Subject: [PATCH 2/2] strike stuff --- client/assets/styles/styles.less | 2 +- client/src/animations.socket.jsx | 16 ++++++++-------- client/src/components/anims/strike.jsx | 15 +++++++++++---- client/src/test.game.js | 12 ++++++------ 4 files changed, 26 insertions(+), 19 deletions(-) diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 3ca91487..29e06109 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -97,7 +97,7 @@ dl { &.animations-test { grid-template-columns: 1fr 9fr 1fr; grid-template-areas: - "hdr hdr ctrl" + "nav hdr ctrl" "nav main ctrl" "nav main ctrl"; diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index c1567fa5..edd822c6 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -6,6 +6,7 @@ const eachSeries = require('async/eachSeries'); const actions = require('./actions'); const { TIMES } = require('./constants'); const animations = require('./animations.utils'); +const { removeTier } = require('./utils'); const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/api/ws' : 'ws://localhost/api/ws'; @@ -28,6 +29,7 @@ function createSocket(store) { if (animating) return false; store.dispatch(actions.setAnimating(true)); + // stop fetching the game state til animations are done return eachSeries(newRes, (r, cb) => { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); @@ -37,15 +39,14 @@ function createSocket(store) { const timeout = animations.getTime(sequence); const anims = animations.getObjects(r, sequence, game, account); const text = animations.getText(r, sequence); + store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game))); - store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r))); - - if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource)); - if (sequence.includes('END_SKILL')) { + if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource)); + if (sequence.includes('END_SKILL') && anims.animTarget) { store.dispatch(actions.setAnimTarget(anims.animTarget)); - if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb)); + if (!['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) store.dispatch(actions.setAnimCb(cb)); } - if (sequence.includes('POST_SKILL')) { + if (sequence.includes('POST_SKILL' && text)) { // timeout to prevent text classes from being added too soon setTimeout( () => store.dispatch(actions.setAnimText(text)), @@ -58,7 +59,7 @@ function createSocket(store) { store.dispatch(actions.setAnimText(null)); store.dispatch(actions.setAnimFocus([])); if (!sequence.includes('END_SKILL') - || ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb(); + || ['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) return cb(); return true; }, timeout); }, err => { @@ -70,7 +71,6 @@ function createSocket(store) { store.dispatch(actions.setAnimating(false)); store.dispatch(actions.setSkip(false)); - store.dispatch(actions.setResolution(null)); // set the game state so resolutions don't fire twice store.dispatch(actions.setGame(game)); diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 066fe1c5..00dbbb18 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -20,6 +20,12 @@ class Strike extends Component { } render() { + // const { x, y } = (this.props && this.props.direction) || { x: 0, y: 0 }; + // const angle = (Math.atan(y / x) * (180 / Math.PI)) + 90; + // console.log(x, -y); + // console.log(angle); + // can't get this shit to work + return ( - + ); @@ -43,11 +50,11 @@ class Strike extends Component { this.animations.push(anime({ targets: ['#strike rect'], easing: 'easeOutExpo', - y: [400, 200, 200], + y: [800, 100, 100], x: [200, 0, 200], height: [200, 10, 0], width: [20, 400, 0], - delay: TIMES.TARGET_DELAY_MS, + delay: TIMES.TARGET_DELAY_MS / 2, duration: TIMES.TARGET_DURATION_MS, })); diff --git a/client/src/test.game.js b/client/src/test.game.js index e17cb8e0..6ee80a0b 100644 --- a/client/src/test.game.js +++ b/client/src/test.game.js @@ -35,7 +35,7 @@ function testGame(uuid) { "constructs": [ { "id": "82e8b940-411c-42a1-8fc2-484ec7207734", - "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", + "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95", "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1", "red_damage": { "base": 256, @@ -109,7 +109,7 @@ function testGame(uuid) { }, { "id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b", - "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", + "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95", "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1", "red_damage": { "base": 256, @@ -186,7 +186,7 @@ function testGame(uuid) { { "id": "ea302c35-d326-475c-a867-8ad5b162165a", "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1", - "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", + "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000), @@ -302,7 +302,7 @@ function testGame(uuid) { { "id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd", "account": uuid, - "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", + "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000), @@ -389,7 +389,7 @@ function testGame(uuid) { { "id": "50e5d94e-8ebe-495c-a916-3eb509ff4683", "account": uuid, - "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", + "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000), @@ -470,7 +470,7 @@ function testGame(uuid) { { "id": "5d49fe65-27f0-4372-90a3-334ef906a0f5", "account": uuid, - "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", + "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000),