Show HN: A simple site to make chessboard images

I really like it, but just a heads-up: the directions threw me for a solid 15-30 seconds.

"Click a piece to select it, then click on the board to place it."

Okay, cool! I clicked on the King's Pawn, then e4. The king's pawn disappeared, and then... nothing. I clicked e3. I clicked e4 again and then... e5? e2? Nope.

Okay, maybe something went wrong. Let's try with the queen's pawn. d2, pawn goes away. d4? d3? Nope.

I re-read the directions: "Click a piece to select it, then click on the board to place it."

Weird. The pawn went away instead of being selected. How do I select a pawn? Click f2. Nope.

At that point, I look again at the pieces below the board, and click on the pawn. It's selected! I click on e4. It's on the board! Okay, I get this now, but it's not what I expected.

I see what you're doing with the controls, but I think it's a poor match for your default state. When I see a chess board in starting position, my instinct is to move a piece, not to find a way to add new pieces to the board.

My thoughts:

If you want to keep the controls the same, I'd start with an empty board and maybe clarify the directions a smidge. I'd try something like:

  To place a piece, first select it from the case, then click any empty square on the board.

  To remove an existing piece from the board, click once on it.

  Use the buttons below for standard starting position or to import a FEN position.

If you're up for modifying the controls, I was expecting something like: clicking a piece currently on the board selects it. A second click on the same square deletes that piece, while a click on any other square "moves" the selected piece there, emptying its source square and overwriting the contents (if any) of the destination square.

Nice! One suggestion, though: a common operation is to take one board position and move one piece on it. As it stands now, you can't just drag a piece, and if you click on one it disappears and you have to click on its type at the bottom.

I would prefer if you could click a piece to delete, and then, by default, your next board click puts that piece in the new place.

That is not bad. Even if the scripts are disabled, or if images are disabled, or if the server is unreachable, a link to it is still usable, since the URL contains the FEN code. However, a suggestion is maybe you might want to add <noscript><img...> so that if images are enabled but scripts are disabled and the link is not directly to the picture, that it is still displayed without having to alter the URL (although even the way it is now, the instructions for altering the URL are available on that web page, so it isn't so much of a problem).

My "Farbfeld Utilities" software also can be used for making a chess board, if you have all of the pieces pictured in one file. So when you want to do it locally rather than adding a link on a web page, this can be done. (You can alter the colours and metrics below as needed)

  ff-chess 8 8 32 E5E5D7 001000 \
   | ff-composite <(pngff < pieces.png \
   | ff-text +PNBRQKpnbrqk 32 32 `sed 's.7.43.g;s.6.33.g;s.5.32.g;s.4.22.g;s.3.21.g;s.2.11.g;s./. .g' < board.fen`) 0,0,0 \
   | ff-border 0020FF 8

So I usually use this site:

http://www.jinchess.com/chessboard/composer/

about once a week for creating diagrams. Have a look at them for some feature ideas.

Looking at your site the main problem I see is you don't indicate which player is to move anywhere.

I don't use all the features on the other site but I think my main advice would be to have a very generic colours and piece-font as your default and give people options to change them.

If anyone's interested in a super-easy way to embed an interactive chessboard on their own page, I very recently made a <chess-board> web component, forked from chessboard.js: https://justinfagnani.github.io/chessboard-element/

You can put a board on a page with one tag:

    <chess-board></chess-board>

And set it up via attributes:

    <chess-board
        draggable-pieces
        position="8/R7/8/8/k1K5/8/8/8">
    </chess-board>

The element also has methods to make animated moves, set position, clear the board, etc.

I still have a few touch-interaction bugs to fix, so I haven't submitted it to HN myself yet. I hope it's useful to someone!

Great tool! In case anyone is interested in an animated version of something like this for visualizing moves, I made this tool with a friend a while ago: https://www.gfychess.com/

Really nice! I especially like the way you can append FEN to URLs to create a shareable link.

I feel like drag and drop would be more intuitive. Maybe slower though.

This is a feature of lichess, which is free and open source.