Another thing that’s been interesting about making Best Chess has been trying to get the ‘right’ user-interface in terms of information. The actual interactive side is fine, of course – it’s just a chess-board and the player can presumably intuit that they draw a piece to a position to play their move. Fortunately the excellent libraries chess.js and chessboard.js take care of literally all of this, which is pretty amazing. No way I would have made this game without them.
As you of course know, Best Chess involves the human player making the first move (as white), and then the computer player solving chess from that position (as black). That is, black examines every possible move and game from the position and evaluates every outcome to determine whether, through perfect play, the game results in a draw, a win, or a loss. The point of the game is (I suppose?) to allow the player to think about the enormity of this as a task, the plucky character of their computer (or phone!) for even trying, the tragedy of its doomed effort, and so on. It’s very emotional.
The ‘solution’ I found isn’t especially interesting, though – it’s just interesting to me that this did require thought at all, that you need to think about how to convey a particular tone, even with something as dry as a depth-first tree search of chess! In the end I combined three different signals:
Just say it outright. For one thing, the game just literally tells the player ‘Black is evaluating every possible game from this position.’ Pretty basic stuff, but usefully gets the point across. I did have language focusing more on the word ‘solving’, but in the end that was a little more abstract and less effective, I thought.
“Thinking…” In chess games you often can tell that the AI opponent is ‘thinking’ because it just tells you or cycles some basic animation. In tribute to that, Best Chess does a classic ‘animated elipsis’ to indicate thought. This also helps to set up and contextualise the third part…
Show some inner workings. As a way of compromising between showing the actual code and showing nothing, the game displays the current moves in the current game its evaluating. Just the first move (to contextualise and link the evaluation to the actual board position visible) and then the latest four moves, which cycle (fairly) rapidly as the depth-first search proceeds and give some sense of actual calculation and activity. (I tried a bunch of ways of representing moves from the game and this one feels the best.)
As a final note, when I’ve put the question of how to represent that the game is ‘thinking’ to other people, they’ve generally quite reasonably suggested various visualisation techniques, from heat-mapping to animated ghost pieces appearing on the board as evaluation proceeds. The reason I didn’t want to do this in the end is that I think there’s something important about the starkness of the board the way it is, with a single move played, waiting (forever, effectively) for the next. It has rhetorical power or something.
There, more words about a chess game. Who’d have thunk it?