Merge pull request #75 from Game-as-a-Service/feat/layout-book

- 修改 ESLint: vue/html-self-closing (ref: https://eslint.vuejs.org/rules/html-self-closing#options)
- 新增 showOpenedBook 控制 OpenedBook 顯示狀態
- 調整魔法圓圈動畫

Author: noracami

.eslintrc.cjs

@@ -130,12 +130,12 @@ module.exports = {
     'vue/html-self-closing': [
       'error', {
         html: {
-          void: 'never',
+          void: 'always',
           normal: 'never',
-          component: 'never'
+          component: 'always'
         },
-        svg: 'never',
-        math: 'never'
+        svg: 'always',
+        math: 'always'
       }
     ],
     'vue/component-name-in-template-casing': [ 'error', 'PascalCase', {

src/App.vue

@@ -9,7 +9,7 @@
       :hint-text="'遊戲開始'"
       :change-color="'bg-skin'"
     ></HintBar> -->
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 

src/assets/images/book/CloseIcon.vue

@@ -8,20 +8,20 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0ZM30 4C15.6406 4 4 15.6406 4 30C4 44.3594 15.6406 56 30 56C44.3594 56 56 44.3594 56 30C56 15.6406 44.3594 4 30 4Z"
-    ></path>
+    />
     <rect
       x="11.6925"
       y="49.9668"
       width="4"
       height="54.0984"
       transform="rotate(-134.36 11.6925 49.9668)"
-    ></rect>
+    />
     <rect
       x="49.9667"
       y="48.3074"
       width="4"
       height="54.0984"
       transform="rotate(135.64 49.9667 48.3074)"
-    ></rect>
+    />
   </svg>
 </template>

src/components/FinalScoreBoard.vue

@@ -27,7 +27,7 @@ const emits = defineEmits([ 'exit' ])
         class="flex items-center w-[700px] p-2 border-b border-grey70"
       >
         <div class="w-[60px] h-[60px]">
-          <img :src="player.imgSrc">
+          <img :src="player.imgSrc" />
         </div>
         <h6 class="pl-3 flex items-center text-[28px] ">
           <div class="truncate w-[240px]">
@@ -41,7 +41,7 @@ const emits = defineEmits([ 'exit' ])
       class="flex justify-evenly pt-4 cursor-pointer"
       @click="emits('exit')"
     >
-      <img src="/src/assets/images/sundries/door-leave.svg"> 
+      <img src="/src/assets/images/sundries/door-leave.svg" /> 
     </div>
   </div>
 </template>

src/components/HelloWorld.vue

@@ -8,7 +8,7 @@
         src="/vite.svg"
         class="logo"
         alt="Vite logo"
-      >
+      />
     </a>
     <a
       href="https://vuejs.org/"
@@ -18,7 +18,7 @@
         src="@/assets/vue.svg"
         class="logo vue"
         alt="Vue logo"
-      >
+      />
     </a>
   </div>
 </template>

src/components/LadderBoard.vue

@@ -21,6 +21,6 @@ const usedMagic = computed(() => {
       :key="number"
       :magic-number="number"
       :used="usedMagic[number - 1]"
-    ></LadderStep>
+    />
   </div>
 </template>

src/components/LadderStep.vue

@@ -21,7 +21,7 @@ const getMagicStoneUrl = (magicStone) => magicStones[`magic${ magicStone }`]
       <img
         class="opacity-50"
         :src="getMagicStoneUrl(magicNumber)"
-      >
+      />
     </div>
     <div
       v-for="number in magicNumber"
@@ -31,7 +31,7 @@ const getMagicStoneUrl = (magicStone) => magicStones[`magic${ magicStone }`]
       <img
         v-if="used >= number"
         :src="getMagicStoneUrl(magicNumber)"
-      >
+      />
     </div>
     <div></div>
   </div>

src/components/LeaveBtn.vue

@@ -1,7 +1,7 @@
 <template>
   <div class=" bg-white20 w-[200px] h-[76px] flex items-center place-content-center gap-2 ">
     <div class=" w-[60px] h-[60px]  bg-contain flex items-center mix-blend-soft-light ">
-      <img src="/src/assets/images/sundries/door.png"> 
+      <img src="/src/assets/images/sundries/door.png" /> 
     </div>
     <p class="text-center inline text-grey50 text-2xl font-large items-center"> 
       離開遊戲

src/components/MainLayout.vue

@@ -8,6 +8,7 @@ import BroadcastArea from '@/components/BroadcastArea.vue'
 import OpponentTable from '@/components/OpponentTable.vue'
 import MyState from '@/components/MyState.vue'
 import OpenedBook from './OpenedBook.vue'
+import SmallBook from './SmallBook.vue'
 import SpellMagicBoard from './SpellMagicBoard.vue'
 import SecretSelectTable from './SecretSelectTable.vue'
 import HintBar from '@/components/common/HintBar.vue'
@@ -16,7 +17,8 @@ import io from 'socket.io-client'
 import { useGameStore } from '@/stores/game'
 import PlayDice from '@/components/PlayDice.vue'
 import {
-  ref, computed, watch, onMounted
+  ref, computed, watch, onMounted,
+  provide
 } from 'vue'
 import axios from 'axios'
 import {
@@ -142,6 +144,8 @@ const handleJoinGame = async () => {
     gameRoomID,
   })
 }
+const showOpenedBook = ref(false)
+provide('showOpenedBook', showOpenedBook)
 watch(
   () => gameStore.gameStatus.current_player,
   (newVal, oldVal) => {
@@ -224,70 +228,74 @@ const handleExit = () => {
       class="bg-no-repeat bg-center bg-cover p-8 relative w-full h-full"
     >
       <div class="flex gap-11 top-8 left-8 absolute">
-        <PlayDice v-if="gameStore.showDice"></PlayDice>
+        <PlayDice v-if="gameStore.showDice" />
 
-        <ScoreBoard></ScoreBoard>
+        <div class="flex gap-4">
+          <ScoreBoard />
+          <SmallBook /> 
+        </div>
       </div>
       <div class="absolute top-8 right-8">
       </div>
       <div class="absolute bottom-8 left-8">
-        <LadderBoard></LadderBoard>
+        <LadderBoard />
       </div>
       <div class="absolute left-[40%] top-1/2 translate-y-[-50%] translate-x-[-50%] z-40 max-[1400px]:scale-75">
-        <TableWithPlayer></TableWithPlayer>
-        <OpenedBook></OpenedBook>
+        <TableWithPlayer />
       </div>
+      <OpenedBook />
+      <!-- <div class="absolute left-[40%] top-8 translate-y-[-50%] translate-x-[-50%] z-40 max-[1400px]:scale-75">
+        <OpenedBook></OpenedBook>
+      </div> -->
+      
       <!-- 右側排版 -->
       <div class="absolute right-0 top-0 p-4 h-[100dvh]">
         <div class="h-full flex flex-col justify-between items-end"> 
           <div class="w-auto flex flex-row ">
-            <OpponentTable></OpponentTable>
+            <OpponentTable />
           </div>
           <div class="flex gap-8  max-w-[40vw] flex-row justify-end mb-4 ">
-            <WarehouseMix :class="{ 'show-warehouse': showWarehouse }"></WarehouseMix>
-            <MyState></MyState>
+            <WarehouseMix :class="{ 'show-warehouse': showWarehouse }" />
+            <MyState />
           </div>
-          <BroadcastArea></BroadcastArea>
+          <BroadcastArea />
         </div>
       </div>
 
       <div v-if="gameStore.showVideo">
-        <PlayVideo>
-        </PlayVideo>
+        <PlayVideo />
       </div>
       <div
         v-if="gameStore.showSecretTable"
         class="flex justify-center items-center bg-grey50 top-0 z-50 left-0 w-full h-full backgroundBlur absolute"
       >
-        <SecretSelectTable></SecretSelectTable>
+        <SecretSelectTable />
       </div>
 
       <HintBar
         v-if="showHint1"
         :hint-text="'輪到你了！ 請選擇魔法！'"
         :change-color="'bg-purple text-white'"
         class="z-50"
-      >
-      </HintBar>
+      />
       <HintBar
         v-if="showHintStart"
         :hint-text="'按一下，成為魔法師吧！'"
         :change-color="'bg-purple text-white'"
         class="z-50 cursor-pointer"
         @click="clickEvent"
-      >
-      </HintBar>
+      />
       <div
         v-if="myTurn && !gameStore.spellFailed && !gameOver"  
         class="bg-grey50 top-0 left-0 w-full h-full backgroundBlur absolute"
       >
-        <SpellMagicBoard></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 @exit="handleExit"></FinalScoreBoard>
+        <FinalScoreBoard @exit="handleExit" />
       </div>
     </div>
     <!-- <div>

src/components/MyState.vue

@@ -59,7 +59,7 @@ const secretStones = computed(() => {
         <img
           class="stone-img"
           :src="getMagicStoneUrl(stone)"
-        >  
+        />  
       </div>
     </div>