The story behind building ChessKhelo.in
ChessKhelo is a project which was never meant to be what it is today. One day I was sitting in front of my computer, getting bored and thought "Let's design a chessboard pattern with CSS". After that was implemented, I thought "Why not render pieces in it", "Why not add drag-n-drop to this", "It would be cool to have move-validation", and so on...
Slowly with each small iteration, it was getting clear to me that I was going to make a Chess Platform & make it Open Source.
At this moment, ChessKhelo supports the following:
Rendering a single-player board (move both Black & White pieces).
Displaying & able to copy FEN & PGN notations.
Socket-based Multiplayer Games.
Saving Finished Games (Not shown to end users ATM).
User Avatar Display.
Ability to chat with the opponent.
OAuth 2.0-based Login with Google SSO.
The Tricky Part
Since, initially, ChessKhelo was never meant to be a full-fledged, production-ready project, I did not consider a few things.
The biggest of them would be to add "Touch Devices Support". ChessKhelo uses HTML Drag and Drop API to move pieces. By nature, this API is not supported on touch (touch-only) devices as the browser does not support HTML Drag and Drop API.
While the whole website is responsive for mobile devices, it's not possible to move the pieces on board by dragging them.
There's a way around this without removing the HTML Drag and Drop API but it's not as graceful. Instead of allowing drag-and-drop, the user can touch the piece followed by touching the square they want it to move. But I am not a fan of it. I would rather have both drag-and-drop and touch-to-move.
The solution: Spoiler: Getting rid of HTML Drag and Drop API.
To support touch-only devices we have to use something that is supported by both touch-only devices and desktops. Well, the idea is to not use any pre-built packages so I guess we will have to do it the hard way. There come Mouse Events. While mouse events will not work out-of-the-box on touch-only devices they can be easily translated into Touch Events.
Read this article to understand mouse events.
Upcoming Features
Touch-only devices support. (Released: See Release)
Allow opening the same game only in 1 tab of the browser & location.
At the moment, users can play multiple multiplayer games simultaneously. This will be restricted to only one.
A multiplayer game once created never expires, unless the server restarts. This will change, each game will expire after a given time, followed by time-controlled multiplayer games in the far future.
User Profiles.
Change Avatars, Board Colors, Change Pieces.
Ability to set a custom username (Gamertag).
Pieces & Sounds
Do the pieces & sounds feel familiar? Indeed they do! They are taken directly from Chess.com.
What exactly is taken?
The Pieces - PNG images of the pieces. Well, I can design stuff but chess.com pieces are just unique.
The Sounds - .webm audio files for piece capture, promotion, game end, etc. Nothing beats the checkmate sound by chess.com. Just kidding, all Chess.com sounds are mesmerizing. 😌 Except that one sound when you're low on time. 🥲
Infra & Deployment
Frontend: Built with Next.js, styled with Styled-Components & deployed on Vercel.
Backend: Built with Node.js & Express, multiplayer handled with Socket.io, sign in with SSO by Google coupled with custom OAuth 2.0 mechanism, deployed on AWS EC2 with NGINX as reverse proxy & SSL by Certbot (Let's Encrypt).
Not Enough Features For You?
Contribute! ChessKhelo is an Open Source project and is open to Pull Requests. But before anything, read the contribution guide here.
Being a developer who knows Chess & not contributing is a sin.😏 Not a developer? Sharing is also contributing. 😎
Love this? Star it on GitHub!
Footnotes
Follow me on Twitter for updates about this project and more. @theadxy