Tkinter board game

Question:

I am making a board game with Tkinter. I create a grid:

def create_grid(self):
    self.grid_frame = Frame(window)
    self.grid_frame.grid(row=1, column=0)
    self.grid_picture = PhotoImage(file="grid.PNG")
    self.grid_label = Label(self.grid_frame, image=self.grid_picture)
    self.grid_label.grid(row=0, column=0, columnspan=100, rowspan=10)

Then the pawns are placed based on their distance from start:

def green_grid_translation(self, green_position):
    if green_position < 10:
        self.green_grid_row = 9
        self.green_grid_column = green_position*10+2
    elif green_position < 20:
        self.green_grid_row = 8
        self.green_grid_column = 92 - (green_position - 10)*10

The pawns are placed on the same frame as the grid, the frame is created again with every move:

def position_interface(self):
    self.grid_frame = Frame(window)
    self.grid_frame.grid(row=1, column=0)
    self.grid_picture = PhotoImage(file="grid.PNG")
    self.grid_label = Label(self.grid_frame, image=self.grid_picture)
    self.grid_label.grid(row=0, column=0, columnspan=100, rowspan=10)
    self.green_picture = PhotoImage(file="green.png")
    self.green_symbol = Label(self.grid_frame, image=self.green_picture)
    self.green_symbol.grid(row=self.green_grid_row, column=self.green_grid_column)
    self.blue_picture = PhotoImage(file="blue.png")
    self.blue_symbol = Label(self.grid_frame, image=self.blue_picture)
    self.blue_symbol.grid(row=self.blue_grid_row, column=self.blue_grid_column)

The following loops are used to make them go step by step:

for x in reversed(range(green_change[0])):
   run_grid.green_grid_translation(green_change[1] - x)
   run_grid.blue_grid_translation(blue_change[1])
   run_grid.position_interface()
   window.update()
   sleep(1)
for x in reversed(range(blue_change[0])):
    run_grid.green_grid_translation(green_change[1])
    run_grid.blue_grid_translation(blue_change[1] - x)
    run_grid.position_interface()
    window.update()
    sleep(1)

green_change[0] is the number of steps the pawn is supposed to move,
green_change[1] is its position on the grid

It works fine with a single pawn, but when there are two, it’s like the number
of rows and columns changes and the pawns sometimes land in wrong positions:
enter image description here

Is there a way to fix it or do I need to take a completely different approach?

Asked By: Dawid

||

Answers:

Your approach is wrong. There is plenty of stuff to improve, e.g the use of sleep in a GUI application is an absolute no-no.

But for the problem at hand, you simply use the wrong abstraction. Grids are for creating widgets in regular spaced layouts. But not for stacking/rearranging them. It CAN be done, but I would advise against it.

Use instead a canvas. This allows you to simply overlay graphical elements, and even move them around (smoothly if you are so inclined!).

Answered By: deets
Categories: questions Tags: ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.