Animated-Chess

So the past week with Stardance Chess has been rough, like actually rough. Lemme tell.
The Game Broke and I Could Hear Pieces But Not See Them 🥀😭
This was the worst one. I’d start a game, the board would show up, I’d click to move a piece and I could literally hear the sound effect play like the click and everything, but the pieces on screen were just frozen. Like the game was playing itself behind the scenes but the visuals weren’t keeping up ahh thing.
Spent hours on this. Turned out there were two things going on. First, the coordinate system was messed up on high DPI displays. The canvas was rendering at one scale but the click detection was calculating at a different scale. So when I thought I was clicking e4, the game thought I was clicking somewhere totally different. Basically the math for “where did the user click” and “where is the board” were using different units.
Second issue was that the animation system and the audio system had a dependency order problem. The audio manager needed to be created before the animation manager because of how the combo system connects them, but I had them backwards. So the animations were silently failing while audio was fine.
Fixed both by correcting the coordinate passing in main.js and swapping the initialization order.

The Bot Just Stopped Playing, Stockfish would load fine but The bot would just stare at the board forever. No error, no crash, just silence. The problem was in how the Stockfish worker communicates. It uses UCI protocol over a Web Worker, and my code was waiting for a bestmove message to resolve a promise. But there was no timeout. If the worker stalled or the messages got out of order, that promise would just hang forever and the game would be stuck.
Also, if getBestMove got called twice before the first one finished, the second call would overwrite the resolve function of the first one. So the first promise could never resolve.
Added a timeout that force-resolves with null after a reasonable wait, added a request ID counter so only the latest call can resolve, and added error recovery that tries to reinitialize the worker if it dies. Also if Stockfish fails twice in a row, it automatically switches to a fallback bot that just makes random legal moves. The fallback bot is pretty dumb but at least the game doesn’t freeze.

Before when you moved a piece from e2 to e4, the movement was bad like i thought it was good but nuh uhh when i played it looked kinda bad. So i tried to make it like the piece lifts up in an arc like it has actual weight, starts slow then picks up speed then decelerates at the end, does a little squash and stretch at peak velocity, has a shadow underneath that fades as it lifts, dust type trail behind it. It feels like a real piece being picked up and placed down instead of just sliding across the board. The horse had butterish movement but still it needed to look like it was jumping from one square to another so made that better to and also did the same for bishops movement. still need to work on the animations 😭😭 ╰(°▽°)╯

I am trying to make a chess game like not just a boring grid with pieces moving around, but something that actually has WEIGHT and IMPACT when you capture a piece.
So here’s the thing. I started with chess.js for the game logic because honestly why would I write chess rules from scratch when there’s a library that does it perfectly. But the rendering? Pure Canvas 2D. No WebGL. No Three.js. Just me, a element, and a LOT of ctx.drawImage() calls. And yeah it sounds like a bad idea but hear me out — it actually runs at 60fps bruhhhhhhh. It also has an elo system just like standard chess when u win elo rating increases and likewise if u lose it decreases.

So i added stockfish in my game so that people can do a bot verses match with the world’s strongest open-source chess engine. It’s been around forever and it’s insanely good — like stronger than any human who has ever lived. The thing is, it’s written in C++, not JavaScript. So you can’t just drop it into a website or an app and call it a day.
What I did was take the WebAssembly version of Stockfish — that’s basically the C++ code compiled down to something a browser can run. And I stuck it in a Web Worker, which is like a helper thread that runs in the background. So while Stockfish is busy calculating the best move, the rest of the game doesn’t freeze or lag. The player can still see the board, the animations keep running, everything stays smooth.
The fun part is making it feel human. Stockfish at full strength would destroy anyone, so I had to nerf it. It has a built-in “skill level” setting from 0 to 20.

I mapped that to four difficulty levels:

• Beginner — barely thinks, makes silly moves
• Intermediate — thinks a little, plays okay
• Advanced — thinks harder, plays decent
• Expert — thinks deep, plays strong

For now i have added some animations while capturing and moving the pieces which look like;

• Pawns have a quick straight glide
• Knights get the “butter” easing (because they jump)
• Rooks movement look a lil heavy
  But they aren’t smooth and need a hell lot of work if i need to them to look like as i imagine them to look so now i will work on that and make them better as much as I can and until i am satisfied >.