🎈 perf: 暂存

src/views/GobangPlayPage.vue

@@ -37,6 +37,10 @@
                         ? 'gobang-chessboard__cell--white'
                         : 'gobang-chessboard__cell--black'
                       : undefined,
+                    ,
+                    {
+                      'gobang-chessboard__cell--win-blink': blink?.[y][x],
+                    },
                   ]"
                   :style="getCellStyle(cell, x, y)"
                   @click="onCellClick(cell, x, y)"
@@ -109,10 +113,13 @@
     height: var(--size);
     user-select: none;
     &--white {
-      @apply bg-white;
+      @apply bg-white border-solid;
     }
     &--black {
-      @apply bg-black;
+      @apply bg-black border-solid;
+    }
+    &--win-blink {
+      box-shadow: 5px 5px 5px black;
     }
   }
   &--enabled {
@@ -271,9 +278,9 @@ watch(otherUser, (v, old) => {
 const grid = computed<Grid | undefined>(() =>
   room.value?.pieces.map((row) => row.map((v) => (v !== -1 ? { isWhite: !!v } : undefined))),
 );
-const blink = ref<boolean[][]>([]);
+const blink = ref<boolean[][]>();
 function resetBlink() {
-  blink.value = create2DArray(boardLength, boardLength, false);
+  blink.value = undefined;
 }
 const isWhite = ref(false);
 function onCellClick(cell: Chess | undefined, x: number, y: number) {
@@ -312,7 +319,15 @@ const { send } = useGobangSocket({
       resetRoom();
       resetBlink();
     },
-    HasPlayerWin() {},
+    HasPlayerWin(p) {
+      const [deltaX, deltaY] = deltaMap[p.face];
+      const { originalX, originalY } = p;
+      blink.value = create2DArray(
+        boardLength,
+        boardLength,
+        (x, y) => x === originalX + deltaX && y === originalY + deltaY,
+      );
+    },
   },
   error: {
     PlayerJoin() {