Fixing things and some more responsive things

I’ve fixed chessboard displaying multiple selected squares. This happened when user selected a piece and then selected another piece by dragging. The fix was really simple. I just added resetSquares function when piece on drag start.

I’ve also fixed pieces stacking on top of each other if user drags and drops a piece on another piece quickly before the opponents move happens. This was prevented when pieces are moved only by clicking but I forgot to prevent this if pieces were dragged and dropped. I did two things to prevent this:

I reduced the time for opponent piece to move after the first move.
I disabled the piece from dragging if it wasn’t the player’s turn.

It seems the first fix wasn’t sufficient as it created another bug. So, if user selected a piece by clicking or dragging and then dragged the same piece then the destination squares and captureSquare will just completely disappear. The occurred due to resetSquares function that I had added. I thought for a while and came up with this solution. The resetSquares function only executes if user selects another piece on drag. However the function won’t execute if the selected Piece is being dragged. The selected piece state null at first so resetSquares() won’t also execute if selected piece is null. Now, it works as expected until and unless I find some bugs.

Now returning back to the responsiveness. I fixed the puzzles button to be equal width and height. I had made the level buttons responsive before but they weren’t the same size. I had tried the aspect ratio last time as well but it was breaking the layout. Basically I used aspect ratio, removed the grid templated rows and changed some clamp values. Also I removed the media query below 1440px and integrated it as default css.

After doing that, I started to fix the attempts in in vision sidebar. I thought it would take me two seconds to do it as I just had to apply the puzzle button knowledge here. I thought just doing this will work

grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));

I was wrong 😭 This worked fine for level buttons cuz the number of buttons were static. Here the attempts squares increases as the user clicks on the chessboard. If there’s only one attempt square then it will take the whole width.

I was stuck after this. I tried different things such as using max-width, trying to add width: fit-content, etc. but nothing worked. At last I thought of reverting back to what the code orginally was which just used flex and flex wrap but coming this far I just used grid and used different values with height to make the attemps square kinda responsive. I still need to use clamp or something to make this look good. Uhhhhhh this is so frustrating… .

I think I’m overexplaining things. I should just simplify down things