象棋代码合并

our-mini-games · Jan 15, 2024 · 5d6dd8f · 5d6dd8f
2 parents 6d59ae6 + a9e0ded
commit 5d6dd8f
Show file tree

Hide file tree

Showing 21 changed files with 1,048 additions and 327 deletions.
diff --git a/README.md b/README.md
@@ -19,4 +19,4 @@ https://our-mini-games.github.io/mini-games/games/
 
 - [x] 蜘蛛纸牌
 
-- [ ] 中国象棋
+- [x] 中国象棋
diff --git a/packages/Chinese-chess/.eslintrc-auto-import.json b/packages/Chinese-chess/.eslintrc-auto-import.json
@@ -51,6 +51,18 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true
+    "watchSyncEffect": true,
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "toValue": true
   }
-}
+}
diff --git a/packages/Chinese-chess/auto-imports.d.ts b/packages/Chinese-chess/auto-imports.d.ts
@@ -1,4 +1,8 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -43,6 +47,7 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -54,3 +59,9 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
diff --git a/packages/Chinese-chess/components.d.ts b/packages/Chinese-chess/components.d.ts
@@ -9,6 +9,9 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
@@ -17,11 +20,15 @@ declare module '@vue/runtime-core' {
     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']
+    CloseOutlined: typeof import('@ant-design/icons-vue')['CloseOutlined']
+    Drawer: typeof import('./src/components/Drawer.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']
+    MessageOutlined: typeof import('@ant-design/icons-vue')['MessageOutlined']
     Modal: typeof import('./src/components/Message/Modal.vue')['default']
     ModeSelector: typeof import('./src/components/ModeSelector.vue')['default']
+    ProfileOutlined: typeof import('@ant-design/icons-vue')['ProfileOutlined']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SoundOutlined: typeof import('@ant-design/icons-vue')['SoundOutlined']

diff --git a/packages/Chinese-chess/index.html b/packages/Chinese-chess/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/jpg" href="/mini-games/Chinese-chess.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chinese chess</title>
+    <title>中国象棋</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/Chinese-chess/package.json b/packages/Chinese-chess/package.json
@@ -13,17 +13,17 @@
     "@types/lodash.clonedeep": "^4.5.9",
     "sass": "^1.56.0",
     "typescript": "^5.0.2",
-    "unplugin-auto-import": "^0.11.4",
-    "unplugin-vue-components": "^0.22.9",
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.5",
     "vitest": "^0.24.3",
     "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.25",
+    "ant-design-vue": "4.1.0",
+    "chinese-chess-service": "^0.0.29",
     "lodash.clonedeep": "^4.5.0",
     "socket.io-client": "^4.7.2",
     "vue": "^3.2.41"

diff --git a/packages/Chinese-chess/src/App.vue b/packages/Chinese-chess/src/App.vue
@@ -1,37 +1,45 @@
 <template>
-  <div class="chinese-chess">
-    <a-button v-if="loading" @click="loading = false">放弃加载资源</a-button>
-    <a-spin
-      :spinning="loading"
-      tip="资源加载中..."
-    >
-      <input
-        v-if="!nickname"
-        placeholder="请输入您的昵称，按“回车”提交"
-        @keydown="handleMouseDown"
-      />
-
-      <template v-else>
-        <mode-selector
-          v-if="currentMode === null"
-          v-model:mode="currentMode"
+  <a-config-provider
+    :theme="{
+      algorithm: theme.defaultAlgorithm
+    }"
+  >
+    <div class="chinese-chess">
+      <a-button v-if="loading" @click="loading = false">放弃加载资源</a-button>
+      <a-spin
+        :spinning="loading"
+        tip="资源加载中..."
+      >
+        <a-input
+          v-if="!nickname"
+          placeholder="请输入您的昵称，按“回车”提交"
+          style="position: fixed; left: 50%; top: 50%; width: 320px; transform: translate(-50%, -50%);"
+          @keydown="handleMouseDown"
         />
 
-        <offline-game
-          v-else-if="currentMode === GameMode.OFFLINE"
-          v-model:mode="currentMode"
-        />
+        <template v-else>
+          <mode-selector
+            v-if="currentMode === null"
+            v-model:mode="currentMode"
+          />
 
-        <online-game
-          v-else
-          v-model:mode="currentMode"
-        />
-      </template>
-    </a-spin>
-  </div>
+          <offline-game
+            v-else-if="currentMode === GameMode.OFFLINE"
+            v-model:mode="currentMode"
+          />
+
+          <online-game
+            v-else
+            v-model:mode="currentMode"
+          />
+        </template>
+      </a-spin>
+    </div>
+  </a-config-provider>
 </template>
 
 <script setup lang="ts">
+import { theme } from 'ant-design-vue'
 import { GameMode, NICKNAME_KEY } from './definitions'
 import { loadResources } from './libs/Resource'
 import OnlineGame from './pages/OnlineGame/index.vue'
@@ -68,14 +76,19 @@ const handleMouseDown = (e: KeyboardEvent): void => {
   }
 }
 
-provide('nickname', () => nickname.value)
+provide('resources', resources)
+provide('nickname', nickname)
 </script>
 
 <style lang="scss" scoped>
 .chinese-chess {
   width: 100vw;
   height: 100vh;
 
+  @media screen and (max-width: 640px) {
+    height: calc(100vh - 98px); // 预留点空间，底部看不到啊兄弟
+  }
+
   .ant-spin-nested-loading {
     height: 100%;
   }

diff --git a/packages/Chinese-chess/src/assets/style.scss b/packages/Chinese-chess/src/assets/style.scss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: PieceFont;
-  src: url(fzlsft.ttf);
+  src: url(/resources/FZLSFT.ttf);
   font-weight: bold;
   font-style: normal;
 }
@@ -35,9 +35,11 @@ ol {
 body {
   font-size: 16px;
   line-height: 1.4;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   color: var(--black);
-  // background-color: var(--light);
+}
+
+* {
+  font-family: PieceFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
 }
 
 :where(.btn) {

diff --git a/packages/Chinese-chess/src/components/Drawer.vue b/packages/Chinese-chess/src/components/Drawer.vue
@@ -0,0 +1,76 @@
+<template>
+  <Teleport to="body">
+    <div class="drawer">
+      <div v-if="open" class="drawer-mask" @click="close"></div>
+      <div v-if="open" class="drawer-container" :style="{ width }">
+        <h2 class="title">
+          {{ title }}
+
+          <close-outlined @click="close" />
+        </h2>
+        <div class="drawer-body">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  open: boolean
+  title?: string
+  width?: string | number
+}>(), {
+  width: '40%'
+})
+
+const emits = defineEmits<(e: 'update:open', value: boolean) => void>()
+
+const close = () => {
+  emits('update:open', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer {
+  .drawer-mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background-color: rgba($color: #000000, $alpha: 0.5);
+  }
+
+  .drawer-container {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+    height: 100%;
+    background-color: #fff;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px;
+      height: 44px;
+      margin: 0;
+      border-bottom: 1px solid #404040;
+    }
+
+    .drawer-body {
+      flex: 1;
+      min-height: 0;
+      padding: 16px;
+      overflow-y: auto;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/packages/Chinese-chess/src/components/ModeSelector.vue b/packages/Chinese-chess/src/components/ModeSelector.vue
@@ -42,11 +42,11 @@ const handleChangeMode = (mode: GameMode): void => {
   }
 
   .modes {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
     padding: 16px 0;
-
-    .btn {
-      margin: 0 8px;
-    }
   }
 }
 </style>
diff --git a/packages/Chinese-chess/src/libs/GameInterface.ts b/packages/Chinese-chess/src/libs/GameInterface.ts
@@ -553,18 +553,18 @@ export const createGameInterface = (baseSize = 128): GameInterface => {
     oInterface.style.width = checkerBoardCanvas.style.width
     oInterface.style.height = checkerBoardCanvas.style.height
 
-    // const pieceFont = new FontFace('PieceFont', 'url(fzlsft.ttf)')
-    // const aniFont = new FontFace('STXINGKAI', 'url(STXINGKAI.ttf)')
-
-    // const [f1, f2, p1, p2] = await Promise.all([
-    //   pieceFont.load(),
-    //   aniFont.load(),
-    //   loadPic('sword.png'),
-    //   loadPic('win.png')
-    // ])
-    // ;(document.fonts as any).add(f1)
-    // ;(document.fonts as any).add(f2)
-    // await document.fonts.ready.then()
+    const pieceFont = new FontFace('PieceFont', 'url(fzlsft.ttf)')
+    const aniFont = new FontFace('STXINGKAI', 'url(STXINGKAI.ttf)')
+
+    const [f1, f2, p1, p2] = await Promise.all([
+      pieceFont.load(),
+      aniFont.load(),
+      loadPic('sword.png'),
+      loadPic('win.png')
+    ])
+    ;(document.fonts as any).add(f1)
+    ;(document.fonts as any).add(f2)
+    await document.fonts.ready.then()
 
     parentNode.appendChild(oInterface)
 

diff --git a/packages/Chinese-chess/src/main.ts b/packages/Chinese-chess/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
+import 'ant-design-vue/dist/reset.css'
 import '@/assets/style.scss'
-import 'ant-design-vue/dist/antd.css'
 
 createApp(App).mount('#app')