Strange ordering of 2D-List in Tic-Tec-Toe program

[yasenstar]

Hello,

During my learning the chapter 6 "tic-tac-toe" in the book "Create GUI with Python", I got some confused on the behavior of check_win function:

# Vertical lines
    if (board_squares[0][0].text == board_squares[0][1].text == board_squares[0][2].text) and board_squares[0][0].text in ["X", "O"]:

As we create the board_squares as one 3x3 2D list (or called Array), from the sequence or index perspective, [0][0] is the first row and first column; [0][1] is first row 2nd column; and [0][2] is first row 3rd column, which is the normal ordering of list index, so putting them together for logical equal checking, it should describe the whole first row or say one horizontal line of buttons.

But the game running looks like it is - as book's comment mentioned - referring to the first "vertical line".

I've isolated those codes only for List context as below:

new_board = [
        [None, None, None],
        [None, None, None],
        [None, None, None]
    ]
for x in range(3):
    for y in range(3):
        new_board[x][y] = x+y

print(new_board)
print(new_board[0][0],new_board[0][1],new_board[0][2])

and the result is as below:

[[0, 1, 2], [1, 2, 3], [2, 3, 4]]
0 1 2

So this is actually referring to the first row, as normal Python list executes

I'm not sure whether my understanding is correct, but seems when creating button and assign them to new_board[x][y], our guizero library interpretes this 2D buttons list in column-first row-second manner.

May I get some of your insights on this?

Thanks,
Xiaoqi

[lawsie]

Hi Xiaoqi,

Let me first check that I've intepreted what you said correctly. I added this code (which is almost tictactoe1.py from the book except I added the x, y coords as text on each button)

from guizero import App, Box, PushButton

app = App("Tic tac toe")
board = Box(app, layout="grid")
for x in range(3):
    for y in range(3):
        button = PushButton(
            board, text=str(x)+str(y), grid=[x,y], width=3
        )

This gives the following result, which as you say is not the same as if you were to create a Python 2D list.

In guizero, the top left is considered to be the 0,0 point in the grid. If you look at https://lawsie.github.io/guizero/layout/ (the 'Grid layout' section) you'll see how this works. If x represents the horizontal axis, the top row of the grid has boxes 00, 10, 20 because the x value is increasing by 1 each time as you move horizontally to the right. Similarly, the first column of the grid has the values 00, 01, 02 because the x coordinate (0) remains the same and the y coordinate is incremented as you move down vertically.

[yasenstar]

Thanks Laura for your thorough explanation, yes, that's what I'd want to clarify, now reading the "layout" page and understand our working logic. Will keep in mind on this layout arrangement rule for making the coding.

Regards, Xiaoqi