1  <template lang='pug'>
 2  .d
 3      img.dogepepecoin(@click='toggleGrab'  v-if='$store.getters.member.memberId !== b.taskId'  @mouseover='hoverthumb=true'  @mouseleave='hoverthumb=false'  :class="{ ungrabbedcoin : !isGrabbed, hoverthumb: hoverthumb }" src='../assets/images/thumbsup.svg'  draggable='false')
 4  </template>
 5  
 6  <script>
 7  
 8  export default {
 9      data(){
10          return {hoverthumb: false}
11      },
12      props: ['b'],
13      computed: {
14          isGrabbed(){
15            return this.b.deck.indexOf(this.$store.getters.member.memberId) >= 0
16          },
17      },
18      methods: {
19          toggleGrab(){
20              if(this.isGrabbed) {
21                  this.$store.dispatch("makeEvent", {
22                      type: 'task-dropped',
23                      taskId: this.b.taskId,
24                      memberId: this.$store.getters.member.memberId,
25                  })
26              } else {
27  
28                  this.$store.dispatch("makeEvent", {
29                      type: 'task-grabbed',
30                      taskId: this.b.taskId,
31                      memberId: this.$store.getters.member.memberId,
32                  })
33              }
34              this.hoverthumb = false
35          },
36      },
37  }
38  
39  </script>
40  
41  <style lang="stylus" scoped>
42  
43  @import '../styles/spinners'
44  
45  .d
46      display: inline-block;
47  
48  .dogepepecoin
49    display:inline-block;
50    width: 33px
51    cursor: pointer
52  
53  .ungrabbedcoin
54      opacity: 0.869
55      transform: rotate(180deg)
56  
57  img.dogepepecoin.hoverthumb
58      opacity: 0.9169
59      transform: rotate(-90deg)
60  
61  img.dogepepecoin.hidden
62      opacity: 0
63  
64  </style>