Design a movelist box for game navigation

[fsmosca]

When certain move is selected in the movelist box, the board will also update.
When move navigation button is pressed, move is highlighted in the movelist box.

It is ideal to have more than one move in the horizontal in the move list box.

• Study PySimpleGUI Table element
• Study PySimpleGUI Tree element

[fsmosca]

A. Table element

When user presses the move that event will return a value of move and fen.

e4
rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1

The returned values is enough to constuct the board position in the GUI.

Demo code:

#!/usr/bin/env
import sys
import PySimpleGUI as sg

moves = ['e4', 'e5']
fens = ['rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1',
        'rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq e6 0 2 ']

data = [['moves', 'fen']]
for m, f in zip(moves, fens):
    data.append([m, f])
    

headings = [data[0][x] for x in range(len(data[0]))]

layout = [
        [sg.Table(values=data[1:][:], headings=headings, max_col_width=2,
                  auto_size_columns=True, display_row_numbers=False,
                  justification='left', num_rows=4, enable_events=True,
                  visible_column_map=[True, False],
                  alternating_row_color='lightblue', key='_table_')],
]

window = sg.Window('Table', layout, grab_anywhere=False, resizable=True)

while True:
    event, values = window.Read()
    if event is None:
        break
    
    try:
        row = values['_table_'][0]
        ply = row + 1
        move = data[ply][0]
        fen = data[ply][1]
        print(move)
        print(fen)
    except:
        pass       
        
window.Close()
sys.exit()

Disadvantage:

1. The moves in the table element are placed at one move per row, expanding vertically. Placing more than one move along horizontal is not what we wanted as all moves in that row will be selected and returned when user presses that row.

Research to be continued.

[MikeTheWatchGuy]

I'm a tad confused by what you're looking for, but would be glad to help.

[fsmosca]

The ideal move list that I plan to implement would be something like the following image.

We can use a table element with more than 1 move in a row, but currently we cannot select a single specific move in that row as what I have researched so far.