Merge remote-tracking branch 'origin/features/levels' into features/l…

…evels # Conflicts: # src/components/level/LevelCard.vue
Cytoid · May 12, 2019 · 7bace29 · 7bace29
2 parents de41294 + 1e6d2e0
commit 7bace29
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 65 deletions.
diff --git a/src/components/level/LevelCard.vue b/src/components/level/LevelCard.vue
@@ -1,72 +1,64 @@
-<!-- Source: Andy Merskin -->
-<template>
-  <div class="card-container">
-    <a href="/levels/">
-      <div
-        ref="card"
-        class="card-wrap"
-        @mousemove="handleMouseMove"
-        @mouseenter="handleMouseEnter"
-        @mouseleave="handleMouseLeave"
-      >
-        <div
-          class="card"
-          :style="cardStyle"
-        >
-          <div class="card-bg" :style="[cardBgTransform, cardBgImage]" />
-          <div class="card-info">
-            <h1 style="margin-bottom: 4px;" v-text="level.title" />
-            <!-- <p>This is the subtitle</p> -->
-            <a-row type="flex" align="middle">
-              <a-col :span="20" style="display: flex; align-items: center;">
-                <span style="display: flex; align-items: center;">
-                  <a-avatar :size="24" icon="user" style="margin-right: 8px;" />
-                  <a href="/profile/" style="color: white;" v-text="'ddd'" />
-                </span>
-              </a-col>
-              <a-col :span="4" style="display: flex; align-items: center; justify-content: flex-end;">
-                <a-icon type="caret-right" style="font-size: 24px;" />
-              </a-col>
-            </a-row>
-          </div>
-        </div>
-      </div>
-    </a>
-  </div>
+<template lang="pug">
+  .class-container: a()
+    div(
+      ref="card"
+      class="card-wrap"
+      @mousemove="handleMouseMove"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    )
+      .card(:style="cardStyle")
+        .card-bg(:style="[cardBgTransform, cardBgImage]")
+        .card-info
+          h1(style="margin-bottom: 4px;" v-text="level.title")
+          p This is the subtitle
+          a-row(type="flex" align="middle")
+            a-col(:span="20" style="display: flex; align-items: center;")
+              span(style="display: flex; align-items: center;")
+                a-avatar(:size="24" icon="user" style="margin-right: 8px;")
+                span hjk
+            a-col(:span="4" style="display: flex; align-items: center; justify-content: flex-end;")
+              play-button(:src="level.bundle.music_preview")
 </template>
 
 <script>
+import PlayButton from '@/components/level/PlayButton'
 export default {
+  components: {
+    PlayButton,
+  },
   props: {
     level: {
       type: Object,
       required: true
     },
   },
-
   data: () => ({
-    width: 0,
-    height: 0,
-    mouseX: 0,
-    mouseY: 0,
-    mouseLeaveDelay: null,
+    mouseX: null,
+    mouseY: null,
   }),
 
   computed: {
     mousePX() {
-      return this.mouseX / this.width
+      return this.mouseX / this.$refs.card.offsetWidth
     },
     mousePY() {
-      return this.mouseY / this.height
+      return this.mouseY / this.$refs.card.offsetHeight
     },
     cardStyle() {
+      if (this.mouseX === null || this.mouseY === null) {
+        return {}
+      }
       const rX = this.mousePX * 6
       const rY = this.mousePY * -6
       return {
         transform: `rotateY(${rX}deg) rotateX(${rY}deg)`,
       }
     },
     cardBgTransform() {
+      if (this.mouseX === null || this.mouseY === null) {
+        return {}
+      }
       const tX = this.mousePX * -10
       const tY = this.mousePY * -10
       return {
@@ -80,24 +72,18 @@ export default {
       }
     },
   },
-
-  mounted() {
-    this.width = this.$refs.card.offsetWidth
-    this.height = this.$refs.card.offsetHeight
-  },
-
   methods: {
     handleMouseMove(e) {
-      this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2
-      this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2
+      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)
     },
     handleMouseLeave() {
       this.mouseLeaveDelay = setTimeout(() => {
-        this.mouseX = 0
-        this.mouseY = 0
+        this.mouseX = null
+        this.mouseY = null
       }, 200)
     },
   },

diff --git a/src/components/level/PlayButton.vue b/src/components/level/PlayButton.vue
@@ -0,0 +1,82 @@
+<template>
+  <button class="play-button" @click="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" />
+  </button>
+</template>
+
+<script>
+import Vue from 'vue'
+export const Bus = new Vue()
+
+export default {
+  props: {
+    src: {
+      required: true,
+      type: String,
+    }
+  },
+  data: () => ({
+    playing: false,
+    progress: 0,
+  }),
+  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
+    })
+  },
+  methods: {
+    play() {
+      if (this.playing) {
+        this.playing = false
+        this.$refs.audio.pause()
+      } else {
+        this.playing = true
+        this.$refs.audio.play()
+        Bus.$emit('play', this.src)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.play-button {
+  background: none;
+  font-size: 36px;
+  padding: 0;
+  border: none;
+  outline: none;
+  user-select: none;
+  .anticon {
+    display: block;
+  }
+  &:hover {
+     transform: scale(1.1, 1.1);
+   }
+  &:active {
+     color: @primary-color;
+   }
+  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+
+  .ant-progress {
+    display: block;
+    position: absolute;
+    top: -12px;
+    left: -12px;
+  }
+}
+</style>
diff --git a/src/pages/session/SignIn.vue b/src/pages/session/SignIn.vue
@@ -10,7 +10,7 @@
         <a-form-item>
           <a-input
             v-decorator="[
-              'player_id',
+              'username',
               { rules: [{ required: true, message: 'Please input your player ID or email address.' }] }
             ]"
             placeholder="Player ID / Email address"
@@ -59,6 +59,7 @@
           <a-button
             type="primary"
             html-type="submit"
+            :loading="loading"
             block
           >
             Sign in
@@ -75,7 +76,6 @@
           type="primary"
           html-type="submit"
           block
-          :loading="loading"
         >
           Sign up
         </a-button>
@@ -97,10 +97,22 @@ export default {
   methods: {
     signIn() {
       this.form.validateFields((err, values) => {
-        if (!err) {
-          this.loading = true
-          console.log('Received values of form: ', values)
+        if (err) {
+          return
         }
+        this.loading = true
+        this.$auth.loginWith('local', {
+          data: values,
+        })
+          .then((response) => {
+            this.loading = false
+            this.$message.info('signed in')
+          })
+          .catch((error) => {
+            this.loading = false
+            console.log(error)
+            this.$message.error('Error!')
+          })
       })
     },
   },

diff --git a/src/pages/session/SignUp.vue b/src/pages/session/SignUp.vue
@@ -8,7 +8,7 @@
     </h2>
     <a-form
       :form="form"
-      @submit.prevent="signIn"
+      @submit.prevent="signUp"
     >
       <a-form-item>
         <div slot="extra">
@@ -17,11 +17,11 @@
         </div>
         <a-input
           v-decorator="[
-            'player_id',
+            'name',
             { rules: [{
               required: true,
               pattern: '^[a-z0-9_-]{3,16}$',
-              message: 'Please input a correct player ID.',
+              message: 'Please input a valid player ID.',
             }] }
           ]"
           placeholder="Player ID"
@@ -110,12 +110,21 @@ export default {
     this.form = this.$form.createForm(this)
   },
   methods: {
-    signIn() {
+    signUp() {
       this.form.validateFields((err, values) => {
-        if (!err) {
-          this.loading = true
-          console.log('Received values of form: ', values)
+        if (err) {
+          return
         }
+        this.loading = true
+        this.$axios.post('/users', values)
+          .then((res) => {
+            this.loading = false
+            this.$message.info('Registration succeed')
+          })
+          .catch((error) => {
+            this.loading = false
+            this.$message.error(error.response?.data?.message)
+          })
       })
     },
   },