update premove

Author: DoroWolf

public/texture/board/board_highlighted.png

@@ -13,6 +13,7 @@
       :is-flipped="isFlipped"
       :premove="premove"
       :last-move="lastMove"
+      :can-premove="canPremove"
       :get-overlay-texture="getOverlayTexture"
       :get-piece-image="getPieceImage"
       :get-square-label="getSquareLabel"
@@ -108,6 +109,7 @@ const {
   dragStartSquare,
   mousePos,
   premove,
+  canPremove,
   handleMouseDown,
   handleUndo,
   handleResign,

public/texture/board/board_hover.png

@@ -14,9 +14,9 @@
               :src="isWhiteSquare(actualRow(displayRow - 1), actualCol(displayCol - 1)) ? './texture/board/board_white.png' : './texture/board/board_black.png'"
               alt="" />
 
-            <img v-if="getOverlayTexture(board, selectedSquare, possibleMoves, isDragging, hoverSquare, actualRow(displayRow - 1), actualCol(displayCol - 1), premove, lastMove)"
+            <img v-if="getOverlayTexture(board, selectedSquare, possibleMoves, isDragging, hoverSquare, actualRow(displayRow - 1), actualCol(displayCol - 1), premove, lastMove, canPremove)"
               class="square-background overlay" draggable="false"
-              :src="getOverlayTexture(board, selectedSquare, possibleMoves, isDragging, hoverSquare, actualRow(displayRow - 1), actualCol(displayCol - 1), premove, lastMove)!" alt="" />
+              :src="getOverlayTexture(board, selectedSquare, possibleMoves, isDragging, hoverSquare, actualRow(displayRow - 1), actualCol(displayCol - 1), premove, lastMove, canPremove)!" alt="" />
 
             <img v-if="board[actualRow(displayRow - 1)]?.[actualCol(displayCol - 1)]" class="piece"
               draggable="false" :class="{
@@ -88,6 +88,7 @@ const props = defineProps<{
   isFlipped: boolean
   premove?: { from: { row: number; col: number }; to: { row: number; col: number } } | null
   lastMove?: { from: { row: number; col: number }; to: { row: number; col: number } } | null
+  canPremove?: boolean
   getOverlayTexture: (
     board: Board,
     selectedSquare: { row: number; col: number } | null,
@@ -98,6 +99,7 @@ const props = defineProps<{
     col: number,
     premove?: { from: { row: number; col: number }; to: { row: number; col: number } } | null,
     lastMove?: { from: { row: number; col: number }; to: { row: number; col: number } } | null,
+    canPremove?: boolean,
   ) => string | null
   getPieceImage: (
     piece: Piece,

public/texture/board/board_premove_highlighted.png

@@ -34,7 +34,8 @@ export function useBoardDisplay() {
     col: number,
     premove?: { from: { row: number; col: number }; to: { row: number; col: number } } | null,
     lastMove?: { from: { row: number; col: number }; to: { row: number; col: number } } | null,
-  ): string | null => {
+    canPremove?: boolean,
+  ): string | null =>{
     // 上一步移动的高亮（起始格和目标格），优先于其他高亮
     if (lastMove) {
       if (
@@ -47,20 +48,19 @@ export function useBoardDisplay() {
 
     // Premove 高亮 - 目标格
     if (premove && premove.to.row === row && premove.to.col === col) {
-      const targetPiece = board[row]?.[col] ?? null
-      if (targetPiece !== null) {
-        return './texture/board/board_premove_capture.png'
-      }
-      return './texture/board/board_premove_placeable.png'
+      return './texture/board/board_premove_highlighted.png'
     }
 
     // Premove 高亮 - 起始格
     if (premove && premove.from.row === row && premove.from.col === col) {
       return './texture/board/board_premove_hover.png'
     }
 
+    // 当前选中格高亮（premove 模式下使用 premove 版纹理）
     if (selectedSquare?.row === row && selectedSquare?.col === col) {
-      return './texture/board/board_hover.png'
+      return canPremove
+        ? './texture/board/board_premove_hover.png'
+        : './texture/board/board_hover.png'
     }
 
     const move = possibleMoves.find(
@@ -74,9 +74,13 @@ export function useBoardDisplay() {
 
       const targetPiece = board[row]?.[col] ?? null
       if (targetPiece !== null) {
-        return './texture/board/board_capture.png'
+        return canPremove
+          ? './texture/board/board_premove_capture.png'
+          : './texture/board/board_capture.png'
       }
-      return './texture/board/board_placeable.png'
+      return canPremove
+        ? './texture/board/board_premove_placeable.png'
+        : './texture/board/board_placeable.png'
     }
 
     return null

public/texture/board/board_premove_hover.png

@@ -428,15 +428,9 @@ export function useGameState(
   // 走棋逻辑
   // ============================================================
   const possibleMoves = computed<Move[]>(() => {
-    if (!canInteract.value || !selectedSquare.value) return []
-    const { row, col } = selectedSquare.value
-    const enPassantTarget = getEnPassantTarget(lastMove.value)
-    return getLegalMoves(board.value, row, col, { lastMove: lastMove.value, enPassantTarget })
-  })
-
-  // premove 期间选中棋子的合法走法
-  const premovePossibleMoves = computed<Move[]>(() => {
-    if (!canPremove.value || !selectedSquare.value) return []
+    if (!selectedSquare.value) return []
+    // 允许正常交互模式 或 premove 模式下计算合法走法
+    if (!canInteract.value && !canPremove.value) return []
     const { row, col } = selectedSquare.value
     const enPassantTarget = getEnPassantTarget(lastMove.value)
     return getLegalMoves(board.value, row, col, { lastMove: lastMove.value, enPassantTarget })
@@ -446,15 +440,11 @@ export function useGameState(
     new Set(possibleMoves.value.map((move) => `${move.row}-${move.col}`)),
   )
 
-  const premoveHighlightedPositions = computed(() =>
-    new Set(premovePossibleMoves.value.map((move) => `${move.row}-${move.col}`)),
-  )
-
   const canMoveTo = (row: number, col: number): boolean =>
     highlightedPositions.value.has(`${row}-${col}`)
 
   const canPremoveTo = (row: number, col: number): boolean =>
-    premoveHighlightedPositions.value.has(`${row}-${col}`)
+    highlightedPositions.value.has(`${row}-${col}`)
 
   const isSelectedSquare = (row: number, col: number): boolean =>
     selectedSquare.value?.row === row && selectedSquare.value?.col === col
@@ -752,6 +742,13 @@ export function useGameState(
   // ============================================================
   const handleMouseDown = (row: number, col: number, event: MouseEvent) => {
     if (event.button !== 0) return
+
+    // premove 模式下允许点击交互（但不支持拖拽）
+    if (canPremove.value) {
+      handleSquareClick(row, col)
+      return
+    }
+
     if (!canInteract.value) return
 
     const piece = board.value[row]?.[col]
@@ -1117,7 +1114,12 @@ export function useGameState(
     cancelAIMove()
     isAIThinking.value = true
 
-    // 使用 setTimeout 让 UI 先更新，避免阻塞渲染
+    // 模拟 AI 思考延迟（让棋钟有时间走动）
+    // 基础延迟 500ms + 根据难度随机追加 0~difficulty*500ms
+    const baseDelay = 500
+    const randomExtra = Math.random() * (6 - aiDifficulty.value) * 500
+    const thinkDelay = baseDelay + randomExtra
+
     aiMoveTimer = window.setTimeout(() => {
       aiMoveTimer = null
       if (isGameOver.value) {
@@ -1149,7 +1151,7 @@ export function useGameState(
           })
         }
       }
-    }, 300)
+    }, thinkDelay)
   }
 
   const checkAndTriggerAI = () => {
@@ -1224,6 +1226,7 @@ export function useGameState(
     gameStatusMessage,
     isGameOver,
     canInteract,
+    canPremove,
     isAITurn,
 
     // 走棋