From b68d20d5ea8498ebb1b6bf34c23522c2594484ee Mon Sep 17 00:00:00 2001
From: Litrix <wbpstn@163.com>
Date: Thu, 19 Dec 2024 17:53:15 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/GobangPlayPage.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/views/GobangPlayPage.vue b/src/views/GobangPlayPage.vue
index 914169a..8150491 100644
--- a/src/views/GobangPlayPage.vue
+++ b/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() {