summaryrefslogtreecommitdiffhomepage
path: root/src/components/DollarEffect.vue
diff options
context:
space:
mode:
authorrealtradam <[email protected]>2022-08-29 20:14:04 -0400
committerrealtradam <[email protected]>2022-08-29 20:14:04 -0400
commite09cc52522e532b29e7f8c7f6134b1944e474439 (patch)
tree56fa2fd6c6e3fc18024684b5558e7d7744598f19 /src/components/DollarEffect.vue
parentcb767df6123412ec5e2fed6fd534ce8819ac626f (diff)
downloadAmongus-Clicker-e09cc52522e532b29e7f8c7f6134b1944e474439.tar.gz
Amongus-Clicker-e09cc52522e532b29e7f8c7f6134b1944e474439.zip
cleanup code a little
Diffstat (limited to 'src/components/DollarEffect.vue')
-rw-r--r--src/components/DollarEffect.vue101
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>