diff options
| author | realtradam <[email protected]> | 2022-08-29 20:14:04 -0400 |
|---|---|---|
| committer | realtradam <[email protected]> | 2022-08-29 20:14:04 -0400 |
| commit | e09cc52522e532b29e7f8c7f6134b1944e474439 (patch) | |
| tree | 56fa2fd6c6e3fc18024684b5558e7d7744598f19 /src/components | |
| parent | cb767df6123412ec5e2fed6fd534ce8819ac626f (diff) | |
| download | Amongus-Clicker-e09cc52522e532b29e7f8c7f6134b1944e474439.tar.gz Amongus-Clicker-e09cc52522e532b29e7f8c7f6134b1944e474439.zip | |
cleanup code a little
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/DollarEffect.vue | 101 |
1 files changed, 49 insertions, 52 deletions
diff --git a/src/components/DollarEffect.vue b/src/components/DollarEffect.vue index a7c35b2..ac8a7e8 100644 --- a/src/components/DollarEffect.vue +++ b/src/components/DollarEffect.vue @@ -1,62 +1,59 @@ <template> - <img v-show='activated' src="../assets/bill.png" class="bill" ref="bill"> + <img v-show='activated' src="../assets/bill.png" class="bill" ref="bill"> </template> <script> -export default { - data() { - return { - x: 0, - y: 0, - startx: 0, - starty: 0, - targetx: 100, - targety: 100, - activated: false + export default { + data() { + return { + x: 0, + y: 0, + startx: 0, + starty: 0, + targetx: 100, + targety: 100, + activated: false + } + }, + methods: { + reset(x,y) { + if(this.activated){ + return 'activated' + } + this.x = parseInt(x) + this.y = parseInt(y) + this.startx = x + 'px' + this.starty = y + 'px' + this.targetx = (this.x + Math.floor(Math.random() * 100) - 50) + 'px' + this.targety = (this.y + Math.floor(Math.random() * 100) - 50) + 'px' + this.activated = true + this.timeout = setTimeout(() => { + this.activated = false + }, (1.2 * 1000)) + }, + } } - }, - methods: { - reset(x,y) { - if(this.activated){ - return 'activated' - } - this.x = parseInt(x) - this.y = parseInt(y) - this.startx = x + 'px' - this.starty = y + 'px' - this.targetx = (this.x + Math.floor(Math.random() * 100) - 50) + 'px' - this.targety = (this.y + Math.floor(Math.random() * 100) - 50) + 'px' - this.activated = true - this.timeout = setTimeout(() => { - this.activated = false - }, (1.2 * 1000)) - //this.$refs.bill.style.animation = 'none' - //this.$refs.bill.offsetHeight /* trigger reflow */ - //this.$refs.bill.style.animation = null - }, - } -} </script> <style scoped> -img { - user-select: none; - -webkit-user-select: none; - -khtml-user-select: none; - -webkit-touch-callout: none; - -moz-user-select: none; - -o-user-select: none; - width: 100px; - height: 100px; - animation-name: bill; - animation-duration: 1.3s; - animation-iteration-count: infinite; - position: absolute + img { + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -webkit-touch-callout: none; + -moz-user-select: none; + -o-user-select: none; + width: 100px; + height: 100px; + animation-name: bill; + animation-duration: 1.3s; + animation-iteration-count: infinite; + position: absolute + } -} -@keyframes bill { - 0% {opacity: 0; left: v-bind('startx'); top: v-bind('starty');} - 1% {opacity: 1; left: v-bind('startx'); top: v-bind('starty');} - 100% {opacity: 0; left: v-bind('targetx'); top: v-bind('targety');} -} + @keyframes bill { + 0% {opacity: 0; left: v-bind('startx'); top: v-bind('starty');} + 1% {opacity: 1; left: v-bind('startx'); top: v-bind('starty');} + 100% {opacity: 0; left: v-bind('targetx'); top: v-bind('targety');} + } </style> |
