Chess Game App in Web
- 20 Devlogs
- 152 Total hours
A chess game inside the web
A chess game inside the web
I am currently working on more functionality abilities and fixing some newfound bugs in the code. I don’t want to spoil just yet but I really liked the dial for the promotion, so I want to build on that feature with everything else. I understand this will be a difficult task, but by doing this, I can make the app much more functional! (I am currently coding the JS so I don’t have any good pictures to show so here is the old pic) Like I said, tomorrow I will have something good to show!
I finished the promotion code today! Although I have mentioned it before, here is a summary of how it works. You go to the end, and a dial with 4 pieces appears. Choose yours and you will become that piece. I fixed the issue with the turn ending at the wrong time as well, which is good. But when doing this, I ran into a couple problems. Firstly, the game didn’t count any pieces taken for my pawn to promote. For example, if a white pawn was on g7 and a black rook on h8, the pawn should have the ability to take the rook and promote on the white turn. Although this happens visually, the game counts the rook as still alive. This is an issue I am currently working on right now.
This is a major advancement in my pawn promotion mechanics. Since yesterday I have been working on pawn promotion, and I figured the best way could be a sort of dial. As you can see in the picture, this is what the dial will look like when trying to promote, and when clicking on one of the pieces, that piece will be selected. Super simple is what I thought at first, but it was much worse than that. Building the dial was an utter pain. The CSS features kept making it into a square that was twisted where it connected to all the sides where the sections split. The center was supposed to be hollow, but I am still unsure on its main use, so I kept it solid for now. The promotion works, but 2 main issues arise. Firstly, if I click out of promotion dial, it ends my turn without me doing anything. So I don’t even get to make a move at all. Secondly, if I click any of the pieces, it is still my turn for some reason. I believe the issue is that my JS counts clicking a legal square to move to as the end of my turn, which is why it is doing this. I will fix the rest tomorrow as I believe taking time to rest might help me think of a solution.
I recently got my first ship rated and I understood what mistakes I made and what I needed to fix. I understood that even though the game was well made in terms of how it works, it wasn’t user friendly and the theme made it harder to see. Thanks to all who helped give feedback for this, and my first change is to make the pieces actual vectors. This was an issue all of the users pointed out, so I hope this fixes at least one of the problems. I will continue moving forward with this in mind, and I am currently working on my other changes as well. (This is the only one that properly is working so I wrote about it)
I used my time today to just update some other features that had bugs that I haven’t fixed yet, like the clock sometimes doesn’t work between turns. I also started working on Auto Saving so that the game saves in local storage so you could resume later, but it isn’t looking very good right now because I messed with the wrong code and the entire thing broke. I need to fix that tomorrow but overall this was a mostly successful use of time.
Loading and saving games is now a feature as well. The app will export a JSON file containing data of the match, including time left for both sides, which pieces are still on the board, and the movelist as well. In addition, I have fixed bugs with the take back button, where it was removing pieces from the board entirely. I will focus on addition promotion tomorrow as I haven’t done that yet.
I added a game clock (10 mins for now) and the take back move button. These are just functionality changes not anything major. it took a while because I also had to figure out how to make the clocks go around after the board was flipped so it was taking a long time for that. Also the game now has to read the move list and revert changes to the board for the move back so that also took long. I need to fix some issues with the clock, something I am working on now.
I have spent this time fixing the numerous issues that came with flipping the board, including deleting the pieces, changing their positions, making the move list somehow go into the negatives, and more I didn’t even notice but the console did. I had to perform a git restore to remove the changes and recode the entire thing again. It did workout and now it works well.
I am currently trying to fix some issues when implementing the stockfish engine as it is too strong at level 1. This is proving to be a big challenge but I will be able to complete it soon. While doing so, I also thought of improving some functionality and I have added a feature to flip the board. This feature also has a lot of issues and both will most likely be fixed in the next devlog.
Yesterday I started working on a stockfish engine for my game. I finished it today and it has some very strong features. You can now play in 3 modes:
I used the LiChess stockfish engine to complete this part of the project (Link to release: https://github.com/lichess-org/stockfish.js/releases/tag/ddugovic-250718)
The engine has all the features to calculate the best moves and complete them. To make it easier, I added a level system from 1-20 so that the bot is easier or harder to beat, but after testing, I found that the bot takes longer to respond with a move when its at level 20 and is still very smart and powerful at level 1. I think I may have integrated the engine incorrectly when connecting it to my current project, so in my next update, I will be fixing this issue.
I am currently working on building a bot you can play against. It is very tough to find another person to play with especially on the same screen/device so this could fix that issue very easily. The bot will be stockfish and make moves for either black or white. For now, I will code it just for black and make it for white later. This devlog is for me to log my hours, but the bot is nearly finished and will take me a little more time. This also introduces the need to switch from white to black, so in the future I will be adding that feature as well.
Today I added the insufficient material feature. It took me a while to figure out because I was trying to use formulas and math to make the code analyze if a certain set of pieces can lead to a checkmate, but I realized that instead of calculating, I can just find which combinations of pieces cannot lead to checkmate, and then list those pieces in the code for the game to constantly check, and then determine if its a stalemate/draw.
Below is the combinations of pieces that cannot lead to a checkmate that my code checks and accounts for:
So far, I worked on fixing the bug in my code which made my pieces disappear as mentioned last time. I am also currently working on trying to add sound effects to make the game more interesting to play and use. This devlog so that I log my hours and I will be posting another one soon.
Today, I made some decent functionality changes. It took very long because I couldn’t figure it out for a while because I had to do research on how to, but I figured out how to do the en passant, threefold repetition, and 50 move rule by updating the JS. I also fixed the previous issue where when the player is in check by another, they can’t block it with another piece, even if they should be able to. I was also able to fix this issue as well. Unfortunately, the logic of JS I made for the en passant, threefold repetition and 50 move rule introduced a new problem of erasing any piece that can be taken. For example, if a pawn is able to take another and I click on that pawn to see its possible moves, and then click on another piece, the opposing pawn disappears. I didn’t have enough time to fix the issue and will be working on it another time.
I did a lot of work today in my chess engine. I had a lot of time and I was able to do a decent bit of research and use AI to find resources on making an old video game/arcade style design to the game board. Because of this, I spent a lot of time on CSS and JS, coding to fix the prior issues in my code as well as making changes so that it looks as good as it can. Firstly, the pieces can finally be moved only where they should. Before, any piece could move anywhere by clicking the square, unless it was already occupied. Now I fixed the javascript code so that the code checks if that piece can legally move there and stops it otherwise. I also added the ability to castle for both black and white for more functionality. In addition, I also made the resign feature work for both black and white, as it changes who has the ability to resign based on if the current turn is White’s or Black’s. If it is white, for example, the resign button will say Resign (White) so white loses and black wins, and vice versa. Because the game already has so much code on checking pieces and their positions, I figured I could also add a list on the side that says which pieces have been moved so far. I didn’t exactly how to put it in algebric notation so after researching, I had the idea of basically taking the position of the piece’s sqaure, then use javascript to convert into the grid number, and then add the letters in front if the piece moved is any piece other than a pawn. The list also shows castling, checks and checkmates. The board was looking really bland so I did research on ways to make it an arcade/old style like I said before. I first starting to make a scanline on the screen by using CSS and duplicating gradients on the screen. It is very hard to see but it is there. Next, I made the game boxes better by making them seamless when placed next to each other. I also made the hover highlight the boxes instead of making them bigger like before. I also added more diagonal scanlines in them as well. Next, I made as many elements neon to make it bright. As I was making this I also research online that the scroll bar in webpages can be edited. So when the move list is truncated, it shows custom white scroll bars as well. I also found that you can make really cool effects when hovering over buttons, so using CSS I also made the buttons have a horizontal box that goes over to show the animation of the color changing, and I added angled boxes in the back of it that animate and lift, making the button look like its coming up. I will probably add more functionality next time.
This is my third update for the chess game. I wanted to add some more functionality to the game with features in more popular chess game engines like Chess.com where it has draw and resign features. I also added a restart game feature since it is single player, but currently there is an issue where the pieces persist at their prior position even though according to the game, they are not there. They button CSS is also not aligned and good compared to the gradient style with the rest of the page, so for the future, I plan on making it one single theme and keeping the page more organized.
Today, I worked on making the app better by making it figure out checks, checkmates, and stalemates. I used AI to understand how to do this, and by using resources online, I also figured out how to input gradients and better CSS functionality for the app to look better. The code for checks and checkmates mainly relies on the JS where it looks at and detects if any legal moves are left for the king to continue in play. I still haven’t added functionality for it to stop pieces from going into positions they shouldn’t be able to.
Overall that is the main things I did today.
today I made my first chess game board using this tutorial: https://www.youtube.com/watch?v=SS5amIbX0Mo&list=LL&index=3&t=56s
using it I was able to follow along and run the code and use google to understand what each piece of code does to the overall project. Some limits to the project are that the game is able to move the pieces but does not recognize checks or checkmates. I will do more research and try to improve it as much as I can.