diff --git a/WORKLOG.md b/WORKLOG.md index fc20200d..db73be64 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -40,16 +40,24 @@ buy supporter pack 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/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/assets/styles/game.css b/client/assets/styles/game.css index ba11a3a6..7f1e4d97 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -29,10 +29,13 @@ } .opponent .combat-text { - left: 40%; top: 75%; } +.opponent .combat-anim { + top: 25%; +} + .opponent .game-construct { align-items: flex-start; grid-template-rows: min-content min-content min-content minmax(min-content, 2fr); @@ -89,11 +92,11 @@ max-height: 10em; } } - +/* .resolving #targeting { opacity: 0; } - +*/ .game-construct .name { width: 100%; margin-bottom: 0.25em; @@ -200,12 +203,27 @@ } .combat-text { - fill: whitesmoke; font-size: 2em; font-family: 'Jura'; position: absolute; - top: 50%; - left: 50%; + object-fit: contain; + top: 15%; +} + +.combat-text svg { + 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 { diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index 50dadc62..db8e6dca 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -178,10 +178,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/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/package.json b/client/package.json index 80d32b83..90f5fbdb 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/", @@ -13,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/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/animations.test.js b/client/src/animations.test.js new file mode 100644 index 00000000..bc36db15 --- /dev/null +++ b/client/src/animations.test.js @@ -0,0 +1,16 @@ +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 = () => ( +
+ + + +
+); + +// eslint-disable-next-line +preact.render(, document.body); diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx new file mode 100644 index 00000000..8f314687 --- /dev/null +++ b/client/src/components/animations.jsx @@ -0,0 +1,92 @@ +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 SiphonTick = require('./anims/siphon.tick'); + +// const Test = require('./anims/test'); + +const { removeTier } = require('../utils'); + +const colours = { + red: '#a52a2a', + green: '#1FF01F', + blue: '#3498db', + 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') { + 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 false; + } + } else if (stage === 'END_SKILL') { + const skill = removeTier(text); + switch (skill) { + case 'Attack': return ; + case 'Blast': return ; + case 'Strike': return ; + case 'Chaos': return ; + case 'Slay': return ; + case 'Heal': return ; + case 'Siphon': return ; + case 'SiphonTick': return ; + default: return false; + } + } + return false; + }; + + if (combatText) { + const combatAnim = anim(combatText); + if (combatAnim) { + return ( +
+ {combatAnim} +
+ ); + } + return ( +
+ {combatText} +
+ ); + } + + /* + return ( +
+ +
+ ); + */ + + return (
 
); +} + +module.exports = animations; diff --git a/client/src/components/anims/attack.charge.jsx b/client/src/components/anims/attack.charge.jsx new file mode 100644 index 00000000..263d35a3 --- /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, { x: 0, y: 0, width: 300, height: 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/attack.jsx b/client/src/components/anims/attack.jsx new file mode 100644 index 00000000..c642f645 --- /dev/null +++ b/client/src/components/anims/attack.jsx @@ -0,0 +1,84 @@ +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; + +class Attack extends Component { + constructor(props) { + super(); + this.props = props; + } + + render() { + return ( + + {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 y = 0; + const daggers = document.querySelectorAll('.attack-anim .dagger'); + if (this.props.stage === 'START_SKILL') { + anime.set(daggers, { + y: 250, + }); + y = -150; + if (!this.props.team) { + anime.set('.attack-anim', { + rotate: 180, + }); + } else { + anime.set('.attack-anim', { + rotate: 0, + }); + } + } + + if (this.props.stage === 'END_SKILL') { + anime.set(daggers, { + y: 400, + }); + y = -150; + if (!this.props.team) { + anime.set('.attack-anim', { + rotate: 0, + }); + } else { + anime.set('.attack-anim', { + rotate: 180, + }); + } + } + + anime({ + targets: daggers, + delay: anime.stagger(250, { + start: 250, + grid: [1, 7], + from: 'center', + easing: 'linear', + }), + y, + duration, + }); + } +} + +module.exports = Attack; diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx new file mode 100644 index 00000000..fd8de797 --- /dev/null +++ b/client/src/components/anims/blast.jsx @@ -0,0 +1,97 @@ +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() { + 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, + }); + + anime.set('#explosion feDisplacementMap', { + scale: 1, + }); + + anime({ + targets: '.skill-anim', + translateY: 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/chaos.jsx b/client/src/components/anims/chaos.jsx new file mode 100644 index 00000000..4045d4fe --- /dev/null +++ b/client/src/components/anims/chaos.jsx @@ -0,0 +1,114 @@ +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, + }); + } + const projectiles = document.querySelectorAll('#projectile'); + projectiles.forEach(proj => { + const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3498db'; + anime.set(proj, { + stroke: colour, + }); + }); + + 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 * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 75, + loop: false, + delay: (duration * 2 / 3), + duration: (duration * 1 / 3), + easing: 'easeInQuad', + }); + + 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/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/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/slay.jsx b/client/src/components/anims/slay.jsx new file mode 100644 index 00000000..cd5a440d --- /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 = '#a52a2a'; + 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/strike.jsx b/client/src/components/anims/strike.jsx new file mode 100644 index 00000000..91ace433 --- /dev/null +++ b/client/src/components/anims/strike.jsx @@ -0,0 +1,105 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +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.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() { + 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 * 1 / 2), + easing: 'easeInQuad', + }); + anime({ + targets: '#explosion feDisplacementMap', + scale: 200, + loop: false, + delay: (duration * 1 / 4), + 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..aa48423e --- /dev/null +++ b/client/src/components/anims/test.jsx @@ -0,0 +1,112 @@ +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 = '#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() * 45 + 90, + }); + } else { + anime.set('.skill-anim', { + rotate: Math.random() * 45 + 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 = AttackCharge; diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 3e7d035b..884b7870 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -5,9 +5,10 @@ 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 SkillBtn = require('./skill.btn'); const addState = connect( @@ -39,9 +40,10 @@ const addState = connect( activeSkill, selectSkillTarget, }; - }, + } ); + function GameConstruct(props) { const { i, @@ -75,9 +77,9 @@ function GameConstruct(props) { const [combatText, combatClass] = getCombatText(construct, resolution); const combatTextClass = `combat-text ${combatClass}`; - const combatTextEl = combatText - ?
{combatText}
- : null; + + 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
) @@ -86,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)} @@ -101,7 +97,7 @@ function GameConstruct(props) { {crypSkills}
{stats}
- {combatTextEl} + {combatInfo}
{effects}
); diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx new file mode 100644 index 00000000..16f5f66b --- /dev/null +++ b/client/src/components/svgs/amplify.jsx @@ -0,0 +1,58 @@ +const preact = require('preact'); +const { Component } = require('preact'); + +const anime = require('animejs').default; + +class Amplify extends Component { + constructor() { + super(); + this.id = Math.random(); + } + + render() { + const path = 'M0,100 C100,-200 100,400 200,100'; + + return ( + + + + + + + + ); + } + + componentDidMount() { + const altPath = 'M0,100 C100,400 100,-200 200,100'; + anime({ + targets: '#amplify path', + d: [{ value: altPath }], + stroke: ['#a52a2a', '#3498db'], + duration: 1000, + loop: true, + direction: 'alternate', + easing: 'easeInOutSine', + }); + + anime({ + targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'], + baseFrequency: 0.15, + scale: 4, + loop: true, + direction: 'alternate', + easing: 'easeInOutExpo', + }); + + } + + componentWillUnmount() { + } +} + +module.exports = Amplify; diff --git a/client/src/components/svgs/charge.jsx b/client/src/components/svgs/charge.jsx new file mode 100644 index 00000000..5e2f7dd3 --- /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/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/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx new file mode 100644 index 00000000..f914595a --- /dev/null +++ b/client/src/components/svgs/hex.jsx @@ -0,0 +1,58 @@ +const preact = require('preact'); +const { Component } = require('preact'); + +const anime = require('animejs').default; + +// shamelessly lifted from teh anime docs +// https://animejs.com/documentation/#svgAttr + +class Hex extends Component { + render() { + return ( + + + + + + + + ); + } + + 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', + loop: true, + direction: 'alternate', + easing: 'easeInOutExpo', + }); + + anime({ + targets: ['#hexFilter feTurbulence', '#hexFilter feDisplacementMap'], + baseFrequency: 0.05, + scale: 15, + loop: true, + direction: 'alternate', + easing: 'easeInOutExpo', + }); + } +} + +module.exports = Hex; diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx index 8578f9e1..623b0345 100644 --- a/client/src/components/svgs/trippy.triangle.jsx +++ b/client/src/components/svgs/trippy.triangle.jsx @@ -1,36 +1,58 @@ 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() { - - - - - + 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); + } + + componentWillUnmount() { + // clearAnimation(this.props.id); + } +} + +module.exports = TrippyTriangle; 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} ); } diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 6bf4de39..ad9bf9e0 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,8 +1,9 @@ module.exports = { TIMES: { - START_SKILL: 700, - END_SKILL: 700, + START_SKILL: 1000, + END_SKILL: 1000, POST_SKILL: 1000, + DELAY: 150, }, INFO: { diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 3b506704..c2352eac 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']; } } @@ -345,6 +345,85 @@ const TARGET_COLOURS = { BROWN: '#583108', }; +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() * (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) { + 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 > 100) { + break; + } + } + } + return points; +} + +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'; + 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, @@ -356,4 +435,6 @@ module.exports = { STATS, COLOURS, TARGET_COLOURS, + randomPoints, + removeTier, };