Devlog #2

hey! Whats up?

it’s been a while since my last devlog, and i’ve gotten way more done than i expected. the project is now way more than just a chessboard on a browser.

online multiplayer

the biggest feature i added was online multiplayer!

i ended up using PeerJS so two players can connect directly to each other via a room ID. It keeps the board perfectly synced too.

this was actually pretty easy, it was well documented so didn’t take a lot of time. just a bit of research.

better ui!!!!!!

the thing that i dont like about apps like lichess is that the UI is kinda bum.

so, to fix that, i spent a bunch of time redesigning the whole webpage.

i basically gamified the css (biggest change was the buttons!!!)

here’s some of what changed:

• brand new signin page (no js yet)
• offline and online game mode buttons
• much better + cooler buttons
• dropdown hamburger menu with flip board button
• more spacing everywhere
• thats about it

imo it looks way better

offline improvements

offline mode auto flips board but u can manually flip too if u want to see from opponents pov.

reorganizing everything

as the project got bigger, one html file started becoming kind of messy. also i would like having separate links for online and offline play etc.

because of this i will split up code in the next devlog

what’s next?

the next thing i’m working on is accounts.

i’m planning on adding Firebase authentication so you can sign in with Google or continue as a guest. after that, i’ll start working on username specific challenges. ill use firbase to store person requests and it can generate a peer id so i dont need a server.

Im rlly happy with how its going :)

thanks for reading, and as always, let me know if you have any suggestions!

devlog # 1

hi! i made this project cuz i rlly love chess but want to have more controls over these types of sites. eg. chess.com has paid features and lichess is free but it doesn’t have a good, refined ui that i would prefer.

i spent like 3 hours on this first session just trying to get a basic board to load on the screen 😅 😭 . it was a bit of a struggle but it is finally working.

the setup struggle

i started with vite for the site but it kept fighting with the hack club spaces proxy. the server kept returning html instead of javascript modules, which caused errors in my console and crashed everything. i decided to swith entirely to a static website. now there is no node_modules or package config. just the three files: index.html, style.css, and main.js.

the 404 fix

even after going static, the board wouldn’t load. i checked the console and found a 404 error. turns out the chess.js version i tried to import didn’t actually exist on npm. i switched the import map to use a verified esm release on the cdn, and the board finally appeared.

adding nice features

once it was running, i added right-click support so you can draw green arrows and highlight squares (it still doesn’t work all the time, i can guarantee support by next devlog). i also set up auto-flipping. after you make a move, there is a 400ms delay so the piece finishes its animation, and then the board smoothly spins 180 degrees for the other player.

whats next

next up is showing the list of moves on the side. I also plan having local LAN game!!! However idk i have to research. Maybe after LAN, i could make my own server in my vm from Hack Club Nest!

PS.

there r screenshots below pls look at them PLS PLEASE PLEASE…

give me suggestions…