fix: ui更新

packages/Chinese-chess/src/components/ModeSelector.vue

@@ -22,8 +22,8 @@ import { GameMode } from '../definitions'
 const emits = defineEmits<(e: 'update:mode', value: GameMode) => void>()
 
 const modes = [
-  { value: GameMode.OFFLINE, label: 'Offline' },
-  { value: GameMode.ONLINE, label: 'Online' }
+  { value: GameMode.OFFLINE, label: '单机游戏' },
+  { value: GameMode.ONLINE, label: '在线对战' }
 ]
 
 const handleChangeMode = (mode: GameMode): void => {
@@ -44,10 +44,25 @@ const handleChangeMode = (mode: GameMode): void => {
 
   .modes {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
     padding: 16px 0;
+
+    .btn-mode {
+      width: 240px;
+      height: 64px;
+      padding-left: 0;
+      border: 0;
+      font-size: 24px;
+      box-shadow: unset;
+      background: url(@/assets/imgs/btn1.png) no-repeat center center / 100% 100%;
+
+      &:hover {
+        color: var(--red);
+      }
+    }
   }
 }
 </style>

packages/Chinese-chess/src/pages/OnlineGame/GameLobby.vue

@@ -26,18 +26,24 @@
           v-for="room of rooms"
           :key="room.id"
           class="room"
+          ref="roomsRef"
+          :data-id="room.id"
           @click="handleRoomJoin(room)"
         >
           <h3 class="title">{{ room.name }} 房</h3>
           <div class="number">({{ room.users.length }}/{{ room.limit }})</div>
-          <div class="status">
-            {{
-              room.status === GameStatus.Finished
-                ? '游戏结束'
-                : room.status === GameStatus.Playing
-                  ? '游戏中'
-                  : '空闲'
-            }}
+          <div class="container">
+            <icon-seat
+              class="icon icon-seat"
+              :style="{ fill: colorMapper.red }"
+              :empty="room.users.length < 1"
+            />
+            <div class="wrapper"></div>
+            <icon-seat
+              class="icon icon-seat"
+              :style="{ fill: colorMapper.black }"
+              :empty="room.users.length < 2"
+            />
           </div>
         </li>
       </ul>
@@ -47,7 +53,7 @@
 
 <script setup lang="ts">
 import { Room } from '@/types'
-import { GameStatus } from 'chinese-chess-service'
+import { GameStatus, createGameInterface, ChessPiece, colorMapper } from 'chinese-chess-service'
 import { Empty } from 'ant-design-vue'
 
 defineProps<{
@@ -57,6 +63,50 @@ defineProps<{
 const emits = defineEmits<(e: 'update:mode', value: null) => void>()
 
 const rooms = inject('rooms', ref<Room[]>([]))
+const resources = inject('resources', ref<any>({}))
+const giList = ref(new Map<Room['id'], ReturnType<typeof createGameInterface>>())
+const roomsRef = ref<HTMLElement[]>([])
+
+watch(rooms, async () => {
+  if (rooms.value.length > 0 && giList.value.size === 0) {
+    rooms.value.forEach(({ id }) => {
+      giList.value.set(id, createGameInterface(resources.value))
+    })
+
+    await nextTick()
+
+    giList.value.forEach((gi, key) => {
+      const el = roomsRef.value.find(item => item.getAttribute('data-id') === (key + ''))?.querySelector('.wrapper') as HTMLElement
+
+      if (el) {
+        gi.mount(el)
+      }
+    })
+  }
+
+  await nextTick()
+
+  rooms.value.forEach(item => {
+    const gi = giList.value.get(item.id)
+    if (!gi) {
+      return
+    }
+    switch (item.status) {
+      case GameStatus.Init:
+        gi.clearAll()
+        break
+      case GameStatus.Playing:
+        gi.clearAll()
+        gi.drawChessPieces([new ChessPiece(11), new ChessPiece(21)])
+        break
+      case GameStatus.Finished:
+        gi.clearAll()
+        break
+      default:
+        break
+    }
+  })
+})
 
 const handleBack = () => {
   emits('update:mode', null)
@@ -95,17 +145,30 @@ const handleBack = () => {
     justify-content: center;
     align-items: center;
     gap: 8px;
-    width: 108px;
-    height: 108px;
+    // width: 108px;
+    // height: 108px;
     border-radius: 8px;
-    background-color: #f1f1f1;
     box-shadow: 0 0 1px var(--dark);
     cursor: pointer;
 
     .title {
       margin: 0;
     }
 
+    .container {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 0 16px;
+
+      .wrapper {
+        position: relative;
+        width: 120px;
+        height: 120px;
+        transform: rotate(90deg);
+      }
+    }
+
     &:hover {
       box-shadow: 0 0 8px var(--red);
     }

packages/Chinese-chess/src/pages/OnlineGame/GameMain.vue

@@ -61,6 +61,7 @@
         <template v-if="[GameStatus.Init, GameStatus.Finished].includes(gameStatus)">
           <a-button
             :type="selfPlayer?.isReady ? 'primary' : 'default'"
+            class="btn"
             @click="handleReadyBtnClick"
           >
             {{ selfPlayer?.isReady ? '取消准备' : '准备' }}
@@ -76,6 +77,7 @@
           />
 
           <a-button
+            class="btn"
             type="warning"
             @click="handleSwitchCamp"
           >
@@ -85,6 +87,7 @@
 
         <template v-else>
           <a-button
+            class="btn"
             type="warning"
             :disabled="context?.currentCamp === currentUserCamp"
             @click="handleRequestUndo"
@@ -93,6 +96,7 @@
           </a-button>
 
           <a-button
+            class="btn"
             type="warning"
             @click="handleGiveUp"
           >
@@ -145,7 +149,7 @@ const manual = computed(() => context.value?.manual ?? [])
 
 onMounted(async () => {
   if (gameMainRef.value) {
-    gameInterface.value = createGameInterface(resources)
+    gameInterface.value = createGameInterface(resources.value)
     gameInterface.value.mount(gameMainRef.value as Element)
 
     if (currentUserCamp.value === Camp.BLACK) {
@@ -247,7 +251,7 @@ watch(resources, () => {
       handleContextChange(context.value, gameInterface.value as ReturnType<typeof createGameInterface>)
     }
   }
-})
+}, { immediate: true })
 
 const handleContextChange = (context: GameContext, gameInterface: ReturnType<typeof createGameInterface>) => {
   if (context.status === GameStatus.Playing || context.status === GameStatus.Finished) {
@@ -442,6 +446,54 @@ provide('manual', manual)
       display: flex;
       justify-content: space-between;
       padding: 8px 16px;
+
+      .btn {
+        width: 120px;
+        height: 32px;
+        padding-left: 0;
+        border: 0;
+        color: #fff;
+        font-size: 20px;
+        box-shadow: unset;
+        background: url(@/assets/imgs/btn1.png) no-repeat center center / 120px 32px;
+
+        &:hover {
+          color: var(--red);
+        }
+      }
+
+      :deep(.ant-radio-group) {
+        .ant-radio-wrapper {
+          position: relative;
+          width: 32px;
+          height: 32px;
+          background: url(@/assets/imgs/btn2.png) no-repeat center center / 100% 100%;
+
+          .ant-radio {
+            opacity: 0;
+          }
+
+          > span:last-of-type {
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            line-height: 32px;
+            padding: 0;
+            font-size: 12px;
+            color: #fff;
+          }
+
+          &.ant-radio-wrapper-checked {
+            > span:last-of-type {
+              color: var(--red);
+            }
+          }
+        }
+      }
     }
   }