Fun fact: you can use this to play chess960 (i.e. fischer random chess), or any other "custom start position" variant, just by appending a FEN to the URL (replace spaces with underscores).
Example: https://chess.maxmcd.com/bbnqrknr/pppppppp/8/8/8/8/PPPPPPPP/...
https://chess.maxmcd.com/rnbqk3/pppp2pB/2P1p3/1P1P2Bp/3n4/b2...
very cool, made it all the way to a checkmate
it would be cool if the url was just the chain of the moves. then you just paste the move chain in the URL and you get the board state.
url length limitations may thwart that, unless it's all compressed which might defeat the purpose
Chrome can supposedly support 32779 characters in the address bar[0], and a legal chess game should not exceed more than ~5900 moves, due to the 50 move rule. That will be enough to encode any valid game if you don't need to support IE.
[0]: https://stackoverflow.com/questions/417142/what-is-the-maxim...
Interesting. According to that stackoverflow, Chrome is one of the shortest URL lengths of the modern browsers (firefox/safari/chrome). However, it also notes you have to take CDNs and web servers and search engines into consideration, so the ginormous length limits of safari and firefox probably won't be useful any time soon.
I bring good news. It's 2024 and nobody needs to support IE any more.
It uses the FEN, which is the standard notation for chess positions.
And it's the right choice, IMO -- if two positions are the same they should have the same URL, regardless of the specific move order used to reach it.
No it shouldn’t. Move history has to be encoded so draw by threefold / fivefold repetition and fifty moves / seventy five moves can be claimed / detected.
The half-move counter in the FEN takes care of the 50/75 move rule. You do need the history if you want to implement the threefold/fivefold repetition rule, but it's rare that it is actually relevant for e.g. a chess engine's strength.
The move order matters, for detecting threefold or fivefold repetition, or the 50 move draw limit.
To adhere to that properly, you need to somehow represent all previous positions that could be reached again, and the number of times it has occurred. Of course you can get that by including all the move history, but it's also possible to prune it a lot, like any capture or pawn move can flush the history since no previous position is reachable. But it's still a bit more complicated than just representing the current position.
FEN doesn't account for this, deliberately leaving the history out of scope. It's a matter of preference whether you'd want a tool like this to handle those cases.
huh, I originally thought this would create unusually long URLs, but if it's just the sequence of moves it could stay pretty small.
might more fun too, representing each state of play instead of just the board position.
Also easily compressible if size is an issue: https://mbuffett.com/posts/compressing-chess-moves
Would also mean all rules can be represented, and you'd be able to do cool things like highlight the previous move that was made.
Nice, ok, might try and add this.
it's just the sequence of moves it could stay pretty small.
It could also be pretty long, 5898 moves to be precise when using the 50-move rule [1].
Nice that it detects valid moves, But it doesn't know about checkmate?
https://chess.maxmcd.com/r1b1kRnr/p1ppB2p/n2P2p1/8/7P/1p6/PP...
Should say checkmate?
It also doesn't allow en passant
Wow, I’ve never even heard of en passant. These kind of niche obscure rules seem antithetical to the elegant nature of chess.
This and castling strike me as the kind of rules where a King like Henry VIII was losing and decided to castle for the first time ever and his opponent was too scared to say anything to stop it.
e4 d5 e5 f5 exf6 This simple en passant works
Fork it!
Patches welcome
It looks like the pieces are no longer movable so maybe checkmate is detected but just not correctly displayed?
If checkmates actually said ‘checkmate’ on them you’d be able to find them once the Google bot has indexed the whole site.
Ideally every page needs to include a string summarizing every preceding board state leading up to it, so you can search for a current board state plus ‘checkmate white’ to find every possible way to win from a given board state.
Then all that remains to turn Google into the ultimate chess oracle is to persuade your opponent to make all the moves you found.
This isn't really static right? It's still dynamically rendered by the backend each time you request the page. There aren't 999999919291293923 pre-rendered pages living on a server somewhere.
Technically speaking, it would require ~ 4.8 * 10^44 pages to cover all legal chess positions [1]. But they're happy to serve utterly illegal positions like https://chess.maxmcd.com/rnbqkbnr/qqqqqqqq/8/8/8/8/QQQQQQQQ/... as well.
The above illegal position example was a checkmate in one, this one is more fair: https://chess.maxmcd.com/rnbqkbnr/qqqqqqqq/qqqqqqqq/8/8/8/QQ... ;)
OK, this one is definitely more fair: https://chess.maxmcd.com/rnbqkbnr/qqqqqqqq/qqqqqqqq/qqqqqqqq...
Static as in no XmlHttpRequest.
I can start a game on Lichess, resign it right away, enter analysis mode, then disconnect from the internet and continue to use the board (in the same way that one can use the board on site we are discussing here), so Lichess's analysis board does not use XmlHttpRequest either.
You don't need to resign a game to enter analysis mode. It's available from the menu.
It doesn't even really need to be rendered by a backend. An SPA with pushState and it could literally be just a single file.
Learned about https://fav.farm and https://val.town from this. Neat resources!
when is it useful to have a "quick favicon?"
Not OP, but having a favicon—any favicon, really—during prototyping helps me get a feel for my project's identity, and, more pragmatically, gets rid of incessant 404s.
when you're just hacking on stuff
When you're making a project just like the linked one.
https://fav.farm seems like a cool service at first, but it doesn't actually do a whole lot. I'd just assume inline the one-liner they mention (similar to https://css-tricks.com/emoji-as-a-favicon/) and avoid the external dependency for the price of 117 characters.
Doesn’t seem to work on Mobile Safari? I can tap to select a piece but tapping a target square to move doesn’t do anything.
EDIT: seems like you need to tap the top edge of empty spaces?
yeah, I squashed a few bugs here but there is more weirdness. will check it out
edit: ah! regular ol' relative/absolute position (been a bit since I wrote css), this should now be fixed!
Working better, but I think some of the old static pages may need to be regenerated?
Probably cached by cloudflare, so either cache needs to be flushed or you need to wait a bit.
It appears only the top border of a space is clickable
I was hoping this was going to be a chess variant where you're not allowed to move any of the pieces.
Me too. In the meantime, check out Go for a similar but more static game (more googleable by it's Chinese name Weiqi or its Korean name Baduk).
"go game" works great for search too.
It is if you don’t click the links!
Plain, brutalist, no bloat chess. Every page is only html and css. Every chess move is made by clicking a link. Send a link to your friend and they'll send you one back to make your move. No silly animations or slick interactivity to trip up your gameplay. When Google indexes this site will we successfully compute all possible chess moves?
Functionality is quite limited, and things might be broken. Please let me know if you find bugs!
Not sure if the first paragraph boasts the pros or the cos of this sort of implementation.
It's one thing to market implementations done in unusual ways with the intent of exploring the possible. It's another to portray software implemented with the right technologies as : bloat, silly animations, slick interactivity to trip up your gameplay.
It doesn't help that the second paragraph showcases shortcoming of this kind if implementation.
It could all just be sarcastic and I fell for your trap.
Well played and clever implementation!
I suspect it's mostly "because it occured to me I could," which I think should always be an acceptable reason for building something slightly unusual.
I do rather like the idea of play via stateless link passing, though, and honestly the "prettiness" of animations and interactivity does not, at least to me, seem like a net advantage.
"the right technologies" is highly dependent on the user experience you're trying to achieve; in this case I think I'd argue that for the goal at hand, these -were- the right technologies, just like for the UX goals of more featureful sites a different bundle of technologies were the right thing too.
Yeah the idea that you wouldn't want animations in a GAME is hilarious. It must either be a joke or this person is really that far up the "the web shouldn't have js" culty asscrack.
I'd wager that it's a humorous description, taking certain virtues to an illogical extreme.
The limited functionality is nevertheless likely referring to features beside the ones described as bloat.
When Google indexes this site will we successfully compute all possible chess moves?
How do spiders know when to stop spidering when they keep getting original content? I assume there's a Gordian solution to the Halting problem like a limit to bytes or seconds. But if you applied the same rules to ebay.com and val.town that doesn't scale.
There's a lot of heuristics. Big sites get more crawl time. Some crawlers will back off if pages are slow. There's usually some sort of 'interestingness' calculation, so repetitive content won't get crawled as much.
Big spiders neither stop nor start. If each webpage gives you on average 200 new urls, you need to aggregate them, calculate ranks and schedule the top 0.5% for crawling. Crawling capacity is constant, the only question is the quality of your ranking formula.
If I were Google, I'd limit bytes per site with the threshold varying based on the site's rank.
I did a static chess page myself some time ago but with p2p connection (using webRTC) so you can play with a friend:
- [Try it](https://afauroux.github.io/chess/) - [Fork it](https://github.com/afauroux/chess)
I really like the sound effects. Especially check.
Thanks, I made them with GarageBand and Audacity, I think. The check sound is made from a recording of my girlfriend with added echoes ;-)
I noticed a weird bug where sometimes the game will auto-move for a player. In particular, this seems to happen when one queen captures a piece, and the opposing side has the ability to capture that queen with their queen, the game automatically makes the 'queen takes queen' capture.
Was just playing around a little and found a bug. In the following position it won't let me play F8. https://maxm-staticchess.web.val.run/rnb1kbnr/pp2P1pp/3p4/q1...
It's not a bug. f8=X is illegal since white is in check from the Queen on a5.
Sure is. That what you get for just clicking around randomly and not paying attention to what is where.
Awesome work! You should put it behind a CDN like Cloudflare and see what's the cache hit ratio
Lichess opening explorer would probably be a fairly accurate indicator of how the cache hit ratios would develop:
https://lichess.org/analysis#explorer
I imagine it would look closer to the Lichess database, which differs quite drastically from the Masters database. For instance, with the masters e4 is met with c5 in 46% of games, but on lichess c5 only happens in 19% of games.
It's a neat demo but surprisingly laggy for a static webpage that has a minimalistic implementation of chess.
Surprising? It has to round trip to the server and grab a new page on every click.
This is great. Suggest one additional bit to show black at the bottom. That way the player of black is not handicapped by playing from an upside down position.
Or just rip off the chess piece design of this other minimalist chess board simulator, which is never upside down:
(It's ok, I made it.)
All pieces can move everywhere...? And no rules seem to be in effect. What's the purpose of this?
Pawn promotion is set to queen. You might want to add support for other promotions... https://www.chess.com/forum/view/game-showcase/checkmate-by-...
Fork it!
I’m frankly kind of bummed that this isn’t fully static chess. As in every possible move is a pre-rendered html file on a server somewhere.
This is more akin to how Yahoo Games and other chess sites worked in the early aughts.
I think a compromise would be more practical: every position that has actually occurred as a pre-rendered html file, with novel positions generated dynamically.
Why are you surprised? The chess AI engine was crammed into 1kb of javascript code. That was back in 2010
Can double as a web spider trap.
I love this. Such a cool implementation. Fellow Val Towner here.
That's not what "static" means
I did something nearly identical to this for the board game Reversi as part of an exercise to teach myself Python, except the opponent was always a simple minimax search-based AI. This was back in 2006, though, so I suppose doing it without JavaScript and putting all of the state into the URL was a lot more obvious of an approach back then compared to today. :)
Bruteforcing all the possible moves into a static set of files. I wonder how much space it does occupy, considering that small files take more space than large files with the same amount of bytes
See also: Type System Chess[0], in which the game rules are expressed in the type systems of Rust and TypeScript.
This is great to play asynchronously with people quickly and simply :) Great job!
One of my personal projects uses a similar idea, but it's a word game (scrabble-like) and it's hosted statically: https://jcparkyn.github.io/scrobburl/
Looks like this missed the opportunity to load the board in JS from the URL to be truly static.
There's no sitemap (https://chess.maxmcd.com/sitemap.xml) - I was hoping to find a list of all possible chess states lol
Very nice!
Is there a valtown for Python?
Reminds me that I used to play chess by email back in the 90s.
Full version hijacked my Back button on Firefox/Android.
Very cool. In addition to the FEN, it should have the move history, maybe as a fragment.
For example - https://chess.maxmcd.com/rnbqkbnr/ppp1pppp/8/3p4/3P1B2/8/PPP...
this gives me an idea for a new typescript type level project
Haha this one got me good. I was poking around the code looking for how the url is transformed into a chess board state, but its JavaScript in 2024 so of course my journey was a short one ending in an NPM import. You’ve gotta laugh, you’ve just gotta laugh…
Obviously very cool idea and implementation tho! I think the answer to the google question is “probably”
Only issue I see is that it does not identify check mate.
This is great! I love the simplicity of it. I was hoping that since it didn't require Javascript, it would work in the Emacs Web Browser (EWW). Sadly, it doesn't render the grid properly. Another niggle, when I moved my pawn to its last rank, it auto-promoted to a Queen rather than prompt me.
Similar idea using GNU chess: http://chess.delorie.com/
I already love the architecture and I'm excited about brutalist software. Great idea!
We need a brutalist software manifesto.
I applaud the aim to make lean and fast websites, but the lack of timer and drag+drop on this game makes it unusable, so I think this actually makes the reverse point -- one should not put non-functional requirements ahead of the function of a product. In other words, this was not a good compromise.
Chess960 also has different castling rules from normal chess though, and the site can't know it should use those just from the FEN?
The main difference is that the FEN no longer only encodes castling to the king's or queen's side. It must fully encode which file for each side. Castling _rules_ are the same, just the castling _location_ can change.
https://www.chessprogramming.org/Forsyth-Edwards_Notation#Ch...
I admit that while I do regularly play chess, I'm not super well versed in either FEN nor Chess960. That said, I've been trying to figure out why you would need a different notation for Chess960 for half an hour now, and I just can't figure it out. All explanations I'm seeing just make some vague mention about ambiguity in the regular notation for Chess960, but I, personally, can't think of a situation in which the regular notation is insufficient.
The KQkq still unambiguously mark which player can castle to which side, and once either a rook or King move for the first time, you just remove the corresponding letter(s). What am I missing?
One of the rooks might move over to the other side during the course of the game, and then it's no longer unambiguous which one is the castling rook.
E.g., if you have your king on e1, a rook on f1 and another one on g1… can you castle if the f1 rook moves? Can you castle if the g1 rook moves? Just “kingside” won't tell you the difference.
I mean technically it still isn’t ambiguous because you could just refer to the starting position to see which rook is allowed to move.
Which of course is annoying to implement, but you do already have to keep state on the history of the game to determine if moves are legal, e.g. you can’t castle twice.
You don't have the starting position
The entire point of a FEN is that it describes the entire board state without having to know anything about the history.
No, that's what the castling rights field in the FEN is for. Once you castle, you zero out both the k and q bits.
the king always has to be in between rooks in chess960
As a starting position, sure.
But if you have a later board state, with two rooks on one side: how do you know which one is still eligible to castle?
Ah, that's the possibility I wasn't thinking of. Thank you.
That depends - Chess960 doesn't have different castling rules from normal chess, it just has additional considerations that normal chess does not.
In other words, Chess960's castling rules are completely consistent with normal chess castling rules, so depending on how it is implemented, it might just work.
It depends on how exactly you define it. If the standard rule is as commonly taught "king moves two spaces and the rook hops over", 960 isn't the same. If the rule is "king moves to c or g file, rook moves to d or f", then it is the same. Those rules are equivalent for standard chess but only the latter ports to 960 properly. (We're probably agreeing, in that's what you mean by depending on the implementation, I'm just spelling it out.)
Indeed - perhaps you could say that 960's castling rules are a superset of normal castling rules.
Edit: Actually, I think the other way around is more accurate - 960's castling rules are a subset of normal castling rules.