"L" Shaped Arrows on Knight Moves

[KeeghanM]

Made arrows draw in an "L" shape if a valid knight move. This looks cleaner and follows the standard practice now seen on most chess sites.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-chessboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 12, 2024 4:43pm

[KeeghanM]

Appreciate the feedback, the removal of the length_reducer was a personal choice as I preferred how it looked. But appreciate that a change like that shouldn't be included in this feature and warrants a different discussion. That has been fixed.

Good spot on the 2:1 arrows being any 2:1 - I now check the difference between the ranks is <= 2 which caps it to only legal knight moves.

[Manukyanq]

Almost there, thank you for contributing this feature, looks like there is some slight alignment issue with the L shaped arrows not pointing to the middle of the target square, along with it being shifted vertically or horizontally instead of outwards when multiple arrows point towards the same square

@KeeghanM @Clariity this code should help (I can not figure out how to commit directly this changes)

        // Define the path, for direct line arrows
        let pathD = `M${from.x},${from.y} L${end.x},${end.y}`;

        if (isKnightMove) {
          // The mid point is only used in Knight move drawing
          // and here we prioritise drawing along the long edge
          // by defining the midpoint depending on which is bigger X or Y
          const mid =
            Math.abs(dx) < Math.abs(dy)
              ? {
                  x: from.x,
                  y: to.y,
                }
              : {
                  x: to.x,
                  y: from.y,
                };

          const dmx = mid.x - to.x;
          const dmy = mid.y - to.y;

          // IDK how to name it, this is the length of the part from mid point to arrow peak point
          const headLength = Math.hypot(dmx, dmy);

          const knightEnd = {
            x: mid.x - (dmx * (headLength - ARROW_LENGTH_REDUCER)) / headLength,
            y: mid.y - (dmy * (headLength - ARROW_LENGTH_REDUCER)) / headLength,
          };

          pathD = `M${from.x},${from.y} L${mid.x},${mid.y} L${knightEnd.x},${knightEnd.y}`;
        }

https://github.com/Clariity/react-chessboard/assets/42891870/3ae0595d-3584-4828-933d-8bb7eba4e694