From f8c10194113265cbd3db3a2a8d239a47d6bd09cc Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 13:56:24 +1000 Subject: [PATCH 01/24] wip --- WORKLOG.md | 16 +++-- client/animations.html | 20 ++++++ client/animations.test.js | 9 +++ client/assets/styles/styles.css | 6 +- client/package.json | 1 + client/src/animations.test.js | 12 ++++ .../src/components/svgs/trippy.triangle.jsx | 65 +++++++++++-------- 7 files changed, 97 insertions(+), 32 deletions(-) create mode 100644 client/animations.html create mode 100644 client/animations.test.js create mode 100644 client/src/animations.test.js diff --git a/WORKLOG.md b/WORKLOG.md index 6afe89fa..49209c65 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -34,16 +34,24 @@ account balance -* incoming txs table / payments +* accounting id - ref + reference / hash etc currency - amount + credit + debit + +* conversions + id + tx ref accounting conversion rate converted value -* mtx table +* txs +* mtx table + id + item_name * define $cost for ingame bits * pay for rerolls diff --git a/client/animations.html b/client/animations.html new file mode 100644 index 00000000..92e3f98e --- /dev/null +++ b/client/animations.html @@ -0,0 +1,20 @@ + + + + mnml.gg + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/animations.test.js b/client/animations.test.js new file mode 100644 index 00000000..670eab45 --- /dev/null +++ b/client/animations.test.js @@ -0,0 +1,9 @@ +require('./assets/styles/styles.css'); +require('./assets/styles/styles.mobile.css'); +require('./assets/styles/instance.css'); +require('./assets/styles/instance.mobile.css'); +require('./assets/styles/game.css'); +require('./assets/styles/anims.css'); + +// kick it off +require('./src/animations.test'); diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index 52d7b6e4..6ec24393 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -168,10 +168,14 @@ a { svg { fill: none; stroke: whitesmoke; - stroke-width: 0; + stroke-width: 5px; height: 2em; } +.skill-animation { + height: 5em; +} + .team .avatar { object-fit: contain; max-width: 100%; diff --git a/client/package.json b/client/package.json index 80d32b83..cfb5ac49 100644 --- a/client/package.json +++ b/client/package.json @@ -5,6 +5,7 @@ "main": "index.js", "scripts": { "start": "parcel index.html --host 0.0.0.0 --port 40080 --no-source-maps", + "anims": "parcel animations.html --host 0.0.0.0 --port 40080 --no-source-maps", "build": "rm -rf dist && parcel build index.html && cp -r assets/molecules/ dist/", "scss": "node-sass --watch assets/scss -o assets/styles", "lint": "eslint --fix --ext .jsx src/", diff --git a/client/src/animations.test.js b/client/src/animations.test.js new file mode 100644 index 00000000..92a19996 --- /dev/null +++ b/client/src/animations.test.js @@ -0,0 +1,12 @@ +const preact = require('preact'); + +const TrippyTriangle = require('./components/svgs/trippy.triangle'); + +const Animations = () => ( +
+ +
+); + +// eslint-disable-next-line +preact.render(, document.body); diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx index 8578f9e1..194cb4a3 100644 --- a/client/src/components/svgs/trippy.triangle.jsx +++ b/client/src/components/svgs/trippy.triangle.jsx @@ -1,36 +1,47 @@ const preact = require('preact'); +const { Component } = require('preact'); + +class TrippyTriangle extends Component { + constructor() { + super(); + this.state = { pct: 0, delta: 0 }; + this.progress = this.progress.bind(this); + } + + render() { + const { pct, delta } = this.state; -module.exports = function triangle(colours) { - if (colours.length === 1) { return ( - - - - + + + + + + ); } - return ( - - - - - - - + progress() { + const delta = this.state.delta + 0.1; + const pct = 50 - 50 * Math.sin(delta); + this.setState({ pct, delta }); + requestAnimationFrame(this.progress); + } - - - - - + componentDidMount() { + requestAnimationFrame(this.progress); + } - - - - - - - ); -}; + componentWillUnmount() { + // clearAnimation(this.props.id); + } +} + +module.exports = TrippyTriangle; From de3df722edb6e214f700ba57d3b3e707f27b15d8 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 13:57:44 +1000 Subject: [PATCH 02/24] end dleta --- client/src/components/svgs/trippy.triangle.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx index 194cb4a3..d336e6b6 100644 --- a/client/src/components/svgs/trippy.triangle.jsx +++ b/client/src/components/svgs/trippy.triangle.jsx @@ -31,7 +31,9 @@ class TrippyTriangle extends Component { progress() { const delta = this.state.delta + 0.1; const pct = 50 - 50 * Math.sin(delta); + this.setState({ pct, delta }); + if (delta > 20) return false; requestAnimationFrame(this.progress); } From 173a2c6cf798c9e999070d4782a562a0ca59ccc5 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 14:09:23 +1000 Subject: [PATCH 03/24] amplify --- client/src/animations.test.js | 2 + client/src/components/svgs/amplify.jsx | 51 ++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 client/src/components/svgs/amplify.jsx diff --git a/client/src/animations.test.js b/client/src/animations.test.js index 92a19996..6ea4ccec 100644 --- a/client/src/animations.test.js +++ b/client/src/animations.test.js @@ -1,10 +1,12 @@ const preact = require('preact'); const TrippyTriangle = require('./components/svgs/trippy.triangle'); +const Amplify = require('./components/svgs/amplify'); const Animations = () => (
+
); diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx new file mode 100644 index 00000000..5b308ead --- /dev/null +++ b/client/src/components/svgs/amplify.jsx @@ -0,0 +1,51 @@ +const preact = require('preact'); +const { Component } = require('preact'); + +class TrippyTriangle extends Component { + constructor() { + super(); + this.state = { delta: 0 }; + this.progress = this.progress.bind(this); + } + + render() { + const { delta } = this.state; + + const curvePoint = 200 * Math.sin(delta); + + const path = ` + M0,100 + C 100,${100 - curvePoint} + 100,${100 + curvePoint} + 200,100 + `; + + return ( + + + + ); + } + + progress() { + const delta = this.state.delta + 0.1; + this.setState({ delta }); + if (delta > 20) return false; + requestAnimationFrame(this.progress); + } + + componentDidMount() { + requestAnimationFrame(this.progress); + } + + componentWillUnmount() { + // clearAnimation(this.props.id); + } +} + +module.exports = TrippyTriangle; From 09868b42d527a20a994b2cdfe3b06394d15104a5 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 11 Jun 2019 17:52:33 +1000 Subject: [PATCH 04/24] tripping with triangles --- client/assets/styles/game.css | 6 ++--- client/src/components/game.construct.jsx | 4 +++- .../src/components/svgs/trippy.triangle.jsx | 22 ++++++++++++++----- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index ba11a3a6..88c9688a 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -30,7 +30,7 @@ .opponent .combat-text { left: 40%; - top: 75%; + top: 65%; } .opponent .game-construct { @@ -204,8 +204,8 @@ font-size: 2em; font-family: 'Jura'; position: absolute; - top: 50%; - left: 50%; + top: 40%; + left: 40%; } .game-construct.active-skill { diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 3e7d035b..6f5942d8 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -8,6 +8,8 @@ const { ConstructAvatar } = require('./construct'); const { animationDivs } = require('../animations'); const shapes = require('./shapes'); +const TrippyTriangle = require('./svgs/trippy.triangle'); + const SkillBtn = require('./skill.btn'); const addState = connect( @@ -77,7 +79,7 @@ function GameConstruct(props) { const combatTextClass = `combat-text ${combatClass}`; const combatTextEl = combatText ?
{combatText}
- : null; + :
; const effects = construct.effects.length ? construct.effects.map(c =>
{c.effect} - {c.duration}T
) diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx index 194cb4a3..7e00d6c1 100644 --- a/client/src/components/svgs/trippy.triangle.jsx +++ b/client/src/components/svgs/trippy.triangle.jsx @@ -13,14 +13,16 @@ class TrippyTriangle extends Component { return ( + viewBox="0 0 300 300"> - + @@ -29,13 +31,21 @@ class TrippyTriangle extends Component { } progress() { - const delta = this.state.delta + 0.1; - const pct = 50 - 50 * Math.sin(delta); - this.setState({ pct, delta }); requestAnimationFrame(this.progress); + this.now = window.performance.now(); + const elapsed = this.now - this.then; + if (elapsed > this.fpsInterval) { + this.then = this.now - (elapsed % this.fpsInterval); + const delta = this.state.delta + Math.PI * 0.04; + const pct = 75 + 15 * Math.sin(delta); + this.setState({ pct, delta }); + } } componentDidMount() { + const fps = 30; + this.fpsInterval = 1000 / fps; + this.then = window.performance.now(); requestAnimationFrame(this.progress); } From 962e9352abaeb7e7e8bd0b89aad4ba609e4e2e51 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 19:07:16 +1000 Subject: [PATCH 05/24] hex --- client/src/animations.test.js | 2 + client/src/components/svgs/hex.jsx | 61 ++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 client/src/components/svgs/hex.jsx diff --git a/client/src/animations.test.js b/client/src/animations.test.js index 6ea4ccec..bc36db15 100644 --- a/client/src/animations.test.js +++ b/client/src/animations.test.js @@ -2,11 +2,13 @@ const preact = require('preact'); const TrippyTriangle = require('./components/svgs/trippy.triangle'); const Amplify = require('./components/svgs/amplify'); +const Hex = require('./components/svgs/hex'); const Animations = () => (
+
); diff --git a/client/src/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx new file mode 100644 index 00000000..4904079e --- /dev/null +++ b/client/src/components/svgs/hex.jsx @@ -0,0 +1,61 @@ +const preact = require('preact'); +const { Component } = require('preact'); + +class TrippyTriangle extends Component { + constructor() { + super(); + this.state = { delta: 0 }; + this.progress = this.progress.bind(this); + } + + render() { + const { delta } = this.state; + + const curvePoint = 200 * Math.sin(delta); + + const curve = min => min * 2 + (min / 2) * Math.sin(delta); + + return ( + + + + + + + + + ); + } + + progress() { + const delta = this.state.delta + 0.1; + this.setState({ delta }); + requestAnimationFrame(this.progress); + } + + componentDidMount() { + requestAnimationFrame(this.progress); + } + + componentWillUnmount() { + // clearAnimation(this.props.id); + } +} + +module.exports = TrippyTriangle; From a037d5e93bdca93a087d8c4cdd76ae246d83efa3 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 19:50:59 +1000 Subject: [PATCH 06/24] amp and hex --- client/package.json | 1 + client/src/components/svgs/amplify.jsx | 41 ++++++--------- client/src/components/svgs/hex.jsx | 71 +++++++++++--------------- 3 files changed, 47 insertions(+), 66 deletions(-) diff --git a/client/package.json b/client/package.json index cfb5ac49..90f5fbdb 100644 --- a/client/package.json +++ b/client/package.json @@ -14,6 +14,7 @@ "author": "", "license": "UNLICENSED", "dependencies": { + "anime": "^0.1.2", "animejs": "^3.0.1", "async": "^2.6.2", "borc": "^2.0.3", diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx index 5b308ead..9a1df5e0 100644 --- a/client/src/components/svgs/amplify.jsx +++ b/client/src/components/svgs/amplify.jsx @@ -1,30 +1,22 @@ const preact = require('preact'); const { Component } = require('preact'); -class TrippyTriangle extends Component { +const anime = require('animejs').default; + +class Amplify extends Component { constructor() { super(); - this.state = { delta: 0 }; - this.progress = this.progress.bind(this); + this.id = Math.random(); } render() { - const { delta } = this.state; - - const curvePoint = 200 * Math.sin(delta); - - const path = ` - M0,100 - C 100,${100 - curvePoint} - 100,${100 + curvePoint} - 200,100 - `; + const path = 'M0,100 C100,-100 100,300 200,100'; return ( @@ -32,20 +24,21 @@ class TrippyTriangle extends Component { ); } - progress() { - const delta = this.state.delta + 0.1; - this.setState({ delta }); - if (delta > 20) return false; - requestAnimationFrame(this.progress); - } - componentDidMount() { - requestAnimationFrame(this.progress); + const altPath = 'M0,100 C100,300 100,-100 200,100'; + anime({ + targets: '#hex path', + d: [{ value: altPath }], + stroke: ['#a52a2a', '#3498db'], + duration: 1000, + loop: true, + direction: 'alternate', + easing: 'easeInOutSine', + }); } componentWillUnmount() { - // clearAnimation(this.props.id); } } -module.exports = TrippyTriangle; +module.exports = Amplify; diff --git a/client/src/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx index 4904079e..ec1c0ae0 100644 --- a/client/src/components/svgs/hex.jsx +++ b/client/src/components/svgs/hex.jsx @@ -1,61 +1,48 @@ const preact = require('preact'); const { Component } = require('preact'); -class TrippyTriangle extends Component { - constructor() { - super(); - this.state = { delta: 0 }; - this.progress = this.progress.bind(this); - } +const anime = require('animejs').default; +// shamelessly lifted from teh anime docs +// https://animejs.com/documentation/#svgAttr + +class Hex extends Component { render() { - const { delta } = this.state; - - const curvePoint = 200 * Math.sin(delta); - - const curve = min => min * 2 + (min / 2) * Math.sin(delta); - return ( - - - - - - + viewBox="0 0 128 128"> + + + + + ); } - progress() { - const delta = this.state.delta + 0.1; - this.setState({ delta }); - requestAnimationFrame(this.progress); - } - componentDidMount() { - requestAnimationFrame(this.progress); - } + anime({ + targets: ['.hex-anim polygon'], + points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568', + loop: true, + direction: 'alternate', + easing: 'easeInOutExpo', + }); - componentWillUnmount() { - // clearAnimation(this.props.id); + anime({ + targets: ['feTurbulence', 'feDisplacementMap'], + points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568', + baseFrequency: 0.05, + scale: 15, + loop: true, + direction: 'alternate', + easing: 'easeInOutExpo', + }); } } -module.exports = TrippyTriangle; +module.exports = Hex; From c504cb8671c70a612148a6158c0b5e5e17cce769 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 20:04:49 +1000 Subject: [PATCH 07/24] subtle amp filter --- client/src/components/svgs/amplify.jsx | 16 +++++++++++++++- client/src/components/svgs/hex.jsx | 10 ++++++---- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx index 9a1df5e0..307666bd 100644 --- a/client/src/components/svgs/amplify.jsx +++ b/client/src/components/svgs/amplify.jsx @@ -19,7 +19,11 @@ class Amplify extends Component { id="hex" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> - + + + + + ); } @@ -35,6 +39,16 @@ class Amplify extends Component { direction: 'alternate', easing: 'easeInOutSine', }); + + anime({ + targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'], + baseFrequency: 0.15, + scale: 4, + loop: true, + direction: 'alternate', + easing: 'easeInOutExpo', + }); + } componentWillUnmount() { diff --git a/client/src/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx index ec1c0ae0..62fe923f 100644 --- a/client/src/components/svgs/hex.jsx +++ b/client/src/components/svgs/hex.jsx @@ -15,11 +15,14 @@ class Hex extends Component { id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"> - + - + ); } @@ -34,8 +37,7 @@ class Hex extends Component { }); anime({ - targets: ['feTurbulence', 'feDisplacementMap'], - points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568', + targets: ['#hexFilter feTurbulence', '#hexFilter feDisplacementMap'], baseFrequency: 0.05, scale: 15, loop: true, From 76ff7ba43ff2386e9cc3a18cc1be529eb12f1db5 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 21:26:53 +1000 Subject: [PATCH 08/24] scale --- client/src/components/svgs/amplify.jsx | 4 ++-- client/src/components/svgs/hex.jsx | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx index 307666bd..eb113ae8 100644 --- a/client/src/components/svgs/amplify.jsx +++ b/client/src/components/svgs/amplify.jsx @@ -16,7 +16,7 @@ class Amplify extends Component { @@ -31,7 +31,7 @@ class Amplify extends Component { componentDidMount() { const altPath = 'M0,100 C100,300 100,-100 200,100'; anime({ - targets: '#hex path', + targets: '#amplify path', d: [{ value: altPath }], stroke: ['#a52a2a', '#3498db'], duration: 1000, diff --git a/client/src/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx index 62fe923f..f914595a 100644 --- a/client/src/components/svgs/hex.jsx +++ b/client/src/components/svgs/hex.jsx @@ -28,6 +28,14 @@ class Hex extends Component { } componentDidMount() { + anime({ + targets: ['.hex-anim'], + scale: [1, 2], + loop: true, + direction: 'alternate', + easing: 'easeInOutExpo', + }); + anime({ targets: ['.hex-anim polygon'], points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568', From 3c4eac85f99b24018db6cafccffcc24d01f49ca8 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 11 Jun 2019 21:32:18 +1000 Subject: [PATCH 09/24] big amp --- client/src/components/svgs/amplify.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx index eb113ae8..16f5f66b 100644 --- a/client/src/components/svgs/amplify.jsx +++ b/client/src/components/svgs/amplify.jsx @@ -10,7 +10,7 @@ class Amplify extends Component { } render() { - const path = 'M0,100 C100,-100 100,300 200,100'; + const path = 'M0,100 C100,-200 100,400 200,100'; return ( Date: Wed, 12 Jun 2019 18:55:40 +1000 Subject: [PATCH 10/24] basic attack animation --- client/assets/scss/anims.scss | 59 - client/assets/styles/anims.css | 2217 ---------------------- client/index.js | 1 - client/src/animations.jsx | 11 - client/src/components/animations.jsx | 19 + client/src/components/anims/attack.jsx | 63 + client/src/components/game.construct.jsx | 20 +- 7 files changed, 89 insertions(+), 2301 deletions(-) delete mode 100644 client/assets/scss/anims.scss delete mode 100644 client/assets/styles/anims.css delete mode 100644 client/src/animations.jsx create mode 100644 client/src/components/animations.jsx create mode 100644 client/src/components/anims/attack.jsx diff --git a/client/assets/scss/anims.scss b/client/assets/scss/anims.scss deleted file mode 100644 index 8828c0d0..00000000 --- a/client/assets/scss/anims.scss +++ /dev/null @@ -1,59 +0,0 @@ - -.anim-container { - position: absolute; - width: 100%; - min-height: 100%; - transform-style: preserve-3d; -} - -.blast-cast { - position: absolute; - background: black; - opacity: .7; - border-radius: 50%; -} - -@for $i from 1 through 100 { - @keyframes blast-cast-#{$i} { - 100% { - transform: translate3d(-3em +random(200)/200, 0, 0); - } - } -} - -@for $i from 1 through 100 { - .blast-cast:nth-child(#{$i}){ - $size: random(30)+px; - height: $size; - width: $size; - transform: translate3d( (random(200) * 1px), (random(200) * 1px), (random(200) * 1px)); - background: #15f4ee; - animation: blast-cast-#{$i} 0.7s; - } -} - -.blast-hit { - position: absolute; - background: black; - opacity: .7; - border-radius: 50%; -} - -@for $i from 1 through 100 { - @keyframes blast-hit-#{$i} { - 100% { - transform: translate3d((random(200) * 1px), (random(200) * 1px), (random(200) * 1px)); - } - } -} - -@for $i from 1 through 100 { - .blast-hit:nth-child(#{$i}){ - $size: random(30)+px; - height: $size; - width: $size; - transform: translate3d(-3em +random(200)/200, 0, 0); - animation: blast-hit-#{$i} 0.7s infinite; - background: #15f4ee; - } -} diff --git a/client/assets/styles/anims.css b/client/assets/styles/anims.css deleted file mode 100644 index 4af1c7db..00000000 --- a/client/assets/styles/anims.css +++ /dev/null @@ -1,2217 +0,0 @@ -.anim-container { - position: absolute; - width: 100%; - min-height: 100%; - transform-style: preserve-3d; } - -.blast-cast { - position: absolute; - background: black; - opacity: .7; - border-radius: 50%; } - -@keyframes blast-cast-1 { - 100% { - transform: translate3d(-2.69em, 0, 0); } } - -@keyframes blast-cast-2 { - 100% { - transform: translate3d(-2.785em, 0, 0); } } - -@keyframes blast-cast-3 { - 100% { - transform: translate3d(-2.58em, 0, 0); } } - -@keyframes blast-cast-4 { - 100% { - transform: translate3d(-2.42em, 0, 0); } } - -@keyframes blast-cast-5 { - 100% { - transform: translate3d(-2.305em, 0, 0); } } - -@keyframes blast-cast-6 { - 100% { - transform: translate3d(-2.58em, 0, 0); } } - -@keyframes blast-cast-7 { - 100% { - transform: translate3d(-2.805em, 0, 0); } } - -@keyframes blast-cast-8 { - 100% { - transform: translate3d(-2.69em, 0, 0); } } - -@keyframes blast-cast-9 { - 100% { - transform: translate3d(-2.67em, 0, 0); } } - -@keyframes blast-cast-10 { - 100% { - transform: translate3d(-2.79em, 0, 0); } } - -@keyframes blast-cast-11 { - 100% { - transform: translate3d(-2.97em, 0, 0); } } - -@keyframes blast-cast-12 { - 100% { - transform: translate3d(-2.615em, 0, 0); } } - -@keyframes blast-cast-13 { - 100% { - transform: translate3d(-2.905em, 0, 0); } } - -@keyframes blast-cast-14 { - 100% { - transform: translate3d(-2.76em, 0, 0); } } - -@keyframes blast-cast-15 { - 100% { - transform: translate3d(-2.57em, 0, 0); } } - -@keyframes blast-cast-16 { - 100% { - transform: translate3d(-2.4em, 0, 0); } } - -@keyframes blast-cast-17 { - 100% { - transform: translate3d(-2.055em, 0, 0); } } - -@keyframes blast-cast-18 { - 100% { - transform: translate3d(-2.33em, 0, 0); } } - -@keyframes blast-cast-19 { - 100% { - transform: translate3d(-2.455em, 0, 0); } } - -@keyframes blast-cast-20 { - 100% { - transform: translate3d(-2.16em, 0, 0); } } - -@keyframes blast-cast-21 { - 100% { - transform: translate3d(-2.84em, 0, 0); } } - -@keyframes blast-cast-22 { - 100% { - transform: translate3d(-2.45em, 0, 0); } } - -@keyframes blast-cast-23 { - 100% { - transform: translate3d(-2.28em, 0, 0); } } - -@keyframes blast-cast-24 { - 100% { - transform: translate3d(-2.295em, 0, 0); } } - -@keyframes blast-cast-25 { - 100% { - transform: translate3d(-2.89em, 0, 0); } } - -@keyframes blast-cast-26 { - 100% { - transform: translate3d(-2.18em, 0, 0); } } - -@keyframes blast-cast-27 { - 100% { - transform: translate3d(-2.485em, 0, 0); } } - -@keyframes blast-cast-28 { - 100% { - transform: translate3d(-2.88em, 0, 0); } } - -@keyframes blast-cast-29 { - 100% { - transform: translate3d(-2.305em, 0, 0); } } - -@keyframes blast-cast-30 { - 100% { - transform: translate3d(-2.375em, 0, 0); } } - -@keyframes blast-cast-31 { - 100% { - transform: translate3d(-2.11em, 0, 0); } } - -@keyframes blast-cast-32 { - 100% { - transform: translate3d(-2em, 0, 0); } } - -@keyframes blast-cast-33 { - 100% { - transform: translate3d(-2.43em, 0, 0); } } - -@keyframes blast-cast-34 { - 100% { - transform: translate3d(-2.765em, 0, 0); } } - -@keyframes blast-cast-35 { - 100% { - transform: translate3d(-2.27em, 0, 0); } } - -@keyframes blast-cast-36 { - 100% { - transform: translate3d(-2.015em, 0, 0); } } - -@keyframes blast-cast-37 { - 100% { - transform: translate3d(-2.33em, 0, 0); } } - -@keyframes blast-cast-38 { - 100% { - transform: translate3d(-2.905em, 0, 0); } } - -@keyframes blast-cast-39 { - 100% { - transform: translate3d(-2.76em, 0, 0); } } - -@keyframes blast-cast-40 { - 100% { - transform: translate3d(-2.27em, 0, 0); } } - -@keyframes blast-cast-41 { - 100% { - transform: translate3d(-2.705em, 0, 0); } } - -@keyframes blast-cast-42 { - 100% { - transform: translate3d(-2.89em, 0, 0); } } - -@keyframes blast-cast-43 { - 100% { - transform: translate3d(-2.89em, 0, 0); } } - -@keyframes blast-cast-44 { - 100% { - transform: translate3d(-2.41em, 0, 0); } } - -@keyframes blast-cast-45 { - 100% { - transform: translate3d(-2.705em, 0, 0); } } - -@keyframes blast-cast-46 { - 100% { - transform: translate3d(-2.15em, 0, 0); } } - -@keyframes blast-cast-47 { - 100% { - transform: translate3d(-2.945em, 0, 0); } } - -@keyframes blast-cast-48 { - 100% { - transform: translate3d(-2.51em, 0, 0); } } - -@keyframes blast-cast-49 { - 100% { - transform: translate3d(-2.305em, 0, 0); } } - -@keyframes blast-cast-50 { - 100% { - transform: translate3d(-2.475em, 0, 0); } } - -@keyframes blast-cast-51 { - 100% { - transform: translate3d(-2.725em, 0, 0); } } - -@keyframes blast-cast-52 { - 100% { - transform: translate3d(-2.545em, 0, 0); } } - -@keyframes blast-cast-53 { - 100% { - transform: translate3d(-2.685em, 0, 0); } } - -@keyframes blast-cast-54 { - 100% { - transform: translate3d(-2.36em, 0, 0); } } - -@keyframes blast-cast-55 { - 100% { - transform: translate3d(-2.14em, 0, 0); } } - -@keyframes blast-cast-56 { - 100% { - transform: translate3d(-2.01em, 0, 0); } } - -@keyframes blast-cast-57 { - 100% { - transform: translate3d(-2.615em, 0, 0); } } - -@keyframes blast-cast-58 { - 100% { - transform: translate3d(-2.525em, 0, 0); } } - -@keyframes blast-cast-59 { - 100% { - transform: translate3d(-2.885em, 0, 0); } } - -@keyframes blast-cast-60 { - 100% { - transform: translate3d(-2.165em, 0, 0); } } - -@keyframes blast-cast-61 { - 100% { - transform: translate3d(-2.47em, 0, 0); } } - -@keyframes blast-cast-62 { - 100% { - transform: translate3d(-2.07em, 0, 0); } } - -@keyframes blast-cast-63 { - 100% { - transform: translate3d(-2.8em, 0, 0); } } - -@keyframes blast-cast-64 { - 100% { - transform: translate3d(-2.75em, 0, 0); } } - -@keyframes blast-cast-65 { - 100% { - transform: translate3d(-2.22em, 0, 0); } } - -@keyframes blast-cast-66 { - 100% { - transform: translate3d(-2.285em, 0, 0); } } - -@keyframes blast-cast-67 { - 100% { - transform: translate3d(-2.69em, 0, 0); } } - -@keyframes blast-cast-68 { - 100% { - transform: translate3d(-2.23em, 0, 0); } } - -@keyframes blast-cast-69 { - 100% { - transform: translate3d(-2.545em, 0, 0); } } - -@keyframes blast-cast-70 { - 100% { - transform: translate3d(-2.51em, 0, 0); } } - -@keyframes blast-cast-71 { - 100% { - transform: translate3d(-2.59em, 0, 0); } } - -@keyframes blast-cast-72 { - 100% { - transform: translate3d(-2.52em, 0, 0); } } - -@keyframes blast-cast-73 { - 100% { - transform: translate3d(-2.295em, 0, 0); } } - -@keyframes blast-cast-74 { - 100% { - transform: translate3d(-2.25em, 0, 0); } } - -@keyframes blast-cast-75 { - 100% { - transform: translate3d(-2.595em, 0, 0); } } - -@keyframes blast-cast-76 { - 100% { - transform: translate3d(-2.09em, 0, 0); } } - -@keyframes blast-cast-77 { - 100% { - transform: translate3d(-2.105em, 0, 0); } } - -@keyframes blast-cast-78 { - 100% { - transform: translate3d(-2.5em, 0, 0); } } - -@keyframes blast-cast-79 { - 100% { - transform: translate3d(-2.985em, 0, 0); } } - -@keyframes blast-cast-80 { - 100% { - transform: translate3d(-2.88em, 0, 0); } } - -@keyframes blast-cast-81 { - 100% { - transform: translate3d(-2.045em, 0, 0); } } - -@keyframes blast-cast-82 { - 100% { - transform: translate3d(-2.83em, 0, 0); } } - -@keyframes blast-cast-83 { - 100% { - transform: translate3d(-2.575em, 0, 0); } } - -@keyframes blast-cast-84 { - 100% { - transform: translate3d(-2.11em, 0, 0); } } - -@keyframes blast-cast-85 { - 100% { - transform: translate3d(-2.495em, 0, 0); } } - -@keyframes blast-cast-86 { - 100% { - transform: translate3d(-2.845em, 0, 0); } } - -@keyframes blast-cast-87 { - 100% { - transform: translate3d(-2.3em, 0, 0); } } - -@keyframes blast-cast-88 { - 100% { - transform: translate3d(-2.765em, 0, 0); } } - -@keyframes blast-cast-89 { - 100% { - transform: translate3d(-2.755em, 0, 0); } } - -@keyframes blast-cast-90 { - 100% { - transform: translate3d(-2.425em, 0, 0); } } - -@keyframes blast-cast-91 { - 100% { - transform: translate3d(-2.305em, 0, 0); } } - -@keyframes blast-cast-92 { - 100% { - transform: translate3d(-2.96em, 0, 0); } } - -@keyframes blast-cast-93 { - 100% { - transform: translate3d(-2.105em, 0, 0); } } - -@keyframes blast-cast-94 { - 100% { - transform: translate3d(-2.645em, 0, 0); } } - -@keyframes blast-cast-95 { - 100% { - transform: translate3d(-2.525em, 0, 0); } } - -@keyframes blast-cast-96 { - 100% { - transform: translate3d(-2.22em, 0, 0); } } - -@keyframes blast-cast-97 { - 100% { - transform: translate3d(-2.275em, 0, 0); } } - -@keyframes blast-cast-98 { - 100% { - transform: translate3d(-2.13em, 0, 0); } } - -@keyframes blast-cast-99 { - 100% { - transform: translate3d(-2.16em, 0, 0); } } - -@keyframes blast-cast-100 { - 100% { - transform: translate3d(-2.265em, 0, 0); } } - -.blast-cast:nth-child(1) { - height: 13px; - width: 13px; - transform: translate3d(197px, 177px, 109px); - background: #15f4ee; - animation: blast-cast-1 0.7s; } - -.blast-cast:nth-child(2) { - height: 22px; - width: 22px; - transform: translate3d(98px, 148px, 190px); - background: #15f4ee; - animation: blast-cast-2 0.7s; } - -.blast-cast:nth-child(3) { - height: 6px; - width: 6px; - transform: translate3d(10px, 92px, 12px); - background: #15f4ee; - animation: blast-cast-3 0.7s; } - -.blast-cast:nth-child(4) { - height: 22px; - width: 22px; - transform: translate3d(83px, 107px, 66px); - background: #15f4ee; - animation: blast-cast-4 0.7s; } - -.blast-cast:nth-child(5) { - height: 12px; - width: 12px; - transform: translate3d(9px, 145px, 109px); - background: #15f4ee; - animation: blast-cast-5 0.7s; } - -.blast-cast:nth-child(6) { - height: 1px; - width: 1px; - transform: translate3d(57px, 135px, 200px); - background: #15f4ee; - animation: blast-cast-6 0.7s; } - -.blast-cast:nth-child(7) { - height: 12px; - width: 12px; - transform: translate3d(103px, 83px, 12px); - background: #15f4ee; - animation: blast-cast-7 0.7s; } - -.blast-cast:nth-child(8) { - height: 8px; - width: 8px; - transform: translate3d(62px, 54px, 86px); - background: #15f4ee; - animation: blast-cast-8 0.7s; } - -.blast-cast:nth-child(9) { - height: 25px; - width: 25px; - transform: translate3d(17px, 25px, 13px); - background: #15f4ee; - animation: blast-cast-9 0.7s; } - -.blast-cast:nth-child(10) { - height: 28px; - width: 28px; - transform: translate3d(181px, 81px, 38px); - background: #15f4ee; - animation: blast-cast-10 0.7s; } - -.blast-cast:nth-child(11) { - height: 10px; - width: 10px; - transform: translate3d(190px, 173px, 2px); - background: #15f4ee; - animation: blast-cast-11 0.7s; } - -.blast-cast:nth-child(12) { - height: 2px; - width: 2px; - transform: translate3d(134px, 95px, 87px); - background: #15f4ee; - animation: blast-cast-12 0.7s; } - -.blast-cast:nth-child(13) { - height: 12px; - width: 12px; - transform: translate3d(163px, 189px, 92px); - background: #15f4ee; - animation: blast-cast-13 0.7s; } - -.blast-cast:nth-child(14) { - height: 26px; - width: 26px; - transform: translate3d(60px, 69px, 183px); - background: #15f4ee; - animation: blast-cast-14 0.7s; } - -.blast-cast:nth-child(15) { - height: 13px; - width: 13px; - transform: translate3d(44px, 132px, 185px); - background: #15f4ee; - animation: blast-cast-15 0.7s; } - -.blast-cast:nth-child(16) { - height: 5px; - width: 5px; - transform: translate3d(77px, 60px, 43px); - background: #15f4ee; - animation: blast-cast-16 0.7s; } - -.blast-cast:nth-child(17) { - height: 12px; - width: 12px; - transform: translate3d(158px, 31px, 177px); - background: #15f4ee; - animation: blast-cast-17 0.7s; } - -.blast-cast:nth-child(18) { - height: 22px; - width: 22px; - transform: translate3d(46px, 103px, 13px); - background: #15f4ee; - animation: blast-cast-18 0.7s; } - -.blast-cast:nth-child(19) { - height: 11px; - width: 11px; - transform: translate3d(92px, 25px, 49px); - background: #15f4ee; - animation: blast-cast-19 0.7s; } - -.blast-cast:nth-child(20) { - height: 24px; - width: 24px; - transform: translate3d(102px, 71px, 95px); - background: #15f4ee; - animation: blast-cast-20 0.7s; } - -.blast-cast:nth-child(21) { - height: 27px; - width: 27px; - transform: translate3d(130px, 71px, 94px); - background: #15f4ee; - animation: blast-cast-21 0.7s; } - -.blast-cast:nth-child(22) { - height: 14px; - width: 14px; - transform: translate3d(117px, 6px, 21px); - background: #15f4ee; - animation: blast-cast-22 0.7s; } - -.blast-cast:nth-child(23) { - height: 16px; - width: 16px; - transform: translate3d(39px, 165px, 116px); - background: #15f4ee; - animation: blast-cast-23 0.7s; } - -.blast-cast:nth-child(24) { - height: 30px; - width: 30px; - transform: translate3d(155px, 67px, 168px); - background: #15f4ee; - animation: blast-cast-24 0.7s; } - -.blast-cast:nth-child(25) { - height: 24px; - width: 24px; - transform: translate3d(181px, 137px, 65px); - background: #15f4ee; - animation: blast-cast-25 0.7s; } - -.blast-cast:nth-child(26) { - height: 13px; - width: 13px; - transform: translate3d(180px, 39px, 125px); - background: #15f4ee; - animation: blast-cast-26 0.7s; } - -.blast-cast:nth-child(27) { - height: 24px; - width: 24px; - transform: translate3d(98px, 199px, 120px); - background: #15f4ee; - animation: blast-cast-27 0.7s; } - -.blast-cast:nth-child(28) { - height: 14px; - width: 14px; - transform: translate3d(63px, 82px, 153px); - background: #15f4ee; - animation: blast-cast-28 0.7s; } - -.blast-cast:nth-child(29) { - height: 18px; - width: 18px; - transform: translate3d(54px, 3px, 42px); - background: #15f4ee; - animation: blast-cast-29 0.7s; } - -.blast-cast:nth-child(30) { - height: 24px; - width: 24px; - transform: translate3d(184px, 94px, 117px); - background: #15f4ee; - animation: blast-cast-30 0.7s; } - -.blast-cast:nth-child(31) { - height: 21px; - width: 21px; - transform: translate3d(148px, 178px, 17px); - background: #15f4ee; - animation: blast-cast-31 0.7s; } - -.blast-cast:nth-child(32) { - height: 27px; - width: 27px; - transform: translate3d(67px, 24px, 172px); - background: #15f4ee; - animation: blast-cast-32 0.7s; } - -.blast-cast:nth-child(33) { - height: 3px; - width: 3px; - transform: translate3d(53px, 5px, 10px); - background: #15f4ee; - animation: blast-cast-33 0.7s; } - -.blast-cast:nth-child(34) { - height: 9px; - width: 9px; - transform: translate3d(29px, 68px, 98px); - background: #15f4ee; - animation: blast-cast-34 0.7s; } - -.blast-cast:nth-child(35) { - height: 10px; - width: 10px; - transform: translate3d(15px, 37px, 5px); - background: #15f4ee; - animation: blast-cast-35 0.7s; } - -.blast-cast:nth-child(36) { - height: 14px; - width: 14px; - transform: translate3d(1px, 144px, 161px); - background: #15f4ee; - animation: blast-cast-36 0.7s; } - -.blast-cast:nth-child(37) { - height: 28px; - width: 28px; - transform: translate3d(194px, 16px, 159px); - background: #15f4ee; - animation: blast-cast-37 0.7s; } - -.blast-cast:nth-child(38) { - height: 13px; - width: 13px; - transform: translate3d(191px, 174px, 171px); - background: #15f4ee; - animation: blast-cast-38 0.7s; } - -.blast-cast:nth-child(39) { - height: 7px; - width: 7px; - transform: translate3d(7px, 136px, 190px); - background: #15f4ee; - animation: blast-cast-39 0.7s; } - -.blast-cast:nth-child(40) { - height: 26px; - width: 26px; - transform: translate3d(23px, 8px, 62px); - background: #15f4ee; - animation: blast-cast-40 0.7s; } - -.blast-cast:nth-child(41) { - height: 29px; - width: 29px; - transform: translate3d(87px, 171px, 182px); - background: #15f4ee; - animation: blast-cast-41 0.7s; } - -.blast-cast:nth-child(42) { - height: 23px; - width: 23px; - transform: translate3d(100px, 103px, 80px); - background: #15f4ee; - animation: blast-cast-42 0.7s; } - -.blast-cast:nth-child(43) { - height: 25px; - width: 25px; - transform: translate3d(102px, 76px, 103px); - background: #15f4ee; - animation: blast-cast-43 0.7s; } - -.blast-cast:nth-child(44) { - height: 13px; - width: 13px; - transform: translate3d(92px, 45px, 172px); - background: #15f4ee; - animation: blast-cast-44 0.7s; } - -.blast-cast:nth-child(45) { - height: 15px; - width: 15px; - transform: translate3d(168px, 52px, 141px); - background: #15f4ee; - animation: blast-cast-45 0.7s; } - -.blast-cast:nth-child(46) { - height: 21px; - width: 21px; - transform: translate3d(117px, 7px, 113px); - background: #15f4ee; - animation: blast-cast-46 0.7s; } - -.blast-cast:nth-child(47) { - height: 22px; - width: 22px; - transform: translate3d(50px, 154px, 37px); - background: #15f4ee; - animation: blast-cast-47 0.7s; } - -.blast-cast:nth-child(48) { - height: 11px; - width: 11px; - transform: translate3d(14px, 86px, 161px); - background: #15f4ee; - animation: blast-cast-48 0.7s; } - -.blast-cast:nth-child(49) { - height: 12px; - width: 12px; - transform: translate3d(177px, 164px, 59px); - background: #15f4ee; - animation: blast-cast-49 0.7s; } - -.blast-cast:nth-child(50) { - height: 18px; - width: 18px; - transform: translate3d(28px, 1px, 12px); - background: #15f4ee; - animation: blast-cast-50 0.7s; } - -.blast-cast:nth-child(51) { - height: 25px; - width: 25px; - transform: translate3d(4px, 36px, 84px); - background: #15f4ee; - animation: blast-cast-51 0.7s; } - -.blast-cast:nth-child(52) { - height: 4px; - width: 4px; - transform: translate3d(78px, 88px, 199px); - background: #15f4ee; - animation: blast-cast-52 0.7s; } - -.blast-cast:nth-child(53) { - height: 18px; - width: 18px; - transform: translate3d(194px, 153px, 186px); - background: #15f4ee; - animation: blast-cast-53 0.7s; } - -.blast-cast:nth-child(54) { - height: 5px; - width: 5px; - transform: translate3d(69px, 200px, 118px); - background: #15f4ee; - animation: blast-cast-54 0.7s; } - -.blast-cast:nth-child(55) { - height: 13px; - width: 13px; - transform: translate3d(199px, 153px, 132px); - background: #15f4ee; - animation: blast-cast-55 0.7s; } - -.blast-cast:nth-child(56) { - height: 16px; - width: 16px; - transform: translate3d(152px, 96px, 116px); - background: #15f4ee; - animation: blast-cast-56 0.7s; } - -.blast-cast:nth-child(57) { - height: 12px; - width: 12px; - transform: translate3d(179px, 45px, 162px); - background: #15f4ee; - animation: blast-cast-57 0.7s; } - -.blast-cast:nth-child(58) { - height: 9px; - width: 9px; - transform: translate3d(8px, 6px, 187px); - background: #15f4ee; - animation: blast-cast-58 0.7s; } - -.blast-cast:nth-child(59) { - height: 18px; - width: 18px; - transform: translate3d(84px, 43px, 89px); - background: #15f4ee; - animation: blast-cast-59 0.7s; } - -.blast-cast:nth-child(60) { - height: 27px; - width: 27px; - transform: translate3d(167px, 200px, 144px); - background: #15f4ee; - animation: blast-cast-60 0.7s; } - -.blast-cast:nth-child(61) { - height: 4px; - width: 4px; - transform: translate3d(113px, 93px, 2px); - background: #15f4ee; - animation: blast-cast-61 0.7s; } - -.blast-cast:nth-child(62) { - height: 17px; - width: 17px; - transform: translate3d(2px, 94px, 188px); - background: #15f4ee; - animation: blast-cast-62 0.7s; } - -.blast-cast:nth-child(63) { - height: 17px; - width: 17px; - transform: translate3d(33px, 169px, 100px); - background: #15f4ee; - animation: blast-cast-63 0.7s; } - -.blast-cast:nth-child(64) { - height: 19px; - width: 19px; - transform: translate3d(52px, 127px, 6px); - background: #15f4ee; - animation: blast-cast-64 0.7s; } - -.blast-cast:nth-child(65) { - height: 22px; - width: 22px; - transform: translate3d(22px, 68px, 134px); - background: #15f4ee; - animation: blast-cast-65 0.7s; } - -.blast-cast:nth-child(66) { - height: 27px; - width: 27px; - transform: translate3d(157px, 2px, 42px); - background: #15f4ee; - animation: blast-cast-66 0.7s; } - -.blast-cast:nth-child(67) { - height: 30px; - width: 30px; - transform: translate3d(200px, 128px, 72px); - background: #15f4ee; - animation: blast-cast-67 0.7s; } - -.blast-cast:nth-child(68) { - height: 1px; - width: 1px; - transform: translate3d(23px, 54px, 2px); - background: #15f4ee; - animation: blast-cast-68 0.7s; } - -.blast-cast:nth-child(69) { - height: 25px; - width: 25px; - transform: translate3d(43px, 156px, 198px); - background: #15f4ee; - animation: blast-cast-69 0.7s; } - -.blast-cast:nth-child(70) { - height: 28px; - width: 28px; - transform: translate3d(62px, 2px, 158px); - background: #15f4ee; - animation: blast-cast-70 0.7s; } - -.blast-cast:nth-child(71) { - height: 1px; - width: 1px; - transform: translate3d(42px, 114px, 197px); - background: #15f4ee; - animation: blast-cast-71 0.7s; } - -.blast-cast:nth-child(72) { - height: 27px; - width: 27px; - transform: translate3d(82px, 105px, 175px); - background: #15f4ee; - animation: blast-cast-72 0.7s; } - -.blast-cast:nth-child(73) { - height: 17px; - width: 17px; - transform: translate3d(174px, 46px, 149px); - background: #15f4ee; - animation: blast-cast-73 0.7s; } - -.blast-cast:nth-child(74) { - height: 12px; - width: 12px; - transform: translate3d(160px, 103px, 141px); - background: #15f4ee; - animation: blast-cast-74 0.7s; } - -.blast-cast:nth-child(75) { - height: 27px; - width: 27px; - transform: translate3d(101px, 76px, 68px); - background: #15f4ee; - animation: blast-cast-75 0.7s; } - -.blast-cast:nth-child(76) { - height: 18px; - width: 18px; - transform: translate3d(186px, 199px, 80px); - background: #15f4ee; - animation: blast-cast-76 0.7s; } - -.blast-cast:nth-child(77) { - height: 27px; - width: 27px; - transform: translate3d(116px, 17px, 31px); - background: #15f4ee; - animation: blast-cast-77 0.7s; } - -.blast-cast:nth-child(78) { - height: 23px; - width: 23px; - transform: translate3d(52px, 80px, 130px); - background: #15f4ee; - animation: blast-cast-78 0.7s; } - -.blast-cast:nth-child(79) { - height: 13px; - width: 13px; - transform: translate3d(162px, 150px, 129px); - background: #15f4ee; - animation: blast-cast-79 0.7s; } - -.blast-cast:nth-child(80) { - height: 24px; - width: 24px; - transform: translate3d(144px, 57px, 55px); - background: #15f4ee; - animation: blast-cast-80 0.7s; } - -.blast-cast:nth-child(81) { - height: 3px; - width: 3px; - transform: translate3d(77px, 59px, 63px); - background: #15f4ee; - animation: blast-cast-81 0.7s; } - -.blast-cast:nth-child(82) { - height: 2px; - width: 2px; - transform: translate3d(79px, 89px, 72px); - background: #15f4ee; - animation: blast-cast-82 0.7s; } - -.blast-cast:nth-child(83) { - height: 7px; - width: 7px; - transform: translate3d(44px, 46px, 134px); - background: #15f4ee; - animation: blast-cast-83 0.7s; } - -.blast-cast:nth-child(84) { - height: 1px; - width: 1px; - transform: translate3d(127px, 31px, 110px); - background: #15f4ee; - animation: blast-cast-84 0.7s; } - -.blast-cast:nth-child(85) { - height: 26px; - width: 26px; - transform: translate3d(164px, 181px, 170px); - background: #15f4ee; - animation: blast-cast-85 0.7s; } - -.blast-cast:nth-child(86) { - height: 10px; - width: 10px; - transform: translate3d(54px, 42px, 176px); - background: #15f4ee; - animation: blast-cast-86 0.7s; } - -.blast-cast:nth-child(87) { - height: 8px; - width: 8px; - transform: translate3d(61px, 59px, 43px); - background: #15f4ee; - animation: blast-cast-87 0.7s; } - -.blast-cast:nth-child(88) { - height: 2px; - width: 2px; - transform: translate3d(177px, 17px, 151px); - background: #15f4ee; - animation: blast-cast-88 0.7s; } - -.blast-cast:nth-child(89) { - height: 24px; - width: 24px; - transform: translate3d(10px, 47px, 45px); - background: #15f4ee; - animation: blast-cast-89 0.7s; } - -.blast-cast:nth-child(90) { - height: 30px; - width: 30px; - transform: translate3d(175px, 147px, 8px); - background: #15f4ee; - animation: blast-cast-90 0.7s; } - -.blast-cast:nth-child(91) { - height: 5px; - width: 5px; - transform: translate3d(102px, 19px, 195px); - background: #15f4ee; - animation: blast-cast-91 0.7s; } - -.blast-cast:nth-child(92) { - height: 10px; - width: 10px; - transform: translate3d(14px, 136px, 21px); - background: #15f4ee; - animation: blast-cast-92 0.7s; } - -.blast-cast:nth-child(93) { - height: 4px; - width: 4px; - transform: translate3d(5px, 75px, 4px); - background: #15f4ee; - animation: blast-cast-93 0.7s; } - -.blast-cast:nth-child(94) { - height: 3px; - width: 3px; - transform: translate3d(24px, 4px, 41px); - background: #15f4ee; - animation: blast-cast-94 0.7s; } - -.blast-cast:nth-child(95) { - height: 6px; - width: 6px; - transform: translate3d(94px, 60px, 12px); - background: #15f4ee; - animation: blast-cast-95 0.7s; } - -.blast-cast:nth-child(96) { - height: 27px; - width: 27px; - transform: translate3d(30px, 70px, 158px); - background: #15f4ee; - animation: blast-cast-96 0.7s; } - -.blast-cast:nth-child(97) { - height: 20px; - width: 20px; - transform: translate3d(195px, 160px, 8px); - background: #15f4ee; - animation: blast-cast-97 0.7s; } - -.blast-cast:nth-child(98) { - height: 4px; - width: 4px; - transform: translate3d(149px, 41px, 92px); - background: #15f4ee; - animation: blast-cast-98 0.7s; } - -.blast-cast:nth-child(99) { - height: 9px; - width: 9px; - transform: translate3d(6px, 64px, 152px); - background: #15f4ee; - animation: blast-cast-99 0.7s; } - -.blast-cast:nth-child(100) { - height: 30px; - width: 30px; - transform: translate3d(84px, 129px, 147px); - background: #15f4ee; - animation: blast-cast-100 0.7s; } - -.blast-hit { - position: absolute; - background: black; - opacity: .7; - border-radius: 50%; } - -@keyframes blast-hit-1 { - 100% { - transform: translate3d(194px, 21px, 15px); } } - -@keyframes blast-hit-2 { - 100% { - transform: translate3d(59px, 59px, 125px); } } - -@keyframes blast-hit-3 { - 100% { - transform: translate3d(98px, 112px, 36px); } } - -@keyframes blast-hit-4 { - 100% { - transform: translate3d(53px, 187px, 105px); } } - -@keyframes blast-hit-5 { - 100% { - transform: translate3d(53px, 5px, 174px); } } - -@keyframes blast-hit-6 { - 100% { - transform: translate3d(52px, 47px, 4px); } } - -@keyframes blast-hit-7 { - 100% { - transform: translate3d(29px, 44px, 161px); } } - -@keyframes blast-hit-8 { - 100% { - transform: translate3d(192px, 123px, 192px); } } - -@keyframes blast-hit-9 { - 100% { - transform: translate3d(172px, 173px, 36px); } } - -@keyframes blast-hit-10 { - 100% { - transform: translate3d(200px, 16px, 169px); } } - -@keyframes blast-hit-11 { - 100% { - transform: translate3d(85px, 102px, 131px); } } - -@keyframes blast-hit-12 { - 100% { - transform: translate3d(26px, 40px, 192px); } } - -@keyframes blast-hit-13 { - 100% { - transform: translate3d(40px, 186px, 81px); } } - -@keyframes blast-hit-14 { - 100% { - transform: translate3d(122px, 166px, 80px); } } - -@keyframes blast-hit-15 { - 100% { - transform: translate3d(198px, 58px, 76px); } } - -@keyframes blast-hit-16 { - 100% { - transform: translate3d(152px, 78px, 121px); } } - -@keyframes blast-hit-17 { - 100% { - transform: translate3d(97px, 138px, 80px); } } - -@keyframes blast-hit-18 { - 100% { - transform: translate3d(78px, 48px, 122px); } } - -@keyframes blast-hit-19 { - 100% { - transform: translate3d(122px, 49px, 199px); } } - -@keyframes blast-hit-20 { - 100% { - transform: translate3d(177px, 103px, 31px); } } - -@keyframes blast-hit-21 { - 100% { - transform: translate3d(52px, 136px, 194px); } } - -@keyframes blast-hit-22 { - 100% { - transform: translate3d(34px, 30px, 116px); } } - -@keyframes blast-hit-23 { - 100% { - transform: translate3d(127px, 174px, 110px); } } - -@keyframes blast-hit-24 { - 100% { - transform: translate3d(183px, 111px, 53px); } } - -@keyframes blast-hit-25 { - 100% { - transform: translate3d(120px, 102px, 139px); } } - -@keyframes blast-hit-26 { - 100% { - transform: translate3d(126px, 137px, 148px); } } - -@keyframes blast-hit-27 { - 100% { - transform: translate3d(164px, 2px, 67px); } } - -@keyframes blast-hit-28 { - 100% { - transform: translate3d(41px, 77px, 7px); } } - -@keyframes blast-hit-29 { - 100% { - transform: translate3d(77px, 112px, 56px); } } - -@keyframes blast-hit-30 { - 100% { - transform: translate3d(14px, 114px, 28px); } } - -@keyframes blast-hit-31 { - 100% { - transform: translate3d(66px, 39px, 141px); } } - -@keyframes blast-hit-32 { - 100% { - transform: translate3d(34px, 64px, 143px); } } - -@keyframes blast-hit-33 { - 100% { - transform: translate3d(101px, 137px, 127px); } } - -@keyframes blast-hit-34 { - 100% { - transform: translate3d(171px, 140px, 29px); } } - -@keyframes blast-hit-35 { - 100% { - transform: translate3d(64px, 150px, 20px); } } - -@keyframes blast-hit-36 { - 100% { - transform: translate3d(76px, 58px, 114px); } } - -@keyframes blast-hit-37 { - 100% { - transform: translate3d(68px, 105px, 44px); } } - -@keyframes blast-hit-38 { - 100% { - transform: translate3d(32px, 6px, 140px); } } - -@keyframes blast-hit-39 { - 100% { - transform: translate3d(127px, 88px, 41px); } } - -@keyframes blast-hit-40 { - 100% { - transform: translate3d(156px, 91px, 4px); } } - -@keyframes blast-hit-41 { - 100% { - transform: translate3d(89px, 3px, 70px); } } - -@keyframes blast-hit-42 { - 100% { - transform: translate3d(105px, 51px, 146px); } } - -@keyframes blast-hit-43 { - 100% { - transform: translate3d(171px, 141px, 151px); } } - -@keyframes blast-hit-44 { - 100% { - transform: translate3d(73px, 155px, 195px); } } - -@keyframes blast-hit-45 { - 100% { - transform: translate3d(50px, 123px, 161px); } } - -@keyframes blast-hit-46 { - 100% { - transform: translate3d(149px, 59px, 81px); } } - -@keyframes blast-hit-47 { - 100% { - transform: translate3d(6px, 24px, 194px); } } - -@keyframes blast-hit-48 { - 100% { - transform: translate3d(93px, 109px, 25px); } } - -@keyframes blast-hit-49 { - 100% { - transform: translate3d(32px, 73px, 153px); } } - -@keyframes blast-hit-50 { - 100% { - transform: translate3d(81px, 186px, 114px); } } - -@keyframes blast-hit-51 { - 100% { - transform: translate3d(109px, 124px, 130px); } } - -@keyframes blast-hit-52 { - 100% { - transform: translate3d(179px, 35px, 30px); } } - -@keyframes blast-hit-53 { - 100% { - transform: translate3d(156px, 160px, 92px); } } - -@keyframes blast-hit-54 { - 100% { - transform: translate3d(1px, 28px, 21px); } } - -@keyframes blast-hit-55 { - 100% { - transform: translate3d(13px, 55px, 183px); } } - -@keyframes blast-hit-56 { - 100% { - transform: translate3d(71px, 71px, 36px); } } - -@keyframes blast-hit-57 { - 100% { - transform: translate3d(125px, 76px, 4px); } } - -@keyframes blast-hit-58 { - 100% { - transform: translate3d(9px, 116px, 162px); } } - -@keyframes blast-hit-59 { - 100% { - transform: translate3d(166px, 70px, 36px); } } - -@keyframes blast-hit-60 { - 100% { - transform: translate3d(190px, 47px, 113px); } } - -@keyframes blast-hit-61 { - 100% { - transform: translate3d(14px, 29px, 110px); } } - -@keyframes blast-hit-62 { - 100% { - transform: translate3d(16px, 61px, 154px); } } - -@keyframes blast-hit-63 { - 100% { - transform: translate3d(107px, 94px, 177px); } } - -@keyframes blast-hit-64 { - 100% { - transform: translate3d(116px, 196px, 141px); } } - -@keyframes blast-hit-65 { - 100% { - transform: translate3d(79px, 95px, 172px); } } - -@keyframes blast-hit-66 { - 100% { - transform: translate3d(64px, 9px, 157px); } } - -@keyframes blast-hit-67 { - 100% { - transform: translate3d(43px, 32px, 7px); } } - -@keyframes blast-hit-68 { - 100% { - transform: translate3d(194px, 70px, 37px); } } - -@keyframes blast-hit-69 { - 100% { - transform: translate3d(18px, 131px, 110px); } } - -@keyframes blast-hit-70 { - 100% { - transform: translate3d(183px, 34px, 137px); } } - -@keyframes blast-hit-71 { - 100% { - transform: translate3d(104px, 193px, 137px); } } - -@keyframes blast-hit-72 { - 100% { - transform: translate3d(168px, 106px, 74px); } } - -@keyframes blast-hit-73 { - 100% { - transform: translate3d(84px, 127px, 76px); } } - -@keyframes blast-hit-74 { - 100% { - transform: translate3d(172px, 155px, 32px); } } - -@keyframes blast-hit-75 { - 100% { - transform: translate3d(17px, 65px, 19px); } } - -@keyframes blast-hit-76 { - 100% { - transform: translate3d(44px, 155px, 193px); } } - -@keyframes blast-hit-77 { - 100% { - transform: translate3d(164px, 84px, 12px); } } - -@keyframes blast-hit-78 { - 100% { - transform: translate3d(77px, 157px, 190px); } } - -@keyframes blast-hit-79 { - 100% { - transform: translate3d(35px, 150px, 154px); } } - -@keyframes blast-hit-80 { - 100% { - transform: translate3d(117px, 66px, 77px); } } - -@keyframes blast-hit-81 { - 100% { - transform: translate3d(6px, 91px, 1px); } } - -@keyframes blast-hit-82 { - 100% { - transform: translate3d(160px, 145px, 17px); } } - -@keyframes blast-hit-83 { - 100% { - transform: translate3d(180px, 171px, 74px); } } - -@keyframes blast-hit-84 { - 100% { - transform: translate3d(21px, 174px, 69px); } } - -@keyframes blast-hit-85 { - 100% { - transform: translate3d(84px, 14px, 157px); } } - -@keyframes blast-hit-86 { - 100% { - transform: translate3d(48px, 60px, 40px); } } - -@keyframes blast-hit-87 { - 100% { - transform: translate3d(90px, 42px, 25px); } } - -@keyframes blast-hit-88 { - 100% { - transform: translate3d(95px, 46px, 35px); } } - -@keyframes blast-hit-89 { - 100% { - transform: translate3d(38px, 177px, 45px); } } - -@keyframes blast-hit-90 { - 100% { - transform: translate3d(197px, 23px, 162px); } } - -@keyframes blast-hit-91 { - 100% { - transform: translate3d(79px, 32px, 196px); } } - -@keyframes blast-hit-92 { - 100% { - transform: translate3d(108px, 86px, 153px); } } - -@keyframes blast-hit-93 { - 100% { - transform: translate3d(3px, 9px, 165px); } } - -@keyframes blast-hit-94 { - 100% { - transform: translate3d(161px, 73px, 131px); } } - -@keyframes blast-hit-95 { - 100% { - transform: translate3d(186px, 28px, 119px); } } - -@keyframes blast-hit-96 { - 100% { - transform: translate3d(180px, 80px, 119px); } } - -@keyframes blast-hit-97 { - 100% { - transform: translate3d(98px, 36px, 136px); } } - -@keyframes blast-hit-98 { - 100% { - transform: translate3d(186px, 62px, 69px); } } - -@keyframes blast-hit-99 { - 100% { - transform: translate3d(103px, 135px, 124px); } } - -@keyframes blast-hit-100 { - 100% { - transform: translate3d(8px, 38px, 144px); } } - -.blast-hit:nth-child(1) { - height: 11px; - width: 11px; - transform: translate3d(-2.7em, 0, 0); - animation: blast-hit-1 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(2) { - height: 19px; - width: 19px; - transform: translate3d(-2.455em, 0, 0); - animation: blast-hit-2 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(3) { - height: 29px; - width: 29px; - transform: translate3d(-2.575em, 0, 0); - animation: blast-hit-3 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(4) { - height: 5px; - width: 5px; - transform: translate3d(-2.645em, 0, 0); - animation: blast-hit-4 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(5) { - height: 21px; - width: 21px; - transform: translate3d(-2.29em, 0, 0); - animation: blast-hit-5 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(6) { - height: 25px; - width: 25px; - transform: translate3d(-2.38em, 0, 0); - animation: blast-hit-6 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(7) { - height: 2px; - width: 2px; - transform: translate3d(-2.14em, 0, 0); - animation: blast-hit-7 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(8) { - height: 4px; - width: 4px; - transform: translate3d(-2.12em, 0, 0); - animation: blast-hit-8 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(9) { - height: 29px; - width: 29px; - transform: translate3d(-2.68em, 0, 0); - animation: blast-hit-9 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(10) { - height: 30px; - width: 30px; - transform: translate3d(-2.81em, 0, 0); - animation: blast-hit-10 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(11) { - height: 6px; - width: 6px; - transform: translate3d(-2.48em, 0, 0); - animation: blast-hit-11 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(12) { - height: 4px; - width: 4px; - transform: translate3d(-2.74em, 0, 0); - animation: blast-hit-12 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(13) { - height: 20px; - width: 20px; - transform: translate3d(-2.76em, 0, 0); - animation: blast-hit-13 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(14) { - height: 4px; - width: 4px; - transform: translate3d(-2.885em, 0, 0); - animation: blast-hit-14 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(15) { - height: 12px; - width: 12px; - transform: translate3d(-2.325em, 0, 0); - animation: blast-hit-15 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(16) { - height: 20px; - width: 20px; - transform: translate3d(-2.8em, 0, 0); - animation: blast-hit-16 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(17) { - height: 14px; - width: 14px; - transform: translate3d(-2.02em, 0, 0); - animation: blast-hit-17 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(18) { - height: 8px; - width: 8px; - transform: translate3d(-2.965em, 0, 0); - animation: blast-hit-18 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(19) { - height: 18px; - width: 18px; - transform: translate3d(-2.975em, 0, 0); - animation: blast-hit-19 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(20) { - height: 7px; - width: 7px; - transform: translate3d(-2.455em, 0, 0); - animation: blast-hit-20 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(21) { - height: 24px; - width: 24px; - transform: translate3d(-2.69em, 0, 0); - animation: blast-hit-21 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(22) { - height: 18px; - width: 18px; - transform: translate3d(-2.535em, 0, 0); - animation: blast-hit-22 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(23) { - height: 16px; - width: 16px; - transform: translate3d(-2.925em, 0, 0); - animation: blast-hit-23 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(24) { - height: 9px; - width: 9px; - transform: translate3d(-2.835em, 0, 0); - animation: blast-hit-24 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(25) { - height: 8px; - width: 8px; - transform: translate3d(-2.5em, 0, 0); - animation: blast-hit-25 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(26) { - height: 13px; - width: 13px; - transform: translate3d(-2.095em, 0, 0); - animation: blast-hit-26 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(27) { - height: 28px; - width: 28px; - transform: translate3d(-2.86em, 0, 0); - animation: blast-hit-27 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(28) { - height: 28px; - width: 28px; - transform: translate3d(-2.095em, 0, 0); - animation: blast-hit-28 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(29) { - height: 18px; - width: 18px; - transform: translate3d(-2.155em, 0, 0); - animation: blast-hit-29 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(30) { - height: 22px; - width: 22px; - transform: translate3d(-2.81em, 0, 0); - animation: blast-hit-30 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(31) { - height: 17px; - width: 17px; - transform: translate3d(-2.5em, 0, 0); - animation: blast-hit-31 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(32) { - height: 23px; - width: 23px; - transform: translate3d(-2.725em, 0, 0); - animation: blast-hit-32 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(33) { - height: 24px; - width: 24px; - transform: translate3d(-2.255em, 0, 0); - animation: blast-hit-33 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(34) { - height: 4px; - width: 4px; - transform: translate3d(-2.285em, 0, 0); - animation: blast-hit-34 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(35) { - height: 14px; - width: 14px; - transform: translate3d(-2.985em, 0, 0); - animation: blast-hit-35 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(36) { - height: 3px; - width: 3px; - transform: translate3d(-2.65em, 0, 0); - animation: blast-hit-36 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(37) { - height: 11px; - width: 11px; - transform: translate3d(-2.405em, 0, 0); - animation: blast-hit-37 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(38) { - height: 3px; - width: 3px; - transform: translate3d(-2.46em, 0, 0); - animation: blast-hit-38 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(39) { - height: 3px; - width: 3px; - transform: translate3d(-2.11em, 0, 0); - animation: blast-hit-39 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(40) { - height: 29px; - width: 29px; - transform: translate3d(-2.18em, 0, 0); - animation: blast-hit-40 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(41) { - height: 1px; - width: 1px; - transform: translate3d(-2.7em, 0, 0); - animation: blast-hit-41 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(42) { - height: 4px; - width: 4px; - transform: translate3d(-2.6em, 0, 0); - animation: blast-hit-42 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(43) { - height: 12px; - width: 12px; - transform: translate3d(-2.69em, 0, 0); - animation: blast-hit-43 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(44) { - height: 8px; - width: 8px; - transform: translate3d(-2.655em, 0, 0); - animation: blast-hit-44 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(45) { - height: 14px; - width: 14px; - transform: translate3d(-2.965em, 0, 0); - animation: blast-hit-45 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(46) { - height: 21px; - width: 21px; - transform: translate3d(-2.93em, 0, 0); - animation: blast-hit-46 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(47) { - height: 3px; - width: 3px; - transform: translate3d(-2.31em, 0, 0); - animation: blast-hit-47 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(48) { - height: 29px; - width: 29px; - transform: translate3d(-2.17em, 0, 0); - animation: blast-hit-48 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(49) { - height: 13px; - width: 13px; - transform: translate3d(-2.545em, 0, 0); - animation: blast-hit-49 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(50) { - height: 7px; - width: 7px; - transform: translate3d(-2.705em, 0, 0); - animation: blast-hit-50 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(51) { - height: 23px; - width: 23px; - transform: translate3d(-2.915em, 0, 0); - animation: blast-hit-51 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(52) { - height: 15px; - width: 15px; - transform: translate3d(-2.77em, 0, 0); - animation: blast-hit-52 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(53) { - height: 26px; - width: 26px; - transform: translate3d(-2.695em, 0, 0); - animation: blast-hit-53 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(54) { - height: 7px; - width: 7px; - transform: translate3d(-2.155em, 0, 0); - animation: blast-hit-54 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(55) { - height: 16px; - width: 16px; - transform: translate3d(-2.17em, 0, 0); - animation: blast-hit-55 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(56) { - height: 28px; - width: 28px; - transform: translate3d(-2.235em, 0, 0); - animation: blast-hit-56 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(57) { - height: 19px; - width: 19px; - transform: translate3d(-2.085em, 0, 0); - animation: blast-hit-57 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(58) { - height: 25px; - width: 25px; - transform: translate3d(-2.025em, 0, 0); - animation: blast-hit-58 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(59) { - height: 16px; - width: 16px; - transform: translate3d(-2.46em, 0, 0); - animation: blast-hit-59 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(60) { - height: 24px; - width: 24px; - transform: translate3d(-2.33em, 0, 0); - animation: blast-hit-60 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(61) { - height: 3px; - width: 3px; - transform: translate3d(-2.83em, 0, 0); - animation: blast-hit-61 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(62) { - height: 14px; - width: 14px; - transform: translate3d(-2.73em, 0, 0); - animation: blast-hit-62 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(63) { - height: 23px; - width: 23px; - transform: translate3d(-2.265em, 0, 0); - animation: blast-hit-63 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(64) { - height: 26px; - width: 26px; - transform: translate3d(-2.815em, 0, 0); - animation: blast-hit-64 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(65) { - height: 3px; - width: 3px; - transform: translate3d(-2.555em, 0, 0); - animation: blast-hit-65 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(66) { - height: 27px; - width: 27px; - transform: translate3d(-2.23em, 0, 0); - animation: blast-hit-66 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(67) { - height: 2px; - width: 2px; - transform: translate3d(-2.22em, 0, 0); - animation: blast-hit-67 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(68) { - height: 20px; - width: 20px; - transform: translate3d(-2.215em, 0, 0); - animation: blast-hit-68 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(69) { - height: 7px; - width: 7px; - transform: translate3d(-2.17em, 0, 0); - animation: blast-hit-69 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(70) { - height: 7px; - width: 7px; - transform: translate3d(-2.96em, 0, 0); - animation: blast-hit-70 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(71) { - height: 2px; - width: 2px; - transform: translate3d(-2.885em, 0, 0); - animation: blast-hit-71 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(72) { - height: 23px; - width: 23px; - transform: translate3d(-2.49em, 0, 0); - animation: blast-hit-72 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(73) { - height: 17px; - width: 17px; - transform: translate3d(-2.575em, 0, 0); - animation: blast-hit-73 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(74) { - height: 18px; - width: 18px; - transform: translate3d(-2.81em, 0, 0); - animation: blast-hit-74 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(75) { - height: 24px; - width: 24px; - transform: translate3d(-2.95em, 0, 0); - animation: blast-hit-75 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(76) { - height: 23px; - width: 23px; - transform: translate3d(-2.62em, 0, 0); - animation: blast-hit-76 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(77) { - height: 23px; - width: 23px; - transform: translate3d(-2.6em, 0, 0); - animation: blast-hit-77 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(78) { - height: 4px; - width: 4px; - transform: translate3d(-2.77em, 0, 0); - animation: blast-hit-78 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(79) { - height: 25px; - width: 25px; - transform: translate3d(-2.75em, 0, 0); - animation: blast-hit-79 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(80) { - height: 28px; - width: 28px; - transform: translate3d(-2.23em, 0, 0); - animation: blast-hit-80 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(81) { - height: 20px; - width: 20px; - transform: translate3d(-2.21em, 0, 0); - animation: blast-hit-81 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(82) { - height: 14px; - width: 14px; - transform: translate3d(-2.375em, 0, 0); - animation: blast-hit-82 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(83) { - height: 11px; - width: 11px; - transform: translate3d(-2.035em, 0, 0); - animation: blast-hit-83 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(84) { - height: 6px; - width: 6px; - transform: translate3d(-2.48em, 0, 0); - animation: blast-hit-84 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(85) { - height: 8px; - width: 8px; - transform: translate3d(-2.16em, 0, 0); - animation: blast-hit-85 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(86) { - height: 10px; - width: 10px; - transform: translate3d(-2.18em, 0, 0); - animation: blast-hit-86 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(87) { - height: 30px; - width: 30px; - transform: translate3d(-2.55em, 0, 0); - animation: blast-hit-87 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(88) { - height: 1px; - width: 1px; - transform: translate3d(-2.945em, 0, 0); - animation: blast-hit-88 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(89) { - height: 15px; - width: 15px; - transform: translate3d(-2.675em, 0, 0); - animation: blast-hit-89 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(90) { - height: 5px; - width: 5px; - transform: translate3d(-2.73em, 0, 0); - animation: blast-hit-90 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(91) { - height: 13px; - width: 13px; - transform: translate3d(-2.26em, 0, 0); - animation: blast-hit-91 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(92) { - height: 17px; - width: 17px; - transform: translate3d(-2.385em, 0, 0); - animation: blast-hit-92 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(93) { - height: 17px; - width: 17px; - transform: translate3d(-2.135em, 0, 0); - animation: blast-hit-93 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(94) { - height: 6px; - width: 6px; - transform: translate3d(-2.295em, 0, 0); - animation: blast-hit-94 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(95) { - height: 1px; - width: 1px; - transform: translate3d(-2.865em, 0, 0); - animation: blast-hit-95 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(96) { - height: 9px; - width: 9px; - transform: translate3d(-2.65em, 0, 0); - animation: blast-hit-96 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(97) { - height: 3px; - width: 3px; - transform: translate3d(-2.91em, 0, 0); - animation: blast-hit-97 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(98) { - height: 17px; - width: 17px; - transform: translate3d(-2.56em, 0, 0); - animation: blast-hit-98 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(99) { - height: 25px; - width: 25px; - transform: translate3d(-2.81em, 0, 0); - animation: blast-hit-99 0.7s infinite; - background: #15f4ee; } - -.blast-hit:nth-child(100) { - height: 19px; - width: 19px; - transform: translate3d(-2.69em, 0, 0); - animation: blast-hit-100 0.7s infinite; - background: #15f4ee; } diff --git a/client/index.js b/client/index.js index 2a5c1f0f..8f409800 100644 --- a/client/index.js +++ b/client/index.js @@ -3,7 +3,6 @@ require('./assets/styles/styles.mobile.css'); require('./assets/styles/instance.css'); require('./assets/styles/instance.mobile.css'); require('./assets/styles/game.css'); -require('./assets/styles/anims.css'); // kick it off require('./src/app'); diff --git a/client/src/animations.jsx b/client/src/animations.jsx deleted file mode 100644 index b2e01552..00000000 --- a/client/src/animations.jsx +++ /dev/null @@ -1,11 +0,0 @@ -const preact = require('preact'); - -function animationDivs(classes) { - switch (classes) { - case 'blast-cast': return Array.from({ length: 100 }).map(j =>
); - case 'blast-hit': return Array.from({ length: 100 }).map(j =>
); - default: return
 
; - } -} - -module.exports = { animationDivs }; diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx new file mode 100644 index 00000000..56971485 --- /dev/null +++ b/client/src/components/animations.jsx @@ -0,0 +1,19 @@ +const preact = require('preact'); + +const Attack = require('./anims/attack'); + +function animations(props) { + const { combatTextClass, combatText, stage, player, construct } = props; + + if (combatText === 'Attack') { + return ( +
+ +
+ ); + } + if (combatText) return
{combatText}
; + return (
 
); +} + +module.exports = animations; diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx new file mode 100644 index 00000000..352f9fa3 --- /dev/null +++ b/client/src/components/anims/attack.jsx @@ -0,0 +1,63 @@ +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; + } + + render() { + return ( + + + + + + + + ); + } + + componentDidMount() { + let value = ''; + if ((!this.props.team && this.props.stage === 'START_SKILL') + || (this.props.team && this.props.stage === 'END_SKILL')) { + anime.set('.attack-anim', { + translateY: -250, + }); + value = '+=250px'; + } + if ((!this.props.team && this.props.stage === 'END_SKILL') + || (this.props.team && this.props.stage === 'START_SKILL')) { + anime.set('.attack-anim', { + translateY: 0, + }); + value = '-=250px'; + } + + anime({ + targets: ['.attack-anim'], + translateY: { + value, + duration, + }, + loop: false, + duration, + easing: 'easeInQuad', + }); + } +} + +module.exports = Attack; diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 6f5942d8..884b7870 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -5,10 +5,9 @@ const range = require('lodash/range'); const actions = require('../actions'); const { STATS, eventClasses, getCombatText } = require('../utils'); const { ConstructAvatar } = require('./construct'); -const { animationDivs } = require('../animations'); +const animations = require('./animations'); const shapes = require('./shapes'); -const TrippyTriangle = require('./svgs/trippy.triangle'); const SkillBtn = require('./skill.btn'); @@ -41,9 +40,10 @@ const addState = connect( activeSkill, selectSkillTarget, }; - }, + } ); + function GameConstruct(props) { const { i, @@ -77,9 +77,9 @@ function GameConstruct(props) { const [combatText, combatClass] = getCombatText(construct, resolution); const combatTextClass = `combat-text ${combatClass}`; - const combatTextEl = combatText - ?
{combatText}
- :
; + + const stage = resolution ? resolution.stage : false; + const combatInfo = animations({ combatTextClass, combatText, stage, player, construct }); const effects = construct.effects.length ? construct.effects.map(c =>
{c.effect} - {c.duration}T
) @@ -88,12 +88,6 @@ function GameConstruct(props) { const playerTeam = game.players.find(t => t.id === account.id); const playerTeamIds = playerTeam.constructs.map(c => c.id); - const anim = ( -
- {animationDivs(combatClass)} -
- ); - return (
selectSkillTarget(construct.id)} @@ -103,7 +97,7 @@ function GameConstruct(props) { {crypSkills}
{stats}
- {combatTextEl} + {combatInfo}
{effects}
); From 23083dc0f526b103a338b647680a22bc47f23a55 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 12 Jun 2019 23:51:52 +1000 Subject: [PATCH 11/24] skill text in targetting area during resos --- client/assets/styles/game.css | 4 ++-- client/src/components/anims/attack.jsx | 2 ++ client/src/components/targeting.arrows.jsx | 9 +++++++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 88c9688a..36d5b128 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -89,11 +89,11 @@ max-height: 10em; } } - +/* .resolving #targeting { opacity: 0; } - +*/ .game-construct .name { width: 100%; margin-bottom: 0.25em; diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx index 352f9fa3..e58b5214 100644 --- a/client/src/components/anims/attack.jsx +++ b/client/src/components/anims/attack.jsx @@ -36,6 +36,7 @@ class Attack extends Component { || (this.props.team && this.props.stage === 'END_SKILL')) { anime.set('.attack-anim', { translateY: -250, + rotateX: 180, }); value = '+=250px'; } @@ -43,6 +44,7 @@ class Attack extends Component { || (this.props.team && this.props.stage === 'START_SKILL')) { anime.set('.attack-anim', { translateY: 0, + rotateX: 0, }); value = '-=250px'; } diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx index 63b7a2da..a8710a5f 100644 --- a/client/src/components/targeting.arrows.jsx +++ b/client/src/components/targeting.arrows.jsx @@ -84,9 +84,18 @@ class TargetSvg extends Component { ? null : outgoing.map(getPath); + let skill = ''; + if (resolution) { + if (resolution.event[1]) ([, { skill }] = resolution.event); + } + const resolutionText = resolution + ? {skill} + : null; + return ( {arrows} + {resolutionText} ); } From b0faf0c33bef125fac36e5837604cee8b7542aa2 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 14 Jun 2019 00:10:51 +1000 Subject: [PATCH 12/24] messing with anims full Pepega --- client/assets/styles/game.css | 11 ++++++---- client/src/components/animations.jsx | 20 +++++++++++------- client/src/components/anims/attack.jsx | 28 +++++++++++++------------- client/src/constants.jsx | 1 + client/src/utils.jsx | 4 ++-- 5 files changed, 37 insertions(+), 27 deletions(-) diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 36d5b128..65f975f4 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -29,8 +29,7 @@ } .opponent .combat-text { - left: 40%; - top: 65%; + top: 40%; } .opponent .game-construct { @@ -204,8 +203,12 @@ font-size: 2em; font-family: 'Jura'; position: absolute; - top: 40%; - left: 40%; + object-fit: contain; + top: 15%; +} + +.combat-text svg { + height: 7em; } .game-construct.active-skill { diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 56971485..bee94eae 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -5,14 +5,20 @@ const Attack = require('./anims/attack'); function animations(props) { const { combatTextClass, combatText, stage, player, construct } = props; - if (combatText === 'Attack') { - return ( -
- -
- ); + const anim = text => { + switch (text) { + case 'Attack': return ; + default: return text; + } + }; + + if (combatText) { + const combatAnim = anim(combatText); + return
+ {combatAnim} +
; } - if (combatText) return
{combatText}
; + return (
 
); } diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx index e58b5214..4c5cbcfa 100644 --- a/client/src/components/anims/attack.jsx +++ b/client/src/components/anims/attack.jsx @@ -10,22 +10,24 @@ class Attack extends Component { constructor(props) { super(); this.props = props; + this.graphic = ( + + + + + + ); } render() { return ( - - - - - + viewBox="0 0 300 400"> + ${this.graphic} ); } @@ -35,22 +37,20 @@ class Attack extends Component { if ((!this.props.team && this.props.stage === 'START_SKILL') || (this.props.team && this.props.stage === 'END_SKILL')) { anime.set('.attack-anim', { - translateY: -250, - rotateX: 180, + rotateX: 0, }); - value = '+=250px'; + value = '+=250px', } if ((!this.props.team && this.props.stage === 'END_SKILL') || (this.props.team && this.props.stage === 'START_SKILL')) { anime.set('.attack-anim', { - translateY: 0, rotateX: 0, }); - value = '-=250px'; + value = '-=250px', } anime({ - targets: ['.attack-anim'], + targets: [`.attack-anim-${this.props.id} polygon`], translateY: { value, duration, diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 6bf4de39..ee619980 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -3,6 +3,7 @@ module.exports = { START_SKILL: 700, END_SKILL: 700, POST_SKILL: 1000, + DELAY: 150, }, INFO: { diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 3b506704..25039b98 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -204,14 +204,14 @@ function getCombatSequence(resolution) { if (resolution.event[0] === 'Ko') return ['POST_SKILL']; switch (resolution.stages) { - case 1: return ['START_SKILL', 'END_SKILL']; + case 1: return ['START_SKILL', 'DELAY', 'END_SKILL']; case 2: return ['START_SKILL', 'POST_SKILL']; case 3: return ['START_SKILL']; case 4: return ['END_SKILL', 'POST_SKILL']; case 5: return ['END_SKILL']; case 6: return ['POST_SKILL']; case 7: return false; - default: return ['START_SKILL', 'END_SKILL', 'POST_SKILL']; + default: return ['START_SKILL', 'DELAY', 'END_SKILL', 'POST_SKILL']; } } From 13405c9444d3b2704237b0d326195e764b129c40 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 14 Jun 2019 21:26:22 +1000 Subject: [PATCH 13/24] attack dagger animation test --- client/src/components/anims/attack.jsx | 73 ++++++++++++++++---------- client/src/components/svgs/dagger.jsx | 43 +++++++++++++++ client/src/constants.jsx | 4 +- 3 files changed, 91 insertions(+), 29 deletions(-) create mode 100644 client/src/components/svgs/dagger.jsx diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx index 4c5cbcfa..c642f645 100644 --- a/client/src/components/anims/attack.jsx +++ b/client/src/components/anims/attack.jsx @@ -2,6 +2,7 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const dagger = require('../svgs/dagger'); const { TIMES } = require('../../constants'); const duration = TIMES.START_SKILL; @@ -10,54 +11,72 @@ class Attack extends Component { constructor(props) { super(); this.props = props; - this.graphic = ( - - - - - - ); } render() { return ( - ${this.graphic} + {dagger(10, 250, 40, 150)} + {dagger(50, 250, 40, 150)} + {dagger(90, 250, 40, 150)} + {dagger(130, 250, 40, 150)} + {dagger(170, 250, 40, 150)} + {dagger(210, 250, 40, 150)} + {dagger(250, 250, 40, 150)} ); } componentDidMount() { - let value = ''; - if ((!this.props.team && this.props.stage === 'START_SKILL') - || (this.props.team && this.props.stage === 'END_SKILL')) { - anime.set('.attack-anim', { - rotateX: 0, + let y = 0; + const daggers = document.querySelectorAll('.attack-anim .dagger'); + if (this.props.stage === 'START_SKILL') { + anime.set(daggers, { + y: 250, }); - value = '+=250px', + y = -150; + if (!this.props.team) { + anime.set('.attack-anim', { + rotate: 180, + }); + } else { + anime.set('.attack-anim', { + rotate: 0, + }); + } } - if ((!this.props.team && this.props.stage === 'END_SKILL') - || (this.props.team && this.props.stage === 'START_SKILL')) { - anime.set('.attack-anim', { - rotateX: 0, + + if (this.props.stage === 'END_SKILL') { + anime.set(daggers, { + y: 400, }); - value = '-=250px', + y = -150; + if (!this.props.team) { + anime.set('.attack-anim', { + rotate: 0, + }); + } else { + anime.set('.attack-anim', { + rotate: 180, + }); + } } anime({ - targets: [`.attack-anim-${this.props.id} polygon`], - translateY: { - value, - duration, - }, - loop: false, + targets: daggers, + delay: anime.stagger(250, { + start: 250, + grid: [1, 7], + from: 'center', + easing: 'linear', + }), + y, duration, - easing: 'easeInQuad', }); } } diff --git a/client/src/components/svgs/dagger.jsx b/client/src/components/svgs/dagger.jsx new file mode 100644 index 00000000..94640132 --- /dev/null +++ b/client/src/components/svgs/dagger.jsx @@ -0,0 +1,43 @@ +const preact = require('preact'); + + +//style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" +module.exports = function dagger(x, y, width, height) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/client/src/constants.jsx b/client/src/constants.jsx index ee619980..ad9bf9e0 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,7 +1,7 @@ module.exports = { TIMES: { - START_SKILL: 700, - END_SKILL: 700, + START_SKILL: 1000, + END_SKILL: 1000, POST_SKILL: 1000, DELAY: 150, }, From c4c3c415b965af6b121514b2bd54fecb421ab8fb Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 18 Jun 2019 17:02:15 +1000 Subject: [PATCH 14/24] wip testing more anim stuff --- client/src/components/animations.jsx | 10 ++- client/src/components/anims/strike.jsx | 72 +++++++++++++++ client/src/components/anims/test.jsx | 116 +++++++++++++++++++++++++ 3 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 client/src/components/anims/strike.jsx create mode 100644 client/src/components/anims/test.jsx diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index bee94eae..7512e5f2 100644 --- a/client/src/components/animations.jsx +++ b/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 ; + case 'StrikeI': return ; + default: return text; } }; @@ -18,7 +22,11 @@ function animations(props) { {combatAnim} ; } - + return ( +
+ +
+ ); return (
 
); } diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx new file mode 100644 index 00000000..92b59662 --- /dev/null +++ b/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) => ); + } + } + + render() { + return ( + + {this.circles} + + ); + } + + 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; diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx new file mode 100644 index 00000000..fdbd846f --- /dev/null +++ b/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) => ( + + + + + + )); + } + } + + render() { + return ( + + + + + {this.circles} + + ); + } + + 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; From ae481d54bf97b1064aafccc1fa5c62d4625fdaf8 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 19 Jun 2019 14:01:34 +1000 Subject: [PATCH 15/24] charge svg, space out randomly generated points --- client/src/components/anims/test.jsx | 59 ++++----------------------- client/src/components/svgs/charge.jsx | 42 +++++++++++++++++++ client/src/utils.jsx | 32 +++++++++++++++ 3 files changed, 81 insertions(+), 52 deletions(-) create mode 100644 client/src/components/svgs/charge.jsx diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index fdbd846f..97e08d00 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -2,7 +2,9 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const charge = require('../svgs/charge'); const { TIMES } = require('../../constants'); +const { randomPoints } = require('../../utils'); const duration = TIMES.START_SKILL; @@ -10,53 +12,9 @@ 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) => ( - - - - - - )); - } + const points = randomPoints(7, 50, 300, 400); + const length = 6; + this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a')); } render() { @@ -67,10 +25,7 @@ class Attack extends Component { id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"> - - - - {this.circles} + {this.charges} ); } @@ -105,7 +60,7 @@ class Attack extends Component { fill: '#a52a2a', delay: anime.stagger(100), loop: true, - duration: 1000, + duration: duration, easing: 'easeInQuad', }); diff --git a/client/src/components/svgs/charge.jsx b/client/src/components/svgs/charge.jsx new file mode 100644 index 00000000..7d2fc1a1 --- /dev/null +++ b/client/src/components/svgs/charge.jsx @@ -0,0 +1,42 @@ +const preact = require('preact'); + +module.exports = function charge(x, y, height, colour) { + return ( + + + + + + ); +} diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 25039b98..da4b927c 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -345,6 +345,37 @@ const TARGET_COLOURS = { BROWN: '#583108', }; +function randomPoints(numPoints, radius, width, height) { + const points = []; + let infCheck = 0; + while (points.length < numPoints) { + const c = [ + Math.floor(Math.random() * (width - 2 * radius) + radius), + Math.floor(Math.random() * (height - 2 * radius) + radius), + ]; + let overlapping = false; + for (let j = 0; j < points.length; j += 1) { + const o = points[j]; + const dx = c[0] - o[0]; + const dy = c[1] - o[1]; + const d = Math.floor(Math.sqrt(dx * dx + dy * dy)); + if (d < radius) { + overlapping = true; + } + } + if (!overlapping) { + points.push(c); + infCheck = 0; + } else { + infCheck += 1; + if (infCheck > 50) { + break; + } + } + } + return points; +} + module.exports = { stringSort, convertItem, @@ -356,4 +387,5 @@ module.exports = { STATS, COLOURS, TARGET_COLOURS, + randomPoints, }; From 0310b1b3df6f5cedd47535017a2cb7cb172a2014 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 19 Jun 2019 15:29:33 +1000 Subject: [PATCH 16/24] charge attacks --- client/src/components/animations.jsx | 30 +++++++++- client/src/components/anims/attack.charge.jsx | 60 +++++++++++++++++++ client/src/components/anims/test.jsx | 6 +- client/src/components/svgs/charge.jsx | 6 +- 4 files changed, 93 insertions(+), 9 deletions(-) create mode 100644 client/src/components/anims/attack.charge.jsx diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 7512e5f2..7b6111da 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -2,16 +2,39 @@ const preact = require('preact'); const Attack = require('./anims/attack'); const Strike = require('./anims/strike'); -const Test = require('./anims/test'); +// const Test = require('./anims/test'); + +const AttackCharge = require('./anims/attack.charge'); + +const colours = { + red: '#a52a2a', + green: '#1FF01F', + blue: '#3498db', + purple: '#A25AC1', + yellow: '#d1c86a', + cyan: '#6AD1BF', +}; + function animations(props) { const { combatTextClass, combatText, stage, player, construct } = props; const anim = text => { + if (stage === 'START_SKILL') { + switch (text) { + case 'StrikeI': return ; + case 'HealI': return ; + case 'BlastI': return ; + case 'ChaosI': return ; + case 'SlayI': return ; + case 'SiphonI': return ; + + default: return ; + } + } switch (text) { case 'Attack': return ; case 'StrikeI': return ; - default: return text; } }; @@ -22,11 +45,14 @@ function animations(props) { {combatAnim} ; } + + /* return (
); + */ return (
 
); } diff --git a/client/src/components/anims/attack.charge.jsx b/client/src/components/anims/attack.charge.jsx new file mode 100644 index 00000000..33c51a21 --- /dev/null +++ b/client/src/components/anims/attack.charge.jsx @@ -0,0 +1,60 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const charge = require('../svgs/charge'); +const { TIMES } = require('../../constants'); +const { randomPoints } = require('../../utils'); + +class AttackCharge extends Component { + constructor(props) { + super(); + this.team = props.team; + this.colour = props.colour; + const points = randomPoints(7, 50, 300, 400); + this.charges = points.map(coord => charge(coord[0], coord[1], 6, this.colour)); + } + + render() { + return ( + + {this.charges} + + ); + } + + componentDidMount() { + const charges = document.querySelectorAll('#charge'); + anime.set(charges, { fill: 'none' }); + if (!this.team) { + anime.set('.skill-anim', { + rotate: 180, + }); + } else { + anime.set('.skill-anim', { + rotate: 0, + }); + } + + this.anim = anime({ + targets: charges, + fill: this.colour, + delay: anime.stagger(5, { + start: 100, + easing: 'linear', + }), + loop: false, + easing: 'easeInQuad', + }); + } + + componentWillUnmount() { + } +} + +module.exports = AttackCharge; diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index 97e08d00..0b0f3cb5 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -58,13 +58,11 @@ class Attack extends Component { anime({ targets: stageone, fill: '#a52a2a', - delay: anime.stagger(100), + delay: anime.stagger(2), loop: true, - duration: duration, + duration, easing: 'easeInQuad', }); - - } } diff --git a/client/src/components/svgs/charge.jsx b/client/src/components/svgs/charge.jsx index 7d2fc1a1..5e2f7dd3 100644 --- a/client/src/components/svgs/charge.jsx +++ b/client/src/components/svgs/charge.jsx @@ -9,7 +9,7 @@ module.exports = function charge(x, y, height, colour) { ${x - 2 * height},${y + 2 * height} ${x + 2 * height},${y + 2 * height} `} - stroke="#a52a2a" + stroke={colour} stroke-width="2" id="charge" /> @@ -21,7 +21,7 @@ module.exports = function charge(x, y, height, colour) { ${x - 3.5 * height},${y + height} ${x - 2 * height},${y + 2 * height} `} - stroke="#a52a2a" + stroke={colour} stroke-width="2" id="charge" /> @@ -39,4 +39,4 @@ module.exports = function charge(x, y, height, colour) { /> ); -} +}; From d232402c49390b08e9e195c3c7ea9f03c347f4f7 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 19 Jun 2019 16:58:05 +1000 Subject: [PATCH 17/24] remove tiers from skill anim --- client/src/components/animations.jsx | 41 ++++++++++++++++++---------- client/src/utils.jsx | 41 ++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 15 deletions(-) diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 7b6111da..4797a2f9 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -6,6 +6,8 @@ const Strike = require('./anims/strike'); const AttackCharge = require('./anims/attack.charge'); +const { removeTier } = require('../utils'); + const colours = { red: '#a52a2a', green: '#1FF01F', @@ -13,30 +15,39 @@ const colours = { purple: '#A25AC1', yellow: '#d1c86a', cyan: '#6AD1BF', + white: '#FFFFFF', }; function animations(props) { const { combatTextClass, combatText, stage, player, construct } = props; - const anim = text => { if (stage === 'START_SKILL') { - switch (text) { - case 'StrikeI': return ; - case 'HealI': return ; - case 'BlastI': return ; - case 'ChaosI': return ; - case 'SlayI': return ; - case 'SiphonI': return ; - - default: return ; + const skill = removeTier(text); + switch (skill) { + // Attack Base + case 'Attack': return ; + case 'Strike': return ; + case 'Heal': return ; + case 'Blast': return ; + case 'Chaos': return ; + case 'Slay': return ; + case 'Siphon': return ; + // Stun Base + // Block Base + // Buff Base + // Debuff Base + default: return text; + } + } else if (stage === 'END_SKILL') { + const skill = removeTier(text); + switch (skill) { + case 'Attack': return ; + case 'StrikeI': return ; + default: return text; } } - switch (text) { - case 'Attack': return ; - case 'StrikeI': return ; - default: return text; - } + return text; }; if (combatText) { diff --git a/client/src/utils.jsx b/client/src/utils.jsx index da4b927c..4dffe54e 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -376,6 +376,46 @@ function randomPoints(numPoints, radius, width, height) { return points; } +const removeTier = skill => { + if (skill.includes('Strike')) return 'Strike'; + if (skill.includes('Heal')) return 'Heal'; + if (skill.includes('Blast')) return 'Blast'; + if (skill.includes('Chaos')) return 'Chaos'; + if (skill.includes('Slay')) return 'Slay'; + if (skill.includes('Siphon')) return 'Siphon'; + + if (skill.includes('Snare')) return 'Snare'; + if (skill.includes('Purge')) return 'Purge'; + if (skill.includes('Silence')) return 'Silence'; + if (skill.includes('Curse')) return 'Curse'; + if (skill.includes('Decay')) return 'Decay'; + if (skill.includes('Invert')) return 'Invert'; + + if (skill.includes('Taunt')) return 'Taunt'; + if (skill.includes('Triage')) return 'Triage'; + if (skill.includes('Scatter')) return 'Scatter'; + if (skill.includes('Haste')) return 'Haste'; + if (skill.includes('Impurity')) return 'Impurity'; + if (skill.includes('Amplify')) return 'Amplify'; + + if (skill.includes('Parry')) return 'Parry'; + if (skill.includes('Purify')) return 'Purify'; + if (skill.includes('Corrupt')) return 'Corrupt'; + if (skill.includes('Clutch')) return 'Clutch'; + if (skill.includes('Reflect')) return 'Reflect'; + if (skill.includes('Recharge')) return 'Recharge'; + + if (skill.includes('Bash')) return 'Bash'; + if (skill.includes('Sleep')) return 'Sleep'; + if (skill.includes('Ruin')) return 'Ruin'; + if (skill.includes('Throw')) return 'Throw'; + if (skill.includes('Hex')) return 'Hex'; + if (skill.includes('Banish')) return 'Banish'; + + return skill; +}; + + module.exports = { stringSort, convertItem, @@ -388,4 +428,5 @@ module.exports = { COLOURS, TARGET_COLOURS, randomPoints, + removeTier, }; From bd750be110b4283fce405415971dc4f89387b182 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 20 Jun 2019 16:25:03 +1000 Subject: [PATCH 18/24] blast anim, improved random point util --- client/src/components/animations.jsx | 11 ++- client/src/components/anims/attack.charge.jsx | 2 +- client/src/components/anims/blast.jsx | 90 ++++++++++++++++++ client/src/components/anims/test.jsx | 93 ++++++++++++------- client/src/utils.jsx | 14 ++- 5 files changed, 168 insertions(+), 42 deletions(-) create mode 100644 client/src/components/anims/blast.jsx diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 4797a2f9..b60c89b7 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -1,8 +1,10 @@ const preact = require('preact'); const Attack = require('./anims/attack'); +const Blast = require('./anims/blast'); const Strike = require('./anims/strike'); -// const Test = require('./anims/test'); + +const Test = require('./anims/test'); const AttackCharge = require('./anims/attack.charge'); @@ -43,6 +45,7 @@ function animations(props) { const skill = removeTier(text); switch (skill) { case 'Attack': return ; + case 'Blast': return ; case 'StrikeI': return ; default: return text; } @@ -57,13 +60,13 @@ function animations(props) { ; } - /* - return ( + +/* return (
); - */ +*/ return (
 
); } diff --git a/client/src/components/anims/attack.charge.jsx b/client/src/components/anims/attack.charge.jsx index 33c51a21..263d35a3 100644 --- a/client/src/components/anims/attack.charge.jsx +++ b/client/src/components/anims/attack.charge.jsx @@ -11,7 +11,7 @@ class AttackCharge extends Component { super(); this.team = props.team; this.colour = props.colour; - const points = randomPoints(7, 50, 300, 400); + const points = randomPoints(7, 50, { x: 0, y: 0, width: 300, height: 400 }); this.charges = points.map(coord => charge(coord[0], coord[1], 6, this.colour)); } diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx new file mode 100644 index 00000000..83a47d0d --- /dev/null +++ b/client/src/components/anims/blast.jsx @@ -0,0 +1,90 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES } = require('../../constants'); +const { randomPoints } = require('../../utils'); + +const duration = TIMES.START_SKILL; + + +function projectile(x, y, radius, colour) { + return ( + + ); +} + +class AttackCharge extends Component { + constructor(props) { + super(); + this.team = props.team; + // this.colour = props.colour; + this.colour = '#00aabb'; + const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 }); + this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour)); + } + + render() { + return ( + + // {this.charges} + + + + + + + + + + + + + {this.charges} + + ); + } + + componentDidMount() { + anime.set('.skill-anim', { + rotate: 90, + translateY: -200, + translateX: 0, + }); + anime.set('#explosion feDisplacementMap', { + scale: 1, + }); + + anime({ + targets: '.skill-anim', + translateY: 0, + translateX: 0, + loop: false, + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 100, + loop: false, + duration, + easing: 'easeInQuad', + }); + } +} + +module.exports = AttackCharge; diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index 0b0f3cb5..f7929bfe 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -2,19 +2,35 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; -const charge = require('../svgs/charge'); const { TIMES } = require('../../constants'); const { randomPoints } = require('../../utils'); const duration = TIMES.START_SKILL; -class Attack extends Component { + +function projectile(x, y, radius, colour) { + return ( + + ); +} + +class AttackCharge extends Component { constructor(props) { super(); - this.props = props; - const points = randomPoints(7, 50, 300, 400); - const length = 6; - this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a')); + this.team = props.team; + // this.colour = props.colour; + this.colour = '#00aabb'; + const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 }); + this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour)); } render() { @@ -25,45 +41,56 @@ class Attack extends Component { id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"> + // {this.charges} + + + + + + + + + + + + {this.charges} ); } componentDidMount() { - if (this.props.stage === 'START_SKILL') { - if (!this.props.team) { - anime.set('.skill-anim', { - rotate: 180, - }); - } else { - anime.set('.skill-anim', { - rotate: 0, - }); - } + const charges = document.querySelectorAll('#projectile'); + if (!this.team) { + anime.set('.skill-anim', { + rotate: 90, + translateY: -200, + translateX: 0, + }); + } else { + anime.set('.skill-anim', { + rotate: 90, + translateY: -200, + translateX: 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(2), - loop: true, + targets: '.skill-anim', + translateY: 0, + translateX: 0, + loop: false, + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 100, + loop: false, duration, easing: 'easeInQuad', }); } } -module.exports = Attack; +module.exports = AttackCharge; diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 4dffe54e..d0b19020 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -345,13 +345,19 @@ const TARGET_COLOURS = { BROWN: '#583108', }; -function randomPoints(numPoints, radius, width, height) { +function randomPoints(numPoints, radius, dimensions) { + const { + x, + y, + width, + height, + } = dimensions; const points = []; let infCheck = 0; while (points.length < numPoints) { const c = [ - Math.floor(Math.random() * (width - 2 * radius) + radius), - Math.floor(Math.random() * (height - 2 * radius) + radius), + Math.floor(Math.random() * (x + width - 2 * radius) + x + radius), + Math.floor(Math.random() * (y + height - 2 * radius) + y + radius), ]; let overlapping = false; for (let j = 0; j < points.length; j += 1) { @@ -368,7 +374,7 @@ function randomPoints(numPoints, radius, width, height) { infCheck = 0; } else { infCheck += 1; - if (infCheck > 50) { + if (infCheck > 100) { break; } } From d9184dea0a66f51f3787a09e37ee27f1427732b9 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 21 Jun 2019 13:18:30 +1000 Subject: [PATCH 19/24] laser anim for attack and strike --- client/src/components/animations.jsx | 10 +-- client/src/components/anims/strike.jsx | 105 ++++++++++++++++--------- client/src/components/anims/test.jsx | 57 +++++++------- 3 files changed, 103 insertions(+), 69 deletions(-) diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index b60c89b7..9f9ad039 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -44,9 +44,9 @@ function animations(props) { } else if (stage === 'END_SKILL') { const skill = removeTier(text); switch (skill) { - case 'Attack': return ; + case 'Attack': return ; case 'Blast': return ; - case 'StrikeI': return ; + case 'Strike': return ; default: return text; } } @@ -60,13 +60,11 @@ function animations(props) { ; } - -/* return ( + /*return (
- ); -*/ + );*/ return (
 
); } diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 92b59662..4302cef1 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -6,17 +6,37 @@ const { TIMES } = require('../../constants'); const duration = TIMES.START_SKILL; + +function laser(dimensions, colour) { + const { x, y, length } = dimensions; + return ( + + ); +} + 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) => ); - } + this.team = props.team; + // this.colour = props.colour; + this.colour = props.colour; + + const coord = [0, 100, 200]; + const points = coord.map(pos => ({ + x: pos + Math.random() * 80, + y: 50 + Math.random() * 100, + length: 150 + Math.random() * 100, + })); + this.charges = points.map(pos => laser(pos, this.colour)); } render() { @@ -27,42 +47,57 @@ class Strike extends Component { id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"> - {this.circles} + // {this.charges} + + + + + + + + + + + + + {this.charges} ); } 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.team) { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 270, + }); } + anime.set('.skill-anim', { + translateY: -200, + translateX: 0, + }); + anime.set('#explosion feDisplacementMap', { + scale: 1, + }); + - 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, + targets: '.skill-anim', + translateY: 0, + translateX: 0, + loop: false, + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 200, + loop: false, + delay: (duration * 1 / 4), duration, easing: 'easeInQuad', }); diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index f7929bfe..2232dfc0 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -3,21 +3,21 @@ const { Component } = require('preact'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); -const { randomPoints } = require('../../utils'); const duration = TIMES.START_SKILL; -function projectile(x, y, radius, colour) { +function laser(dimensions, colour) { + const { x, y, length } = dimensions; return ( - ); @@ -28,9 +28,15 @@ class AttackCharge extends Component { super(); this.team = props.team; // this.colour = props.colour; - this.colour = '#00aabb'; - const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 }); - this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour)); + this.colour = '#a52a2a'; + + const coord = [0, 100, 200]; + const points = coord.map(pos => ({ + x: pos + Math.random() * 80, + y: 50 + Math.random() * 100, + length: 150 + Math.random() * 100, + })); + this.charges = points.map(pos => laser(pos, this.colour)); } render() { @@ -43,14 +49,14 @@ class AttackCharge extends Component { viewBox="0 0 300 400"> // {this.charges} - - + + - + @@ -60,20 +66,14 @@ class AttackCharge extends Component { } componentDidMount() { - const charges = document.querySelectorAll('#projectile'); - if (!this.team) { - anime.set('.skill-anim', { - rotate: 90, - translateY: -200, - translateX: 0, - }); - } else { - anime.set('.skill-anim', { - rotate: 90, - translateY: -200, - translateX: 0, - }); - } + anime.set('.skill-anim', { + rotate: 90, + translateY: -200, + translateX: 0, + }); + anime.set('#explosion feDisplacementMap', { + scale: 1, + }); anime({ targets: '.skill-anim', @@ -85,8 +85,9 @@ class AttackCharge extends Component { }); anime({ targets: '#explosion feDisplacementMap', - scale: 100, + scale: 200, loop: false, + delay: (duration * 1 / 4), duration, easing: 'easeInQuad', }); From b1b37fc0b6ef762df4143f64c322400631d8b5e8 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 24 Jun 2019 12:35:14 +1000 Subject: [PATCH 20/24] added chaos and heal --- client/src/components/animations.jsx | 14 ++-- client/src/components/anims/blast.jsx | 13 ++- client/src/components/anims/chaos.jsx | 108 +++++++++++++++++++++++++ client/src/components/anims/heal.jsx | 106 ++++++++++++++++++++++++ client/src/components/anims/strike.jsx | 2 - client/src/components/anims/test.jsx | 53 +++++++----- 6 files changed, 264 insertions(+), 32 deletions(-) create mode 100644 client/src/components/anims/chaos.jsx create mode 100644 client/src/components/anims/heal.jsx diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 9f9ad039..8995596c 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -1,9 +1,9 @@ const preact = require('preact'); -const Attack = require('./anims/attack'); const Blast = require('./anims/blast'); +const Heal = require('./anims/heal'); const Strike = require('./anims/strike'); - +const Chaos = require('./anims/chaos'); const Test = require('./anims/test'); const AttackCharge = require('./anims/attack.charge'); @@ -47,6 +47,9 @@ function animations(props) { case 'Attack': return ; case 'Blast': return ; case 'Strike': return ; + case 'Chaos': return ; + + case 'Heal': return ; default: return text; } } @@ -59,13 +62,12 @@ function animations(props) { {combatAnim} ; } - - /*return ( +/* return (
- );*/ - return (
 
); + ); +*/ return (
 
); } module.exports = animations; diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx index 83a47d0d..4e7790e4 100644 --- a/client/src/components/anims/blast.jsx +++ b/client/src/components/anims/blast.jsx @@ -60,11 +60,19 @@ class AttackCharge extends Component { } componentDidMount() { + if (!this.props.team) { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 270, + }); + } anime.set('.skill-anim', { - rotate: 90, translateY: -200, - translateX: 0, }); + anime.set('#explosion feDisplacementMap', { scale: 1, }); @@ -72,7 +80,6 @@ class AttackCharge extends Component { anime({ targets: '.skill-anim', translateY: 0, - translateX: 0, loop: false, duration: (duration * 1 / 2), easing: 'easeInQuad', diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx new file mode 100644 index 00000000..8a5c37c3 --- /dev/null +++ b/client/src/components/anims/chaos.jsx @@ -0,0 +1,108 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES } = require('../../constants'); +const { randomPoints } = require('../../utils'); + +const duration = TIMES.START_SKILL; + + +function projectile(x, y, radius, colour) { + return ( + + ); +} + +class AttackCharge extends Component { + constructor(props) { + super(); + this.team = props.team; + // this.colour = props.colour; + this.colour = '#A25AC1'; + const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 }); + this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour)); + } + + render() { + return ( + + // {this.charges} + + + + + + + + + + + + + {this.charges} + + ); + } + + componentDidMount() { + if (!this.props.team) { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 270, + }); + } + anime.set('.skill-anim', { + translateY: -200, + translateX: 0, + }); + anime.set('#explosion feDisplacementMap', { + scale: 1, + }); + + anime({ + targets: '.skill-anim', + translateY: 0, + translateX: 0, + loop: false, + duration: (duration * 2 / 3), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 75, + loop: false, + delay: (duration * 2 / 3), + duration: (duration * 1 / 3), + easing: 'easeInQuad', + }); + + const projectiles = document.querySelectorAll('#projectile'); + projectiles.forEach(proj => anime({ + targets: proj, + cx: Math.random() * 250 + 25, + cy: Math.random() * 300 + 50, + duration: (duration * 2 / 3), + easing: 'easeInQuad', + })); + } +} + +module.exports = AttackCharge; diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx new file mode 100644 index 00000000..7e982ff1 --- /dev/null +++ b/client/src/components/anims/heal.jsx @@ -0,0 +1,106 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES } = require('../../constants'); +const { randomPoints } = require('../../utils'); + +const duration = TIMES.START_SKILL; + + +function projectile(x, y, radius, colour) { + return ( + + ); +} + +class Heal extends Component { + constructor(props) { + super(); + this.team = props.team; + // this.colour = props.colour; + this.colour = '#1FF01F'; + const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 }); + this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour)); + } + + render() { + return ( + + // {this.charges} + + + + + + + + + + + + + {this.charges} + + ); + } + + componentDidMount() { + if (!this.props.team) { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 270, + }); + } + anime.set('.skill-anim', { + translateY: -200, + translateX: 0, + }); + anime.set('#explosion feDisplacementMap', { + scale: 100, + }); + + anime({ + targets: '.skill-anim', + translateY: 0, + translateX: 0, + loop: false, + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 1, + loop: false, + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#projectile', + cx: 150, + cy: 200, + delay: (duration * 1 / 2), + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + } +} + +module.exports = Heal; diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 4302cef1..91ace433 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -83,8 +83,6 @@ class Strike extends Component { scale: 1, }); - - anime({ targets: '.skill-anim', translateY: 0, diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index 2232dfc0..c8f82566 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -3,21 +3,21 @@ const { Component } = require('preact'); const anime = require('animejs').default; const { TIMES } = require('../../constants'); +const { randomPoints } = require('../../utils'); const duration = TIMES.START_SKILL; -function laser(dimensions, colour) { - const { x, y, length } = dimensions; +function projectile(x, y, radius, colour) { return ( - ); @@ -28,15 +28,9 @@ class AttackCharge extends Component { super(); this.team = props.team; // this.colour = props.colour; - this.colour = '#a52a2a'; - - const coord = [0, 100, 200]; - const points = coord.map(pos => ({ - x: pos + Math.random() * 80, - y: 50 + Math.random() * 100, - length: 150 + Math.random() * 100, - })); - this.charges = points.map(pos => laser(pos, this.colour)); + this.colour = '#A25AC1'; + const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 }); + this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour)); } render() { @@ -66,8 +60,16 @@ class AttackCharge extends Component { } componentDidMount() { + if (!this.props.team) { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 270, + }); + } anime.set('.skill-anim', { - rotate: 90, translateY: -200, translateX: 0, }); @@ -80,17 +82,26 @@ class AttackCharge extends Component { translateY: 0, translateX: 0, loop: false, - duration: (duration * 1 / 2), + duration, easing: 'easeInQuad', }); anime({ targets: '#explosion feDisplacementMap', - scale: 200, + scale: 75, loop: false, - delay: (duration * 1 / 4), - duration, + delay: (duration * 2 / 3), + duration: (duration * 1 / 3), easing: 'easeInQuad', }); + + const projectiles = document.querySelectorAll('#projectile'); + projectiles.forEach(proj => anime({ + targets: proj, + cx: Math.random() * 250 + 25, + cy: Math.random() * 300 + 50, + duration, + easing: 'easeInQuad', + })); } } From 0e1098fa55d268699efd3199392b9509d7760be1 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 24 Jun 2019 15:09:53 +1000 Subject: [PATCH 21/24] added slay --- client/src/components/animations.jsx | 7 +- client/src/components/anims/blast.jsx | 2 +- client/src/components/anims/slay.jsx | 137 ++++++++++++++++++++++++++ client/src/components/anims/test.jsx | 57 +++++++---- 4 files changed, 180 insertions(+), 23 deletions(-) create mode 100644 client/src/components/anims/slay.jsx diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 8995596c..fa3ca533 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -4,6 +4,7 @@ const Blast = require('./anims/blast'); const Heal = require('./anims/heal'); const Strike = require('./anims/strike'); const Chaos = require('./anims/chaos'); +const Slay = require('./anims/slay'); const Test = require('./anims/test'); const AttackCharge = require('./anims/attack.charge'); @@ -48,7 +49,7 @@ function animations(props) { case 'Blast': return ; case 'Strike': return ; case 'Chaos': return ; - + case 'Slay': return ; case 'Heal': return ; default: return text; } @@ -66,8 +67,8 @@ function animations(props) {
- ); -*/ return (
 
); + );*/ + return (
 
); } module.exports = animations; diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx index 4e7790e4..fd8de797 100644 --- a/client/src/components/anims/blast.jsx +++ b/client/src/components/anims/blast.jsx @@ -72,7 +72,7 @@ class AttackCharge extends Component { anime.set('.skill-anim', { translateY: -200, }); - + anime.set('#explosion feDisplacementMap', { scale: 1, }); diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx new file mode 100644 index 00000000..9128b342 --- /dev/null +++ b/client/src/components/anims/slay.jsx @@ -0,0 +1,137 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES } = require('../../constants'); +const { randomPoints } = require('../../utils'); + +const duration = TIMES.START_SKILL; + + +function projectile(x, y, radius, colour) { + return ( + + ); +} + +function sword(colour) { + return ( + + + + + + ); +} + +class AttackCharge extends Component { + constructor(props) { + super(); + this.team = props.team; + // this.colour = props.colour; + this.colour = '#c5a443'; + const points = new Array(30).fill(0); + this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F')); + } + + render() { + return ( + + + + + + + + + + + + + + {sword(this.colour)} + {this.charges} + + ); + } + + componentDidMount() { + if (!this.props.team) { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 270, + }); + } + anime.set('.skill-anim', { + translateY: -400, + translateX: 0, + }); + anime.set('#explosion feDisplacementMap', { + scale: 100, + }); + + anime.set('#sword', { + fill: this.colour, + stroke: this.colour, + }); + + anime.set('#projectile', { + cx: 150, + cy: 420, + }); + + anime({ + targets: '.skill-anim', + translateY: 0, + translateX: 0, + loop: false, + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 10000, + loop: false, + delay: (duration * 1 / 2), + duration: (duration * 1 / 2), + easing: 'easeInQuad', + }); + + anime({ + targets: '#sword', + fill: '#1FF01F', + stroke: '#1FF01F', + delay: (duration * 3 / 4), + }); + + const projectiles = document.querySelectorAll('#projectile'); + projectiles.forEach(proj => { + anime({ + targets: proj, + cx: Math.random() * 250 + 25, + cy: Math.random() * 200 - 100, + delay: (duration * 2 / 3), + duration: (duration * 1 / 3), + easing: 'easeInQuad', + }); + }); + } +} + +module.exports = AttackCharge; diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index c8f82566..da6e5297 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -18,19 +18,28 @@ function projectile(x, y, radius, colour) { stroke-width="2" stroke={colour} id="projectile" - filter="url(#explosion)" /> ); } +function sword(colour) { + return ( + + + + + + ); +} + class AttackCharge extends Component { constructor(props) { super(); this.team = props.team; // this.colour = props.colour; - this.colour = '#A25AC1'; - const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 }); - this.charges = points.map(coord => projectile(coord[0], coord[1], 14, this.colour)); + this.colour = '#c5a443'; + const points = new Array(30).fill(0); + this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F')); } render() { @@ -41,7 +50,6 @@ class AttackCharge extends Component { id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"> - // {this.charges} @@ -50,10 +58,11 @@ class AttackCharge extends Component { - + + {sword(this.colour)} {this.charges} ); @@ -70,11 +79,11 @@ class AttackCharge extends Component { }); } anime.set('.skill-anim', { - translateY: -200, + translateY: -400, translateX: 0, }); anime.set('#explosion feDisplacementMap', { - scale: 1, + scale: 100, }); anime({ @@ -82,26 +91,36 @@ class AttackCharge extends Component { translateY: 0, translateX: 0, loop: false, - duration, + duration: (duration * 1 / 2), easing: 'easeInQuad', }); anime({ targets: '#explosion feDisplacementMap', - scale: 75, + scale: 10000, loop: false, - delay: (duration * 2 / 3), - duration: (duration * 1 / 3), + delay: (duration * 1 / 2), + duration: (duration * 1 / 2), easing: 'easeInQuad', }); + anime({ + targets: '#sword', + fill: '#1FF01F', + stroke: '#1FF01F', + delay: (duration * 3 / 4), + }); + const projectiles = document.querySelectorAll('#projectile'); - projectiles.forEach(proj => anime({ - targets: proj, - cx: Math.random() * 250 + 25, - cy: Math.random() * 300 + 50, - duration, - easing: 'easeInQuad', - })); + projectiles.forEach(proj => { + anime({ + targets: proj, + cx: Math.random() * 250 + 25, + cy: Math.random() * 200 - 100, + delay: (duration * 1 / 3), + duration: (duration * 2 / 3), + easing: 'easeInQuad', + }); + }); } } From 93a915646a9dcc1fb997965a907c53713d1ec081 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 24 Jun 2019 22:34:56 +1000 Subject: [PATCH 22/24] anim colour changes --- client/src/components/anims/chaos.jsx | 10 ++++++++-- client/src/components/anims/slay.jsx | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 8a5c37c3..ae5db9e7 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -7,7 +7,6 @@ const { randomPoints } = require('../../utils'); const duration = TIMES.START_SKILL; - function projectile(x, y, radius, colour) { return ( { + const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3498db'; + anime.set(proj, { + stroke: colour, + }); + }); + anime.set('.skill-anim', { translateY: -200, translateX: 0, @@ -94,7 +101,6 @@ class AttackCharge extends Component { easing: 'easeInQuad', }); - const projectiles = document.querySelectorAll('#projectile'); projectiles.forEach(proj => anime({ targets: proj, cx: Math.random() * 250 + 25, diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index 9128b342..cd5a440d 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -37,7 +37,7 @@ class AttackCharge extends Component { super(); this.team = props.team; // this.colour = props.colour; - this.colour = '#c5a443'; + this.colour = '#a52a2a'; const points = new Array(30).fill(0); this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F')); } From 40a3b2d16227b6c7a405b8b74ad5dbbd2b51b5f6 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 25 Jun 2019 14:15:08 +1000 Subject: [PATCH 23/24] add siphon --- client/src/components/animations.jsx | 9 ++++-- client/src/components/anims/siphon.jsx | 45 ++++++++++++++++++++++++++ client/src/components/anims/test.jsx | 40 +++++++++++------------ client/src/utils.jsx | 2 ++ 4 files changed, 73 insertions(+), 23 deletions(-) create mode 100644 client/src/components/anims/siphon.jsx diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index fa3ca533..c7f82e94 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -1,14 +1,15 @@ const preact = require('preact'); +const AttackCharge = require('./anims/attack.charge'); + const Blast = require('./anims/blast'); const Heal = require('./anims/heal'); const Strike = require('./anims/strike'); const Chaos = require('./anims/chaos'); const Slay = require('./anims/slay'); +const Siphon = require('./anims/siphon'); const Test = require('./anims/test'); -const AttackCharge = require('./anims/attack.charge'); - const { removeTier } = require('../utils'); const colours = { @@ -51,6 +52,7 @@ function animations(props) { case 'Chaos': return ; case 'Slay': return ; case 'Heal': return ; + case 'Siphon': return ; default: return text; } } @@ -67,7 +69,8 @@ function animations(props) {
- );*/ + ); +*/ return (
 
); } diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx new file mode 100644 index 00000000..88f3ba32 --- /dev/null +++ b/client/src/components/anims/siphon.jsx @@ -0,0 +1,45 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES } = require('../../constants'); + +const duration = TIMES.START_SKILL; + +class AttackCharge extends Component { + render() { + return ( + + + + + + + ); + } + + componentDidMount() { + anime.set('#siphon', { + r: '140', + stroke: '#3498db', + }); + anime({ + targets: '#siphon', + keyframes: [ + { r: '110', stroke: '#1FF01F' }, + { r: '80', stroke: '#1FF01F' }, + { r: '50', stroke: '#3498db' }, + { r: '20', stroke: '#3498db' }, + ], + duration, + easing: 'easeInCubic', + }); + } +} + +module.exports = AttackCharge; diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index da6e5297..fe8fb5b2 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -22,13 +22,9 @@ function projectile(x, y, radius, colour) { ); } -function sword(colour) { +function arc() { return ( - - - - - + ); } @@ -50,26 +46,17 @@ class AttackCharge extends Component { id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"> - - - - - - - - - - - + + - {sword(this.colour)} + {arc()} {this.charges} ); } componentDidMount() { - if (!this.props.team) { +/* if (!this.props.team) { anime.set('.skill-anim', { rotate: Math.random() * 180 + 90, }); @@ -110,7 +97,6 @@ class AttackCharge extends Component { delay: (duration * 3 / 4), }); - const projectiles = document.querySelectorAll('#projectile'); projectiles.forEach(proj => { anime({ targets: proj, @@ -121,6 +107,20 @@ class AttackCharge extends Component { easing: 'easeInQuad', }); }); +*/ + const siphon = document.querySelectorAll('#siphon'); + anime({ + targets: siphon, + keyframes: [ + { r: '110', stroke: '#1FF01F' }, + { r: '80', stroke: '#1FF01F' }, + { r: '50', stroke: '#3498db' }, + { r: '20', stroke: '#3498db' }, + ], + duration, + easing: 'easeInCubic', + loop: true, + }); } } diff --git a/client/src/utils.jsx b/client/src/utils.jsx index d0b19020..c2352eac 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -383,6 +383,8 @@ function randomPoints(numPoints, radius, dimensions) { } const removeTier = skill => { + + if (skill.includes('SiphonTick')) return 'SiphonTick'; if (skill.includes('Strike')) return 'Strike'; if (skill.includes('Heal')) return 'Heal'; if (skill.includes('Blast')) return 'Blast'; From a53b55e7ab16b200ce0abb4b11c7c4bfb0c7b47e Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 25 Jun 2019 15:30:28 +1000 Subject: [PATCH 24/24] added siphon tick --- client/assets/styles/game.css | 19 +++- client/src/components/animations.jsx | 33 ++++-- client/src/components/anims/chaos.jsx | 2 +- client/src/components/anims/siphon.tick.jsx | 110 ++++++++++++++++++++ client/src/components/anims/test.jsx | 97 ++++++++--------- 5 files changed, 193 insertions(+), 68 deletions(-) create mode 100644 client/src/components/anims/siphon.tick.jsx diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 65f975f4..7f1e4d97 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -29,7 +29,11 @@ } .opponent .combat-text { - top: 40%; + top: 75%; +} + +.opponent .combat-anim { + top: 25%; } .opponent .game-construct { @@ -199,7 +203,6 @@ } .combat-text { - fill: whitesmoke; font-size: 2em; font-family: 'Jura'; position: absolute; @@ -211,6 +214,18 @@ height: 7em; } +.combat-anim { + font-size: 2em; + font-family: 'Jura'; + position: absolute; + object-fit: contain; + top: 15%; +} + +.combat-anim svg { + height: 7em; +} + .game-construct.active-skill { filter: drop-shadow(0 0 0.2em silver); } diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index c7f82e94..8f314687 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -8,7 +8,9 @@ const Strike = require('./anims/strike'); const Chaos = require('./anims/chaos'); const Slay = require('./anims/slay'); const Siphon = require('./anims/siphon'); -const Test = require('./anims/test'); +const SiphonTick = require('./anims/siphon.tick'); + +// const Test = require('./anims/test'); const { removeTier } = require('../utils'); @@ -41,7 +43,7 @@ function animations(props) { // Block Base // Buff Base // Debuff Base - default: return text; + default: return false; } } else if (stage === 'END_SKILL') { const skill = removeTier(text); @@ -53,24 +55,37 @@ function animations(props) { case 'Slay': return ; case 'Heal': return ; case 'Siphon': return ; - default: return text; + case 'SiphonTick': return ; + default: return false; } } - return text; + return false; }; if (combatText) { const combatAnim = anim(combatText); - return
- {combatAnim} -
; + if (combatAnim) { + return ( +
+ {combatAnim} +
+ ); + } + return ( +
+ {combatText} +
+ ); } -/* return ( + + /* + return (
); -*/ + */ + return (
 
); } diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index ae5db9e7..4045d4fe 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -89,7 +89,7 @@ class AttackCharge extends Component { translateY: 0, translateX: 0, loop: false, - duration: (duration * 2 / 3), + duration: (duration * 1 / 2), easing: 'easeInQuad', }); anime({ diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx new file mode 100644 index 00000000..8361c5c9 --- /dev/null +++ b/client/src/components/anims/siphon.tick.jsx @@ -0,0 +1,110 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES } = require('../../constants'); + +const duration = TIMES.START_SKILL; + + +function projectile(x, y, radius, colour) { + return ( + + ); +} + +class SiphonTick extends Component { + constructor(props) { + super(); + this.team = props.team; + // this.colour = props.colour; + this.colour = '#3498db'; + const points = new Array(15).fill(0); + this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F')); + } + + render() { + return ( + + + + + + + + + + + + + + + + + + + {this.charges} + + ); + } + + componentDidMount() { + if (!this.props.team) { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 180 + 270, + }); + } + + anime.set('#projectile', { + cx: 150, + cy: 150, + }); + + anime.set('#siphon', { + r: '80', + stroke: '#3498db', + }); + + anime({ + targets: '#siphon', + keyframes: [ + { r: '50', stroke: '#3498db' }, + { r: '20', stroke: '#3498db' }, + { r: '0', stroke: '#3498db' }, + ], + duration: duration * 2 / 3, + easing: 'easeInCubic', + }); + + const projectiles = document.querySelectorAll('#projectile'); + projectiles.forEach(proj => { + anime({ + targets: proj, + cx: Math.random() * 250 + 25, + cy: Math.random() * 200 - 100, + delay: (Math.random() * duration * 1 / 2), + duration, + easing: 'easeInQuad', + }); + }); + } +} + +module.exports = SiphonTick; diff --git a/client/src/components/anims/test.jsx b/client/src/components/anims/test.jsx index fe8fb5b2..aa48423e 100644 --- a/client/src/components/anims/test.jsx +++ b/client/src/components/anims/test.jsx @@ -15,27 +15,21 @@ function projectile(x, y, radius, colour) { cy={y} r={radius} fill="url(#grad1)" - stroke-width="2" + stroke-width="0.1" stroke={colour} id="projectile" /> ); } -function arc() { - return ( - - ); -} - class AttackCharge extends Component { constructor(props) { super(); this.team = props.team; // this.colour = props.colour; - this.colour = '#c5a443'; - const points = new Array(30).fill(0); - this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F')); + this.colour = '#3498db'; + const points = new Array(15).fill(0); + this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F')); } render() { @@ -49,78 +43,69 @@ class AttackCharge extends Component { - {arc()} + + + + + + + + + + + + + + {this.charges} ); } componentDidMount() { -/* if (!this.props.team) { + if (!this.props.team) { anime.set('.skill-anim', { - rotate: Math.random() * 180 + 90, + rotate: Math.random() * 45 + 90, }); } else { anime.set('.skill-anim', { - rotate: Math.random() * 180 + 270, + rotate: Math.random() * 45 + 270, }); } - anime.set('.skill-anim', { - translateY: -400, - translateX: 0, + + anime.set('#projectile', { + cx: 150, + cy: 150, }); - anime.set('#explosion feDisplacementMap', { - scale: 100, + + anime.set('#siphon', { + r: '80', + stroke: '#3498db', }); anime({ - targets: '.skill-anim', - translateY: 0, - translateX: 0, - loop: false, - duration: (duration * 1 / 2), - easing: 'easeInQuad', - }); - anime({ - targets: '#explosion feDisplacementMap', - scale: 10000, - loop: false, - delay: (duration * 1 / 2), - duration: (duration * 1 / 2), - easing: 'easeInQuad', - }); - - anime({ - targets: '#sword', - fill: '#1FF01F', - stroke: '#1FF01F', - delay: (duration * 3 / 4), + targets: '#siphon', + keyframes: [ + { r: '50', stroke: '#3498db' }, + { r: '20', stroke: '#3498db' }, + { r: '0', stroke: '#3498db' }, + ], + duration: duration * 2 / 3, + easing: 'easeInCubic', }); + const projectiles = document.querySelectorAll('#projectile'); projectiles.forEach(proj => { anime({ targets: proj, cx: Math.random() * 250 + 25, cy: Math.random() * 200 - 100, - delay: (duration * 1 / 3), - duration: (duration * 2 / 3), + delay: (Math.random() * duration * 1 / 2), + duration, easing: 'easeInQuad', }); }); -*/ - const siphon = document.querySelectorAll('#siphon'); - anime({ - targets: siphon, - keyframes: [ - { r: '110', stroke: '#1FF01F' }, - { r: '80', stroke: '#1FF01F' }, - { r: '50', stroke: '#3498db' }, - { r: '20', stroke: '#3498db' }, - ], - duration, - easing: 'easeInCubic', - loop: true, - }); + } }