Taking a BIG decision

Updates:

Fixed pieces creating only single capture square
Added redirection to signup page in puzzle and vision page if user isn’t logged in
Made user unable to select piece when opponent’s piece is moving
Connect oppenent’s move to puzzle data, Add check for user moves and Add functionality to make the opponent piece move automatically after user plays the correct move

I fixed the pawn not being showing two capture squares last time. After that I found out that the capturing the piece wasn’t removing the piece from the board. I found out a function that I have commented out was being called and causing an error so I removed the function call for now. This was easy to fix but by doing this I found out that the pawn wasn’t the only one who wasn’t able to display mutliple capture squares.

All the other pieces weren’t able to display multiple capture squares due to a simple rookie react mistake. The value of captureSquares was being updated with it’s own value instead of using the previous value. After sorting that out I figured i should do same with the destination squares. Previously had an array updatedDestinationSquares after pushing all the values to the array then only I updated the destinationSquares value. In short I was doing the correct thing and me thinking that I could save 2 lines of code by adding setDestinationSquares directly to the loop was a bad idea but the state function isn’t synchronous. So I undid all the changes and also added a updatedCaptureSquare to all functions just to be safe.

Now user can’t select pieces when it’s the opponent’s turn. Although the timeframe to select piece is small but still I wanted to be safe. I achieved this with a state named isOpponentPieceMoving. it’s toggled on when user clicks on a destination square and toggles back off after the animation finishes.

Next I tried to make the opponent piece move work through with the help of the lichess puzzle data. Before the opponent piece could only the first move to play. After connecting the moveOpponentPiece with puzzles data. I created a function to check whether the move made by user is correct or incorrect. This was also being checked with the data in constants.js file. The data is stored like this


r3r1k1/p4ppp/2p2n2/1p6/3P1qb1/2NQR3/PPB2PP1/R1B3K1 w - - 5,e3g3 e8e1 g1h2 e1c1 a1c1 f4h6 h2g1 h6c1

The moves part start after the comma. First move is of opponent. It tells from which square to which square the piece is needs to be moved Eg(e3 to g3). The second move seperated by space is what the user need to play to move forward in the puzzle.

So if the user’s move is correct then I move the opponent’s piece. But if it’s incorrect then I reset the board. I got lost in the reset part. I learned if the key of a element is changed the element kinda resets. When I started doing this I felt a little uneasy. I was figuring out the code I wrote was manipulating the dom which isn’t the best practice in react. Regardless, I added a fragment to the code that was generating the pieces with a key with the value of boardKey and updated the boardKey when the user’s move was incorrect. But in my mind a question was lingering "Should I redo this in the way how react wants it" . Seeing the functionality working I pushed off that question. But, when I captured a piece a error popped up. The ss is below. I tried to locate why was that error popping up. I’ve concluded that the bad code has started to show why it’s called bad code. Although I might find this solution to this issue I think it’s better for me to just rewrite the code.

This is painful but it will make me a better developer. Also I found another bug, the error isn’t the only reason I’m making this decision. I’ll push the code upto what I’ve done right now and then I’ll start to fix what I’ve created.