Merge pull request #62 from RadKod/feature/ux

feat: ux improvements
RadKod · May 3, 2023 · 9b0d50e · 9b0d50e
2 parents 08825d6 + 1b36563
commit 9b0d50e
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 39 deletions.
diff --git a/components/List/RoomReviewList/RoomReviewList.component.vue b/components/List/RoomReviewList/RoomReviewList.component.vue
@@ -4,13 +4,13 @@
     .room-review-list__rating.room-review-list__rating--desktop
       strong.room-review-list__title
         | {{ $t('roomReviewList.ratingTitle') }}
-      StarRating(read-only :rating="rating" :rounded-corners="true" :star-size="32")
+      StarRating(read-only :rating="formatRating(rating)" :increment="0.1" :rounded-corners="true" :star-size="32")
 
     .d-none.d-md-block
       slot(name="openFormButton")
 
   .room-review-list__rating.room-review-list__rating--mobile
-    StarRating(read-only :rating="rating" :rounded-corners="true" :star-size="20")
+    StarRating(read-only :rating="formatRating(rating)" :increment="0.1" :rounded-corners="true" :star-size="20")
 
   .room-review-list__title.mt-base
     strong {{ $t('roomReviewList.reviewsTitle') }} ({{ items && items.length }})
@@ -29,7 +29,7 @@
               template(v-else) -
             small &nbsp; (
               AppIcon(name="tabler:star-filled" color="var(--color-text-03)" :width="10" :height="10")
-              | {{ item.rating.substring(0, 1) }}
+              | {{ String(formatRating(item.rating)) }}
               | )
 
         .room-review-list-item__body
@@ -47,6 +47,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+import { useFormatter } from '@/hooks'
 import { List, Cell, Empty, Button } from 'vant'
 import StarRating from 'vue-star-rating'
 import { AppIcon } from '@/components/Icon'
@@ -74,7 +75,13 @@ export default defineComponent({
       default: null
     }
   },
-  setup() {}
+  setup() {
+    const { formatRating } = useFormatter()
+
+    return {
+      formatRating
+    }
+  }
 })
 </script>
 

diff --git a/hooks/index.js b/hooks/index.js
@@ -1,5 +1,5 @@
 export { default as useTime } from './useTime'
 export { default as useGameMode } from './useGameMode'
 export { default as useGameScene } from './useGameScene'
-export { default as useEncodeDecode } from './useEncodeDecode'
+export { default as useFormatter } from './useFormatter'
 export { default as useDialog } from './useDialog'
diff --git a/hooks/useEncodeDecode.js b/hooks/useEncodeDecode.js
diff --git a/hooks/useFormatter.js b/hooks/useFormatter.js
@@ -0,0 +1,45 @@
+export default () => {
+  /**
+   * Turkish to english char converter
+   * @param {string} value
+   * @returns English variant of turkish characters
+   */
+  const encodeEnglish = value => {
+    return value
+      .replace(/ /g, '-')
+      .replace(/ş/g, 's')
+      .replace(/ı/g, 'i')
+      .replace(/ç/g, 'c')
+      .replace(/ğ/g, 'g')
+      .replace(/ö/g, 'o')
+      .replace(/ü/g, 'u')
+      .replace(/Ş/g, 's')
+      .replace(/İ/g, 'i')
+      .replace(/I/g, 'i')
+      .replace(/Ç/g, 'c')
+      .replace(/Ğ/g, 'g')
+      .replace(/Ö/g, 'o')
+      .replace(/Ü/g, 'u')
+      .replace(/-{2,}/g, '-')
+  }
+
+  /**
+   * Rating value formatter
+   * @param {number} value
+   * @returns e.g. 5, 4.33, 1
+   */
+  const formatRating = value => {
+    const rating = Number(value)
+
+    if (rating % 1 === 0) {
+      return rating.toFixed(0) // remove decimal places if it's an integer
+    } else {
+      return rating.toFixed(1) // remove trailing zeros after the first decimal place
+    }
+  }
+
+  return {
+    encodeEnglish,
+    formatRating
+  }
+}
diff --git a/hooks/useGameScene.js b/hooks/useGameScene.js
@@ -1,7 +1,7 @@
 import { useContext, useStore, ref, reactive, computed, watch, nextTick } from '@nuxtjs/composition-api'
 import { UNSUPPORTED_HEIGHT, WEB_CDN } from '@/system/constant'
 import { gameModeKeyEnum } from '@/enums'
-import { useGameMode, useEncodeDecode } from '@/hooks'
+import { useGameMode, useFormatter } from '@/hooks'
 // Swiper
 import Swiper from 'swiper'
 import 'swiper/swiper-bundle.min.css'
@@ -17,7 +17,7 @@ export default () => {
   const store = useStore()
 
   const { activeGameMode } = useGameMode()
-  const { encodeEnglish } = useEncodeDecode()
+  const { encodeEnglish } = useFormatter()
 
   const rootRef = ref(null)
   const setRootRef = element => {

diff --git a/pages/CreatorMode/CreatorModeRooms/CreatorModeRooms.page.scss b/pages/CreatorMode/CreatorModeRooms/CreatorModeRooms.page.scss
@@ -134,6 +134,18 @@
           }
         }
 
+        &--rating {
+          label {
+            margin: 0 calc(var(--base-m-x) / 6);
+            color: var(--color-text-03);
+            font-size: var(--font-size-text-9);
+
+            &:first-child {
+              margin-right: calc(var(--base-m-x) / 2);
+            }
+          }
+        }
+
         &__icon {
           margin-right: calc(var(--base-m-x) / 4);
         }
@@ -147,6 +159,22 @@
       &__id {
         display: block;
       }
+
+      .vue-star-rating {
+        position: relative;
+        display: flex;
+
+        &-star {
+          margin-right: calc(var(--base-m-x) / 6);
+        }
+
+        &-rating-text {
+          margin-bottom: 0;
+          margin-left: 2px;
+          color: var(--color-text-03);
+          font-size: var(--font-size-text-9);
+        }
+      }
     }
   }
 }
diff --git a/pages/CreatorMode/CreatorModeRooms/index.vue b/pages/CreatorMode/CreatorModeRooms/index.vue
@@ -81,22 +81,26 @@
                       AppIcon.room-list-item-badge__icon(name="tabler:eye" color="var(--color-text-03)" :width="16" :height="16")
                       span.room-list-item-badge__value {{ room.viewCount }}
 
-                    .room-list-item-badge(v-if="room.rating")
-                      AppIcon.room-list-item-badge__icon(
-                        name="tabler:star-filled"
-                        color="var(--color-warning-02)"
-                        :width="16"
-                        :height="16"
+                    .room-list-item-badge.room-list-item-badge--rating(v-if="room.rating")
+                      StarRating(
+                        read-only
+                        inline
+                        :show-rating="false"
+                        :rating="room.rating"
+                        :increment="0.1"
+                        :rounded-corners="false"
+                        :star-size="14"
                       )
-                      span.room-list-item-badge__value {{ String(room.rating).substring(0, 1) }}/5
-
+                      label {{ String(formatRating(room.rating)) }}
                   span.room-list-item__id ID: {{ room.id }}
 </template>
 
 <script>
 import { defineComponent, useFetch, useRouter, useContext, useStore, ref, reactive, computed } from '@nuxtjs/composition-api'
 import { APP_URL } from '@/system/constant'
+import { useFormatter } from '@/hooks'
 import { Field, Search, Button, Divider, Cell, Empty, Notify } from 'vant'
+import StarRating from 'vue-star-rating'
 import { AppIcon } from '@/components/Icon'
 import { PlayerAvatar } from '@/components/Avatar'
 
@@ -109,6 +113,7 @@ export default defineComponent({
     Cell,
     Empty,
     Notify,
+    StarRating,
     AppIcon,
     PlayerAvatar
   },
@@ -118,6 +123,8 @@ export default defineComponent({
     const { localePath, i18n } = useContext()
     const store = useStore()
 
+    const { formatRating } = useFormatter()
+
     // Fetch Rooms
     const { fetch, fetchState } = useFetch(async () => {
       await store.dispatch('creator/fetchRooms')
@@ -188,6 +195,7 @@ export default defineComponent({
 
     return {
       APP_URL,
+      formatRating,
       fetch,
       fetchState,
       rooms,