Chess game Update BIG
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.