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.

Worked on the drag and drop feature

Although it’s not fully complete and polished, it’s kinda working. I stopped working on the feature and started writing this devlog cuz

1. It has been 3hrs
2. I’m forgetting what I did while working on it.

Firstly I wasn’t even going to implement this on the first place as I thought this was outside my coding capability but someone gave me a feedback that I should add this feature so I decided to give it a shot. I found out about the dnd-kit package for implementing drag and drop. I was skeptical of using it at first. I was reading their docs to figure out the package. My main concern was how would I implement the feature with the already existing click to move feature.

They provide a useDraggable hook for making any element draggable. The useDraggable was used to make the piece draggable. I had to convert the piece code into a component for it to work. To drop something into another thing there’s useDropable hook which as the piece I made square, destSquares and captureSquares into components. If I were a good react dev I would’ve already did those things ig the using the package is some what helping my code to be cleaner.

I used the useDroppable hook inside destinationSquares and captureSquares. I was concerned that we couldn’t actually drop the piece as it doesn’t live inside the square rather it lives on top of the board using position absolute. But, I had gotten dnd-kit wrong. I element does need go inside the element if useDroppable is used. There’s DragDropProvider that connects both draggable and droppable hook. Let’s just say DragDropProvider gave me all the function such as dragEnd and values needed to move the piece.

Later I changed the useDroppable to be inside all squares cuz after dragging the piece there was some issues when dropping the piece in it’s original square if the user wanted to cancel the move. I didn’t really have to write new code for moving, capturing and resettingSquare as the code I wrote previously worked fine with the drag and drop functionality.

There were many issues while trying to add this feature. Still there are issues I need to fix such as the highlighting the square bg color instead of the piece bg color when selecting piece and other bugs I’ve found. Also transition when opponent captures pieces doesn’t working also need to fix that. But, I’m really glad I tried to add this feature as I’ve learned alot and the puzzles board now feels more fun because of the feature. Thanks @PAPER_01 for suggesting the feature 💖

Okay, I’ll stop yapping. Have a good time

Gosh I’m so dumb

Last time I thought I had fixed 404 page issue when visiting paths like course directly. I did fix it for local development but not for production which is really dumb, shouldn’t the development environment be the same as deployment when using vercel cli. I tweaked the vercel.json to fix the issue in production now but now in the development the website didn’t work. The fix that I’m now using is leaving the production as it is and in devlopment using the environment created by vercel cli only as backend and running the frontend seperately using pnpm run dev. To connect both backend and frontend I configured the vite.config.js to redirect every /api request to localhost:3000(this is running throught vercel cli)

Most of the time was spent on making the signup page responsive. The login page is also now responsive but it’s just a copy paste of signup page css. I am quite dissapointed in myself because it took me so long to do this and still I don’t like how it looks on certain screens. As I realized that I was spending too much time on making signup page responsive I panicked and just rushed the process. As a result a have a reponsive signup and login page that I’m not very proud of.

I fixed the signup not working. While signing up there it showed user already exist error everytime. The fix was quite simple, I had missed await keyword when checking for user with same email in database. Due to which the userExists variable was always true. Then I did something really dumb.

I tried to fix something that was already working. I was worried that if I delete a user from database and then if that user tries to login then it would throw an error so without even checking if that was true I started making changes to the protectRoute.js file. I was thinking after the token is verified then I’ll just check if the user exists or not. In the process I deleted one important line of code because of which I wasn’t able to login now and I didn’t know why. I tried made the code as before not knowing the line is still missing so the error still persisted. After giving up and doing ctrl + z undo the previous code returned I finally realized the missing line of code. Also the feature was already there when fetching user data so none of this was necessary 🫠 .

We’ve reached 200 hours

It’s a big milestone that I’ve finally reached .

I’ve made the whole course page responsive. This took me longer than I’ve expected. But before that I was getting 404 not found when visiting locations like /course directly but it was working normally when I was navbar to navigate. I’ve seen this issue before as well so I kinda knew that this was because of react SPA (Single Page Application) thing. To fix this I configured the vercel.json file and now it works as expected.

So onto the course page. Firstly I made the accordions responsive on mobile screens using css clamp function. I removed the course info section for mobile devices. I didn’t touch the course card as they were a future problem for me to do. But the basic idea was the image with take up the whole width and the image and the text will be vertically aligned instead of the default horizontal alignment.

Between 1024px and 768px one of the issues was the course info was looking crammed on the smaller side. so I reduced the padding and font-sizes with clamp css function so that it still looks good on the bigger screens. I also made the progress bar slimmer and badges smaller. Another issue were the course cards. One the bigger screens they looked find but on smaller screens the text were taking up more height than the image itself. I changed the value of thumbnail image from fixed value to %. Also I reduced the massive 1.75rem padding on the course card container for smaller screens.

Also for all screens sizes below768px I made the banner slightly bigger vertically as the previous banner was looking very slim on mobile devices.

I scraped the idea of making course cards vertically aligned and stayed with the horizontal alignment. I somehow managed the cards to look decent on smaller screens as well by using clamp(). The things I needed to do were similar but I guess it took me long as I was first checking the min and max values using browser dev tools and then putting that into clamp calculator and then pasting the value into vscode. Basically I had to constantly switch between things.

In the end, I went to sleep but couldn’t fall asleep so I decided to complete the course page reponsiveness and do on last thing which was making the loading spinner responsive. Then, I peacefully went to bed .

This was a rough one

One a good note I’ve completed making the home page responsive (for now). After making the hero section more responsive last time I then proceeded with making the courses and puzzles page more responsive.

I mainly used the clamp css funciton to make the course and puzzles section responsive. The courses section remained the same as I am quite happy wiht how it turn out but I didn’t like how the puzzles section was looking after testing the website out in my phone. It looked to small for a section so below 768px instead of the text and image being horizontally aligned it’s now vertically aligned. The clamp part was similar to the courses section.

Finally after completing those two I started working on the visualization section. I was the hardest section to make responsive due to the absolute positioning of the moves. Firstly I only focused on bigger screens as I had no idea how it would look on smaller devices. The moves were positioned before by mapping an array with the move notation and the css of top and right/left with percent values. I tried to remove that and instead of mapping the elements I thought of manually placing them and giving the ids by which I could have greater control over the css. While trying that I couldn’t make it work as in smaller screen heights it still looked terrible.

At this point I was losing hope. I was wasting time watching a anime series just so I could avoid working on this. I tried thinking out the solution but nothing came in mind. Later when I was messing around with css throught the developer tools on the browser I realized the I could change the height of the image container to change the positioning of the moves as the moves are postioned on the basis of the image container. Now below 1440px the height of image container is 90% and below 1024px it’s 80% and I have a max-height value set for safety. It’s not prefect but it’s much better and I’m relieved 😌 .

The mobile design uses a image contaning the main image and all the moves as there’s no animation on mobile devices. I made the image in fimga and using clamps and % values I think it’s decently responsive.

To make the pages responsive I am using the developer tool in browser to first figure out the min and max values and the putting that value into clamp calculator to generate values. I am constantly switching between vscode and browser for this and if you have a better way to do it please lemme know. Okay the devlog has turned very long so biee…

Worked on hero and puzzles section (Responsiveness)

The puzzles section was the easier that hero and courses section for making it responsive cuz puzzles section doesn’t contain any animations or any special thing. After several trials of adjusting the fonts and image I stopped after it looked quite decent. Before working on the visualization section I decided to polish the hero section first.

My main goal with polishing the hero sectino was mainly using clamp() css function for smooth responsive text. Although the text are responsive using media queries in hero section, the text look kinda odd in some screens. After using clamp the website feels better that before. Also I changed the width of image with % values which does feel better. I also used clamp for some vertical padding as well cuz it was looking bad for devices with smaller vertical heights.

I thought from 425px to 768px was tablet screen size but it seems the tablet screen size starts from 768px. So now upto 768px the website follows the mobile design. Now I’ll polishing courses section and puzzles sections just like the hero section. Wish me luck 😄. Bye

I wanted to add more images but it seems 4 is the limit .

More website responsive stuff

Firstly, I removed the animations from home and courses section below 768px of screen size. I didn’t remove the hero section starting animation cuz it’s nice. I used gsap matchMedia to achieve this. While removing the animations a funny thing happened, the matchMedia wasn’t working and then I was reading this a gsap forum hoping to see where did I go wrong. I later found that I was doing things correctly but instead of looking at localhost I was looking at live website. Obviously the changes didn’t appear 🤦‍♂️

Then, I made the courses section kinda resposive. Firstly I went to figma to design the mobile version of courses section as I was mainly unsure of what to do with the thumbnail cards. I decided to turn them into carousel which imo was a great idea. First, I turned turned the main courses section text smaller and then started working on the carousel.

The making of carousel was rough. Firstly I was reading stuff online on how the sliding thing works. I think I somewhat figured that out but what I couldn’t figure out is the aligning the cards perfectly. The issue was I was going for a style where the first and the last card aren’t centered alight while the rest of them are. The swiping snapped the cards into place and some parts of the left and right cards would also be visible. I couldn’t figure out how to make this and was about to making hamburger menu but coincidentally while scrolling the stardance home page I saw recommended projects section where it’s like a carousel without the snapping thing. It was way easier to achieve than what I was thinking so even though I didn’t make what I wanted the carousel isn’t bad.

The overall the courses section felt responsive so I started working on the hamburger menu. Working on hamburger menu went pretty smoothly except for some things going wrong here and there. I first roughly designed the the menu in figma and then wrote the code.

Starting making the website responsive

Before starting on making the website responsive I saw that when logging in or signing up there is some delay before redirection where people might click the login button several times thinking that it it’s working which is bad ux. In development there was almost no delay because I was using local mongodb. To let the user know that the button has been clicked successfully and to prevent multiple login/signup button clicks the buttons are disabled as soon as user clicks any button in login or signup page while turning the buttons color into gray.

Now on to the reponsive ui part. I first tried making the navbar responsive but it didn’t look right in small screens. I was also trying to make the hero section responsive but without any design to follow. So realizing that I needed a design first I then hopped onto figma to design the navbar and hero section. I changed the ui of the navbar ig to make it easier to make it responsive but I don’t know if the navbar ui got better or worse. I know one thing and that is the navbar has got simpler.

The design on the mobile is pretty simple imo but that’s the best I could do to make it look decent. I used flex property to make all the text align vertically in phones and decided to remove the image in phone screens. I’ve have currently hidden all sections below 1024px except the hero section to focus only on the hero section without other sections interference. I’ve mostly used hardcoded values to make hero section which I will change to clamp css propery for smoother hero section responsiveness. I have just eyeballed the sizes and paddings which is a bad idea but I’m just lazy to create figma design for every layouts.

Now, I’ll make the hamburger menu working. Uhh, I hate making website responsive but it has to be done. If you’ve any suggestion feel free to leave it down in the comments.

The website is live guys

I used vercel to deploy my mern stack project and it was rough . I first tried deploying the the frontend and the backend separately. After reading blogs and trying I ended up deploying the express backend but at that point I had learned that there’s vercel cli with which I don’t have to push commits everytime to find out errors in production. I can just use “vercel dev” command to create a production like environment but for development and testing out. I couldn’t figure out how to run frontend and backend seperately using vercel cli.

I then tried deploying the whole repo. The issue with this was I couldn’t configure the website with folder structure like this

chess-website
----frontend
----backend

Maybe there’s a way to make this work (I couldn’t ), I chose the easier path which I’m kinda familiar with.

In this approach there’s no frontend and backend directory. The backend is renamed to api which allows vercel to recognize that it’s the backend and all the contents of the frontend folder will be moved up to the root directory. Errors came as I changed the folder structure but fixed on after another. The backend wasn’t working which got me really confused. There were many issues in this approach as well but atlast the website is running and backend is working properly .

The two days break I took from coding is over and i think I feel better. Here’s the link to the website:

https://evochess.vercel.app/

Many small improvements 🙂

I’ve added transition to level btns and added icons and different ui to puzzle sidebar button. I am using an array inside objects to display all buttons. So to customize the buttons I manipulated the array.Some button have only text, some have both text and img and some have only img. Also the main button is wider and other buttons are gray in background color. For this I used the className like in tailwind to add the styling meaning the buttons which need gray color will have the className gray. The size of the buttons is differentiated using different values of flex grow. I think the buttons look way better now.

I’ve added reset if user changes from puzzles page to other page. The is to avoid any unnecessary bugs and error. I had already done this in vision page now it was the turn of the puzzles page.

I have been avoiding this for so long but finally I’ve done it. I added the videos for professional course (or should I say advance course). I changed the name to advance cuz professional is just the wrong word to use here. I also moved some videos from beginner to intermediate. Now that the courses are in place I can finally write what you’ll learn in the information section. I’ve added numbers such as 0 - 1000 representing what I mean by beginner. I’ve tried to match videos to the elo level. The data in courses section in the home page is also change from placeholder data. Looking back at the code they are really bad but I’ll leave it as it is not broken 😁.

Now I think the project is coming to it’s final stages I do need to add things but after that ig all I need is to polish the website and make website responsive.

I’ve also fixed progress bar animation happening everytime on reload. This was a small thing but it was bugging me so I decided to fix it. Fixing it was annoying as I had expected to fix this easily. After some trial and error I fixed it using a hasCompleted state which is set to true after finish lesson button is click. Only when the hasCompleted is true the animation occurs.

Some other changes I did were fixing only displaying highest achieved medal in course page and adding background color transitions to buttons.

Enought yapping. I don’t feel like coding and I think I should take some rest for the next two days. Hope the rest reset my feelings and returns me to my prime stardance days 😆.

Wow! This is the 51th devlog

I’ve added the player color indicator in the sidebar. It tells you which color you’re playing. Before coding this I just complicating things in my head by thinking of creating new unnecessary states. I used pen and paper to think and realized why not use the color state already available in chessboard. To access the state I moved it up to the puzzles context file where both sidebar and chessboard could get and change the color. I also moved the hint down as it look clutter both color and hint together in the sidebar.

Two quick small fixes. I fixed retry and back button not working and fixed replay button not playing the same level only on last level.

I’ve added pawn promotions functionality to the opponent’s pawns. In puzzle 17 and 26 there are promotions that happen but without the promotion part it just looks weird to look at. Especially in level 26 where the pawn promotes to a knight and without having that knowledge the user will just get confused. I haven’t added promotion functionality for the user pawns because there is no puzzle that requires it. I will add it if I have the time to but rn i am going to just ignore it. One of the bugs I faced while doing this was the knight promotion worked fine but the queen promotion at level 17 wasn’t. The pawn was just disappearing because the pawn was capturing itself cuz the promotion only work for black pieces which is now fixed.

Next I fixed the random color option color menu not working. Idk when and how it broke I thought it was working fine but it seems not. It seems it was not working because the element was being unmounted before running the selectRandomColor function. So, I moved it to vision context and with a useEffect hook it runs every time hasStarted is true.

A small change but which I feel great that it’s solved. When clicking on accordion or pieces twice sometimes it selects the icon and other things which was just annoying. The fix was just two lines of css which I learned from a random dude on the internet. Really thank that random dude.

I’ve now added functionality for adding multiple bestScore for according to the time and color. Before the highest score in vision would be the score scored across any time or color. So if you were to score 5 point in 45 seconds and score 5 points in 30 seconds they were treated as the same thing which imo opinion isn’t fair. To achieve this I used object inside a object unlike the single number representing the bestScore like before. The object looks like this.

{
    white: {
        15: 0,
        30: 0,
        45: 0,
    },
    black: {
        15: 0,
        30: 0,
        45: 0,
    }
}

I did have a very hard time figuring out how to update the state like this as I had to change the specific time score within the correct color. One thing I did learn from this is we can use square brackets for using a variable’s value as key while manipulating the useState object.
I also encountered some errors while trying to implement this functionality. Now everything is working as expected.

I’m so sloppy now

I’ve added sounds for piece movement, capturing piece and completed puzzle. I spent more time than I should’ve finding the sounds. I am still not sure about the sounds that I’ve added expect completed puzzle sound. There was issue with playing sounds during opponent move cuz unlike moving player’s piece where there are seperate function for moving and capturing pieces, the moving and capturing logic is inside the same function. After thinking a while I did solve the issue. It seems mac default recording doesn’t capture sounds so you just have to trust me here 😅.

I’ve made hint button disabled when pieces are moving (Both player and opponent piece). I did this after figuring out if user click the hint button quickly after the last puzzle move then we get an error. Although this thing happening is very unlikely but it’s better to always fix bugs. Also I don’t know what happens if user clicks on hint inbetween moves so I think preventing it is better.

A small change, I’ve added better hover transition to logout button. I didn’t add a red background during making it cuz I had issue with chaning the svg color. I’ve learned that if I make the svg inline in the jsx and set fill to currentColor then I can change the svg color through css and add transitions.

Also, I’ve added popup animations to time menu and color menu. I was even struggling with this even though I’ve added those kind of animations before. I was using the new Activity element in react to toggle the menus but to for adding the animations I’ve removed the Activity element cuz the menu would disappear before animating.

I took some break from coding cuz I got sick. I think I’m really sloppy now. Imo these changes shouldn’t have taken me 2hrs. Hope I will be able to shake off this sloppiness.

A little rest from programming

I’ve added hint button in the puzzles sidebar. I had been trying to avoid working on this but I couldn’t avoid it forever. Also the puzzles sidebar looked really empty without the hint button. In chess.com the hint button highlights the correct. I did things a little differently, the hint is communicated via text to user. The text animates during first appearance and I’ve made it so that user gets only one hint. After the hint the button goes gray indicating it’s not clickable anymore.

I made puzzles sidebar code better to display buttons and also added replay button with functionality on successful puzzle complete. I mainly made the code better cuz I need to add the replay button. The replay button is same as retry button for replaying the puzzle after completion.

I made next button do nothing if user reaches the last level. Before when completing the last puzzle level we would reach the next level automatically which is prevented now.

I’ve been sick for 2-3 days now and am just writing this devlog. Hopefully from tomorrow I will be working on the project more seriously.

Interesting updates

I added back button in puzzles sidebar with functionality. Before there was not way to go to the default sidebar (the notStarted state). Now after messing up or completing a puzzle there’s a back button which sets the board to default postion and set sidebarMode to “notStarted”. I wanted both buttons to be taking up equal space but later thought the smaller back button is better.

Also now, puzzleLevel updates instantly updates after solving a puzzle instead of updating only after clicking next puzzle button.

User can now select and play any completed puzzle by clicking level btns in sidebar. Previously user can only start the puzzle Level user has reached which meant no puzzle 1 and 2 resolving puzzle after user has reached level 3. I split the puzzleLevel state into selectedLevel and highestReachedLevel. The puzzle is set to the selectedLevel and the buttons aren’t clickable above the highestReachedLevel.

The ui of level buttons is changed. I made the buttons smaller and made the selected level more distinct by adding a inner glow to the button.

We’ve upto 30 levels now . I downloaded the lichess puzzles database for this project but whenever I opened the file my laptop will just heat as there were more than 69 millions data 💀 . I did try to use the lichess data but I didn’t actually like the progression of difficulty so I used chatgpt to make puzzles. I’ve played upto 21 levels and I think it’s good so far.

That’s all for now, okay bie….

Finally, I present to you a short devlog 😆

I have fixed the issue of pieces moving with transition when pieces are being placed after clicking on retry puzzle. To prevent this I already written code which worked perfectly but when only on retry puzzle it wasn’t working. This solution was simple but figuring out the issue took time. To fix the issue I used a useState hook to set hasPiecesPlaced to true only after pieces state updated.

Also, I’ve already written code for handling page change in the middle of vision practice. I think this doesn’t work after I removed Chessboard.jsx and ChessboardContext.jsx. Not sure when this broke . I found better way to do this using the useEffect hook cleanup function. I learned that when adding setState directly in cleanup function it throws at recurring error 😭 . I felt my laptop heating up 😭 😭 . But there’s no error when adding setState inside the function and then running the function in the cleanup function.

That’s all for today. Couldn’t do as much as would like today cuz a rat bit me 😭. Bye…

Ayy good progress today

I created a separate chessboard component for puzzles page only. Before both puzzles page and vision page were using the same chessboard component making the code complex, hard to read and hard to debug. Firstly I decided to move all the chessboard functions and states into puzzle context but later changed my mind midway. I decided the chessboard functions and states make more sense to be in it’s own folder. Everything broke while doing as expected but I fixed them one by one. Now the puzzles chessboard is functional and it’s code looks a little less overwhelming to me.

Now the vision page also needed a separate a chessboard. It wasn’t as easy as just copying and pasting most of the code into vision chessboard because the data was connected to more components of the sidebar such as progress timer, color Menu, etc. I don’t if I should separate the functions to components that they server of just dump it all into the vision context file. What I did was keep functions into their respective folders cuz I think the vision context file looks really cluttered doing that. Everything broke here as well but as before I fixed things one by one.

Now I really believe it will be much easier for me to work on chessboards as they’ve been seperated. Also I deleted the original chessboard component and chessboard context after that. On clicking the sidebar button the reset board function is called and the function came from chessboard context. As there is no chessboard context now you can see that there’s a problem here. The reset board function in now in PuzzlesChessboard.jsx which means we can’t access it from PuzzlesSidebarBody.jsx. To solve this I just made the board reset everytime when hasPuzzleStarted is true. We do have the access to hasPuzzleStarted from puzzle context. Fixing that somehow broke the piece transition though.

After that I mostly worked on the small things. Such as fixing no transition during piece, fixing the progress timer staring with 2 seconds less than the time set, adding chessboard size to puzzles chessboard in a better way, etc…

Now the next puzzle and retry puzzle buttons also work. The next puzzle button works as expected. The retry puzzle button also works but the pieces move to their repective place with animation when the board resets which I don’t wan’t. To prevent this specific thing I have already written some code before and it’s working when starting the puzzle, moving to next puzzle, rendering the default pieces on first load. I can’t figure out why it’s specifically working for retrying a puzzle. I spend a good amount of time looking but idk. I’ll look into this tomorrow.

I think the devlogs are still pretty long. I’ll try to keep the devlogs shorter on future devlogs. Okay bie…

Two steps forward, Four steps backwards 😭

Firstly, I’ve fixed the gsap animations not working. This happened because last time I renamed all the color state into chessboardColor. Due to this the gsap backgroundColor css property turned into backgroundchessboardColor. Ig the lesson here is think before using change all occurences feature in vscode.

The sidebar now changes. If puzzle hasn’t started then it’s the same old ui. If the puzzle starts the level btns disappear along with start puzzle button. If user makes incorrect move the sidebar show retry puzzle button and if the puzzle is completed successfully then next puzzle button shows up. One thing I learned here is making one button use different className, onClick handler and text easily by storing all data in object.

The retry and completed onClick function looks empty. So, I decided to work on the retry puzzle button functionality. To make the functionality work I imported the resetBoard function from chessboard context. Calling the function directly didn’t work because setState function doesn’t apparently update if the value is same. I fixed that by passing {retryLevel: true} or false to the function. After doing this the first opponent move did break and I did fix it but I think with bad code. Looking at the code now I’ve been calling resetting the board and setting default position using the chessboardColor seems wrong.

So, then I started cleaning the code. I guess I was correct and things needed to change. I would say these are mostly small changes and don’t need explanation but it seems that the chessboardColor had an actually bug and it took my soul away trying to fix that 😭 . So, the opponent move was capturing it’s own piece meaning that the piece which moved at the beginning would automatically disappear. This was happening because the moveOpponentPiece function ran before the chessboardColor could change when the puzzle is first started. To fix this I had used useEffect hook with chessboardColor in the dependency array to reset the board. But only works if I have the black pieces. If I have the white pieces the chessboardColor doesn’t update because useState doesn’t update when the value is same. The value is white at first because of the default position set when puzzle hasn’t started. I don’t even know how to explain the fix i used. I just chained state updates from file to file to have colorUpdated state value updated in chessboard context.jsx. Basically I had a rough time fixing the resetBoard function running before chessboard color was updated. This time even pen and paper also couldn’t help me solve this 😭 😭 but it did help me to understand the problem on a deeper level.

I tried adding next puzzle button functionality. “I tried” 😭 cuz I couldn’t get it to work and on top of that when I tested the retry button it didn’t work. Don’t know how but the retry button also broke. Now, I’m taking a huge decision again. I think some of the problems can be reduced if the chessboard wasn’t a single component that works on both puzzle page and vision page. I think I was too ambitious but now seeing these issues I think it’s better for me to have to separate chessboard components. This might not be the best practice, but this will probably make my life easier.

I just read the “Devlogs that get noticed” in the resources page and I think I should make my devlogs a little shorter. I said this in one of my previous blocks as well, but it seems that I am explaining too much. So let’s see what will happen tomorrow. Okay bieeee….

Learnt something valuable ✨

Okay now the puzzle buttons have dynamic ui. The puzzle button will have ui according to the puzzle level. I was confused on how to achieive because there were three condition instead of two. If there were only two coniditions then it would have be easy as I would have simply used ternary operator. I couldn’t use if condition inside jsx. After some time I figured that if could call a function and use if conditions inside the function and return the className. Also now the puzzle level is stored and fetched from the backend.

After doing that a toast error popped up as you can see below. I didn’t know why this was showing up when the page is first loaded up but instead of fixing that I first moved on to make the start puzzle button work. I think my main problem is I get distracted easily. To make the start puzzles button work firstly I created puzzle context file . I was deciding to make the chesboard context the puzzlecontext as all the data needed for puzzles page was there but I think it’s better to seperate those things. So, I placed the puzzle context higher than chessboard context with that thought process. If the puzzle hasn’t started the fen value is set to default starting position. Then I again got distracted and thought why isn’t the vision context also above the chessboard context. So, I moved the vision context and the coordinates broke. The reason was color state so then I created different color states for vision and puzzle context. While writing this I don’t actually know what I’m really doing. I do one thing and jump onto another making writing the devlog very hard. I think I can do better… 🙁

After learning the lesson, doing thing one at a time. I only focused on making the start button work. So I moved some values inside puzzles context for this to work and everything broke. But, I wasn’t feeling overwhelmed as my focus on only one thing. Slowly but surely I fixed the pieces moving, capturing and the first opponent move. I think my main issue is dealing with useState hook updating in batches. Ig I will just get better with time. Still the backgroundColor animation is broken which I need to fix.

Also while doing this I found out why the toast error was occurring. Silly me didn’t add method post to update the puzzle level. Now after the puzzle finishes the puzzle levels value updates and the updated value persists.

I should definitely do things one at a time. Getting distracted and doing multiple things will just make me feeling overwhelmed and will make it harder for me to devlog as well.

Making good progress

The piece background color now changes color depending upon the correct or incorrect move that the user makes. Last time I was trying to achieve this by just using useState hook. I’ve understood now that it was the wrong approach instead now gsap handles the animation part. The main issue with gsap I was having was I didn’t know how to select the exact piece for animation. I’ve achieved this by using useRef hook named pieceRefs containing an object will all the pieces on the board with their ids as key. I haven’t never used a ref like this before and it feels scary to write code in the unknown territory but ig it’s a part learning.

Also I’ve removed the code that changed the backgroundColor using useState and used gsap. It was just waste of my time to try to use useState hook to change the backgroundColor . So now, piece toggling the highlighted bg color when a piece is selected or unselected will be handled through gsap.

Ahhhhhhh.. Finally after a puzzle is completed successfully the the next puzzle will start. My brain feels like it’s melting after making this work. I struggled so much to make the work mainly due to react batching the state updates. Unexpected bugs came while coding this. So, basically a puzzle is considered finished if the moveOpponentPiece function has no moves left. Then, we change the fen state and also reset the board so that the pieces are placed again. After that when player reaches next level the opponent first move needs to take place. For that I have a useEffect hook to check if opponentMoveIndex and userMoveIndex value are default values. The values are set to default through resetBoard function and if the values are the default ones then the opponent pieces moves.

One of the main issues I had with this was the moveOpponentPiece function was running twice. Due to which one of the opponent move was being skipped. I wasn’t able to locate why and was making so many unnecessary changes and console logging everywhere to fix this 😭 . The issue was that the useEffect that I talked about earlier had pieces in the dependency array making the moveOpponentPiece function to run twice. I’m really exhausted after doing this…

Then after some relaxation I made a rough figma design for the puzzles sidebar. It was kinda relaxing to not worry about coding for a while. I had big plans for the sidebar like making candy crush type levels but I don’t think I’ve time for that so just basic buttons will have to do. I’ve tried creating the distuinguishing the levels based on completed levels, current level and locked levels.

Back to coding again, I mostly copied the vision sidebar code for puzzles sidebar as the only difference is in the sidebar body. It seems that I’ve forgetten to use css grids. I wanted the buttons layout to be responsive. I took a quick revisit on how grids. Throwed random properties at the grid hoping it will work as I expected 😆. At last it was the auto-fill property I was looking for with a combination of minmax. I’ve tried created the css for completed, current and locked now I just have to hook them up to the buttons according to puzzle level reached by player. I’ll do that tomorrow, now I’ll stop writing.

If you’re reading this, I hope your project is going well💖.

I am stuck

Ayy the opponent moves work as expected now. In last devlog I wasn’t able to capture opponent’s page because I accidentally didn’t filter the pieces, only moved the piece. Now the capturing system also works as normal. While talking about capturing pieces now the opponent can also capture pieces. If any of the player’s piece is on the destination of opponent’s piece then it will be captured. The main lesson learned here is to mostly use the previous data while changing the state’s value to avoid unnecessary bugs.

I’ve made the reset board function work. This was the point where I decided to rebuilt the code by removing the use dom manipulation and looking back I think it was a great decision by me. (Context: 2, 3 devlogs ago I found out my code was really trash while creating the reset board function). While writing reset board function I did run into some weird bugs. The board is reset by reconverting the fen to pieces array. The first opponent move happens when the opponentMoveIndex is 0 now. In the reset function the opponentMoveIndex is set to zero. I’ll add a animation to indicate that the user’s move is incorrect later.

For now I added the animation for the piece moving. I’ve learned that when moving the pieces by updating the state in react, the key of the element is what matters for animation to occur. If the key of the element is same and just the transform style has changed react knows that it’s the same piece that jumped from one place to another. Also now, the move transition doesn’t happen when the pieces are being place. Because the pieces are placed using the transfrom property, the same property used to move the piece. I took me a while to fix this. It seems that this was happening because the squareWidth was making the page re render. I’ve fixed it but I still I don’t completely understand it, which shows that I’ve a long way to go.

This one is small but crucial. Now the user cannot select the opponent’s piece during opponent’s turn. I’ve added a 500 ms delay for opponent’s move so that it doesn’t feel things are happening really fast. In that timeframe user is not able to select any pieces now.

I am now stuck at the part where I am trying to animate the pieces after checking the user input. Whether it’s correct or incorrect. I wanted to make the background green if the move was correct and red if it move user made was incorrect. Using states is proving to be tricky for me as they’re fully synchronous. My brain goes okay this will happen and that will happen but the code won’t have the updated data because of useState nature. Also I tried to change the background color same way I move the pieces. Now that I think I about it I just wasted time. I will try to do animations with gsap now but idk how to explain I can’t really think of a way to do it with these useStates.

Okay this was more that enough yap for 2hr 30 mins of work. Let’s see if I figure out a way tomorrow. If you’re reading this love you man 💖.