US Hawks Hang Gliding Association

This may be off topic, but Chris has been wanting to play chess, so I figured I'd try to see if we can do that here on the forum. If anyone objects, I can move it to the Free Speech Zone (which I decided to do anyway).

So, here's what a chess board looks like in our normal BBCode:

 ♜  ♞  ♝  ♛  ♚  ♝  ♞  ♜ 
 ♟  ♟  ♟  ♟  ♟  ♟  ♟  ♟ 
                        
                        
                        
                        
 ♙  ♙  ♙  ♙  ♙  ♙  ♙  ♙ 
 ♖  ♘  ♗  ♕  ♔  ♗  ♘  ♖ 

It looks a little messy inside, but you should be able to quote this post and move the pieces around.

However, there's a problem with Android tablets and cell phones. On those devices, the empty squares are only half as wide as squares containing a chess piece. So I've also worked on a table-based approach below.

This version is based on tables, and it's a little easier to use than the previous version ...

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟
♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

I'm not sure why it doesn't start at the top of the post, but that's something that can be worked on. I think it's ready to play!!

I suggest that when a match is started, the topic title should start with "Chess Match:", followed by the player's names, followed by the date like this example:

Chess Match: Chris vs Bob, November 20, 2021

Aha! I figured out why the chess board didn't start at the top of the page. I had used carriage returns inside of my table, and the BBCode processor doesn't seem to know where to put them in the resulting HTML, so it puts them in front of the table. In this version, I removed all carriage returns, and the table starts where it should:

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟
♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

In retrospect it makes some sense. In HTML, all white space (spaces, tabs, carriage returns, line feeds) is ignored. To force a new line in HTML, you have to use an explicit tag (like "br" or "p"). But BBCode is meant to be easier, and it lets you use regular new lines in your code to make new lines in the HTML. So while new lines in a table shouldn't have any effect on HTML, these new lines were appearing in the BBCode, and it tried to add the HTML breaks for each new line ... somewhere. I think it's a bug in the BBCode translator to put those newlines outside the table, but it may also be considered a "feature". Either way, the lesson is clear: don't use carriage returns or line feeds inside of a chess table!!

This is a test of the Rotate_Chess_BBCode.py program:

♖	♘	♗	♔	♕	♗	♘	♖
♙	♙	♙	♙	♙	♙	♙	♙
♟	♟	♟	♟	♟	♟	♟	♟
♜	♞	♝	♚	♛	♝	♞	♜

This functionality was eventually added to the ChessBoard_on_USHawks.html file as JavaScript (see post below).

The BBCode for playing chess seems to be pretty stable at this point in time. But it is still pretty complicated to use by hand.

In order to make this easier, I've written a fairly simple JavaScript program within a web page titled ChessBoard_on_USHawks.html. Here's what it looks like:



The program has a number of features. It lets you move pieces by clicking on each piece (turns pink) and then clicking on the new location. The piece will replace any other piece already in the new location. The program also lets you save the current state as either FEN-encoded text, Unicode text, or BBCode text (which appears in the lower text window). The FEN-encoded text can also be rotated and loaded back into the board to view from the other player's perspective. The BBCode output can be copied directly from the program's text window and pasted into a USHawks post for display. You can also edit the text or load new text copied from some other source and update the board from that text.

The program is attached below as a zip file. When you unzip it, you should have a file named "ChessBoard_on_USHawks.html". If you open that file in your browser (usually a "double click" on the file will do that), you should see the main chess board as shown in the image above.

Enjoy!!

I've been working on finding better fonts for our chess BBCode and that led me to a number of helpful sites:

http://www.enpassant.dk/chess/fonteng.htm
https://www.freecodecamp.org/news/html- ... haracters/
https://github.com/larmarange/demopaedi ... f.css.html

https://www.cdnfonts.com/freeserif.font
♝

A while back, I posted this little "Chess Helper" program to its own page on USHawks:

      https://ushawks.org/chess/

It doesn't help to choose moves. It only helps format them so they can be saved and posted. But It's a start. It does provide the infrastructure if anyone wants to start writing code to actually play. Good luck!

Also, if you'd like to practice against yourself, it's pretty easy. Just make a move from your side. The press the "Rotate" button and make a move from the other side, and repeat.