Merge pull request #89 from our-mini-games/feat-Chinese-chess

fix: 优化交互逻辑

packages/Chinese-chess/components.d.ts

@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
     CampSeat: typeof import('./src/components/ChessMain/CampSeat.vue')['default']
     ChatContainer: typeof import('./src/components/ChatContainer.vue')['default']
     ChessMain: typeof import('./src/components/ChessMain/index.vue')['default']

packages/Chinese-chess/package.json

@@ -23,7 +23,7 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@vitejs/plugin-vue": "^4.5.2",
     "ant-design-vue": "^3.2.15",
-    "chinese-chess-service": "^0.0.23",
+    "chinese-chess-service": "^0.0.24",
     "lodash.clonedeep": "^4.5.0",
     "socket.io-client": "^4.7.2",
     "vue": "^3.2.41"

packages/Chinese-chess/src/App.vue

@@ -1,64 +1,61 @@
 <template>
   <div class="chinese-chess">
-    <input
-      v-if="!nickname"
-      @keydown="handleMouseDown"
-    />
-
-    <template v-else>
-      <mode-selector
-        v-if="currentMode === null"
-        v-model:mode="currentMode"
+    <a-spin
+      :spinning="loading"
+      tip="资源加载中..."
+    >
+      <input
+        v-if="!nickname"
+        placeholder="请输入您的昵称，按“回车”提交"
+        @keydown="handleMouseDown"
       />
 
-      <offline-game
-        v-else-if="currentMode === GameMode.OFFLINE"
-      />
+      <template v-else>
+        <mode-selector
+          v-if="currentMode === null"
+          v-model:mode="currentMode"
+        />
 
-      <online-game
-        v-else
-        v-model:mode="currentMode"
-      />
-    </template>
+        <offline-game
+          v-else-if="currentMode === GameMode.OFFLINE"
+          v-model:mode="currentMode"
+        />
 
-    <!-- <component
-      v-else
-      :is="comp"
-      v-model:mode="currentMode"
-      @room:join="handleRoomJoin"
-      @room:leave="handleRoomLeave"
-      @room:request-seat="handleRoomRequestSeat"
-      @room:chat="handleRoomChat"
-      @game:ready="handleGameReady"
-      @game:change="handleGameChange"
-    /> -->
+        <online-game
+          v-else
+          v-model:mode="currentMode"
+        />
+      </template>
+    </a-spin>
   </div>
 </template>
 
 <script setup lang="ts">
 import { GameMode, NICKNAME_KEY } from './definitions'
-// import { createAnimation } from './libs/Animation'
+import { loadResources } from './libs/Resource'
+import OnlineGame from './pages/OnlineGame/index.vue'
 
-// // eslint-disable-next-line @typescript-eslint/promise-function-async
-// const GameLobby = defineAsyncComponent(() => import('./pages/GameLobby.vue'))
-// // // eslint-disable-next-line @typescript-eslint/promise-function-async
-// // const GameMain = defineAsyncComponent(() => import('./pages/GameMain.vue'))
-// // eslint-disable-next-line @typescript-eslint/promise-function-async
 const OfflineGame = defineAsyncComponent(() => import('./pages/OfflineGame.vue'))
-const OnlineGame = defineAsyncComponent(() => import('./pages/OnlineGame/index.vue'))
+// const OnlineGame = defineAsyncComponent(() => import('./pages/OnlineGame/index.vue'))
 
 const currentMode = ref<GameMode | null>(null)
 
 const nickname = ref('')
+const resources = ref<any>({})
+const loading = ref(false)
 
-// const comp = computed(() => {
-//   return currentMode.value === GameMode.ONLINE
-//     ? GameLobby
-//     : ''
-// })
-
-onMounted(() => {
+onMounted(async () => {
   nickname.value = localStorage.getItem(NICKNAME_KEY) ?? ''
+
+  loading.value = true
+  try {
+    resources.value = await loadResources()
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error(err)
+  } finally {
+    loading.value = false
+  }
 })
 
 const handleMouseDown = (e: KeyboardEvent): void => {
@@ -69,7 +66,17 @@ const handleMouseDown = (e: KeyboardEvent): void => {
     localStorage.setItem(NICKNAME_KEY, nickname.value)
   }
 }
+
+provide('nickname', () => nickname.value)
 </script>
 
 <style lang="scss" scoped>
+.chinese-chess {
+  width: 100vw;
+  height: 100vh;
+
+  .ant-spin-nested-loading {
+    height: 100%;
+  }
+}
 </style>

packages/Chinese-chess/src/components/ChessMain/CampSeat.vue

@@ -18,17 +18,17 @@
     />
 
     <div class="nickname">
-      {{ user?.nickname || '空' }}
+      {{ user?.nickname || '空' }}{{ user?.offline ? '(掉线了~)' : '' }}
     </div>
 
-    <div v-if="user?.isReady" class="ready-state">
+    <div v-if="context?.status === GameStatus.Init && user?.isReady" class="ready-state">
       已准备
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Camp, UserLike, GameContext } from 'chinese-chess-service'
+import { Camp, UserLike, GameContext, GameStatus } from 'chinese-chess-service'
 // import { ComputedRef } from 'vue'
 
 const props = defineProps<{

packages/Chinese-chess/src/definitions/events.ts

@@ -17,7 +17,8 @@ export default {
     info: 'room:info',
     seatRequest: 'room:seat:request',
     seatResponse: 'room:seat:response',
-    chat: 'room:chat'
+    chat: 'room:chat',
+    offline: 'room:offline'
   },
   error: {
     roomMax: 'error:room:max',

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

@@ -57,7 +57,6 @@
 import events from '@/definitions/events'
 import { Room } from '@/types'
 import { createGameInterface, GameStatus, Camp, type GameContext, type UserLike } from 'chinese-chess-service'
-import { loadResources } from '@/libs/Resource'
 import { Socket } from 'socket.io-client'
 import { message } from 'ant-design-vue'
 
@@ -69,6 +68,7 @@ const socket = inject('socket', ref<Socket | null>(null))
 const context = inject('context', ref<GameContext | null>(null))
 const currentRoom = inject('currentRoom', ref<Room | null>())
 const currentUser = inject('currentUser', ref<UserLike | null>())
+const resources = inject('resources', ref<any>({}))
 
 const firstCamp = ref(Camp.RED) // 玩家推荐先手
 
@@ -78,8 +78,7 @@ const gameInterface = ref<ReturnType<typeof createGameInterface> | null>(null)
 
 onMounted(async () => {
   if (gameMainRef.value) {
-    const resource = await loadResources()
-    gameInterface.value = createGameInterface(resource)
+    gameInterface.value = createGameInterface(resources)
     gameInterface.value.mount(gameMainRef.value)
 
     if (currentUserCamp.value === Camp.BLACK) {
@@ -164,8 +163,12 @@ const handleReadyBtnClick = () => {
 watch(context, () => {
   if (gameInterface.value && context.value) {
     handleContextChange(context.value, gameInterface.value)
+  } else if (!gameInterface.value) {
+    nextTick(() => {
+      handleContextChange(context.value!, gameInterface.value!)
+    })
   }
-})
+}, { immediate: true })
 
 const handleContextChange = (context: GameContext, gameInterface: ReturnType<typeof createGameInterface>) => {
   if (context.status === GameStatus.Playing || context.status === GameStatus.Finished) {

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

@@ -19,12 +19,14 @@ import { Socket } from 'socket.io-client'
 import events from '@/definitions/events'
 import { USER_INFO_KEY } from '@/definitions'
 import { Room, User } from '@/types'
-import { Modal } from 'ant-design-vue'
+import { Modal, message } from 'ant-design-vue'
+import GameLobby from './GameLobby.vue'
+import GameMain from './GameMain.vue'
 
 const emits = defineEmits<(e: 'update:mode', value: null) => void>()
 
-const GameLobby = defineAsyncComponent(() => import('./GameLobby.vue'))
-const GameMain = defineAsyncComponent(() => import('./GameMain.vue'))
+// const GameLobby = defineAsyncComponent(() => import('./GameLobby.vue'))
+// const GameMain = defineAsyncComponent(() => import('./GameMain.vue'))
 
 const socket = useSocket()
 
@@ -77,7 +79,9 @@ const socketHandler = (socket: Socket) => {
 
     // 用户加入房间
     socket.on(events.room.join, (user, data) => {
-      currentUser.value = user
+      if (!currentUser.value || currentUser.value.id === user.id) {
+        currentUser.value = user
+      }
       localStorage.setItem(USER_INFO_KEY, JSON.stringify(user))
 
       const room = rooms.value.find(room => room.id === user.roomId)
@@ -88,18 +92,29 @@ const socketHandler = (socket: Socket) => {
       context.value = data
     })
     // 用户离开房间
-    socket.on(events.room.leave, user => {
-      currentUser.value = user
-      localStorage.setItem(USER_INFO_KEY, JSON.stringify(user))
+    socket.on(events.room.leave, (user, data) => {
+      if (currentUser.value?.id === user.id) {
+        currentUser.value = user
+
+        localStorage.setItem(USER_INFO_KEY, JSON.stringify(user))
 
-      currentRoom.value = null
-      context.value = null
+        currentRoom.value = null
+        context.value = null
+      } else {
+        context.value = data
+      }
     })
 
     socket.on(events.room.info, room => {
       currentRoom.value = room
     })
 
+    socket.on(events.room.offline, (user, data) => {
+      message.info(`用户${user.nickname + ''}掉线了`)
+
+      context.value = data
+    })
+
     socket.on(events.room.context, data => {
       context.value = data
     })
@@ -147,6 +162,7 @@ const socketHandler = (socket: Socket) => {
 
   socket.on(events.client.disconnect, (userInfo: User) => {
     console.log('88')
+    message.error('服务器连接中断，88')
   })
 }