Changed some puzzles and more responsiveness work

Copied the puzzles page and it’s component’s media query css

So after making puzzles page somewhat responsive last time, the first thing I decided to do after that was copying puzzles page media query css and just paste it in vision page as both of pages are very similar. This made the vision page and it’s components a little responsive.

Puzzle changes

I’ve changed the puzzle from level 12, 23 and 30. The 12 and 23 level had 2 ways to deliver checkmate and only one of them counted as correct. I changed them as user might get frustrated seeing that. My code doesn’t handle that so I just changed them. Level 30 was changed cuz it wasn’t really difficult. I don’t think I’m satisfied with the new level 30 puzzle either.

One issue while polishing signup page

I didn’t want the form to look squished on devices with small vertical screen size. Due to this last time I generally kept things smaller than what I wanted to make sure it looks okay for those devices. To fix that I added min-height to the form-container. It prevented the form from squishing but the form-container was overflowing as the puzzles page has 100dvh. What I wanted was just the form scrolling using overflow: scroll but this probably took me about 20-30 mins to make it work 😭 . I set overflow to scroll to form-container it didn’t work, added it to form which also didn’t work and then I added it to puzzles page. The scroll part was working when I added it on puzzles page but not what I was looking. Then I created a wrapper div to hold the img container and form container hoping now adding overflow:scroll to form container will do the job. After trying all things things I realized that the min-height was set to form container instead of form. The fix was to adding min-height to form and set overflow scroll to form-container. I removed the wrapper div after that as it was unnecessary and also hid the scrollbar that appears in form-container.

Signup and login page polish after that annoying issue

After that annoying issue I’d say things went pretty smoothly. I mainly used clamp as always for making things responsive. And as always it took me longer that expected. After polishing up the signup page I copied the code to login page and just changed signup to login.

Vision page responsive on mobile devices

Making the vision page responsive for mobile device was really similar as polishing signup page. I just used clamp for everything and made sure everything looked good. Now that I think about it i only made the sidebar responsive including the popup menu as only that is displayed on mobile devices and chessboard is hidden. The chessboard is also kinda responsive due to the copy pasting the puzzles page media query css. The making of sidebar responsive was just trying out different sizes and then putting the value into clamp calculator and copy pasting the value.

Now, I’ll work on the vision page responsiveness for bigger devices and then if everything looks great after testing then I’ll ship the project