1  <template lang='pug'>
  2  
  3  #createtask(ref="closeable")
  4    div.secondbackground#btnpanel
  5        div
  6            .gem(@click.stop='createOrFindTask'  :class='cardInputSty'  v-if='!showCreate')
  7                img(src='../assets/images/compose.svg')
  8            .boatContainer(v-else)
  9                button.clear(@click.stop='pileRecalled')
 10                    span(v-if='searchTotal > 0 && task.name.length > 0') recall &nbsp; {{ searchTotal }}
 11                    span(v-else) recall (-) 
 12                    span(v-if='showSearch') 
 13                        img(src='../assets/images/gear.svg').spin
 14                button.lock(@click='encryptIt = !encryptIt')
 15                    //label.switch(@click.stop)
 16                    //    input(type="checkbox"  v-model='encryptIt')
 17                    //    span.slider.round
 18                button.create(@click.stop='createOrFindTask'  :class='cardInputSty')
 19                    span create
 20        .cc(v-show='showCreate')
 21            textarea#card.paperwrapper(
 22                v-model='task.name'
 23                type='text'
 24                :class='cardInputSty'
 25                placeholder=""
 26                @keyup.enter.exact='createOrFindTask'
 27                @keydown.enter.exact.prevent
 28                row='10'
 29                col='20'
 30                @click.stop='tryGoIn'
 31            )
 32    span.hidden {{ refocusWatcher }}  {{ nameWatcher }}
 33    //- //"愛  любовь  عشق  love  사랑  Aşk  ਪਿਆਰ  အချစ်  ស្រឡាញ់  <3"
 34  
 35  </template>
 36  
 37  <script>
 38  
 39  import calculations from '../calculations'
 40  import Hammer from 'hammerjs'
 41  import cryptoUtils from '../crypto'
 42  import Current from './Current.vue'
 43  
 44  let searchDebounce = setTimeout(()=>{}, 123123123123123)
 45  let focusBouncer = false
 46  
 47  
 48  export default {
 49      data(){
 50          return {
 51              encryptIt: false,
 52              task: {
 53                  name: '',
 54                  color: 'blue',
 55              },
 56              swipeTimeout: 0,
 57              showSearch: false,
 58              matches: {
 59                  doges: [],
 60                  cards: [],
 61                  guilds: []
 62              }
 63          }
 64      },
 65      components: {
 66          Current
 67      },
 68      mounted() {
 69          var el = document.getElementById('btnpanel')
 70          var mc = new Hammer.Manager(el)
 71  
 72  
 73          var Swipe = new Hammer.Swipe()
 74          let longPress = new Hammer.Press({ time: 400 })
 75  
 76          mc.add([Swipe, longPress])
 77  
 78          mc.on('swipeleft', () => {
 79              if(Date.now() - this.swipeTimeout > 100) {
 80                  this.previousColor()
 81                  this.swipeTimeout = Date.now()
 82              }
 83          });
 84  
 85          mc.on('swiperight', () => {
 86              if(Date.now() - this.swipeTimeout > 100) {
 87                  this.nextColor()
 88                  this.swipeTimeout = Date.now()
 89              }
 90          });
 91  
 92          mc.on('swipedown', () => {
 93              if(Date.now() - this.swipeTimeout > 100) {
 94                  this.$store.commit('toggleCreate')
 95                  this.swipeTimeout = Date.now()
 96              }
 97          });
 98  
 99          mc.on('swipeup', () => {
100              if(Date.now() - this.swipeTimeout > 100) {
101                  this.$store.commit('toggleCreate')
102                  this.swipeTimeout = Date.now()
103              }
104          });
105          window.addEventListener( "keydown", this.resetMaybe ) 
106      },
107      methods: {
108          applyEvent(evn) {
109              console.log({evn}) 
110              if (evn.type === "task-created" && evn.name === this.task.name.trim){
111                  this.resetCard() 
112              }
113          },
114          tryGoIn(){
115              let hash = cryptoUtils.createCardHash(this.task.name)
116              let card = this.$store.state.hashMap[hash]
117              if (card){
118                  this.$store.commit('goDeeper', hash)
119                  this.task.name = ''
120              } 
121          },
122          pileRecalled() {
123            if (!this.$store.state.upgrades.create){
124                return this.$store.commit('toggleCreate')
125            }
126            if (this.matchIds.length > 0){
127                this.$store.dispatch("makeEvent", {
128                    type: "pile-sub-tasked",
129                    inId: this.$store.getters.contextCard.taskId,
130                    tasks: this.matchIds
131                })
132            }
133          },
134          toChest(){
135              if (this.$store.state.upgrades.mode === "chest"){
136                  this.$store.commit("setMode", 0)
137              } else {
138                  this.$store.commit("setMode", 3)
139              }
140          },
141          toTimeCube(){
142              if (this.$store.state.upgrades.mode === "timecube"){
143                  this.$store.commit("setMode", 0)
144              } else {
145                  this.$store.commit("setMode", 2)
146              }
147          },
148          toBoat(){
149              if (this.$store.state.upgrades.mode === "boat"){
150                  this.$store.commit("setMode", 0)
151              } else {
152                  this.$store.commit("setMode", 1)
153              }
154          },
155          matchCards() {
156              searchDebounce = setTimeout(() => {
157              this.showSearch = false
158              let cards = []
159              let guilds = []
160              let doges = []
161              let search = this.task.name.trim()
162              let dontsearch = this.$store.state.upgrades.search === search
163              if (this.$store.state.upgrades.search.length > 0 && !dontsearch && this.matches.cards.length + this.matches.guilds.length + this.matches.doges.length === 0){
164                  let alreadySearched = new RegExp(this.$store.state.upgrades.search, 'i')
165                  dontsearch = alreadySearched.test(search)
166              }
167              if (dontsearch){
168                  return this.matchCards
169              }
170              if(search.length < 3) {
171                  this.showSearch = false
172                  return { guilds, doges, cards}
173              }
174                this.showSearch = true
175                process.nextTick(() => {
176                    try {
177                      let regex = new RegExp(search, 'i')
178                      this.$store.state.tasks.forEach(t => {
179                        if (t.taskId === this.$store.getters.contextCard.taskId) return //
180                        if(t.guild && regex.test(t.guild)) {
181                          guilds.push(t)
182                        } else if(regex.test(t.name)) {
183                          cards.push(t)
184                        }
185                      })
186                      this.$store.state.members.forEach(member => {
187                        if(regex.test(member.name)) {
188                          doges.push(member)
189                        }
190                      })
191                    } catch (err){
192                      return
193                    }
194                    this.$store.commit('setSearch', search)
195                    this.matches = { guilds, doges, cards}
196                    this.showSearch = false
197  
198                })
199              }, 989)
200          },
201          lockIt(){
202              if (!this.$store.state.upgrades.create){
203                  return this.$store.commit('toggleCreate')
204              }
205  
206              let toHide = this.task.name.trim()
207              if (toHide){
208                  let pubkey = this.$store.state.cash.publicKey
209                  let potentialCard = cryptoUtils.encryptToPublic(pubkey, toHide)
210                  this.$store.dispatch("makeEvent", {
211                    type: 'task-locked',
212                    name: potentialCard,
213                    color: this.$store.state.upgrades.color,
214                    deck: [this.$store.getters.member.memberId],
215                    inId: this.taskId,
216                  })
217                  this.resetCard()
218              }
219          },
220          boatAll(){
221              this.$store.dispatch("makeEvent", {
222                  type: 'pile-prioritized',
223                  tasks: this.matchIds,
224                  inId: this.$store.getters.contextCard.taskId,
225              })
226          },
227          deBoatAll(){
228              this.$store.dispatch("makeEvent", {
229                  type: 'pile-de-sub-tasked',
230                  tasks: this.matchIds,
231                  inId: this.$store.getters.contextCard.taskId,
232              })
233          },
234          switchColor(color){
235              if (this.$store.state.upgrades.color === color){
236                  this.$store.commit('toggleCreate')
237              } else {
238                  this.$store.commit('toggleCreate')
239              }
240              this.$store.commit('setColor', color)
241          },
242          refocus(keyp){
243              document.getElementById('card').focus()
244              this.task.name += keyp
245          },
246          resetMaybe(x){
247              if (x.key === 'Escape') { 
248                  this.resetCard();
249                  this.$store.commit('createOff');
250              } 
251          },
252          resetCard(){
253              this.task.name = ''
254              this.$store.commit('focus', '')
255              this.encryptIt = false
256              document.getElementById("btnpanel").blur()
257          },
258          subTaskTask(taskId) {
259              this.$store.dispatch("makeEvent", {
260                  type: 'task-sub-tasked',
261                  inId: this.taskId,
262                  taskId,
263                  memberId: this.$store.getters.member.memberId,
264              })
265          },
266          createOrFindTask(){
267              if (!this.$store.state.upgrades.create){
268                  document.getElementById('card').focus()
269                  return this.$store.commit('toggleCreate')
270              }
271  
272              if (this.encryptIt){
273                  return this.lockIt()
274              }
275  
276              let potentialCard = this.task.name.trim()
277              if (potentialCard.length === 0){
278                  return
279              }
280              let foundId = false
281              let potentialCardHash = cryptoUtils.createCardHash(potentialCard)
282              this.$store.state.tasks.some(t => {
283                  if (t.taskId === potentialCardHash){
284                      foundId = t.taskId
285                      return true
286                  }
287              })
288              if(!foundId) {
289                  this.$store.dispatch("makeEvent", {
290                      type: 'task-created',
291                      name: potentialCard,
292                      color: this.$store.state.upgrades.color,
293                      deck: [this.$store.getters.member.memberId],
294                      inId: this.taskId,
295                  })
296                  this.nextColor()
297              } else {
298                  this.subTaskTask(foundId)
299              }
300              this.resetCard()
301              if (this.showCreate){
302                  this.$store.commit('toggleCreate')
303              }
304          },
305          isGrabbed(taskId){
306              return this.$store.state.tasks[this.$store.state.hashMap[taskId]].deck.indexOf( this.$store.getters.member.memberId ) > -1
307          },
308          nextColor() {
309              let colors = ['red', 'yellow', 'green', 'purple', 'blue']
310              let color = colors.indexOf(this.$store.state.upgrades.color)
311              color++
312              this.switchColor(colors[color > 4 ? 0 : color], false)
313          },
314          previousColor() {
315              let colors = ['red', 'yellow', 'green', 'purple', 'blue']
316              let color = colors.indexOf(this.$store.state.upgrades.color)
317              color--
318              this.switchColor(colors[color < 0 ? 4 : color], false)
319          },
320          resultInputSty(card) {
321            return {
322                redwx : card.color == 'red',
323                bluewx : card.color == 'blue',
324                greenwx : card.color == 'green',
325                yellowwx : card.color == 'yellow',
326                purplewx : card.color == 'purple',
327                blackwx : card.color == 'black',
328            }
329          },
330          loadResult() {
331              this.matchCards()
332              this.$store.commit('setSearch', this.task.name.trim())
333          },
334          shortName(theName) {
335              let shortname = calculations.shortName(theName)
336              let splitty = shortname.split(this.$store.state.upgrades.search.toLowerCase())
337              return splitty
338          },
339      },
340      computed: {
341          nameWatcher(){
342              clearTimeout(searchDebounce)
343              this.matchCards()
344              return this.task.name
345          },
346          refocusWatcher(){
347              let keyp = this.$store.state.upgrades.keypressed.toString()
348  
349              if (!this.showCreate && keyp){
350                  this.$store.commit('toggleCreate')
351              }
352              if (keyp && focusBouncer !== this.$store.state.upgrades.refocus){
353                  if (keyp === 'Backspace') keyp = ''
354                  if (keyp === 'Enter'){
355                      return this.createOrFindTask()
356                  } else {
357                    this.refocus(keyp)
358                  }
359              }
360              focusBouncer = this.$store.state.upgrades.refocus
361              return this.$store.state.upgrades.refocus
362          },
363          showCreate(){
364              return this.$store.state.upgrades.create
365          },
366          searchEqual(){
367              return this.search == this.task.name
368          },
369          searchTotal(){
370              return this.matches.guilds.length + this.matches.doges.length + this.matches.cards.length
371          },
372          taskId(){
373              return this.$store.getters.contextCard.taskId
374          },
375          matchIds(){
376              return this.matches.guilds
377                  .concat(this.matches.doges)
378                  .concat(this.matches.cards)
379                  .map(t => {
380                    if (t.taskId) return t.taskId
381                    if (t.memberId) return t.memberId
382                  })
383          },
384          cardInputSty() {
385              if (this.$store.getters.member.stacks === 5){
386                  return {
387                      redwx : this.$store.state.upgrades.color == 'red',
388                      bluewx : this.$store.state.upgrades.color == 'blue',
389                      greenwx : this.$store.state.upgrades.color == 'green',
390                      yellowwx : this.$store.state.upgrades.color == 'yellow',
391                      purplewx : this.$store.state.upgrades.color == 'purple',
392                      blackwx : this.$store.state.upgrades.color == 'black',
393                      inactive: this.task.name == ''
394                  }
395              }
396              return {
397                  nowx: true,
398                  inactive: this.task.name == ''
399              }
400          },
401      }
402  }
403  
404  </script>
405  
406  <style lang='stylus' scoped>
407  
408  @import '../styles/colours';
409  @import '../styles/button';
410  @import '../styles/breakpoints';
411  @import '../styles/input';
412  @import '../styles/switch';
413  @import '../styles/spinners';
414  
415  .spin
416      height: 1.4em
417  
418  textarea
419      border-color: rgba(0, 0, 0, 0.4)
420      height: 7em
421      max-height: 11vh
422      min-height: 2em;
423  textarea.inactive
424      height: 2em
425      padding-bottom: 2.5em
426  
427  .boatContainer button
428      color: white
429  .lonestar
430      height: 2em
431      background-color : lightGrey
432      width: 20em
433      position: fixed
434      left: 50%
435      transform: translateX(-50%)
436  .searchtotal
437      cursor: pointer
438      border-bottom-style: solid
439      border-color: main
440      margin-bottom: 0.23456em
441  
442  
443  .boatContainer button.create
444      color: main
445  
446  #createtask
447    width: 69%
448    margin: 0 auto 0 auto
449    text-align: center
450    padding: 0.05em
451    position: fixed
452    z-index: 1649
453    bottom: -1em
454    left: 50%
455    transform: translateX(-50%)
456    font-size: 1.67em
457  
458  .lit
459      opacity: 0.69
460  
461  .opaque > button.lit
462      opacity: 1
463  
464  .onetime
465      display: inline
466  
467  .color
468      height: 2.5em
469      padding: 1em
470  
471  .colorlabel
472      align-content: center;
473      text-align: center
474  
475  @media (max-width: breakpoint)
476      .colorlabel
477          span
478              display: none
479  
480  #bark
481      float: right
482      height: 3em
483  
484  .fwi
485      text-align: center
486  
487  .tealbk
488      background: green
489  
490  .cc
491      position: relative
492  
493  .upgradeimg
494     height: 3em
495  
496  .btnpanel
497      overflow: hidden
498      button
499          cursor: pointer
500          min-height: 2.5em
501          width: 4.045085em
502          margin: 0
503          padding-bottom: 2.5em
504  
505  .btnwrapper
506      width: 100%
507      display: block
508      text-align: center
509  
510  .slide-fade-enter-active {
511    transition: all .6s ease;
512  }
513  .slide-fade-leave-active {
514    transition: all .4s ease;
515  }
516  .slide-fade-enter {
517    // transform: translateY(-400px);
518    opacity: 0;
519  }
520  .slide-fade-leave-to {
521   // transform: translateY(-400px);
522    opacity: 0;
523  }
524  
525  .label
526      font-weight: bolder
527  
528  .centr
529      text-align: center
530  
531  .paperwrapper
532      position: relative
533  
534  .agedbackground
535      background-image: url('/paper.jpg')
536      background-repeat: no-repeat
537      background-position: center center
538      background-size: cover
539      top: 0
540      left: 0
541      bottom: 0
542      right: 0
543      position: absolute
544      width: 100%
545      height: 100%
546      opacity: 0.2
547  
548  .down
549      color: lightGrey
550  
551  .down:before
552      color: lightGrey
553  
554  .loadin
555      color: softerGrey
556  
557  .loadin:before
558      color: softerGrey
559  
560  .currentColor
561      opacity: 1
562  
563  .closeit
564      position: fixed
565      width: 100%
566      height: 90%
567      background-color: rgba(22, 22, 22, 1)
568      z-index: 148
569      top: 0
570      left: 0
571      margin: 0
572      padding: 0
573  
574  .scrollbarwrapper
575      width: 100%
576      height: calc(100% - 2em)
577      position: absolute
578      top: calc(-100% - 0.5em)
579      left: 0
580      background: lightGrey
581      padding: 1em 0
582      border-radius: 20px
583      cursor: default
584  
585  @media only screen and (max-width: 68em)
586      .scrollbarwrapper
587          width: 100%
588  
589  .searchresults
590      overflow: auto
591      font-size: 1.1em
592      height: 100%
593      padding: 0 1em
594      word-wrap: break-word
595  
596  ::-webkit-scrollbar
597      background-color: rgba(22, 22, 22, 0.4)
598  
599  ::-webkit-scrollbar-thumb
600      background-color: rgba(89, 89, 89, 0.4)
601  
602  .result
603      margin-left: 4em
604      margin-right: 4em
605      margin-bottom: 0.3em
606      cursor: crosshair
607  
608  .smallguild
609      height: 1em
610      margin-right: 0.3em
611      position: relative
612      top: 0.16em
613  
614  .guildname
615      font-weight: bold
616  
617  .current.result
618      display: block
619  
620  .uni
621      position: fixed
622      bottom: 0
623  
624      left: 50%
625      transform: translateX(-50%)
626      height: 5.5555555555em
627      cursor: pointer
628      z-index: 9002
629  
630  .boatContainer
631      display: flex;
632      justify-content: space-between;
633      width:100%
634      height:45px
635  
636  .boatAll
637      margin: 0 1em 0 1em
638      height: 11em;
639      width: 2em
640      background: main
641      position: relative
642      margin-top: 1em
643      margin-bottom: 1em
644      cursor: pointer
645  
646  .boatR
647      position: absolute
648      right: 0px
649  
650  .faded
651      opacity: 0.235654
652  
653  .secondbackground
654      cursor: pointer
655  
656  .boatContainer button.selected
657      background: main
658      color: softGrey
659  
660  .boatContainer button:hover
661      opacity: 0.9
662  
663  .ping
664      padding-top: 0.789em
665      position: absolute
666      left: 3px
667      bottom: 3px
668  
669  .pend
670      float: right
671  
672  .fifth
673      display: inline-block
674      width: 20%
675      font-size: 4.44em
676      color: main
677      margin-top:-0.44em
678      border-radius: 2%
679  .fifth:before
680      content: "\2022";
681  
682  .fifth:hover
683      opacity: 0.9
684  
685  .ping
686      position: absolute
687      bottom: 0
688      left: 0
689  
690  .bottomleft
691      -webkit-text-stroke-width: 1px;
692      -webkit-text-stroke-color: main;
693      display: inline-block
694      width: 33.3%
695      cursor: pointer
696      color: lightGrey
697      text-align: center
698      img
699          height: 1.11em
700  .bottomleft:hover
701      opacity: 0.7
702  
703  .bottomleft.activationsequence
704      img
705          height: 1.77em
706  
707  .hidden
708      opacity: 0
709  
710  .gem
711      cursor: pointer;
712      width: -webkit-min-content;
713      width: 100%;
714      height: 2.789em;
715      position: absolute;
716      left: 50%;
717      transform: translateX(-50%);
718      margin-bottom: 0;
719      border-radius: 50% 50% 0 0;
720      top: -2.789em;
721      padding-top: 0.2em;
722      padding-bottom: 0.2em;
723      img
724          height: 2em
725  
726  button.lock img
727      float: left
728      height: 1.4505em
729      margin-left: 2em
730  
731  
732  </style>