Announcing TiddlyChess

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.

Thanks @Scott_Sauyet and @vuk , very interesting comments, I’m glad you find the plugin useful.

  • About the mobile issues (default size, and moves not showing), I’ll try to fix them somehow, I didn’t noticed as I have only used the component on a tablet. Maybe the solution is to somehow make the default width equal to the width of the tiddler…
  • About adding an additional $fen widget, now that Scott has shown that passing a fen string in the pgn parameter displays the position, maybe it is not necessary, and just a matter of mentioning it in the documentation of the pgn parameter. You can even write comments and they are displayed in the move section , as in <$pgn pgn='[FEN "r1b1k1nr/p2p1ppp/n2B4/1p1NPN1P/6P1/3P1Q2/P1P1K3/q5b1 w kq - 2 21"] {This is a comment} ' />
  • Tagging tiddlers with a “pgn” tag to display them as boards, allow specifying the size units, and changing the templates namespace seems easy, I’ll try.
  • Changing board colors and piece sets I think is not part of the javascript component, I think it is in the css part that I copied from the lichess demo, so it is not easy to change. The board is really a board image inside the css, I tried to make the squares colors similar to the Lichess default colors.

About extracting FEN positions from games, annotating FEN positions and somehow using Tiddlywiki as a small database I don’t really get it. ¿Can you explain a short use case? For example, if I have pgn’s of all my sicilian defense Lichess games (quite a lot! :slight_smile: ), ¿How would I use Tiddlywiki to study them and improve?

About extracting FEN positions from games, annotating FEN positions and somehow using Tiddlywiki as a small database I don’t really get it. ¿Can you explain a short use case? For example, if I have pgn’s of all my sicilian defense Lichess games (quite a lot! :slight_smile: ), ¿How would I use Tiddlywiki to study them and improve?

This is going to be a long post, so my apologies for eventually sliding too far from your question.

Preface

Many years ago I was reading this chess book https://www.houseofstaunton.com/mikhail-botvinnik-analytical-and-critical-work-articles-1923-941-russian-edtiion by Botvinnik. In game 117 (played in 1941) close to the end of the book he wrote (freestyle unprofessional translation is mine): “In vain Boleslavsky tried to test my knowledge, because I studied this endgame fifteen years ago.”. And he refered to the very beginning of the book, to game 8, which was played in 1926.

After the initial mix of shock, fear and awe passed, I thought, ok we mere mortal amateurs are not Botvinniks, we can’t be like this. Yet we live like half a century after these events, we have these fancy computers. Can we have them help us at least at remembering our past forgotten chess knowledge that we recorded, during a game analysis? After having the thought slowly boil in my mind for a while, I was able to formalize this thought a bit better: I analyze a game of mine, move by move. After each move the position on the board changes. Some positions are more “interesting” than the rest, certain are most “interesting” (I also call them “critical”), I spend more time thinking about them, and to record my thought process, I annotate them. Technically, before that moment I used to think I write the annotations after the moves, so it may look like I’m annotating moves, but something like “after 7. Nf5 I get an “immortal” knight” does not mean much out of any context. Better is “after 7. Nf5 I get an “immortal” knight, because it blocks isolated double pawns”. And ideally the context should include the whole board. This is when it clicked, I had one of those rare (being a slow thinking self taught chess player is hard) Eureka moments and I’ve realized that annotations in a PGN game are, in fact, annotations of positions (which are identified by unique FEN strings). So I continued and thought if I’m annotating a position and write down some findings, how cool would it be if a program could remind me whenever this position may occur again in another game.

For simplicity, in context of FEN strings I restricted the problem to identical FEN strings. Albeit there can be identical positions with different FEN strings. For example with different value for 50 move rule part. Or different number of halfmoves (initial position with no moves made and position after 1. Nf3 Nf6 2. Ng1 Ng8 are identical, yet their FEN strings are different).

Again, for simplicity, consider a very simple game. 1. e3 e6 2. d3 d6 it has the FEN rnbqkbnr/ppp2ppp/3pp3/8/8/3PP3/PPP2PPP/RNBQKBNR w KQkq - 0 1. A game of yours started like this, you considered the position “interesting” and annotated it. Some future game started like this: 1. e3 d6 2. d3 e6. It has the FEN rnbqkbnr/ppp2ppp/3pp3/8/8/3PP3/PPP2PPP/RNBQKBNR w KQkq - 0 1. You can see they are identical. Would it be nice if your chess database program reminded you that you already analyzed this position, and would show your annotation? This is just non-intrusive spaced repetition. And it works great for your opening use case. And works well too for endgame positions (see the Botvinnik story above).

If you’re familiar with Scid or Scid vs PC - the FOSS chess database software, it can do this via mask files - position annotations kept outside of PGN game records. See the link above in this thread.

In context of TiddlyWiki, this is how I imagine it could work. We have a tiddler with the first game 1. e3 e6 2. d3 d6 in the text field. This is a game with 5 positions: the initial one +1 per each move made. This could be rendered through a view template to make it look like [FEN] 1. e3 [FEN] e6 [FEN] 2. d3 [FEN] d6 [FEN]. Each [FEN] would be a button which, when clicked, would open the corresponding FEN tiddler. That’s why it’s important to have a way to know all the FENs. So when you’ll click the last one after d6, you will annotate that position and save the tiddler. Later, when you will analyze the second game 1. e3 d6 2. d3 e6 and will click the FEN button after e6, it will load the same FEN tiddler with your saved position annotation from the first game, refreshing the position pattern in your memory!

This is pretty much the main idea.

I know you asked for something short. I ended writing a short book. Sorry! :rofl:

1 Like

It’s perfect, now I think I understand it and I would find it very useful. My original purpose for this plugin was to create tiddlers with general ideas and strategies about an opening and things like that, with several boards/game displayed at the same time, to get a global view and remember things better.
Something like annotate positions, but in a unstructured way inside a tiddler.

Now your idea is to annotate positions in a structured way, inside a dedicated tiddler. Maybe you can

  • Have only one “Annotate position” button when viewing a game.
  • It would create a position tiddler in edit mode for you to annotate. The position would correspond to the position you are viewing in the game, and the tiddler title would be the FEN string.
  • Additionally, the view template of a game, will show you (besides the viewer and the annotate position button) a list of (annotated) position tiddlers found in your wiki (searching by tiddler title) corresponding to positions that are found in the game (the view template will use a library to extract on the fly a list of FENs from the PGN) , if any one is found. So if you create a tiddler with a new game, and find that there is something in the list, you know that there are positions that you already annotated.

That way you would only have one tiddler for game and one tiddler for annotated position and things will not grow too much.

Can’t you just have both? You can go the structured way and whenever you feel like you need to step aside from the strict convention, you just create tiddlers with general ideas and multiple diagrams side by side your way, then you either link to them from the PGN tiddler with single position annotation, or directly transclude them into.

As for your particular use case with openings, I think it’s fair to take a move-oriented approach rather than position-oriented approach, and these two could happily coexist and complement each other (symbiosis!) in the same plugin or wiki context.

Here is a small prototype of a move-centric workflow of studying an opening by storing the tree of moves in a Streams outline. As you learn new variations, you just grow the tree. And you can just link/transclude single position PGN tiddlers or more general ones (see above) into move nodes, thus growing the ecosystem further.

Download tiddlywiki-dev.html | LimeWire (download link will expire in one week)

Absolutely, I’m adding a “fen” parameter to the widget, while mantaining the “pgn” parameter, and adding a “fen” type tiddler to show individual positions.

That’s great, I didn’t know about the streams plugin, seems very usefull!

Not being JavaScript (and I mean the whole ecosystem and how it works in a browser, rather than just the language syntax) literate, so far I don’t understand how is TiddlyWiki going to interact with the Lichess widget. One loads a PGN tiddler containing the Lichess widget, navigates through a game. At some point one decides to annotate a position. This has to be done in a FEN tiddler that will contain the FEN string for the current position in the game. How does TiddlyWiki learn about that FEN string?

I think it’s possible, the pgn widget is a part of Tiddlywiki, it creates a lichess pgn viewer object, the external component that draws the board, and can maintain a reference to that object. By using this reference, you have access to the object’s properties and methods , like lpv.curData().fen which I thing is the current position being displayed. So, the widget can show the lichess viewer and a button with javascript code on the onclick event, that somehow creates a new tiddler with the fen position as his title.

There’s a new version at

I think it is now more or less usable.

  • Moves are now visible on mobile phones (default showMoves is now “right”, and width parameter now controls max-width css property instead of width). Will revert to “auto” as default when the issue is fixed on lichess project.
  • Width units can now be provided
  • Added fen parameter to the widget to show positions. Also, you can hava a position in a dedicated fen tiddler.
  • FEN and PGN tiddlers can now be tagged to show as boards (file-type can still be used for that)

Next things planned are shadow tiddlers for default parameters, create FEN tiddlers to annotate them while viewing a game, and search for existing positions in the wiki when viewing a game.

It seems you have a typo here

tag['FEN'] should be tag[FEN], otherwise tiddlers tagged FEN do not show anything

On mobile the annotation lines in the Lichess widget get chopped on the right side. While the widget itself fits inside the tiddler, it looks like the annotation text exceeds the visible area.

There are three ways to open the $:/plugins/anacletus/tiddlychess/immortal tiddler:

  1. Tiddler $:/plugins/anacletus/tiddlychess/usage is opened in a tab inside the $:/plugins/anacletus/tiddlychess tiddler and inside it, the immortal tiddler is rendered (see the attached picture)
  2. Tiddler $:/plugins/anacletus/tiddlychess/usage is opened as separate tiddler in the story river, inside it, the immortal tiddler is rendered.
  3. Tidler immortal is opened as separate tiddler in the story river.

In all these three cases the amount of chopped text on the right side of the Lichess widget is different.

I can only make speculative (as in not backed up by using code as reference) assumptions why is this happens. If I would have to make a blind guess, it would be that the board has a hardcoded minimum size and not enough space remains on the right text area.

If you come to the conclusion this is not an upstream bug and can fix it by tuning some CSS wheels, that would be great. Even if it will come at the expense of having the text too small, even unreadable. I can always zoom it with two fingers.

I made a new release with the css modified to somehow fix the original problem with showMoves=auto, moves were not showing at the bottom in small screens as intended.

Now they show down, although with fixed size at the moment, but I think is usable. Please give it a try.

1 Like

It is indeed usable now. I’d prefer slightly smaller prev/next move buttons to save a bit of additional space for move area maybe, but this is rather a voiced caprice than an UI improvement suggestion.

Can’t wait until it’ll be at least able to display FEN strings (maybe by narrowing down the buttons a bit you could squeeze just enough screen space between the board and the buttons to display the FEN string of the current position).