Exporting Chess moves and images into HTML or CSV format

Question

I have used the post ( Printing individual moves with the python-chess library ) to obtain the individual moves and display image of the chess board. See the code below.

import chess
from io import StringIO
import chess.pgn

#create a virtual board
board = chess.Board()    
#Paste PGN data    
pgn_string = """
1 e4 e6 2 d4 c6 3 Nf3 Nf6 4 Bg5 h6 5 Bf4 Na6 6 Bc4 d5 7 Bd3 Nxe4 8 O-O Nb4 9 Ne5 a5 
10 Qg4 f5 11 Qg6+ Ke7 12 Qf7+ Kd6 13 Nc4# 
"""

# Converting the string into StringIO object
pgn = StringIO(pgn_string)
# Reading the game
game = chess.pgn.read_game(pgn) 
#Printing and displaying the moves in algebraic notation
for move in game.mainline_moves():
        print(board.san(move))
        board.push(move)
        display(board)

I am able to obtain the output (see the image below) in jupyter for each moves and their corresponding board image (inside a scrolled window in jupyter)

I am trying to figure out if the above data (ie individual move and their image) can be exported to HTML or CSV format, so that i can analyse the moves, as it is difficult to analyze in jupyter. Thanks in advance

Answer 1

Command board.san(move) gives current move as text and you can keep it on list to save it later.

In documentation I found function chess.svg.board() which generates string with SVG image - and you can save in file using standard open() , write() , close()

Every browser can display image svg in HTML

You need only loop to create HTML with all moves and images

import chess
import chess.pgn
from io import StringIO

board = chess.Board()    

pgn_string = """
1 e4 e6 2 d4 c6 3 Nf3 Nf6 4 Bg5 h6 5 Bf4 Na6 6 Bc4 d5 7 Bd3 Nxe4 8 O-O Nb4 9 Ne5 a5 
10 Qg4 f5 11 Qg6+ Ke7 12 Qf7+ Kd6 13 Nc4# 
"""

pgn = StringIO(pgn_string)

game = chess.pgn.read_game(pgn) 

steps = []
for number, move in enumerate(game.mainline_moves()):
    text = board.san(move) 
    print(text)
    
    # keep current step on list
    steps.append(text)

    board.push(move)
    #display(board)

    # create string with SVG image
    svg = chess.svg.board(board)
    
    # save string in file with name `board-0.svg`, `board-1.svg`, etc.
    with open(f'board-{number}.svg', 'w') as fh:
        fh.write(svg)
    
# --- after loop ---

#print(steps)

# create string with HTML

html = ""

for number, move in enumerate(steps):
    # add move
    html += f'{move}</br>\n'
    
    # add image `board-0.svg`, `board-1.svg`, etc. (with width=300 to make it smaller)
    html += f'<img src="board-{number}.svg" width="300"></br>\n'
    
# save html in file    
with open('index.html', 'w') as fh:
    fh.write(html)

Screenshot from web browser: