[QUIZ-95][QUIZ-148] update: realtime play room

src/components/room/lobby.vue

@@ -52,9 +52,10 @@ onMounted(() => {
 
   if (detailRoom.value.id) {
     const data: IRoomSocket = {
-      roomPin: detailRoom.value.room_pin,
-      userId: authStore.getUser?.id,
-      name: 'name',
+      room_pin: detailRoom.value.room_pin,
+      room_id: detailRoom.value.id,
+      user_id: authStore.getUser?.id,
+      nick_name: 'name',
     }
 
     socketStore.handleCreateRoomData(data)
@@ -69,14 +70,16 @@ watch(listMember.value, (val) => {
 
 const handleLocked = () => {
   const data: ILocked = {
-    roomPin: detailRoom.value.room_pin,
+    room_pin: detailRoom.value.room_pin,
+    host_id: authStore.getUser?.id as string,
   }
   socketStore.handleLockRoomData(data)
 }
 
 const handleUnlocked = () => {
   const data: ILocked = {
-    roomPin: detailRoom.value.room_pin,
+    room_pin: detailRoom.value.room_pin,
+    host_id: authStore.getUser?.id as string,
   }
   socketStore.handleUnlockRoomData(data)
 }
@@ -90,8 +93,9 @@ const addAvatarOnList = (data: IMember[]) => {
 
 const removeMember = (item: IMember) => {
   const data: IKickMem = {
-    roomPin: detailRoom.value.room_pin,
-    socketId: item.new_player.socket_id,
+    room_pin: detailRoom.value.room_pin,
+    participant_id: item.new_participant.id,
+    host_id: authStore.getUser?.id as string,
   }
 
   socketStore.handleKickMember(data)
@@ -223,7 +227,7 @@ const copyCode = async () => {
       >
         <div
           v-for="item in membersWithAvatars"
-          :key="item.new_player.user_id"
+          :key="item.new_participant.user_id"
           v-motion
           :initial="{ opacity: 0, x: 100 }"
           :enter="{ opacity: 1, x: 0, scale: 1 }"
@@ -234,7 +238,7 @@ const copyCode = async () => {
             class="w-8 h-8"
             :src="item.avatar"
           />
-          <p class="text-base font-bold">{{ item.new_player.name }}</p>
+          <p class="text-base font-bold">{{ item.new_participant.nick_name }}</p>
           <div
             class="hidden group-hover:flex absolute bg-white -top-2 w-[18px] h-[18px] rounded-full text-[26px] font-semibold cursor-pointer items-center right-1"
             @click="removeMember(item)"

src/components/room/play/AnswerStatistic.vue

@@ -62,7 +62,7 @@ const optionMapped = computed(() => {
     return {
       id: answer.id,
       label: answer.content,
-      votes: props.summaryAnswer.answers_count[answer.id],
+      votes: props.summaryAnswer.choices[answer.id],
       color: colorsHex[index].primary,
       correct: props.summaryAnswer.correct_answer_id === answer.id,
     }

src/components/room/play/PlayHostView.vue

@@ -460,6 +460,7 @@ const handleShowRightAnswer = async (time: number) => {
 const handleShowRanking = async (time: number, val: SocketLeaderboard) => {
   if (lastQuestionId.value === socketData.value?.question?.id) {
     emits('showFinalRanking', true, val)
+    socketStore.handleQuizFinished()
     return
   }
   emits('showRanking', true, val)
@@ -542,13 +543,13 @@ watch(
 
     if (newVal.event === 'answerQuestion') {
       console.log('answerQuestion', newVal.data)
-      usersAnswerCount.value = (newVal.data as SocketUserAnswerQuestion).no_player_answered
+      usersAnswerCount.value = (newVal.data as SocketUserAnswerQuestion).no_participant_answered
     }
   },
   { immediate: true },
 )
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (countdownInterval) clearInterval(countdownInterval)
 })
 </script>

src/components/room/play/Ranking.vue

@@ -67,7 +67,7 @@ const leaderboardArr = computed(() => {
           />
           <div>
             <p class="font-semibold text-lg">
-              {{ user.name }}
+              {{ user.nick_name }}
             </p>
             <div class="flex gap-1">
               <span class="font-semibold"> {{ user.total_score }} </span> point

src/components/room/play/RankingFinal.vue

@@ -100,7 +100,7 @@ onMounted(() => {
             :enter="{ opacity: 1, y: 0 }"
             :delay="delayTime.second + 500 + 200"
           >
-            {{ secondPlayer.name }}
+            {{ secondPlayer.nick_name }}
           </p>
           <div
             v-motion
@@ -149,7 +149,7 @@ onMounted(() => {
             :delay="delayTime.first + 500 + 200"
             class="font-bold text-white text-lg mt-5 mb-2"
           >
-            {{ firstPlayer.name }}
+            {{ firstPlayer.nick_name }}
           </p>
           <div
             v-motion
@@ -194,7 +194,7 @@ onMounted(() => {
             :delay="delayTime.third + 500 + 200"
             class="font-bold text-white text-lg mt-5 mb-2"
           >
-            {{ thirdPlayer.name }}
+            {{ thirdPlayer.nick_name }}
           </p>
           <div
             v-motion
@@ -237,7 +237,7 @@ onMounted(() => {
           />
           <div>
             <p class="font-semibold text-lg">
-              {{ user.name }}
+              {{ user.nick_name }}
             </p>
             <div class="flex gap-1">
               <span class="font-semibold text-primary"> {{ user.total_score }} </span> point

src/layouts/DefaultLayout.vue

@@ -7,7 +7,10 @@ import TopBar from '@/components/layout/TopBar.vue'
     <TopBar />
     <div class="w-full flex max-md:pt-16">
       <SideBar />
-      <div class="flex-1 relative overflow-y-auto bg-gray-bg-100">
+      <div
+        id="saved-position"
+        class="flex-1 relative overflow-y-auto bg-gray-bg-100"
+      >
         <slot />
       </div>
     </div>

src/pages/groups/detail/group-detail.vue

@@ -47,13 +47,10 @@ onBeforeMount(() => {
     postStore.fetchPosts(1, route.params.groupId)
   }
 })
-onBeforeUnmount(() => {
-  postStore.$reset()
-})
 </script>
 
 <template>
-  <div class="p-6 h-screen flex flex-col gap-4 relative overflow-hidden">
+  <div class="p-6 pb-0 h-full flex flex-col gap-4 relative overflow-hidden">
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
@@ -67,85 +64,92 @@ onBeforeUnmount(() => {
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
-    <Card class="flex flex-col gap-12 h-full overflow-auto">
-      <ScrollArea>
-        <div class="px-6 pt-6 flex items-center justify-between">
-          <h3
-            v-if="groupInfo.name"
-            class="text-base font-semibold"
-          >
-            {{ groupInfo.name }}
-          </h3>
+    <div class="flex h-full justify-center">
+      <Card
+        class="w-full max-w-[600px] flex border-b-0 rounded-b-none flex-col gap-12 h-full overflow-auto"
+      >
+        <ScrollArea>
+          <div class="px-6 pt-6 flex items-center justify-between">
+            <h3
+              v-if="groupInfo.name"
+              class="text-base font-semibold"
+            >
+              {{ groupInfo.name }}
+            </h3>
 
-          <h3
-            v-else
-            class="text-base font-semibold"
-          >
-            Title
-          </h3>
-          <div class="flex items-center">
-            <div class="flex">
-              <div
-                v-for="(item, index) in listMembers"
-                :key="index"
-              >
+            <h3
+              v-else
+              class="text-base font-semibold"
+            >
+              Title
+            </h3>
+            <div class="flex items-center">
+              <div class="flex">
+                <div
+                  v-for="(item, index) in listMembers"
+                  :key="index"
+                >
+                  <Avatar
+                    v-if="index < 4"
+                    :class="{ '-ml-[20px]': index > 0 }"
+                    class="border-2"
+                  >
+                    <AvatarImage
+                      v-if="item?.avatar"
+                      :src="item?.avatar"
+                    />
+                    <AvatarFallback v-if="item.name">{{
+                      item.name.charAt(0).toUpperCase()
+                    }}</AvatarFallback>
+                  </Avatar>
+                </div>
                 <Avatar
-                  v-if="index < 4"
-                  :class="{ '-ml-[20px]': index > 0 }"
-                  class="border-2"
+                  v-if="listMembers.length > 4"
+                  class="-ml-[20px]"
                 >
-                  <AvatarImage
-                    v-if="item?.avatar"
-                    :src="item?.avatar"
-                  />
-                  <AvatarFallback v-if="item.name">{{
-                    item.name.charAt(0).toUpperCase()
-                  }}</AvatarFallback>
+                  <AvatarFallback>+{{ listMembers.length - 4 }}</AvatarFallback>
                 </Avatar>
               </div>
-              <Avatar
-                v-if="listMembers.length > 4"
-                class="-ml-[20px]"
+              <div
+                class="ml-6 cursor-pointer w-8 h-8 rounded-xl flex items-center justify-center border"
               >
-                <AvatarFallback>+{{ listMembers.length - 4 }}</AvatarFallback>
-              </Avatar>
+                <span class="i-solar-menu-dots-bold rotate-90"></span>
+              </div>
             </div>
-            <div
-              class="ml-6 cursor-pointer w-8 h-8 rounded-xl flex items-center justify-center border"
+          </div>
+          <div class="w-full relative">
+            <Tabs default-value="activity">
+              <TabsList class="mb-8 ml-6 mt-6">
+                <TabsTrigger value="activity"> Activity </TabsTrigger>
+                <TabsTrigger value="shared"> Shared </TabsTrigger>
+                <TabsTrigger value="assignment"> Assignments </TabsTrigger>
+              </TabsList>
+              <TabsContent value="activity">
+                <Activity />
+              </TabsContent>
+              <TabsContent value="shared"> <Shared /> </TabsContent>
+              <TabsContent value="assignment"> <Assignments /> </TabsContent>
+            </Tabs>
+            <Button
+              class="absolute top-6 right-6 h-10 bg-primary flex items-center"
+              @click="openModal"
             >
-              <span class="i-solar-menu-dots-bold rotate-90"></span>
-            </div>
+              Invite Member
+            </Button>
+            <MInviteMember
+              v-if="isShowModal"
+              @close="closeModal"
+            />
           </div>
-        </div>
-        <div class="w-full relative">
-          <Tabs default-value="activity">
-            <TabsList class="mb-8 ml-6 mt-6">
-              <TabsTrigger value="activity"> Activity </TabsTrigger>
-              <TabsTrigger value="shared"> Shared </TabsTrigger>
-              <TabsTrigger value="assignment"> Assignments </TabsTrigger>
-            </TabsList>
-            <TabsContent value="activity">
-              <Activity />
-            </TabsContent>
-            <TabsContent value="shared"> <Shared /> </TabsContent>
-            <TabsContent value="assignment"> <Assignments /> </TabsContent>
-          </Tabs>
-          <Button
-            class="absolute top-6 right-6 h-10 bg-primary flex items-center"
-            @click="openModal"
-          >
-            Invite Member
-          </Button>
-          <MInviteMember
-            v-if="isShowModal"
-            @close="closeModal"
-          />
-        </div>
-      </ScrollArea>
-    </Card>
+        </ScrollArea>
+      </Card>
 
+      <div class="">
+        <ChatBox />
+      </div>
+    </div>
     <div class="">
-      <ChatBox />
+      <ChatThumnail />
     </div>
   </div>
 </template>