Announcing TiddlyChess

I’ve made a plugin to show graphical interactive chess boards in tiddlywiki, using Lichess pgn-viewer javascript component.

You can look at a prerelease version at:

This is my first plugin, so any technical comments are most welcome. Also, if you find errors or improvements, please, let me know.

6 Likes

There are per-plugin threads here https://talk.tiddlywiki.org/c/plugins/7 , so if you don’t mind, I suggest a mod to move this announcement post into its own thread. It is important enough (for me at least) to have its own thread. My suggestion is, of course, selfish and mercantile, but I don’t want to anticipate and will post feedback and questions in the future plugin thread, if things go that way :rofl:

On mobile, default size of the widget exceeds the visible area.

This is fantastic!

I won’t get a chance to really play with it until tomorrow, but I’m impressed.

Possible changes

  • I see the board-color is hard-coded. Could this use LiChess themes and piece sets?
  • Similarly, if possible, I would allow the users to choose the CSS width units, and not default to em. Thus if they need a 300px wide board, then can just enter 300px. You could probably default the units to em or px as you like if the units are not supplied.
  • As to the plug-in. I’m no expert, but I’ve done a few. One minor thing I might do differently is to move $:/config/ViewTemplateBodyFilters/x-chess-pgn and $:/templates/ViewTemplate/pgn inside your plugin namespace, [$:/plugins/anacletus/tiddlychess. The body filter is found by tag, and it points to the template, so they don’t have to live anywhere particular. You own namespace then can be tidier. Unfortunately, I doubt that the same can be done with $:/language/Docs/Types/application/x-chess-pgn

Possible extensions

I would love to see this paired this with a FEN viewer. A dead-simple, unsophisticated one that grabs an image from LiChess would look like this:

\procedure fen(fen, color:'white')

<$let 
  enfen={{{ [<fen>encodeuricomponent[]] }}}, 
  image-url = `https://lichess1.org/export/fen.gif?fen=$(enfen)$&color=$(color)$`
> 
<img src=<<image-url>>  style="width: 60%;"/>
</$let>

\end

and would be used like this:

<<fen "r1b2rk1/pp5p/2npp1p1/6q1/2P5/3B4/PB2QPPP/1R3R1K w - - 0 19" "black">>

I feel as though an expanded version of this would pair well and add only a small amount of weight to the plugin.

Related to my previous post: this is how it looks zoomed.

On mobile I can only make the moves show up if I explicitly set showMoves='right' in the <$pgn> widget. To avoid typing it every time (and I don’t even know how to do the same for PGN tiddlers), I’d prefer a config setting in a shadow tiddler that I could set to this value once and have both widgets with no explicit showMoves parameter set, as well as PGN tiddlers honor it.

I would like a special view template treatment for other tiddlers as well. For example instead of changing the content type, I’d like to be able to add a PGN tag instead to mark a tiddler.

I would love to see this paired this with a FEN viewer.

A dead-simple, unsophisticated one that grabs an image from LiChess

As a prototype, indeed. But for offline use I’d prefer something like GitHub - AdibHoque/chess-fen2img: Generate Chessboards like chess.com & lichess through FEN, PGN & more. bundled with the plugin.

Frankly, I have a more greedy wish: not only visualization of standalone FEN strings. Not only FEN tiddlers a la PGN tiddlers (with possibility to mark tidlers via FEN tag as well). But access to FEN strings for all positions in a game. Ideally, there could be another template that would display the whole PGN game once more under the Lichess board widget, with a button pointing to the corresponding FEN tiddler after each move. This would clone the mask feature of Scid , allowing to annotate positions!

As for how to get the FEN for each position, IIRC chess.js that you mentioned a couple of months ago, could do that, so it would have to be bundled too.

A way to avoid it would be to feed TiddlyChess externally preprocessed PGN content with already generated FENs, I think https://www.cs.kent.ac.uk/people/staff/djb/pgn-extract/ can do that.

Yes, this sounds very much like something we discussed in the thread this was split from: Is it Possible to Implement a Chess Game in Tiddlywiki - #18 by Scott_Sauyet.

I agree that all that would be nice to have. But if we were to use TW as a chess database, it would have to be a relatively small chess database. For instance, I don’t think TW would strain to bring in my 32,000 LiChess games, even if we included a FEN for each position. But serious chess databases tend to include millions, even tens of millions of games. TW would not be useful for that.

Still, it looks as though we could easily wrap something else around the viewer in @anacletus’s plug-in to extract the FENs from every position. FEN is part of the regular state data. (The library may well also have an option to display it; I haven’t looked.)

This tool is able to display a FEN position directly.

I’m not sure why this throws up a RSOE:

\procedure fen(FEN)
<$pgn pgn="""[SetUp "1"]
[FEN "<<FEN>>"]"""/>
\end

<<fen "r1b1k1nr/p2p1ppp/n2B4/1p1NPN1P/6P1/3P1Q2/P1P1K3/q5b1 w kq - 2 21">>

But it should be pretty close, as you can simply do this to view a FEN position:

title: Immortal position
type: application/x-chess-pgn

[SetUp "1"]
[FEN "r1b1k1nr/p2p1ppp/n2B4/1p1NPN1P/6P1/3P1Q2/P1P1K3/q5b1 w kq - 2 21"]

First of all, I agree about the database size. I’m quite obsessed with TiddlyWiki as a chess database in context of:

  1. My own games. You say you have 30k. I’d be very surprised if you tell me all 30k of them are classic games.
  2. Only those of my games that I deem valuable. I play as guest and obviously I’m not interested to save those games where opponent abandons after a few moves or goes inactive and I just resign to avoid wasting time. This leaves me with a smaller subset.
  3. Only those of my games I review, analyze and annotate. Not all games are “interesting” or worth being reviewed. This leaves me with an even smaller subset. By all means all the games can live outside of TiddlyWiki in pgn file(s) or a Scid database
  4. Not to mention that such a collection can be easily partitioned into multiple smaller wiki containing subsets. Like partitioning by opening, by endgame type for example.

As for FENs - it’s either importing the pgn with all of them already generated (your size concern above is reasonable and justified here), or somehow having them generated on the fly via some bundled chess javascript lib. To be honest, I expected that the Lichess widget would handle FENs by default, but apparently that is out of its scope (unless it indeed does and I somehow managed to overlook it - as end user, not by searching its source code, JS is quite alien to me). Also, there’s no need to store all FEN tiddlers in the wiki. Only those that you want to annotate (non-empty text field) and link to different PGN tiddlers (especially common during the opening due to move permutations leading to the same position) - perhaps this can be done via FEN tiddlers having a list field with all PGN tiddlers containing it. Then it would be possible to view move annotations in those games, if they exist, additionally to the general game agnostic position annotation.

This could make TiddlyWiki a quite appealing tool for self improvement, with valuable features.

Sure nothing stops one from using Scid on a PC. Have those mask files with position annotations… and then one wants a portable chess spellbook. One wants it on Android phone for example. Preferably free (as in free beer) and ideally FOSS. App stores are searched. A Scid clone named “Scid on the go” is found. But… the app is old and doesn’t support mask files. And it seems to be abandonware not even being able to render with dark theme. Big disappointment. DroidFish is found. Very decent… for annotating single games only. And no support for annotating positions at all. Next level disappointment. Based on a true story. Mine. My quest about searching for portable, universal swiss army knife software. This is how I found TiddlyWiki.

No. Fewer than 20. A few hundred rapid, and the rest blitz. Almost all rated, so they’re available for download if desired.

But I don’t share your obsession. I very rarely review my games, and I’ve never bothered to annotate one. I could easily imagine using this plugin, though, in the wiki I use to manage the chess club at my day job, an out-of-date, anonymized version of which is at http://scott.sauyet.com/Tiddlywiki/Demo/ClubDemo/v4/.

As I noted, it already does a reasonable job, using a PGN string with just the SetUp and FEN fields. My guess is that with a PGN game viewer and a built-in FEN-to-image converter, LiChess has never felt a need to include a simple FEN viewer.

I would rather have Game tiddlers, Position tiddlers, and a tiddler type that joins the two together. If we do this only for positions of interest and not all positions, there might not be too much bloat.

If you want to search for the same position in different games, FEN is not going to be quite right, as it embeds move numbers. But a version that stored the move number and the 50-move rule counter separately, could easily use the rest of the FEN as a unique key.