React六角棋盘游戏中双行棋子在中心区域放置时高亮错位的问题

看起来你这个六角棋盘的高亮逻辑在跨中心行（行3和行4）的时候卡壳了，我帮你捋捋问题出在哪～

首先看你代码里的handlePieceHover函数，核心问题出在行偏移（rowOffset）的计算逻辑上：

现存的几个问题 #

1. 偏移量计算错误：你现在用(triangleCounts[centralRow] - triangleCounts[targetRow]) / 1，但实际上每行的列数变化是2（比如从行3的15个到行5的13个，差2），所以偏移量应该是这个差值的一半，也就是除以2，不然会导致列偏移过大或过小。
2. 偏移判断条件不完整：你只处理了targetRow >=4的情况，但如果当前中心行是4及以上，要往行3及以下的方向移动棋子时，完全没考虑偏移，这就导致跨中心行的时候上下部分的列对齐错位。
3. 行3的特殊处理画蛇添足：强行给行3设置rowOffset=0，反而让跨3和4行的棋子（比如六边形）的上下部分列计算逻辑不一致，直接导致一半高亮正确一半错误。

修复后的偏移计算逻辑 #

我调整了偏移的计算方式，不管棋子往哪个方向移动，都根据中心行和目标行的列数差来动态计算偏移，同时考虑方向：

const trianglesToHighlight = shape.map(({ x, y, orientation }) => {
    const targetRow = centralRow + y;

    // 计算两行之间的列数差
    const colCountDiff = triangleCounts[centralRow] - triangleCounts[targetRow];
    // 偏移量是列数差的一半，因为每行列数变化是2的倍数
    let rowOffset = colCountDiff / 2;

    // 调整偏移方向：如果目标行在中心行下方且中心行在中心以上，或者目标行在中心行上方且中心行在中心以下
    // 这里中心分界是行3和行4，因为它们列数相同都是15
    if ((targetRow > centralRow && centralRow < 4) || (targetRow < centralRow && centralRow >= 4)) {
        rowOffset = -rowOffset;
    }

    // 计算目标列
    const targetCol = centralCol + x + rowOffset;

    // 查找目标三角形
    const targetTriangle = boardTriangles.find(
        ({ uniqueIndex }) => uniqueIndex === `${targetRow}-${targetCol}`
    );

    // 验证方向是否匹配
    if (targetTriangle && targetTriangle.isUp === (orientation === "up")) {
        return `${targetRow}-${targetCol}`;
    }
    return null;
});

逻辑说明 #

• 首先计算中心行和目标行的列数差，除以2得到正确的偏移量（因为每行增减2个三角形，所以列偏移是1）。
• 根据棋子移动的方向（往上或往下）和中心行的位置（在中心以上还是以下）调整偏移的正负，确保列对齐。
• 移除了行3的特殊处理，让跨中心行的棋子上下部分都用统一的逻辑计算列位置。

这样修改后，当你把六边形棋子放在中心区域（行3和4）时，上下3个三角形应该都能正确高亮了，其他双行棋子的跨中心行操作也会正常工作。

备注：内容来源于stack exchange，提问作者CANDINIZ