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

Feat chinese chess
our-mini-games · Dec 14, 2023 · 9f9816a · 9f9816a
2 parents bf82be6 + 14282e6
commit 9f9816a
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 110 deletions.
diff --git a/packages/Chinese-chess/.env b/packages/Chinese-chess/.env
@@ -1 +1,2 @@
-VITE_APP_PATHNAME = /
+VITE_APP_PATHNAME = /
+VITE_SOCKET = ws://localhost:10086/
diff --git a/packages/Chinese-chess/.env.production b/packages/Chinese-chess/.env.production
@@ -1 +1,2 @@
-VITE_APP_PATHNAME = /mini-games/games/chinese-chess/
+VITE_APP_PATHNAME = /mini-games/games/chinese-chess/
+VITE_SOCKET = wss://chess-service.humandetail.com/
diff --git a/packages/Chinese-chess/src/App.vue b/packages/Chinese-chess/src/App.vue
@@ -26,7 +26,7 @@ import { GameMode } from './definitions'
 import Message from './components/Message'
 
 import { getMoveList } from './utils'
-import { createAnimation } from './libs/Animation'
+// import { createAnimation } from './libs/Animation'
 
 // eslint-disable-next-line @typescript-eslint/promise-function-async
 const Gamelobby = defineAsyncComponent(() => import('./pages/GameLobby.vue'))
@@ -47,65 +47,65 @@ onMounted(() => {
   Message.install()
   ;(window as any).getMoveList = getMoveList
 
-  // @todo
-  // 测试动画
-  const c = document.querySelector<HTMLCanvasElement>('#canvas')!
-  const ctx = c.getContext('2d')!
-  const font = new FontFace('STXINGKAI', 'url(STXINGKAI.ttf)')
-  // eslint-disable-next-line @typescript-eslint/promise-function-async
-  const loadPic = (pic: string): Promise<HTMLImageElement> => {
-    return new Promise(resolve => {
-      const swordPic = new Image()
-      swordPic.onload = () => {
-        resolve(swordPic)
-      }
-      swordPic.src = pic
-    })
-  }
-  font.load().then(f => {
-    (document.fonts as any).add(f)
-  }).then(async () => await document.fonts.ready.then())
-    .then(async () => {
-      const swordPic = await loadPic('sword.png')
-      const winPic = await loadPic('win.png')
-      // const { run, stop } = registerCheckAnimation(ctx, 400, 300)
-      // const { run, stop } = registerCheckMateAnimation(ctx, 400, 300, swordPic)
-      // const { run, stop } = registerWinnerAnimation(ctx, 400, 300, winPic, 0)
-      // const { run, stop } = registerWinnerAnimation(ctx, 400, 300, winPic, 1)
-      // run()
+  // // @todo
+  // // 测试动画
+  // const c = document.querySelector<HTMLCanvasElement>('#canvas')!
+  // const ctx = c.getContext('2d')!
+  // const font = new FontFace('STXINGKAI', 'url(STXINGKAI.ttf)')
+  // // eslint-disable-next-line @typescript-eslint/promise-function-async
+  // const loadPic = (pic: string): Promise<HTMLImageElement> => {
+  //   return new Promise(resolve => {
+  //     const swordPic = new Image()
+  //     swordPic.onload = () => {
+  //       resolve(swordPic)
+  //     }
+  //     swordPic.src = pic
+  //   })
+  // }
+  // font.load().then(f => {
+  //   (document.fonts as any).add(f)
+  // }).then(async () => await document.fonts.ready.then())
+  //   .then(async () => {
+  //     const swordPic = await loadPic('sword.png')
+  //     const winPic = await loadPic('win.png')
+  //     // const { run, stop } = registerCheckAnimation(ctx, 400, 300)
+  //     // const { run, stop } = registerCheckMateAnimation(ctx, 400, 300, swordPic)
+  //     // const { run, stop } = registerWinnerAnimation(ctx, 400, 300, winPic, 0)
+  //     // const { run, stop } = registerWinnerAnimation(ctx, 400, 300, winPic, 1)
+  //     // run()
 
-      const animations = createAnimation(ctx, {
-        width: 400,
-        height: 300,
-        resource: {
-          swordPic,
-          winPic
-        },
-        stopCallback: (name, camp) => {
-          console.log('stop: ', name)
-          switch (name) {
-            case 'check':
-              animations.checkMate.run()
-              break
-            case 'check-mate':
-              animations.redWin.run()
-              break
-            case 'win':
-              if (camp === 0) {
-                animations.blackWin.run()
-              } else {
-                // console.log('黑GG')
-                animations.check.run()
-              }
-              break
-            default:
-              break
-          }
-        }
-      })
+  //     const animations = createAnimation(ctx, {
+  //       width: 400,
+  //       height: 300,
+  //       resource: {
+  //         swordPic,
+  //         winPic
+  //       },
+  //       stopCallback: (name, camp) => {
+  //         console.log('stop: ', name)
+  //         switch (name) {
+  //           case 'check':
+  //             animations.checkMate.run()
+  //             break
+  //           case 'check-mate':
+  //             animations.redWin.run()
+  //             break
+  //           case 'win':
+  //             if (camp === 0) {
+  //               animations.blackWin.run()
+  //             } else {
+  //               // console.log('黑GG')
+  //               animations.check.run()
+  //             }
+  //             break
+  //           default:
+  //             break
+  //         }
+  //       }
+  //     })
 
-      animations.check.run()
-    })
+  //     animations.check.run()
+  // })
 })
 
 const {

diff --git a/packages/Chinese-chess/src/components/ChessMain/GameController.vue b/packages/Chinese-chess/src/components/ChessMain/GameController.vue
@@ -115,13 +115,15 @@ const execMove = (point: Point, piece?: ChessPiece): void => {
           localContext.value.animations.push({
             type: 'CheckMate',
             camp: localContext.value.currentCamp
-          }, {
-            type: 'Win',
-            camp: localContext.value.currentCamp
           })
 
           // 游戏结束
           localContext.value.status = GameStatus.Finished
+          // setTimeout(() => {
+          //   localContext.value!.players![0].isReady = false
+          //   localContext.value!.players![1].isReady = false
+          //   localContext.value!.status = GameStatus.Init
+          // }, 1000)
         } else {
           // 移除当前活跃棋子
           setActive(null)
@@ -208,6 +210,38 @@ function draw (): void {
 
   gameInterface.drawChessPieces(localContext.value.chessPieces)
 
+  if (localContext.value.animations.length > 0) {
+    while (localContext.value.animations.length > 0) {
+      const ani = localContext.value.animations.shift()!
+
+      switch (ani.type) {
+        case 'Check':
+          gameInterface.animations.check.run(() => {
+            setTimeout(() => {
+              gameInterface.animations.clear()
+            }, 1000)
+          })
+          break
+        case 'CheckMate':
+          gameInterface.animations.checkMate.run(() => {
+            gameInterface.animations[ani.camp === Camp.RED ? 'redWin' : 'blackWin'].run(() => {
+              setTimeout(() => {
+                gameInterface.animations.clear()
+              }, 1000)
+            })
+          })
+          break
+        case 'Win':
+          gameInterface.animations[ani.camp === Camp.RED ? 'redWin' : 'blackWin'].run(() => {
+            gameInterface.animations.clear()
+          })
+          break
+        default:
+          break
+      }
+    }
+  }
+
   if (localContext.value?.allowPoints?.length > 0 && currentUserCamp.value === localContext.value.currentCamp) {
     gameInterface.drawAllowPoints(localContext.value.allowPoints)
   }

diff --git a/packages/Chinese-chess/src/components/ChessMain/StatusWrapper.vue b/packages/Chinese-chess/src/components/ChessMain/StatusWrapper.vue
@@ -21,20 +21,6 @@
       </div>
     </div>
 
-
-    <!-- <button
-      class="btn btn-exchange"
-    >
-      交换阵营
-    </button>
-    <div
-      v-if="isPlayer"
-      class="current-camp"
-    >
-      当前执子：
-      <span v-if="context?.currentCamp === Camp.RED" class="red">红</span>
-      <span v-else class="black">黑</span>
-    </div> -->
     <button
       v-if="!!player"
       class="btn btn-ready"
@@ -62,10 +48,10 @@ const currentUser = inject('currentUser', ref<User | null>(null))
 
 const firstOptions = [{
   label: '红先',
-  value: Camp.RED,
+  value: Camp.RED
 }, {
   label: '黑先',
-  value: Camp.BLACK,
+  value: Camp.BLACK
 }]
 const first = ref(Camp.RED)
 
@@ -78,23 +64,23 @@ const player = computed(() => currentUser.value
   : null
 )
 
-const handleOptionClick = (val: Camp) => {
+const handleOptionClick = (val: Camp): void => {
   if (!isInit.value) {
     return
   }
 
   first.value = val
 }
 
-const handleBtnBackClick = () => {
+const handleBtnBackClick = (): void => {
   emits('room:leave')
 }
 
-const handleBtnReadyClick = () => {
+const handleBtnReadyClick = (): void => {
   if (!isInit) {
     return
   }
-  
+
   emits('game:ready')
 }
 </script>
@@ -141,7 +127,6 @@ const handleBtnReadyClick = () => {
         color: var(--black);
         border-top-right-radius: 64px;
       }
-
 
       &.active {
         color: #fff;
@@ -197,4 +182,4 @@ const handleBtnReadyClick = () => {
     }
   }
 }
-</style>
+</style>
diff --git a/packages/Chinese-chess/src/composables/useSocket.ts b/packages/Chinese-chess/src/composables/useSocket.ts
@@ -51,7 +51,7 @@ export const useSocket = ($: any) => {
   const isInit = computed(() => context.value?.status === GameStatus.Init)
 
   onMounted(() => {
-    socket.value = io('ws://localhost:10086')
+    socket.value = io(import.meta.env.VITE_SOCKET)
 
     socket.value.on(events.client.connect, () => {
       if (!currentUser.value) {