1  <template lang='pug'>
  2  
  3  .activecard(:class='styl' :ondrop="drop"   :ondragover="allowDrop"  :ondragleave='dragLeave')
  4      .flextabs
  5          .tabber(@click='toBoat'  :class='{activationsequence: $store.state.upgrades.mode === "boat"}'   :ondragover='toBoatOnly')
  6              img(src='../assets/images/completed.svg')
  7          .tabber(@click='toTimeCube'  :class='{activationsequence: $store.state.upgrades.mode === "timecube"}'  :ondragover='toTimeCubeOnly')
  8              img(src='../assets/images/timecube.svg')
  9          .tabber(@click='toChest'   :class='{activationsequence: $store.state.upgrades.mode === "chest"}')
 10              img(src='../assets/images/lightning.svg')
 11      .row.center.clearboth(@click='copyCard'  draggable="true"  :ondragstart='dragStart' )
 12          label
 13              .itsamember(v-if='$store.getters.contextMember')
 14                  img(src='../assets/images/doge.svg')
 15                  linky.doge(:x='m.name')
 16              div(v-else-if='$store.getters.contextResource')
 17                  currentr(:resourceId='$store.getters.contextCard.taskId')
 18              div(v-else)
 19                  linky.doge(:x='card.name')
 20                  img(v-show='copied'  src='../assets/images/clipboard.svg')
 21              span.timetill(v-if='cardStart.timeSet')
 22                  span(v-if='cardStart.days > 1'  @click='clearSchedule') in {{ cardStart.days.toFixed(1) }} days
 23                  span(v-else-if='cardStart.hours > 1'  @click='clearSchedule') in {{ cardStart.hours.toFixed(1) }} hours
 24                  span(v-else-if='cardStart.minutes > 1'  @click='clearSchedule') in {{ cardStart.minutes.toFixed(1) }} minutes
 25      .clearboth
 26      .centererer(v-if='$store.state.upgrades.mode === "chest"') {{$store.getters.contextCard.boost.toLocaleString()}}
 27  </template>
 28  
 29  <script>
 30  
 31  import Current from './Current.vue'
 32  import Coin from './Coin.vue'
 33  import Currentr from './Currentr.vue'
 34  import Linky from './Linky.vue'
 35  import Auth from './Auth.vue'
 36  import Card from './Card.vue'
 37  import Pinner from './Pinner.vue'
 38  import ResourceBook from './ResourceBook.vue'
 39  
 40  let debounce = false
 41  
 42  export default {
 43      data(){
 44          return {
 45              copied: false,
 46              dropping: false
 47          }
 48      },
 49      components: {Current, Linky, Auth, Card, Coin, Pinner, ResourceBook, Currentr},
 50      computed:{
 51          cardStart(){
 52              let days = 0
 53              let hours = 0
 54              let minutes = 0
 55              let cstar = {
 56                  timeSet: false,
 57                  days,
 58                  hours,
 59                  minutes
 60              }
 61              let msTill = this.$store.getters.contextCard.book.startTs - Date.now()
 62              if ( this.$store.getters.contextCard.book.startTs && msTill > 0){
 63                cstar.timeSet = true
 64                cstar.days = msTill / (1000 * 60 * 60 * 24)
 65                if (cstar.days > 1){
 66                    return cstar
 67                }
 68                cstar.hours = cstar.days * 24
 69                if (cstar.hours > 1){
 70                    return cstar
 71                }
 72                cstar.minutes = cstar.hours * 60
 73                return cstar
 74              }
 75              return cstar
 76          },
 77      
 78          styl(){
 79              let color = this.$store.getters.contextCard.color
 80              if (!color  || this.$store.getters.member.stacks === 1) return
 81              return {
 82                  dropping: this.dropping,
 83                  bluewx : color == 'blue',
 84                  redwx : color == 'red',
 85                  greenwx : color == 'green',
 86                  yellowwx : color == 'yellow',
 87                  purplewx : color == 'purple',
 88                  blackwx : color == 'black',
 89              }
 90          },
 91          m(){
 92              return this.$store.getters.contextMember
 93          },
 94          card(){
 95              return this.$store.getters.contextCard
 96          },
 97          isGrabbed(){
 98            return this.card.deck.indexOf(this.$store.getters.member.memberId) >= 0
 99          },
100          isLoggedIn(){
101              let isLoggedIn
102              this.$store.state.sessions.forEach( s => {
103                  if ( s.ownerId === this.m.memberId ){
104                      isLoggedIn = true
105                  }
106              })
107              return isLoggedIn
108          },
109          nameList(){
110              return this.$store.getters.contextCard.deck.map(mId => {
111                  return mId
112              })
113          },
114          dukkha() {
115              return this.$store.getters.contextCard.priorities.length
116          },
117          deckSize() {
118              return this.$store.state.tasks.filter(t => {
119                  return t.deck.indexOf(this.m.memberId) >= 0
120              }).length
121          },
122      },
123      methods: {
124          clearSchedule(){
125              this.$store.dispatch('makeEvent', {
126                  type: 'resource-booked',
127                  resourceId: this.$store.getters.contextCard.taskId,
128                  memberId: this.$store.getters.member.memberId,
129                  startTs: 0,
130                  endTs: 0,
131              })
132          },
133          goDeeper(taskId){
134              this.$store.commit("closeAll")
135              this.$store.commit("goDeeper", taskId)
136          },
137          copyCard(){
138              navigator.clipboard.writeText(this.$store.getters.contextCard.name).then(()=>{
139                  this.copied = true
140              })
141              this.goDoge()
142              setTimeout(()=> this.copied = false, 1234)
143          },
144          dragLeave(){
145              this.dropping = false
146          },
147          dragStart(ev){
148              ev.dataTransfer.setData("taskId", this.$store.getters.contextCard.taskId);
149          },
150          allowDrop(ev){
151              ev.preventDefault()
152              this.dropping = true
153          },
154          drop(ev){
155              ev.preventDefault();
156              this.dropping = false
157              var data = ev.dataTransfer.getData("taskId")
158              this.$store.dispatch("makeEvent", {
159                  type: 'task-prioritized',
160                  inId: this.$store.getters.contextCard.taskId,
161                  fromId: this.$store.getters.contextCard.taskId,
162                  taskId: data,
163              })
164              this.$store.commit("setMode", 1)
165          },
166          toChest(){
167              if (this.$store.state.upgrades.mode === "chest"){
168                  this.$store.commit("setMode", 0)
169              } else {
170                  this.$store.commit("setMode", 3)
171              }
172          },
173          toTimeCubeOnly(){
174              this.$store.commit("setMode", 2)
175          },
176          toTimeCube(){
177              if (debounce){
178                  return
179              }
180              debounce = true
181              if (this.$store.state.upgrades.mode === "timecube"){
182                  this.$store.commit("setMode", 0)
183              } else {
184                  this.$store.commit("setMode", 2)
185              }
186              setTimeout(()=> debounce = false, 333)
187          },
188          toBoatOnly(){
189              this.$store.commit("setMode", 1)
190          },
191          toBoat(){
192              if (debounce){
193                  return
194              }
195              debounce = true
196              if (this.$store.state.upgrades.mode === "boat"){
197                  this.$store.commit("setMode", 0)
198              } else {
199                  this.$store.commit("setMode", 1)
200              }
201              setTimeout(()=> debounce = false, 333)
202          },
203          goDoge(){
204              this.$store.commit('setMode', 0)
205          },
206          goBadge(){
207              if(this.$store.state.upgrades.mode === 'badge') {
208                  if (this.isGrabbed){
209                      this.$store.dispatch("makeEvent", {
210                        type: 'task-dropped',
211                        taskId: this.card.taskId,
212                        memberId: this.$store.getters.member.memberId,
213                      })
214                  } else {
215                      this.$store.dispatch("makeEvent", {
216                        type: 'task-grabbed',
217                        taskId: this.card.taskId,
218                        memberId: this.$store.getters.member.memberId,
219                      })
220                  }
221              }
222          },
223          getName(taskId){
224              let name
225              this.$store.state.tasks.some(t => {
226                  if (taskId === t.taskId){
227                      name = t.name
228                      return true
229                  }
230              })
231              return name
232          },
233          toggleActivated() {
234              if(this.m.memberId !== this.$store.getters.member.memberId) {
235                  return
236              }
237              if(this.$store.getters.member.active > 0) {
238                  this.deactivate()
239              } else {
240                  this.activate()
241              }
242          },
243          deactivate() {
244              this.$store.dispatch("makeEvent", {
245                  type: 'member-deactivated',
246                  memberId: this.$store.getters.member.memberId,
247              })
248          },
249          activate() {
250              this.$store.dispatch("makeEvent", {
251                  type: 'member-activated',
252                  memberId: this.$store.getters.member.memberId,
253              })
254          }
255  
256      }
257  }
258  </script>
259  
260  <style lang="stylus" scoped>
261  
262  @import '../styles/colours'
263  
264  .timetill
265      cursor: pointer;
266  
267  .timetill span:hover
268      text-decoration: line-through;
269  
270  .doge
271      color: main
272      height: 1.111em
273      display: inline-block
274      padding: .3em;
275      border-radius: 50%;
276      margin-right: 0.4em;
277  
278  .tabber img.roro
279      transform: rotate(45deg);
280      height: 0.333333em
281      float: left;
282  
283  label img
284      height: 1.389em
285      display: inline
286  
287  label div
288      cursor: pointer
289  
290  .row.center.clearboth
291      cursor: pointer
292  
293  .here
294      border-bottom-style: solid;
295      padding: .2em;
296      border-color:#eeeeeeac;
297  
298  .fw
299      width: 100%
300  
301  img
302      height: 2em
303  
304  label
305      font-weight: normal;
306      margin: 1em
307      display: block
308  
309  .spacer
310      margin-bottom: 3em
311  
312  .activecard
313      margin-left: 1em
314      margin-right: 1em
315      margin-top: 0.35em
316      // padding: 1em
317      //-- background-color: rgba(255,255,255,.833)
318      margin-bottom: 1em
319      padding-bottom: 1em
320      // padding-top: 1em
321      // box-shadow:
322      //      2px 2px 6px 3px main , 
323      //      2px 2px 7px 4px softGrey, 
324      //      2px 2px 8px 5px lightGrey;
325  
326  .smallguild
327      height: 2em
328  
329  .topleft
330      float: left
331      width: fit-content
332      position: relative
333      bottom: 0
334      left: 0
335      cursor: pointer
336  
337  .flextabs
338      display: flex
339      flex-direction:row
340      justify-content: flex-start
341      cursor: pointer
342  
343  .centererer
344      text-align: center
345      color: lightGrey
346  
347  .tabber
348      cursor: pointer
349      flex-shrink: 1
350      color: lightGrey
351      background-color: transparent;
352      text-align: center
353      min-width: 2.22em;
354      max-width: 3.3em;
355      border-bottom-left-radius: 40%;
356      border-bottom-right-radius: 40%;
357      border-bottom-width: 2px;
358      border-color: main;
359      border-bottom-style: solid
360      border-left-style: solid
361      border-right-style: solid
362      margin-left: .77em
363      img
364          height: 1.11em
365          padding-top: 0.22em
366          padding-left: 0.37em
367          padding-right: 0.37em
368  .tabber:hover
369      opacity: 0.88
370      background-color: lightGrey;
371  
372  
373  .tabber.activationsequence
374      background-color: softGrey;
375      -webkit-box-sizing: content-box;
376      -moz-box-sizing: content-box;
377      box-sizing: content-box;
378      -o-text-overflow: ellipsis;
379      text-overflow: ellipsis;
380      // box-shadow: 0 3px 10px rgb(0 0 0 / 0.2)
381      opacity: 1
382  
383  .tabber.activationsequence:hover
384      background-color: lightGrey;
385  
386  .stash
387      display: inline
388      left: -0.212em
389      position: relative
390      top: 0
391  
392  .clearboth
393      clear: both
394  
395  .title
396      cursor: pointer
397      font-size: 1.8em
398      margin-top: 0.5em
399      font-weight: bold
400  
401  .help
402      font-size: 1.3em
403  
404  .suggest
405      font-style: italic
406      font-size: 1.3em
407  
408  .faded
409      opacity: 0.39
410  
411  .membertooltip
412      font-size: 0.7em
413  
414  ul.left
415      text-align: left
416  
417  .clearboth
418      clear: both
419  
420  .stash:hover span
421      text-decoration: line-through;
422  
423  .stash span
424      cursor: pointer;
425  
426  .activecard
427      background: lightGrey
428  .activecard.dropping
429      background: blue
430  
431  .itsamember
432      height: 3em;
433  
434  </style>