Pygame Mastermind game, Problems with getting the grid to work as intended

i am creating a mastermind game with python and pygame, I was beginning by trying to get the text box to take an input and then allow the user to make a guess

My code looks like this, sorry if it is a bit messy


BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
GREEN = (0, 255, 0)
RED = (255, 0, 0)
BLUE = (0 , 0, 255)


WIDTH = 20
HEIGHT = 20
WIDTH1 = 30
HEIGHT1 = 30


MARGIN = 5
MARGIN1 = 10

array_width = 4
array_height = 8

grid = []
for row in range(10):

    grid.append([])
    for column in range(10):
        grid[row].append(0)



colors = [(0, 0, 0) for i in range(array_width * array_height)]
blocks = [False for i in range(array_width * array_height)]


pygame.init()

# Set the HEIGHT and WIDTH of the screen
WINDOW_SIZE = [300, 300]
screen = pygame.display.set_mode(WINDOW_SIZE)

# Set title of screen
pygame.display.set_caption("Array Backed Grid")
sair = True

done = False
coord =[]

clock = pygame.time.Clock()
grid[row][column] = 0
# -------- Main Program Loop -----------
grid[row][column] = 1

base_font = pygame.font.Font(None, 32)
user_text = ""
input_rect = pygame.Rect (10,250,100,50)
color_active = pygame.Color('lightskyblue3')
color_passive = pygame.Color('gray15')
color=color_passive
active = False


while not done:
    for event in pygame.event.get():

        if event.type == pygame.QUIT:
            done = True

        elif event.type == pygame.MOUSEBUTTONDOWN:
            print (blocks)
            pos = pygame.mouse.get_pos()

            for i in range(array_width):
                for j in range(array_height):
                    column = pos[0] // (WIDTH + MARGIN)
                    row = pos[1] // (HEIGHT + MARGIN)
                    print(row)
                    print(column)

                    blocks[row * array_height + column] = not blocks[row * array_height + column]
                    # toggle
                    for row in range(array_width):
                        for column in range(array_height):

                            # CHECK IF BLOCK SHOULD BE CHANGED
                            if blocks[column * array_width + row]:
                                if user_text == 'blue':
                                    colors[column * array_height + row] = (0, 0, 255)





            print("Click ", pos, "Grid coordinates: ", row, column)
        # TEXT BOX CRETAION AND USAGE
        if event.type == pygame.MOUSEBUTTONDOWN:
            if input_rect.collidepoint(event.pos):
                active = True
            else:
                active = False

        if event.type == pygame.KEYDOWN:
            if active == True:
                if event.key == pygame.K_BACKSPACE:
                    user_text = user_text[0:-1]
                else:
                    user_text += event.unicode
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_RETURN:
                user_text = user_text
                print(user_text)


    if active:
        color = color_active
    else:
        color=color_passive
    pygame.draw.rect(screen,color,input_rect,2)
    text_surface= base_font.render(user_text,True,(255,255,255))
    screen.blit(text_surface, (input_rect.x +5, input_rect.y + 5))

    for row in range(array_width):
        for column in range(array_height):
            pygame.draw.rect(screen,
                             # GET THE COLOR AT THAT INDEX
                             colors[column * array_width + row],
                             [(MARGIN + WIDTH) * column + MARGIN,
                              (MARGIN + HEIGHT) * row + MARGIN,
                              WIDTH,
                              HEIGHT])
    for row in range(8):
        for column in range(4):
            color = WHITE
            if user_text == 'yellow':
                print (grid)
                grid[row][column] = 2
                color = BLUE
                pygame.draw.rect(screen,
                                 color,
                                 [(MARGIN + WIDTH) * column + MARGIN,
                                  (MARGIN + HEIGHT) * row + MARGIN,
                                  WIDTH,
                                  HEIGHT])

            if user_text == 'green':
                grid[row][column] = 1
                color = GREEN
            pygame.draw.rect(screen,
                             color,
                             [(MARGIN + WIDTH) * column + MARGIN,
                              (MARGIN + HEIGHT) * row + MARGIN,
                              WIDTH,
                              HEIGHT])






    clock.tick(60)


    pygame.display.flip()

pygame.quit()

After running the code, if i click on any of the boxes, nothing seems to happen, which i somewhat expected as i need to write more. When i click on the text box,
The gui looks like this

The GUI

This error pops up when i click on the text box below the grid

blocks[row * array_height + column] = not blocks[row * array_height + column]
IndexError: list index out of range

I don’t know why this is happening

Any help appreciated, Thanks

Answer

You don’t need the extra outer loops at all (for i in range(array_width): and for j in range(array_height):).
However, you have to evaluate whether column is less than array_height and row is smaller than array_width`:

while not done:
    for event in pygame.event.get():

        if event.type == pygame.QUIT:
            done = True

        elif event.type == pygame.MOUSEBUTTONDOWN:
            print (blocks)
            pos = pygame.mouse.get_pos()

            column = pos[0] // (WIDTH + MARGIN)
            row = pos[1] // (HEIGHT + MARGIN)
            print(row)
            print(column)

            # check if column and row are valid grid indices
            if 0 <= column < array_height and 0 <= row < array_width:

                blocks[row * array_height + column] = not blocks[row * array_height + column]
                # toggle
                for row in range(array_width):
                    for column in range(array_height):

                        # CHECK IF BLOCK SHOULD BE CHANGED
                        if blocks[column * array_width + row]:
                            if user_text == 'blue':
                                colors[column * array_height + row] = (0, 0, 255)

            print("Click ", pos, "Grid coordinates: ", row, column)