Omg how does changing the color model solve the issue

Before that I fixed the black piece being upside down when dragging. You can see it in my last devlog’s video. I was only happening with black pieces because to make the board work when user got the black pieces I just rotated the board 180 degree. This made all the pieces upside down and to fix that I again rotated the piece’s img 180 degree. Ig when dragging using dnd-kit (npm package) the transform value was being overwritten causing this issue. To fix the issue rather the rotating with board using css I changed the order of files and ranks. I used flex-direction column replacing column-reverse for the rank to start from 1 to 8. Then for reversing the files when color is black then I mapped squares from reversed files array using toReversed array method. I thought by doing this I’ll make the code cleaner but I think it’s more messy now 😭 . Also I did have hard time understanding my own code when trying to solve the issue 😭 . I fixed the pieces, destSquares and captureSquares being generated on the wrong squares.

I realized the piece transition wasn’t working when capturing piece both for user’s piece and opponent’s piece. The transition only happens if hasPlacedPieces is set to true and isDragging is false. So, my first assumption the hasPlacedPieces was being turned to false only when capturing pieces but I was wrong. I was checked if it had something to do with the value of isDragging. I found the isDragging was never turned false so I fixed it but still the main issue wasn’t resolved. I was console logging things and just trying to figure out what was actually causing the issue. The fix was really simple. To implement the drag and drop feature I’ve broken down piece code into it’s own component. There inside the component I have added the key attribute and it was the issue. The key attribute is supposed to be used on the component itself instead of inside the component div. (Eg.) I don’t know why it only broke the capture transition but anyways it’s fixed

Now to the part where I don’t even understand how does this even happen. Hopefully you understood what I was saying in the video btw please unmute the video as I am talking in that video. So what happened was the piece img bg color changes when it’s selected. This was working fine until I added the dragging feature. When the piece is dragged you see the background color comes along with the piece. So I decided that the square should change it’s color rather than the img inside the piece. I was going to create squareRefs for holding all the values of sqaures and then select the square using gsap to change the color but I realized a easier way would be to just target the square id.

It worked so I also decided to use for changing background color of square when user move was either correct or incorrect. On light squares it worked great and it also fixed the animation as the same animation was working a little weirdly when using pieceRefs. I was happy that it was better but then I found the bug from the video. I tried different things and just couldn’t figure out what was the issue but when I decided to change the color from var(–c-red) to yellow it worked as intended. Then I changed the same hsl color into hex and it also worked but I don’t know whyyyy.

If someone knows why this happened please tell me cuz it’s ridiculous. Most of the issue had a simple solution but learning what caused the issue what the difficult part.