feat: game over show score board

src/components/FinalScoreBoard.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed } from 'vue'
+import { useGameStore } from '@/stores/game'
+import imgSrcs from '@/models/Avatars.js'
+const gameStore = useGameStore()
+
+const players = computed(() =>
+  gameStore.gameStatus.players.map((player, i) => ({
+    name: player.player_id,
+    score: player.score,
+    imgSrc: imgSrcs[i],
+  })).sort((a, b) => b.score - a.score)
+)
+const winner = computed(() => players.value[0].name)
+</script>
+
+<template>
+  <div class="m-4">
+    <h5 class="text-white font-bold text-center text-[64px] mb-3">
+      遊戲結束, {{ winner }}獲勝!
+    </h5>
+    <div class="bg-black py-3 px-5 text-white bg-opacity-60 rounded-3xl">
+      <div
+        v-for="player of players"
+        :key="player.name"
+        class="flex items-center w-[700px] p-2 border-b border-grey70"
+      >
+        <div class="w-[60px] h-[60px]">
+          <img :src="player.imgSrc">
+        </div>
+        <h6 class="pl-3 flex items-center text-[28px] ">
+          <div class="truncate w-[240px]">
+            {{ player.name }}
+          </div>
+          : {{ player.score }}分
+        </h6>
+      </div>
+    </div>
+    <div class="flex justify-evenly pt-4">
+      <img src="/src/assets/images/scoreBoard/play-again.svg"> 
+      <img src="/src/assets/images/scoreBoard/exit.svg"> 
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.backgroundBlur {
+  backdrop-filter: blur(2px);
+}
+</style>

src/components/MainLayout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import LadderBoard from '@/components/LadderBoard.vue'
 import ScoreBoard from '@/components/ScoreBoard.vue'
+import FinalScoreBoard from '@/components/FinalScoreBoard.vue'
 import WarehouseUnknown from '@/components/WarehouseUnknown.vue'
 import WarehouseSecret from '@/components/WarehouseSecret.vue'
 import TableWithPlayer from '@/components/TableWithPlayer.vue'
@@ -38,7 +39,7 @@ const playerIds = [ 'Leave3310', 'Momo', 'Yock', 'Tux', 'Teds' ]
 const showBook = ref(false)
 const showHint1 = ref(false)
 const showHintStart = ref(false)
-
+const gameOver = computed(() => gameStore.gameOver)
 const handleConnect = () => {
   socket.value = io(import.meta.env.VITE_SOCKET_IO_URL, {
     transports: [ 'websocket', 'polling' ],
@@ -228,6 +229,12 @@ const handleUserConnect = () => {
       >
         <SpellMagicBoard></SpellMagicBoard>
       </div>
+      <div
+        v-if="gameOver"
+        class="bg-grey50 z-50 top-1/4 left-0 w-full backgroundBlur absolute flex justify-center items-center"
+      >
+        <FinalScoreBoard></FinalScoreBoard>
+      </div>
     </div>
     <div>
       <div

src/stores/game.js

@@ -73,6 +73,9 @@ export const useGameStore = defineStore('useGameStore', () => {
       (player) => player.player_id === playingId.value
     )
   })
+  const gameOver = computed(() => {
+    return gameStatus.value.players.any((player) => player.score >= 8)
+  })
   const setGameStatus = (status) => {
     gameStatus.value = status
   }
@@ -99,6 +102,7 @@ export const useGameStore = defineStore('useGameStore', () => {
 
   return {
     gameStatus,
+    gameOver,
     playingId,
     playingIndex,
     setGameStatus,