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 💖.

Most rebuilding my broken code

For context last devlog I took the decision to start rewriting the code to stop accessing dom directly by using states.

Now the pieces are mapped from pieces state rather than directly from fen so that I can move the pieces from state instead of manipulating the dom. To achieve this I firstly created to convert the fen to pieces array. The pieces array looks something like this rn.

[
    {id: 'r-a8', pieceNotation: 'r', square: 'a8', coordOfFile: 0, coordOfRank: 0},
     {id: 'r-e8', pieceNotation: 'r', square: 'e8', coordOfFile: 4, coordOfRank: 0}
]

From this I learnt that setting the key attribute serves it’s own purpose in react. I don’t fully understand it rn but I’ll look into it. Now, the id of the piece serves as the key for the piece element and if I’ve understood correctly that will be vital in animating the piece moving.

Yay the rook has been reestablished using react state without any dom manipulation. The reestablishment wasn’t too difficult as I thought due to the already existing code. All the changes now happen in the pieces state which then causes the react to repaint the pieces. Now the rook can move from one square to another and capture opponent’s pieces. Also I’ve made the reset squares function as it removes the destination squares, caputure squares, etc . Although there’s no animation during piece movement rn I’ll it add later.

After making the rook work I stared making all other pieces work as they used to before. I thought I had to write most of the code to fix all the pieces but after finishing the rook other fix other pieces wasn’t that bad. I reused the code from the rook where I could, fixed some bugs and errors on the way and modified the code where necessary. Sometimes I got stuck due to my own stupidity but that’s nothing new 😆.

The moveOpponentPiece function is rebuilt. Now the first opponent move will happen when the board is first loaded. While fixing this function I found out that I was able to select the opponent’s piece as well. This shouldn’t be the case cuz I had already put railguards for preventing this. After fixing the moveOpponentPiece function I checked why this was happenning and the cause was I put railguards only if user click on another piece when a piece was already selected and that code was also wrong. I fixed them both and now they work as expected.

Another bug found. When I clicked on the first pawn it only created one destination square instead of two. This was happening because the for loop had only 7 iterations instead of 8 which added the starting pawn squares to the array. Also the user’s pawn were able to capture the user’s pieces which was a big nono so I quickly fixed that.

Even thought the moveOpponentPiece is working for the first move it instantly breaks from the second move. I still fully don’t understand why this is happening. I know it has something to do with using setState and it not being synchronous. The code looks like this

let updatedPieces = pieces.map((piece) => {
    if (piece.square === position) {
    return { ...piece, square: destination };
}
    return piece;

});

setPieces((prev) => {
    console.log("updated", updatedPieces);// I don't understand how this value
    return updatedPieces; // and this are have different values});

I’ve fixed it while writing this devlog removing updatedPieces variable and mapping the value directly inside setPieces(). Now, the second move works but the third move is broken 😭 . I’ll look into this tomorrow. I’ll wrap this up for today.

Also I’m changing my devlog style a little bit. I’m not telling you all the problems I ran into like I did before to keep the devlogs a little short.

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.

I’m dissapointed in myself

Updates:

• Fixed pawn unable to show two capture squares at once
• Added function to move opponent’s piece automatically
• Set fen according to puzzleLevel
• Moved opponent piece after the pieces have been placed and remove css transition into gsap animation while moving pieces

Last time I added functionality to pawn to be able to capture pieces. It worked fine I there was only one piece diagonal to the pawn. I there were two pieces diagonally infront of the pawn only one capture square would appear. Now two capture squares appear if there are two pieces in front of the pawn diagonally. Fixing this was simple.

Created the function to move the opponent’s piece automatically. In puzzles the user only moves their piece, the opponent’s piece moves automatically after user plays their move. This was the most frustrating thing I worked on today. I thought the function worked correctly but I was wrong. I’ll tell you in a sec.

I added 3 fens with moves from lichess puzzles data in constants.js . Then I made the default fen data to null and made it so that the fen is selected according to the level of the puzzle. I think I was trying to add loading state for this. It was very poor thinking from me. I was just being very ambious and instead of trying to do things step by step I was trying to multiple things at this time. I don’t remember exactly what changes I tried to make ig I was trying to fix the moveOppenentPiece function as well at this time. I undid some of those changes, left others as it was and fixed the fen and commited that.

I was already frustrated at that point and then when I tried fixing the moveOpponentPiece function the constant errors and bugs worsened my frustration. I don’t want to explain that part. Just know that after fighting with my code it’s working now. Also before I had css transition for trasform property. Meaning that whenever the pieces moved it moved smoothly. But when the chessboard is first rendered all the pieces also animate to their places. I fixed this by removing the transition css and using gsap to move the pieces. Now the first opponent move happens automatically. This was also frustrating to make it working.

Basically today was frustrating. I thought I coded longer but seems like not. But anyway, when you’re at the bottom the only was is going up. Saying that I will stop writing this devlog. I feel I could have written an essay today. Okay bie…

Gobble up pieces

Updates:

• Rotated piece img when color is black and made user unable to select opponent’s piece
• Added functionality of capturing pieces with rook
• Added functionality of capturing pieces to bishop, king and knight
• Added functionality of capturing pieces with pawn

My goal was to make the board work from both sides. I was ready for this goal to be challenging. I was messing with squareid and position of pieces by checking the color of the board. But it seems don’t have to do much for things to work. Before, I have already made the board rotate using css. I was rotating the pieces when color was black and that was causing issue. Instead of rotating the piece I simply rotated the img inside the piece. Till now every is working as expected. Also I made user unable to select the opposite colored piece.

Now we can capture pieces . If a piece can be captured, the piece will have four triangles at the corners. This is inspired from lichess as I didn’t really like the circle of chess.com. I made the triangles myself using figma. Also I created the dot in figma to change it’s color. Previously the dots were green. It took me some time to pick the colors of triangle and dot cuz I didn’t wanted their colors to ruin the feel of the chessboard.

This works by firstly determining if the piece in the way of destination squares is our piece or the opponents. If it’s our piece then destination squares will instantly stop generating but if it’s the opponent’s piece the we first add the sqaure position to capuredSquares array and then stop generating the destination squares. While doing this I learnt about the remove method which allow me to remove the captured piece element from the board.

It took time for figuring out how capture pieces with rook. After that it was really easy for me to do the same with other pieces as well except for the pawn.

The pawn isn’t the same as other pieces. It moves vertically and captures diagonally. So I had to write code differently for the pawn. I code for the pawn does seem a little messy but i think it’s fine. I would say it wasn’t too difficult to make the pawn capture pieces. I did have to think about making the capturing functionality work for both white and black pawns.

This much for this devlog. I am being quite lazy nowadays. Time to grind and lock back in. Hit me up if you also want to grind along with me.

Mostly cleaning up my messy code 🧹

Updates:

• Made bishop not able to pass through pieces
• Made the code creating rook destination squares much cleaner
• Made the code creating bishop destination squares much cleaner
• Fixed rook and bishop not creating destination sqaures at the edges of the board
• Made code for creating knight destination squares cleaner and fix if statement condition of rook in ChessboardContext.jsx
• Made code for creating pawn destination squares cleaner and make pawn unable to pass through pieces
• Fixed bug while clicking on a piece when another piece is already selected

In last devlog I made the rook unable to pass through pieces so it was very logical to do the same to bishop. Making the bishop unable to pass through pieces was pretty simple as the code wasn’t much different from the rook one.

Idk what clicked in me after doing that I started to thinking about making the rook destionation squares creation code cleaner. The code was very messy and repitetive and I believed it can made cleaner and smaller. I used 4 while loops before which had almost the same code but different values and slightly different calculations. After thinking and trying I turned the 4 while loops in to a single while loop. Now the code looks much better.

Seeing the success in rook destination squares creation code I then moved on to the bishop’s code. Made similar changes to the code as the rook’s code. Also i believe the queen works perfectly as it’s mixture of rook and bishop code but I haven’t really tested it on board.

After cleaning up both rook and bishop I found a small bug. The bug appeared because of my slight mistake while trying to make the code better. Basically the rooke and bishop weren’t creating any destination square at the edges of the board. The fix was simple so this didn’t take long to fix.

I already didn’t like the knight’s destination squares creation code. Me cleaning up the rook and bishop code gave me the motivation to make the knights code better. It did take some time for me for cleaning up that messy and tangled code. I was using break keyword for rook and bishop so I also used break for stopping the loop but I didn’t want the loop to stop completely I just needed to skip the loop if there way a piece or if the knight was on the edge of the board. After a quick search I found that continue keyword does the job.

The pawn code wasn’t that messy but it could definetely do better. I mainly changed the pawn’s code cuz I wanted the pawn to also be unable to pass through pieces. Before there were two loops now I one loop does the job. Then I also made the pawn unable to pass through pieces by breaking the loop.

Fixed the annoying bug. If a piece is clicked when another piece is already selected then it looks like both pieces are selected. Desitnation of both pieces are shown and both pieces are hightlighted. So, as clicking on a square reset the selected piece, I reset the previous piece if user selected another piece with a small change.

Now I’m trying to making all these things work from the black side as well. Okay this much for this devlog. See you on the next one. Biee…👋