🐞 fix: 修复连接bug

src/utils/game-socket.ts

@@ -0,0 +1,11 @@
+import type { MaybeArray } from '.';
+
+export interface SimplePart<N extends string> {
+  name: N;
+}
+type Payload = Record<string, unknown>;
+export interface PayloadPart<N extends string, P extends Payload> extends SimplePart<N> {
+  payload: P;
+}
+type Relations = Record<string, MaybeArray<string>>;
+export function useGameSocket<TRequest extends SimplePart<string>, const TRelations extends Relations,>{}

src/utils/index.ts

@@ -139,6 +139,7 @@ export function waitRef<T, const R extends T>(ref: Ref<T>, ...expect: R[]) {
   });
 }
 export type MaybePromise<T> = T | Promise<T>;
+export type MaybeArray<T> = T | T[];
 export type ValueOf<T extends object> = T[keyof T];
 /**
  * 检测key是否为obj的键，并收紧key的类型.

src/views/GobangListPage.vue

@@ -125,7 +125,7 @@ export function useGobangSocket(options: UseGobangSocketOptions) {
   const userStore = useUserStore();
   const relationMap = new Map<RelatedRequestNames, [Request, Set<string>]>();
   // let firstConnected = true;
-  const ws = useWebSocket<string>(`wss://wzpmc.cn:18080/chess/${userStore.token}`, {
+  const ws = useWebSocket<string>(`ws://172.16.127.101:58080/chess/${userStore.token}`, {
     // autoReconnect: {
     //   delay: 500,
     // },
@@ -211,8 +211,7 @@ import { useUserStore } from '@/stores/user';
 import { isKeyOf, type ValueOf } from '@/utils';
 import { useWebSocket } from '@vueuse/core';
 import { ElMessage } from 'element-plus';
-import { es } from 'element-plus/es/locales.mjs';
-import { onMounted, ref, toRaw } from 'vue';
+import { onMounted, ref } from 'vue';
 interface RoomInfoRender extends RoomInfo {
   briefId: string;
 }

src/views/GobangPlayPage.vue

@@ -1,9 +1,9 @@
 <template>
   <el-main
-    v-loading="state !== 'idle' && state !== 'waiting'"
+    v-loading="state !== 'GAMING' && state !== 'WAITING'"
     class="gobang-play-page__wrapper flex"
   >
-    <el-container v-if="state !== 'firstLoading'">
+    <el-container v-if="state !== 'FIRST_LOADING'">
       <gobang-header class="justify-between">
         <div class="flex align-center">
           <template v-if="roomId">
@@ -13,14 +13,14 @@
           <h2 v-else>单人游戏</h2>
         </div>
       </gobang-header>
-      <el-main class="gobang-play-page-main center flex">
-        <div class="gobang-chessboard" :style="{}">
+      <el-main class="gobang-play-page-main center flex flex-column">
+        <div class="gobang-chessboard">
           <canvas class="gobang-chessboard__background" ref="canvas"></canvas>
           <template v-for="(row, y) of grid">
             <template v-for="(cell, x) of row">
               <!-- eslint-disable-next-line vue/require-v-for-key -->
               <div
-                v-if="state !== 'waiting'"
+                v-if="state !== 'WAITING'"
                 class="gobang-chessboard__cell"
                 :class="[
                   cell
@@ -93,7 +93,6 @@ import router from '@/router';
 import { useMediaStore } from '@/stores/media';
 import { create2DArray } from '@/utils';
 import { useGobangSocket, type RoomId } from '@/views/GobangListPage.vue';
-import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, ref, watchEffect, type CSSProperties } from 'vue';
 import { useRoute } from 'vue-router';
@@ -162,15 +161,8 @@ watchEffect(() => {
 interface Chess {
   isWhite: boolean;
 }
-const grid = ref(
-  create2DArray<Chess | undefined>(boardLength, boardLength, (x, y) =>
-    x >= 8
-      ? undefined
-      : {
-          isWhite: !!((x + y) % 2),
-        },
-  ),
-);
+type Grid = Chess[][];
+const grid = ref<Grid>();
 function getCellStyle(chess: Chess | undefined, x: number, y: number) {
   const res: CSSProperties = {
     left: `${boardPadding + boardBorderSize + gridSize * x}px`,
@@ -178,9 +170,9 @@ function getCellStyle(chess: Chess | undefined, x: number, y: number) {
   };
   return res;
 }
-const state = ref<'firstLoading' | 'loading' | 'idle' | 'waiting'>('firstLoading');
+type State = 'FIRST_LOADING' | 'LOADING' | 'GAMING' | 'WAITING';
+const state = ref<State>('FIRST_LOADING');
 const isWhite = ref(false);
-// const
 const { send } = useGobangSocket({
   succeed: {
     UserInfo() {
@@ -199,19 +191,20 @@ const { send } = useGobangSocket({
   error: {
     PlayerJoin() {
       router.back();
+      return false;
     },
   },
   finally: {
     PlayerJoin(error) {
       if (!error) {
-        state.value = 'idle';
+        state.value = 'GAMING';
       }
     },
   },
 });
 onMounted(() => {
   if (!roomId) {
-    state.value = 'idle';
+    state.value = 'GAMING';
   }
 });
 </script>