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

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…👋

30 day streak let’s goo 🔥

Updates:

• Added functionality of moving pawn with seperation destination square for white and black
• Added functionality of moving knight
• Changed color of chessboard
• Made rook not able to pass through pieces

The pawns now move one square at a time and have the option to move two squares if they’re on starting squares. Moving pawn one square is easy but I had to think about creating two destination squares infront of the pawn. So I created a array and push all the starting squares of the pawn and if the pawn is on one of the starting squares then two destination squares are created. It’s also seperate for black pawn and white pawn so that white pawn doesn’t get two destination squares when it’s on the black pawn’s starting squares.

I forgot the knight also needed to move lol 😆. Just remembered in time after finishing the pawn. The knight was tricky to move. As always I used the mighty pen and paper first before coding. Creating the knight took some time due to random bugs here and there. I think I need to revisit the knight code later as it’s very messy.

Yay, now the back pieces don’t disapper on the dark squares as I have changed the chessboard light and dark square colors. I think the new colors look great. I was lazy to test out colors so I went to chess.com and picked colors from one of their themes.

Okay now were moving to the next step. Making the pieces not be able to move through pieces. I started with the rook. The plan was simple. Check for any piece with squareid that’s same of the destination square and if true stop the loop. I couldn’t figure out how to even select the piece. I was frustrated as I need to select the specific piece with the squareid attribute. I found out about ReactDOM.findDOMNode but I couldn’t figure out how to work with it. I felt really frustrated at that time. I was thinking of using document object but I know that is a bad practice in react. It seems I forgot that we can use querySelector in refs. I already had the chessboardRef so I used querySelector to find if a piece was on the way of the rook.

Also I had to change the way I calculated the rook’s destination squares but let’s not talk about that I think the devlog has gotten pretty long.

Although the problems are hard for me to solve when I see the results working I genuinely feel happy. I have gotten lazy after getting sick. Although I have not fully recovered yet I’ll try to stop wasting my time. Okay this much for now biee….

More pieces can move (I’m sick again 😭)

Updates:

• Added functionality to handle vision page if user changes page during vision practice
• Added functionality of moving bishop and seperate calculation of rook moves
• Added functionality of moving queen
• Added functionality of moving king

I told in the last devlog that I was working on hanling vision page if user changed page during vision practice. And now, it’s done. I think I have reset the necessary things so that vision page works normal. If any bug related to this appear in the future then I’ll fix it then. Right now everything looks fine after adding this functionality.

Creating destination squares for rook was easy and I thought bishop would also be probably easy. I was very wrong. The thing with rook is that there will always be equal number of destination squares but bishop doesn’t. I bishop’s destination squares varies according to it’s position. I took a long time to figure things out in pen and paper. I even wrote the whole chessboard notation in paper and looked at only one diagonal first to find some sequence ( I’ve attached the img below 😆). I started coding after kind of figuring out where to start. I had issues during coding as well but we got it boys. Also I was using OR instead of AND in the while loop causing bugs and I needed some time to digest that AND definetely worked there. A silly mistake from my side.

For the queen I didn’t have to code much as I wrapped the rook and bishop destination squares code in to a function. Then, I created a new function for creating destination squares of queen which just called both the rook and bishop function. As this was really easy I was pumped to move on creating king’s destination squares as it is also really easy. Took a sip of coffee and continued my coding journey.

I was wrong 🥀. I got stuck adding the king’s destination squares. I was first thinking of combination of rook and bishop but only one out from every side. This was the wrong way of thinking ig. Then I thought I should use two nested for loops for creating the destination squares which firstly worked out badly cuz I’m dumb. The destination squares we’re being created in such odd manner. After fixing that I had to also remove the destination square which was being created on top of the king and also had to handle to not generate some destination squares when the rook is on the edges of the board.

I have done nothing today due to my illness. I hate my immune system 😭. I’ll code for 5 mins now ig for keeping my streak alive. Okay biee..

The rook got some moves 💃

Updates:

• Added movement to piece when destSquare is clicked
• Added mode state for seperation of chessboard in puzzles and vision page
• Moved states, refs, effects and functions from Chessboard.jsx to VisionContext.jsx
• Working on handling vision page data if user switches to other page during vision practice

Finally I can proudly say that the rook can move now. I am really happy that it’s working. To move the rook I had created destSquares(the square with green dots) last time. Now if the user clicks on any of the destSquare with some maths the rook move to that square. I’ve added transition for the movement to look smooth.

While doing this the rook did move to the destSquare but when clicked on the rook again the destSquare appered from when the rook was last time. To fix this I grabbed the destSquare location (e4) then set the squareid of piece to the location. The destSquares were calculated based on the squareid so now after moving the rook I can move it again.

Also now if the a piece is seleced the background color of the pieces changes. When a piece is selected then destSquares appear but if the piece is selected again or other square is clicked then the destSquares are removed. Small things like this is making the chessboard feel lively and feel that it works correctly.

I wanted to do this before but I thought I’ll do it later. I added a mode state in Chessboard.jsx. The mode state is either “puzzles” or “vision” representing the page the chessboard is on. I have made the pieces not appear while I’m in vision page and am trying to make sure nothing is running behind the scences if user decides to move to another page after they click on start.

The countdown timer code of vision page was in Chessboard.jsx. I didn’t like that so I decided to move the code to VisionContext.jsx with the timer I move some states , refs and function with it. I had some issues during this migration but it wasn’t too difficult to resolve.

I thought I had worked more but seems like I’ve. I’m confused, when I think I have done little work at that time I some how end up will better hours and when I think I have done decent amount of work I end up with less hours.

Anyways it feels good watching the rook moves are working correctly. This much for this devlog. Peace ✌️

I got sick 🤧🥀

Updates:

• Make pieces position perfectly to square in chessboard
• Moved chessboard states and refs to ChessboardContext.jsx
• Fixed pieces sometimes being group together in one square when chessboard offsetWidth is null
• Added destSquare element on click for all possible moves of rook

Last time I did position the squares but when I changed the background color of pieces there was a slight misalignment. I started searching what was causing that to happen. It was due to the height and width of chessboard being in decimals. I checked to see what lichess were doing and found out the height and width of the chessboard were always divisible by four. I did the same for my website and now it’s perfectly aligned and that’s what I love to see.

Moved the states and refs from chessboard.jsx to chessboardContext.jsx to make the chessboard code less cluttered. The code relevent to puzzles page is in the chessboardContext while the code revelent to vision page is still in the chessboard page.

When the page was loaded for the first time the pieces were being group together at the top left square. It was being fixed automically when the page was reloaded. It also happened while navagating from home page. I found out this was happenning due to chessboardWidth being null at start. To fix this I created a useState for the chessboardWidth so the page rerendered after the value was changed.

My goal today was to make the rook move but I could only work up to generating the destSquares when the piece is clicked. I achieved this by creating a useState array and if user now clicks on the rook it calculates all the possible squares that the rook can move to and then that array is mapped using math to place destSquares perfectly on top of squares. The destSquares have a dot insided them which will be replaced by a icon but that’s the reason they’re not aligned centered currently. I did have a hard time doing this. Let’s not talk about it. 😭

I’ve written everything in short so that I don’t hit the 4000 characters limit and also ig it’s better for people reading (if any 🥀).

I got sick yesterday and was just able to work on my project for 1 hr. Today I thought didn’t work much but it seems today I did 3 and half hrs. I am happy about today.

I really don’t know if I can create the puzzle but I’ll try my best to do so. Everything I try to do seems to come with their own set of challenges and take time to overcome those challenges. Let’s see what happens 😔

The pieces have been placed. I was so sloppy 😭

I’ve added pieces to the chessboard. I’ve finally started facing my fear and started working on the puzzles section. It seems that creating the chessboard for puzzles will be harder than I have anticipated. Also please don’t mind the black pieces blending in with the background.

I didn’t find chess piece set I liked so I downloaded the lichess chess piece set from pinterest. I was trying to crop them in figma and I coundn’t crop them properly. Also it was a tedious job. After downloading two crop pieces from figma I again went to the web to find out if someone already made them. This website came in clutch (greenchess.net). They had the whole chess pieces set of lichess available for download.

Then, I started to code with no plan in mind . I don’t know why do I do this to myself. Obviously it was a bad decision. So I decided to use pen and paper to mainly solve one thing and that was how to place the pieces on the board. The writing helped me alot to think better.

I was so sloppy while coding. I was mostly outside while coding and I was really distracted. One sec I was coding and another sec I was thinking about something else. I was making so many silly mistakes making the process more frustrating that it already was.

I learned about fen while doing this (Forsyth-Edwards Notation). Through this any chess position can be stored and recreated in one line. It looks like this

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

I only needed to loop over the first part divided by slashes for positioning the pieces. Other things will be used later. I feel the code is really poorly written but it works so idk.

I also found out about regex while I was trying to write a if condition for seperating strings and string with numbers.

Okay this much for today. Bie….

Moving onto something big (I’m scared)

Updates:

• Change ui of popup menus in options.jsx
• Added sounds for correct and incorrect attempt in chessboard
• Added countdown and start sound in chessboard.jsx
• Added puzzles page
• Renamed sidebar of vision page and it’s component with prefix of vision.

Most of the updates in this devlog are small changes. But now I am going on to work on the puzzles page. I don’t know how I will figure this out. I hope it goes mostly smoothly..

I had designed the popup menus in the last devlog. I think the newer design is much better than the last one. The popup menus don’t look the same in the figma and the website cuz I tweak some things while coding. The figma design was a rough design

Adding the sounds in the vision page has made praticing much more fun. The built in mac recorder doesn’t record sound unfortunately or I just don’t how to.. So, I’ll add a ss of vision page with menu open and a ss of puzzles page.

I added chessboard and sidebar to vision page. There were two sidebars now so I decided to rename vision page sidebar to VisionSidebar and puzzles pages sidebar to PuzzlesSidebar.

Okay that was all for this time. Give me strength to start making the puzzle by liking and commentin on the devlog. Byee ♥️. 

Also if you’re reading this support @PAPER_01. AniShuffle has been taken down but she’s been unbanned now 💖.

You’ve my coordinates now

Updates:

• Added coordinates to chessboard
• Changed previous to current
• Fixed user input on chessboard being checked before countdown finished
• The show coordinates now works
• Fixed some event bubbling issues in colorMenu and timeMenu
• Designing the pop up menus

Now it’s easier to locate squares with the help of coordinates . Now you will also notice the board has fliped while changing colors.
~
A small change, in the sidebar the previous word has been replace with current. I think the current word makes more sense there.
~
I also fixed user being able to click on the squared before the countdown finished. This was a silly mistake from me.
~
The coordinates has made it easier to locate squares. But if you want some challenge then you can toggle show coordinates off now.
~

That’s all for this devlog. If you wan’t my actual coordinates dm me 😄.

We’ve reach 100 hours 🎉

Changes:

• Fixed timer not displaying in sidebar
• Removed the square display after time is over
• Fixed timer setInterval running multiple times and made countdown timer code cleaner
• Fix TimeMenu not closing
• Removed unused imports
• Designed the sidebar to add new data
• Added the new design
• Added animation to make the square notation that appears on the chessboard disappear

First of all, we have reached 100 hours let’s goooooo.  I would like to thank everybody who have followed my project read, liked  or commented on my devlogs . My project has recently started getting some traction. Special thanks to @PAPER_01 💖.

I have done a lot of things this devlog. I will try to cover these in as short as possible.

It seems that the setInterval in progress.jsx was running twice. I found out this while I was making the countdown timer code cleaner. So to fix that I reset the hasCountdownCompleted as soon as the timer in progress.jsx runs out. Now, countdown and progress timer work as intended with cleaner code.

The random color option in color menu now works. It was a little tricky making that work. Let’s just say it wasn’t working as expected but the fix wasn’t that hard.

I liked what chess.com were doing. They were displaying the square notation and then the square notation would just disappear. The square rotation will also live in the sidebar so that if user forgets what the square was just displayed, they can easily look at the sidebar. I really like this idea and decided to implement on my project as well.

But before I added this to the website, I first designed it on Figma. I also thought of displaying the score and best score on sidebar. Designing it was fun and tricky. I didn’t really like how the previous score and best score were looking and after some trial and error it looked okay.

All of these things were fine and enjoyable to do but making the best score work was so frustratingggggg. It’s the reason that I couldn’t devlog yesterday.

The issue was score was showing to be zero inside updateTimer function even though the score was greater than zero everywhere else. I thought fixing it wouldn’t be really hard. I tried console log score everywhere to see when the value was being zero but there was no sign of the score turn into zero. Later I found out that due to the updateTimer function being inside a setInterval the value is kind of locked and used useRef hook to solve the issue.

Okay, that’s all for this devlog. Now that I have reached 100 hours let’s aim for 150 hours as soon as possible. I have taken very long to write this devlog so I like would be heavily appreciated 😄.

Mostly cleaning up the code and breaking things

Changes:

• Made timer code better and cleaner
• Added functionality to timeMenu options
• Added countdown before starting the timer and displaying the squares
  -Added VisionContext.jsx to make code cleander and broke down vision page into smaller components

As I said in the previous dialogue, the timer code was messy. So I decided to clean the code now it looks much better.

Also now the time button options work now the timer will have 15, 30 or 45 seconds according to what you choose.

So before, after cleaning on start the timer would start right away and the square would also show up. But this might make the user frustrated as they have to click start and right away move their mouse to the chessboard. I saw that chess.com has a countdown timer so I also made one. The code for this countdown timer is also messy so I will probably make it more cleaner next time.

This is the main thing I have doing this whole devlog which I cannot show you because it’s just making the code cleaner. The vision pays had a chessboard component and then sidebar element to it. The sidebar element had all the code which was making the vision page could a lot messy. So I have broken down components into components and those components in the further components. I think this is making the code much more easy to read and find and debug each component more easily.

But in the process of cleaning my messy code, things have broken down. The timer isn’t working, I will fix that later. I don’t have much to show here today so the see the countdown timer working and the broken timer 😝.

I will fix everything in the next devlog. So stay tuned. Bieee…

Ayy almost 5 hrs today !!

Changes:

• Fixed attempt square and attempts not wrapping as expected
• Fixed color being stuck in chessboard when same square is clicked rapidly
• Added color menu popup when click color button in sidebar
• Added time menu popup when user clicks time button in sidebar
• Added Progress component in sidebar with working score
• Made timer in progress.jsx functional

Fixing the user attempts in the was pretty easy. I just added a attempts container to wrap the attempts element and then the CSS work as expected.

Fixing the red or green colour being stuck in chessboard when clicked rapidly was a headache to fix. I was trying my best and at last I came up to the decision that I needed a timeline for the animation before the animation was played the progress of the animation should be zero. I tried that and obviously that didn’t work but it seems that I was close to the answer. I used Claude to figure out the answer and Claude used killTweenOf gsap function to remove the animation before the animation was even played. It also added a onInterrupt property to the animation which basically reverted the stuck colour after killing the animation. I didn’t want to use Claude, but I just couldn’t figure it out and I think it was better to use Claude as I have never used those functions and properties of gsap. Also Claude made that portion of my much cleaner. Seeing this now, I will be more focused on the cleanliness of the code because claude showed me that my code was repetitive and how it could be made smaller and easy readable.

I decided to make the colour menu pop-up and time menu pop-up straight by coding instead of designing it first as I should have. As you can see, the result is very terrible. I am sure definitely fixing it in the next devlog. I was force thinking of making a pop-up menu component and using them in both buttons but I found that it was a hassle and not worth it. Only the white and black button in colour pop-up menu work. They just rotate the board and that’s all I still need to add functionality to them.

After learning the lesson that I should definitely design before coding. I started designing the progress component. Although there isn’t much to design there I definitely would have made it as bad as the pop-up menus. While coding this, I also made the score display the total number of correct at attempts which was pretty easy. I just had to add one digit whenever the chose the correct square.

Then, I started working on the timer. The timer would have been really easy if I just used setTimeout every second but I like to torture myself so instead of just doing that, I challenged myself using date constructor. I have done this before but it has been sometime and I remember how it worked. The countdown started from 28 which was frustrating. Now, I have just completed that but the code is really messy. I will definitely fix that tomorrow or today as I might post this devlog tomorrow.

I think that shorter devlogs do better in terms of views. I’ll try that next time. See you in the next devlog 👋.

Things are going great

Changes:

• Added chessboard component with ranks and colored squares
• Added function for generating random squares and displayed them
• Added feature to display green and req squares to indicate whether the user clicked correctly or incorrectly in the chessboard
• Displayed attempt made by user in the sidebar with respective colors for correct and incorrect ones

I thought doing all of these took me at least four hours but I was wrong. It seems that it’s only been about like three hours.

This time I have worked on the chessboard itself on the vision page. Before it was just a plain whiteboard but now there are individual squares which was pretty easy to implement. I however needed some time to figure out how to add colours to the squares. But it also wasn’t that difficult.

Then I created a function for generating random squares with the help of math.random(). I created an absolute element to display the random squares at the centre of the chessboard.

To indicate the user that the square they have clicked is correct or incorrect I played the small animation that changed the colour of the user clicked square into red or green depending upon whether the user input was correct or incorrect.

I was stuck here because I didn’t know how to reverse the animation. Of course I could just change the colour to green and then the colour of the square but that didn’t look quite right as I am probably going to change the chessboard colour later. So I wanted the animation to be flexible I was trying to play and reverse a animation timeline but it was so much easier than that later. I just remember there was the repeat and yo-yo property that will easily accomplish this effect I’m looking for.

I have found a new bug with this if I spam click a square the square permanently turns into either red or green so definitely I will fix that in the next devlog.

Also now the squares that the user clicks will be displayed on the side bar. The colour of this square notation will be red or green depending upon the user selected the square correctly or incorrectly. I have found out that there’s a flex related css bug in attempts element. I will look into that tomorrow.

Okay bie.. Hope you have a great day 💖

Started working on the vision page

Changes

• Designed the vison page
• Created the vison page and worked on the sidebar ui

I have changed the name from visualisation to a vision. I actually don’t know which one is better. I just changed because chess.com and chesskid.com had vision for practicing the squares on the board.

Designing of the vision section was quite fun although I had some issues with auto layout that wasn’t big of a deal. I was thinking what options should I have and thought it would be best to add show coordinates, change the color and select the time. I think the UI turned out pretty great. I will probably change the colour of the chessboard but black and white also looks fine.

Coding design wasn’t too difficult. It was just copying the design that I made, but the Figma design looks different. I should check out why the size of the buttons are the same but in Figma they look a lot bigger. It might be because the width of the sidebar is not the same.

In conclusion, this was a peaceful devlog. It feels really nice not having to fight with your code and your designs. Hope that the future develops are the same 🤞. Until then peace✌️.

We have followers

Changes

• Designed hollow medals
• Switched from localStorage to db for storing updating and retrieving completed courses data
• Added feature to show medals achieved by user

Designing the hollow medals (I don’t know what to call that so I’ll just say hollow medal) was really fun. I just started designing the medal for fun in Figma. The result turned out really great even better than what I had expected. I was using circles for the medal itself and was trying to use the rectangles for the below design. Later I figured that it would be wiser to use the pencil instead of creating a rectangle and mapping out the bottom portion of the medal which turned out to be a great idea.

In this project, I have started using Figma for creation of some assets and I am loving it so far my intention is to keep on using Figma until and unless I really have to use AI.

Switching from localStorage to database for completed courses data was easy in my head but it took me longer than expected mainly because of three reasons.

Firstly, I was thinking of creating a separate backend endpoint for course data. After creating the controller and route for course data I thought that it isn’t really necessary to create another endpoint for this as we can store it in the users data itself.

Secondly, after deleting the routes and controller, I created API function for fetching and updating the completed course data period I had forgotten that I don’t actually need to have a separate getCompleted function because while fetching the user itself, the data comes with it. I have forgotten to delete the getCompleted.js file which I will do later.

Thirdly, I have started to use Postman for testing out api . I am loving to learn things such as Postman and Figma. But this issue I was facing was the postman was working correctly but from my codebase the request body was showing undefined. It was a fetch thing I use axios before and I am figuring out right now why people used axios. It seems that I needed to specify in the header that this request had the content of json. So figuring that out also took some time.

Also, I have added the feature to show medals achieved by user. The code isn’t quite clean for this feature.

Thanks to the people that followed this project. I genuinely appreciate that 💖.

New followers :

@PAPER_01
@sak

When will my devlog get more than 7 views 😭

Changes:

• Added loading component
• Added scrollsmoother in home page
• Fixed course page padding and added toast while redirecting unauthenticated user
• Added back button to signup and login page
• Designed the logo for website
• Added the logo to the website

Now whenever the frontend fetches user data from the backend there will be a loading component that will come up. I made the loading spinner myself in figma why not 😃.

Scrolling the home page using a mouse is so much better now now due to scrollsmoother plugin of gsap. I was facing a issue with this though. I was seeing an error while navigating to other pages. After a while I found out a guy with same issue in gsap forum and his solution worked. God bless that guy 🙌.

Some small changes were fixing the padding in course page , adding a toast while redirecting unauthenticated user from couse page and adding back button in singup and login page. I think they don’t need much explanation.

I tried to design the logo of my website in figma. I tried different things and landed with a design that felt decent (The logo with king in the center). I look nice up close but it didn’t feel the same when shrunk down as a logo. So I started designing another one. I landed on the logo with cyan and dark purple background and !! symbol up front. I really don’t know how I feel about this logo. I looks decent sometimes and other times questionable. Please leave your opinion in the comments 🙏.

While adding the icon as a favicon, for some reason the favicon wasn’t display which was confusing. Later I found out that this was a brave issue cuz it’s showing up in zen browser.

Okay this much for now. Please like so that more people see this devlog 😭.

Wth it’s been 5hrs??

• Added toast for login signup and login as guest errors
• Made the signup data persist even after the value of hasContinued changes
• Designed the dropdown menu
• Added dropdown menu
• Added logout functionality

First of all, I’m genuinly confused how this took me 5hrs..

Added toast so that now when there’s any error during the signup or login. For example during signup maybe a user might write a username less than two characters, then the toast pops up telling the user it should be greater than 2 characters.

I was stuck during this cuz the trycatch block wasn’t catching the error which was confusing. I used axios previously and it threw an error if the backend response wasn’t ok. But this time I avoided using axios for reasons that you guys probably know 💀. It seems that fetch didn’t throw any error so I had to manually throw errors in the api functions.

The making of signup data persist on hasContinued value change was early. I just set the value attribute of input to be it’s respective useState data.

As you can see in the image that I designed the dropdown. I first designed the dark one which I really loved but it didn’t match the navbar so I created a light one. After seeing the dark one I really didn’t like the light one. So I tried fixing the design. I asked someone in the slack and they said the previous light dropdown design looked fine. Ig looking at the dropdown for long made it look fine to me as well 😂.

Now I added the dropdown to the website. I had issue with the padding of the logout button during designing phase but I just winged it during coding phase and it worked 🎉. The dropdown now looks fine imo. I however did have a issue while making the dropdown closing work when user clicked outside of the dropdown. I thought of using an overlay in the background but I knew that there was a way of doing this by checking the click event. It seems I had forgetten to do this. After some trial and errors I remember how it was done..

I also added logout functionality which was fairly easy to add cuz I’m storing the jwt in the localStorage. I just removed the token for localStorage, set the user to null, set isDropdownOpen to false and navigated the user to the home page.

Ig, i’ll try do things faster next time ⚡️. Don’t want to spend 5hrs on things like these. Okay biee…

Omg it’s finally fixed

I finally fixed the bug that I addressed in my last devlog. This was so frustrating. I never expected that this would take me 2hrs and I would write a whole devlog on it 💔.

The bug was that when I was logging in I was being redirected to /signup after signup, login or login as guest. I had made so that after signing up or logging in the user would be redirected to course page. I had also made it so that if the user value is null then the user would be redirected to the sign of page. So now you can see that where this is going. I just couldn’t simply figure out why the user value was null. After doing so much thinking and reading the code and trying to fix the bug, I have finally succeeded.Another issue that I was facing during the working was I was constantly forgetting what I was doing and to see everything visually I used excalidraw as you can see in the picture.

So there were three things that was leading to this bug. Firstly, I wasn’t using the await keyword while calling the api functions. Secondly, I didn’t have a loading state while fetching the user’s data. Lastly, the function getUser function responsible for fetching the user data wasn’t even being called when redirected to course page. The function  was only being called when the user first loaded the website.

Right now, my head is aching now I think I should take some rest. I didn’t remember to add loading state which was so silly of me. I only realized that after visiting my old project. Seeing that I felt dumb because ofc you would need a loading state while fetching the user data from backend. I feel a little relieved now 😮‍💨. I cannot even remember properly all the things that I tried to solve this. It was just a mess 😩.

After solving the bug, now looking back, it wasn’t that difficult to solve. It was just a me problem. I could write more on this but I’m too tired for this now. Okay biee..👋

Life is frustrating 😩

##Changes:

• Added navigation to /course after successful login
• Designed navbar when user is logged in
• Added the user button in navbar when user is logged in
• Added redirection to signup if user goes to /course without authentication
• Fixed jwt malformed error in protectRoute.js

The navigation to /course after successful was implemented before but I somehow missed to implement that in login page.

Designing the navbar for authenticated user was very challenging than I expected. As you can see in the image there are multiple attempts at creating the navbar. Everything I tried was just looking bad. The final design is also questionable. But for now it is what it is.

Now unauthenticated user aren’t allowed to visit course page. They will be redirected to signup page if they try. This was supposed to be simple but somehow I made this also hard for myself. I have done this before so this should have been easy for me but nope. The redirecting was working fine but I were to be authenticated and be on course page and then reload, then also I would be redirected to the signup page. After I made up my own solution for this which I don’t think is the best way to do it.

Due to my incapability of designing simple things and solving minor bugs I was questioning my ability to solve problems and design. Which at that moment felt sad 😔.

Also there was jwt malformed error popping up in the backend which was also frustrating to solve. Not because it was hard but because it was easy and I wasn’t able to solve it. I won’t tell you what happened here as the devlog is getting long.

No video this time cuz the I can’t show the navigation changes working as they aren’t working properly. The bug is preventing user from redirecting to /course after login or signup. Instead user is redirected to signup. I know that this because of the two redirection changes made in this devlog. So, I’ll go and fix it asap.

Hope your coding experience isn’t going as frustrating as mine. Thank you for reading my frustrations. Bye…👋

I’m sorry 😭

##Changes:

• Use localStorage to store jwt instead of cookies
• Fix signup page unequal width of img and form container
• Changed login.css similar to signup.css for consistent code
• Added login as guest functionality
• Added navigation to /course after signup or login success
• Added UserContext.jsx to handle user data
• Added protectRoute middleware to verify jwt
• Added “/api/user/“ endpoint to get user data from backend

Too many changes, let’s break them down.

I’m sorry that I switched to localStorage to store jwt instead of cookies 😭. The cookie wasn’t working as expected. I was able to store the jwt in the cookie and receive it in the frontend but when I reloaded the cookie would just disappear. I know that there’s a fix for this as I have done this before as well. But, I know that I’ll face the same issue during deployment even if I fix the issue now. I’ll probably deploy this in vercel and last time (in flavortown) I had to change the whole code format due to the cookie issue. So this time I’ll just rely on localStorage for now. If I deploy the website myself then maybe I’ll consider using the cookie. But for now just forgive me 🙏.

I fixed the unequal width of img container and form container with again in signup page. This happened because I added padding to the form-container instead of the form. Using flex for this was a headache so I used grid and it worked.

Although I didn’t necessarily needed to change the login page css. I did it to maintain a consistent codebase.

This is a huge one. I added login as guest functionality. I know that people will be skeptical of entering their email even though they can use any made up email such as [email protected]. I purely added this feature so that people don’t rate me bad just because they assumed that they need their own email to signup. And logging in as guest is easier as well so why not.

Now, after the signup, login or login as guest is successful then we’ll be redirected to the course page. Later I’ll make it so that users who aren’t logged in won’t be able to access any other path except for the “/“.

Also now there’s userContext.jsx for storing and distributing user data. For now there’s getUser function for getting user’s data. I have made the backend work to verify the user’s token and then only provide the user with their data.

Alright no more yapping, the devlog has gotten very long. If anyone has read this devlog, God bless them.
~
Peace ✌️.

More progress on signup and login

Changes:

• Designed the username form
• Created the username form in signup
• Changed useRef to useState to store signup data
• Adjusted the backend to receive and store username
• Add login functionality
• Fixed required attribute not working in both signup and login form

Designing the username form wasn’t that hard as it’s just the signup page but will less things. I looked at how chess.com was doing things during signup and thought it’s better to split the email and password into one form and username form into another. There’s also a back button to go to the email and password form.

Coding the username form was a little frustrating as I had some issue positioning the back button. Now it’s working but now I am facing the old issue of img-container and form container not being the same width. I’ll fix that next. Also the way username form is display is by just toggling a state into true or false in the singup page.

After adding the username form there was an error telling that email and password was null. This was because while entering the username I wouldn’t be able to access the email and password input using the useRef hook. The fix was simple, I just changed the useRef into useState and store the data on input change.

Now that was extra data (username) that needed to be stored. I sent the username along with email and password to the backend and changed the userSchema to accept username.

I worked on the signup functionality last time so this time I worked on the login functionality. In short, now during login the backend verifies the email and password and gives the user a jsonwebtoken as a cookie or an error.

I wanted the input to display “field is required” when user tries to login or signup without filling in the form. I just couldn’t get this working and it was so frustrating because the issue was so simple. Later I found out that I was using e.preventDefault on the button instead of the form causing the input to not show “field is required”

Okay enough yapping. Gotta go and work on the project. Hope your project is going smoothly. Bie…👋

50 hours!! Let’s go 🎉

Changes

• Designed signup page and login page
• Created signup page and login page
• Divided the codebase into frontend and backend
• Setup backend
• Setup signup endpoint to receive formData

Designing the signup and long page was really fun. I took some inspirations from pinterest. I’m proud of the design I made 😄.

Turning the design into code was also fun ig. I did face a small bug. The image looked bigger than the form but both had flex-grow of one. The fix was simple I just had to change the flex-basis to 0 so I did flex: 1.

Finally I’ve started on the backend. It’s been some time since I haven’t done backend stuff. Coming back to backend felt nice.

Although it was frustrating when the data sent to backend was just saying it was undefined. But after some time I just figured out that I forgot add express.json() middleware in my server.js.

I’m well now and feel that now I’ve no motive of slowing now. Hope you’re also doing well 🤞.

Many small improvements

Changes

• Made the opened cards remain open after finishing a lesson or going back from watch course
• Saved completed course data in localStorage
• Added confetti animation after clicking on finish lesson
• Fixed value of total in course.jsx by making it dynamic
• Fixed navbar animating when reloading on non home paths

This time I have done many small changes but I think that they make a great impact on the website.
~
Firstly I made the card remain open while visiting other pages. I mainly did this as a part of user experience. I thought that it’s inconvenient for a user to see the card they opened being closed after they come back from the course watching page.
~
Also, now the data of completed course persists. It is stored in localStorage. I’ll definitely stored the data in database in the future. Also I was facing an annoying bug doing this because I forgot that I needed to stringify the data before storing in localStorage😭.
~
There’s now confetti animation after clicking finish lesson. I think it looks nice. I used a npm package for the animation.
~
Before the total course was a dummy value of 10. Instead of counting the courses manually I just did a sum of length of all courses data from constant.js. Now, when I change the professional course value I won’t have to think about changing the total value.
~
The navbar animation was meant to run only when user move from home page to other page and vise versa. But, when I was on the course page and if I reloaded the animation would still happen. Fixing this was really painful as the solution was really easy but I just couldn’t figure it out. At last I took the help of Claude to figure out the solution 😩.
~
I took two days off because I was sick again😭. Why is my immune system so weakkk😭..

Now the completed course has a green tick mark

Basically now if you click on finish lesson you’ll be redirected back to the course page and the lesson you choose as completed will have a green tick mark inside the course card.
~
Also, if a lesson is completed the navbar won’t show the finish lesson button.
~
Right now, the data doesn’t persist across reloads. I will store the data in localStorage next and when I implement the backend, then only I’ll store the data in database.
~
The challenging part was seeing the whole picture. How will the feature work, where will the data live and how to know if a lesson is completed, things like that.
~
Also, during development I thought of using useContext hook but I had forgot how to use the hook while following best practices so I just went to my previous project to relearn stuff😅😆.
~
I decided to use pen and paper for problem solving and better visualization which worked really great for me 🎉🎉. I will definitely do this when I encounter problems in the future 😄.
~
Btw, No bullet points this time😅. I haven’t completed much as I’m sick. Hopefully I get well tomorrow🤞.

I’m locked in

Progress:

• Changed the dummy data from beginnerCourse and intermediateCourse in constants.js
• Created WatchCourse page
• Made courseCard open WatchCourse page with respective course video
• Made navbar show go back and finish lesson on button if the user is on WatchCourse page
• Designed a banner for the course page

I changed the data of beginnerCourse and intermediateCourse in constants.js file which instantly made the cards inside both beginner and intermediate so much better. The professionalCourse data hasn’t changed and will be changed later.
~


After that I worked on one of the main feature of the website which is being able to watch the course. Now, if user clicks on a course that they want to watch, then will be redirected to WatchCourse page. I achieved by using the YouTube embed link and dynamic routing.


~
The navbar also changes in WatchCourse page as there will be go back and finish lesson button. The go back button currently works but I still have to work on the finish lesson button.


~
I took a break from coding after doing that and started working on the banner. I don’t really know how the banner should look so I just added a gradient, two chess pieces, some text and some chess analysis moves and called it a day.
~
Now I’ll go export that banner and add it to my website. If you have any recommendations please let me know. Biee..

Mostly designing and coding that design.

Progress:

• Completed the info element
• Designed the course card inside the accordion
• Created the course card component
• Moved accordion, courseCard and progressBar component into components folder within the course page

The course page is slowly but surely coming together. I think the info element looks really nice now that it’s complete. But yeah the list does contain dummy information. I will change them after I have selected the videos as my courses.
~
CourseCard component seems okay imo. The tick mark is supposed to indicate that the user hasn’t completed that course. After the individual course is completed it will go green. I have mixed feelings for the tick mark being there. The idea seems find but I’m really not sure about the design.
~
But anyways it was fun designing in figma. In the website have made the CourseCard with the ability of each card having different text and image but right now they are only a little different in different levels.
~


Idk how time passes so quickly. Got only this much done in 4hrs😕 but I think I am now starting to enjoy the process. I am not focused on the time so heavily as I was before 😇.

~
Okay this time I have decided to keep my devlog shorter. Any opinions will be appreciated ❤️.

Ayy new devlog let’s go!!

Updates:

• Designed the info part (the portion with the progress bar)
• Created working accordion component with animations
• Started working on the info part
• Created working progress bar component with animation



I like the design of the info element. I have tried using hierarchy to make the design look good. Also I randomly had the idea of earned badges after the user completes the whole course of a certain difficulty. Then, I hoped onto coding the accordion. Firstly I wasn’t making accordion as a component. There were just three div in the course page and I realized that if I don’t make it a component the code is going to look messy so I created the accordion component and now the code looks much cleaner.

While making that I stumbled across a funny bug. Clicking on one accordion component was making all component to open. It was because of gsap selecting all the similar classes and animating them. I fixed that by using useRef to select elements.

I have also created a progress bar and now I’m working on completing the info element. The progress bar looks good if it’s even a little bit full but idk how I feel about the progress bar when it’s at 0%. It feels bland and idk what to do.



Okay enough rambling. I feel my devlogs should be shorter ig. Anyways if
you have any suggestions please let me know. Peace ✌️Ayy new devlog
let’s go!!

Updates

• Added RootLayout.jsx for reusing a single a navbar across all pages
• Changed react-router-dom to react-router
• Added expanding animation to the navbar when the path is “/” and shrinking animation on other paths except “/”
• Designed the course part in course page

What I wanted

Before I added the navbar inside home page but after creating the course page I realized that I would want the navbar to be reusable across all pages. Also I wanted the navbar to expand in other pages expect the home page.

Switch to react-router

I was using react-router-dom for managing routes. I tried to look up the docs to make the navbar reusable. I couldn’t find anything and saw that react-router-dom just used react-router so I thought it’s was not necessary for me to use react-router-dom so I just switch to react-router.

Navbar animation issue

Animating navbar to expand and shrink was a mess. It’s look really simple and it is simple but not for my brain. I first thought of making the width to 100% and set align items to center. The width part animated as expected but the align items didn’t. Then I thought of using position absolute and centering the nav but now the navbar wasn’t respecting the nav-container’s padding. It was frustrating so I took help of claude and centered it using y property by doing some maths.

Time flies

I also had issue with the timeline reverse not working but I think I should stop my complains here.
I am rambling here because it took too long to do too little 😭 .

Designing the course page

On the positive side the I have started working on the design of course page. I have only done a small part but it’s looking amazing. The part other part that don’t look right were the design which I made during the start of the project. Rn I am just refining that previous design of mine, that’s why the navbar looks different in figma.

Hope you have a nice day ❤️

Visualization section transformation

• Separated visualization section into text wrapper and body wrapper
• Added a text with reveal animation in text wrapper
• Added visualizedMoves with animation around the img-container
• Deleted the thought component

Finally I get to post a devlog with some good. It’s a better time cuz I’m logging both the figma and the coding time for the first time.

Previous design

I didn’t really like the previous design so I thought for a while and came up with this design. Although it isn’t perfect it’s much better than the last one. The figma design and the website don’t look the same because I just did the design roughly in figma and then winged the chess moves position in vscode. I think removing the background of the chess moves was a great decision.

New design

Firstly I designed the concept in figma before coding. I added a text wrapper within the visualization to break the flow of the website. The previous design which I was going towards started feeling like a generic website (a bad one). Now the there’s text with a reveal animation which looks pretty simple tbh but I think it’s better. I might change that in future though or add elements to make it look fuller. The after the text animation the person visualizing image appears and different moves appear indicating that the person is thinking the moves. I was going to use a thought component for this but I did it in a more simpler manner.

Time

I always underestimate the time required to build things. I feel that I should have completed more in the time that has been recorded but small bugs happen while coding which is really frustrating. In this devlog also I feel I should have completed more. Am I just slow or happens to others as well. I really would like to know (comment).

Hey, this devlog is a messy one.

Changes:

• Created visualization section
• Created thought component
• Designing the visualization section

Connected figma to hackatime

I just figured out that I can add my connect figma to hackatime and record the time under this project. I have always designed this project before writing the code which a lot of time which could have been tracked is lost. That’s not a big worry as this project has long way to go.
I just figured out that I can add my connect figma to hackatime and record the time under this project. I have always designed this project before writing the code which a lot of time which could have been tracked is lost. That’s not a big worry as this project has long way to go.

Why this devlog is messy/incomplete

The main purpose of this devlog is to figure out where I am currently in my project . I haven’t worked on my project like I used to because of my illness. So, instead of working on the project and forgetting what i did I just decided to commit the changes in my vscode write this devlog. I am hoping to work on this project as before as I am feeling better now. So that’s why the images below seem incomplete. Hope you guys are doing well.

Btw the figma ss and the website image don’t match cuz i decided to change the figma design just before writing this devlog. I wasn’t happy with the previous design so i’m just tweking it to see where i land.

Changes:

• Split home.jsx into smaller components
• Installed and applied different font weights
• Made navbar better
• Completed puzzle section on a basic level

This time instead of jumping on doing something new I started with making the code cleaner first. It was easy as nothing broke. Then, I realized the font in the hero section doesn’t look as bold as in my figma design so after looking into the problem for a while I realized I had just the regular font weight of font downloaded leading to fonts looking different. Also made navbar better by decreasing horizontal padding in the button and adding a box shadow. Adding the box shadow made the navbar visible in the courses section. I also completed puzzle section which is looking good but I want to animate the image (Yoinked from chess.com btw 😅). The animation will bring so much life into the section but I really don’t know achieve that. If you can help me or have any suggestion in general please let me know. That’s all for this time folks. Piece ✌️ (It’s a pun btw)

Ayy new devlog!!

Changes:

• Corrected timing of animations in courses section
• Added level indicator of thumbnail
• Added temporary images in each thumbnail.
• Added animation to course title
• Made animation on work reverse as well

I’ve shifted on my macbook for coding which I’ve received from flavortown. Anyways, the courses section looks much better now. I am still not satisfied with the animation of courses info elements. I spend way to long to make that work but in the end I took help of gemini to make it work. Also, timing looks way better than last time. Now, I’m going to split the home page into smaller components to make the code cleaner. Also I’ve to do something of the navbar. Any suggestion will be appreciated.

Changes:

• Added shrinking animation in hero section
• Moved courses text to a constants file
• Added thumbnails in the courses section with animation

The courses section animation doesn’t look the way I want it to be. I’ll be fixing that.. Also things are taking more time than expected which is really frustrating. I thought this will take me about an hour but it’s still not finished. I’ll surely finish courses section today. Hope your project is going smoothly.

Changes:

• Added text reveal animation

Ahhhh it took three hours only to create this text revealing animation. I stumbled across many css and gsap bugs to make this. I first tried to use the ::before pseudo element which worked really well but later replaced it with span cuz i couldn’t figure out how to animate that with gsap. There are many other things that really annoyed me but lets not make this devlog a whole essay. But I love how it turned out in the end.

Changes:

• Fixed the page stacking animation
• Changed the layout of hero section.
• Made navbar position fixed

I was trying to make the navbar sticky which wasn’t working at first and was so annoying, after solving that I found out that it won’t go outside hero section. I was frustrated that I was messing up something so easy. Also it seems that I was doing the stacking animation the wrong way so I fixed that also. So now I have a clean stacking page animation and a navbar that stays at a fixed position.

Created courses-section with page stacking animation. It took me an hour to figure this out 😭. I knew that I have to pin the hero-section but couldn’t figure out how to move the courses-section to overlap the hero-section. I watched different videos and even went to some random guy linked in account to find out the answer. But eventually I just figured it out myself. I still have to check if the way I have accomplished it is the correct way or not.

Just worked on adding the animations to the home page. Also I downloaded the font instead of using google fonts cuz it was taking some time to load every time I reloaded the website. The animation of the hero text was a little tricky as it wasn’t working at first but then I found out the culprit was span. I change the span to inline-block and then the animation worked as expected. I have also made the let’s go nav button same as the cta button for consistency. You won’t be able to see the animations sadly cuz I’m attaching a screenshot here.

First devlog

I have worked on the hero section. I think it looks pretty good. I have some improvements to do on the nav bar. Also, I have to crop out the hero image. The image is taking alot of space rn. Now I’ll devlog after the hero section is complete and then will start on animating the hero section.

Hope you’re project is also going well.