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

fix: 服务逻辑更改

packages/Chinese-chess/.eslintrc.yml

@@ -3,5 +3,7 @@ extends:
   - './.eslintrc-auto-import.json'
 rules: {
   '@typescript-eslint/no-misused-promises': 0,
-  '@typescript-eslint/restrict-plus-operands': 0
+  '@typescript-eslint/restrict-plus-operands': 0,
+  '@typescript-eslint/explicit-function-return-type': 0,
+  '@typescript-eslint/promise-function-async': 0
 }

packages/Chinese-chess/components.d.ts

@@ -7,12 +7,15 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     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']
     ChessManual: typeof import('./src/components/ChessManual.vue')['default']
     GameController: typeof import('./src/components/ChessMain/GameController.vue')['default']
     IconSeat: typeof import('./src/components/IconSeat.vue')['default']
+    LeftOutlined: typeof import('@ant-design/icons-vue')['LeftOutlined']
     Modal: typeof import('./src/components/Message/Modal.vue')['default']
     ModeSelector: typeof import('./src/components/ModeSelector.vue')['default']
     Spectator: typeof import('./src/components/ChessMain/Spectator.vue')['default']

packages/Chinese-chess/package.json

@@ -20,7 +20,10 @@
     "vue-tsc": "^1.0.9"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
     "@vitejs/plugin-vue": "^4.5.2",
+    "ant-design-vue": "^3.2.15",
+    "chinese-chess-service": "^0.0.20",
     "lodash.clonedeep": "^4.5.0",
     "socket.io-client": "^4.7.2",
     "vue": "^3.2.41"

packages/Chinese-chess/src/App.vue

@@ -1,10 +1,27 @@
 <template>
   <div class="chinese-chess">
-    <mode-selector v-if="currentMode === null" />
+    <input
+      v-if="!nickname"
+      @keydown="handleMouseDown"
+    />
+
+    <template v-else>
+      <mode-selector
+        v-if="currentMode === null"
+        v-model:mode="currentMode"
+      />
 
-    <offline-game v-else-if="currentMode === GameMode.OFFLINE" />
+      <offline-game
+        v-else-if="currentMode === GameMode.OFFLINE"
+      />
 
-    <component
+      <online-game
+        v-else
+        v-model:mode="currentMode"
+      />
+    </template>
+
+    <!-- <component
       v-else
       :is="comp"
       v-model:mode="currentMode"
@@ -14,68 +31,44 @@
       @room:chat="handleRoomChat"
       @game:ready="handleGameReady"
       @game:change="handleGameChange"
-    />
+    /> -->
   </div>
 </template>
 
 <script setup lang="ts">
-import { useSocket } from './composables/useSocket'
-import { GameMode } from './definitions'
-import Message from './components/Message'
-
-import { getMoveList } from './utils'
+import { GameMode, NICKNAME_KEY } from './definitions'
 // import { createAnimation } from './libs/Animation'
 
-// 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
+// // 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 currentMode = ref<GameMode | null>(null)
 
-const comp = computed(() => {
-  return currentMode.value === GameMode.ONLINE
-    ? currentRoom.value ? GameMain : Gamelobby
-    : ''
-})
+const nickname = ref('')
+
+// const comp = computed(() => {
+//   return currentMode.value === GameMode.ONLINE
+//     ? GameLobby
+//     : ''
+// })
 
 onMounted(() => {
-  Message.install()
-  ;(window as any).getMoveList = getMoveList
+  nickname.value = localStorage.getItem(NICKNAME_KEY) ?? ''
 })
 
-const {
-  currentUser,
-  currentUserCamp,
-  currentRoom,
-  rooms,
-  message,
-  context,
-  chessManual,
-  players,
-  isInit,
-  handleRoomJoin,
-  handleRoomLeave,
-  handleRoomChat,
-  handleRoomRequestSeat,
-  handleGameReady,
-  handleGameChange
-} = useSocket({
-  Message
-})
+const handleMouseDown = (e: KeyboardEvent): void => {
+  const target = e.target as HTMLInputElement
+  if (e.key === 'Enter' && target.value.trim()) {
+    nickname.value = target.value.trim()
 
-provide('currentMode', currentMode)
-provide('currentUser', currentUser)
-provide('currentUserCamp', currentUserCamp)
-provide('rooms', rooms)
-provide('currentRoom', currentRoom)
-provide('message', message)
-provide('context', context)
-provide('chessManual', chessManual)
-provide('players', players)
-provide('isInit', isInit)
+    localStorage.setItem(NICKNAME_KEY, nickname.value)
+  }
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -2,7 +2,7 @@
   <div
     class="camp-seat"
     :class="[
-      seatCamp
+      user?.camp
     ]"
   >
     <div class="finger-wrapper">
@@ -20,44 +20,42 @@
     <div class="nickname">
       {{ user?.nickname || '空' }}
     </div>
+
+    <div v-if="user?.isReady" class="ready-state">
+      已准备
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Camp } from '@/definitions'
-import type { User } from '@/types'
-import { ComputedRef } from 'vue'
+import { Camp, UserLike, GameContext } from 'chinese-chess-service'
+// import { ComputedRef } from 'vue'
 
 const props = defineProps<{
-  user?: User
-  isSelf?: boolean
+  user?: UserLike
   isSpectator?: boolean
 }>()
 
-const currentUserCamp = inject<ComputedRef<Camp | null>>('currentUserCamp')!
+const context = inject('context', ref<GameContext | null>(null))
 
-const seatCamp = computed(() => {
-  if (!currentUserCamp.value === null || props.isSpectator) {
-    return 'black'
-  }
-
-  return props.isSelf
-    ? currentUserCamp.value === Camp.BLACK
-      ? 'black'
-      : 'red'
-    : currentUserCamp.value === Camp.BLACK
-      ? 'red'
-      : 'black'
-})
+// const seatCamp = computed(() => {
+//   return props.isSelf
+//     ? user.camp === Camp.BLACK
+//       ? 'black'
+//       : 'red'
+//     : currentUserCamp.value === Camp.BLACK
+//       ? 'red'
+//       : 'black'
+// })
 
 const isActive = computed(() => {
   if (props.isSpectator) {
     return false
   }
 
-  return props.isSelf
-    ? currentUserCamp.value === Camp.RED
-    : currentUserCamp.value === Camp.BLACK
+  return props.user?.camp === Camp.RED
+    ? context.value?.currentCamp === Camp.RED
+    : context.value?.currentCamp === Camp.BLACK
 })
 </script>
 

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

@@ -3,30 +3,30 @@
     <h2 class="title">请选择模式</h2>
 
     <div class="modes">
-      <button
+      <a-button
         v-for="mode of modes"
         :key="mode.value"
         class="btn btn-mode"
         @click="handleChangeMode(mode.value)"
       >
         {{ mode.label }}
-      </button>
+      </a-button>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import { GameMode } from '../definitions'
 
-const currentMode = inject('currentMode', ref<GameMode | null>(null))
+const emits = defineEmits<(e: 'update:mode', value: GameMode) => void>()
 
 const modes = [
   { value: GameMode.OFFLINE, label: 'Offline' },
   { value: GameMode.ONLINE, label: 'Online' }
 ]
 
-const handleChangeMode = (mode: GameMode) => {
-  currentMode.value = mode
+const handleChangeMode = (mode: GameMode): void => {
+  emits('update:mode', mode)
 }
 </script>