We’re close to the end

First I fixed the buggy dropping piece. I fixed this when I first worked on drag and drop piece feature but I don’t know how it broke again. When trying different things to fix it I tried to move the setIsDragging(false) lower inside dragEnd function below movePiece and capturePiece function calls. Surprisingly it worked 😄.

I fixed light square being dark and vise versa if user had the black pieces. I found out this issue because the coordinates colors were mismatched. So my first intuition was changing the color of coords.jsx. I got really confused as the changes did nothing in the browser. I am so dumb I was changing the vision page chessboard’s coords.jsx instead of puzzles page chessboard’s coords.jsx. It worked but then I realized the coordinates color weren’t wrong square colors were. I undid the changes made to coords.jsx. I also seperated the coords.jsx but adding puzzles and vision in the name. Then I fixed the squares color for black’s board.

I’ve figured out the mobile design for puzzle section. First the idea was that the chessboard and sidebar would be stacked on top of each other. This was the easy route but if I did that then it would add friction to the mobile players as they would have to scroll all the way down to start the puzzles. Then I looked at chess.com and they were doing it really well where only after clicking start puzzle the chessboard will appear. So I removed the chessboard below 425px first and then made the button text, size and gap smaller. I also removed the aspect ratio of 1/1 from the buttons as the buttons were ruining the gaps between them in certain screen sizes.

Now for the first challenge I faced. How do I only make the chessboard appear and disappear when clicking start puzzle only on mobile devices. As I used gsap matchMedia to make the chessboard’s container display none or block according to hasPuzzleStarted for mobile screens.

The chessboardSize is calculated according to chessboard container so that the chessboard is divisible by 4. When first loading the chessboard if the container has display none then the chessboardSize becomes zero and when setting the container to block will only show empty chessboard container without a board. I tried using the autoAlpha property of gsap hoping that it will do that same job as display none but without remove the element. It was making the container invisible but the container would still retain it’s height and width. I was starting to doubt myself here and was thinking to take the easy route but just stacking the board and sidebar vertically.

After thinking for a while I came up with a breakthrough I made the position of chessboard container to absolute and visibility to invisible. Now the chessboard container won’t be visible and won’t take up any space as it is absolute. When the board used absolute position idk why but the board container got so bigger. It also distorted the pieces when puzzle started. To fix it I ran the gsapMatchMedia code only after chessboardSize is calculated which was a great idea. It fixed the board when the puzzle started but when it was hidden it was still large. I just replaced the absolute and visibility with display: none as it only runs after the chessboardSize is calculated, that’s why there is no issue with display:none. Last change is when sidebarMode is notStarted then only chessboard is hidden.

I know that 80% of the things I say won’t be understood but I’m not a good explainer so you have do deal with it 😅. Were really close to the end now I just have to make puzzles page and vision page responsive and just polish the website and then click the ship button