Merge branch 'features/levels' of https://github.com/Cytoid/cytoid.io …

…into features/levels

src/components/level/LevelCard.vue

@@ -1,11 +1,12 @@
 <template lang="pug">
-  .class-container
+  .card-container
     div(
       ref="card"
       class="card-wrap"
       @mousemove="handleMouseMove"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
+      @click="enter"
     )
       .card(:style="cardStyle")
         .card-bg(:style="[cardBgTransform, cardBgImage]")
@@ -37,7 +38,6 @@ export default {
     mouseX: null,
     mouseY: null,
   }),
-
   computed: {
     mousePX() {
       return this.mouseX / this.$refs.card.offsetWidth
@@ -72,20 +72,35 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    if (this.mouseLeaveDelayTimeout) {
+      clearTimeout(this.mouseLeaveDelayTimeut)
+      this.mouseLeaveDelayTimeout = null
+    }
+  },
   methods: {
     handleMouseMove(e) {
+      if (!this.$refs.card) {
+        // Bugfix for vue routing bug. Event sent after component destruction.
+        return
+      }
       this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.$refs.card.offsetWidth / 2
       this.mouseY = e.pageY - this.$refs.card.offsetTop - this.$refs.card.offsetHeight / 2
     },
     handleMouseEnter() {
-      clearTimeout(this.mouseLeaveDelay)
+      clearTimeout(this.mouseLeaveDelayTimeout)
+      this.mouseLeaveDelayTimeout = null
     },
     handleMouseLeave() {
-      this.mouseLeaveDelay = setTimeout(() => {
+      this.mouseLeaveDelayTimeout = setTimeout(() => {
         this.mouseX = null
         this.mouseY = null
+        this.mouseLeaveDelayTimeout = null
       }, 200)
     },
+    enter() {
+      this.$router.push({ name: 'levels-id', params: { id: this.level.uid } })
+    }
   },
 }
 </script>

src/components/level/PlayButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="play-button" @click="play">
+  <button class="play-button" @click.stop="play">
     <a-icon :type="playing ? 'pause' : 'caret-right'" class="icon" />
     <a-progress v-if="playing" type="circle" :percent="progress * 100" :show-info="false" :width="60" />
     <audio ref="audio" :src="src" />
@@ -23,20 +23,15 @@ export default {
   }),
   mounted() {
     const player = this.$refs.audio
-    player.addEventListener('timeupdate', () => {
-      this.progress = player.currentTime / player.duration
-    })
-    player.addEventListener('ended', () => {
-      this.progress = 0
-      this.playing = false
-    })
-    Bus.$on('play', (id) => {
-      if (id === this.src) {
-        return
-      }
-      this.$refs.audio.pause()
-      this.playing = false
-    })
+    player.addEventListener('timeupdate', this.playbackUpdate)
+    player.addEventListener('ended', this.playbackEnded)
+    Bus.$on('play', this.playbackInterrupted)
+  },
+  beforeDestroy() {
+    const player = this.$refs.audio
+    player.removeEventListener('timeupdate', this.playbackUpdate)
+    player.removeEventListener('ended', this.playbackEnded)
+    Bus.$off('play', this.playbackInterrupted)
   },
   methods: {
     play() {
@@ -48,6 +43,21 @@ export default {
         this.$refs.audio.play()
         Bus.$emit('play', this.src)
       }
+    },
+    playbackUpdate() {
+      const player = this.$refs.audio
+      this.progress = player.currentTime / player.duration
+    },
+    playbackEnded() {
+      this.progress = 0
+      this.playing = false
+    },
+    playbackInterrupted(id) {
+      if (id === this.src) {
+        return
+      }
+      this.$refs.audio.pause()
+      this.playing = false
     }
   }
 }

src/pages/levels/index.vue

@@ -2,9 +2,7 @@
   <div>
     <a-row type="flex" justify="center">
       <a-col v-for="level in levels" :key="level.id">
-        <nuxt-link :to="{ name: 'levels-id', params: { id: level.uid } }">
-          <level-card :level="level" />
-        </nuxt-link>
+        <level-card :level="level" />
       </a-col>
     </a-row>
   </div>