title: Pygame buttons functionality and correcting grid select mouse function
body: <p>I've added two rectangles, red and green to the top of the following code, and for some reason my code, which otherwise worked, does not now. The grid cells should go RED when clicked, but the clicking is skewed. Can anyone advise on the problem? I have two issues:</p>
  
  <ol>
  <li>An upvote to the first one to spot and point out the error, unless I get it first! </li>
  <li>I also want to add text (user 1 and user 2) to the rectangles and make them clickable. On clicking, the user selects a random grid cell (which turns either red or green)</li>
  </ol>
  
  <p>Code as follows:</p>
  
  <pre><code>import pygame
  BLACK = (0, 0, 0)
  WHITE = (255, 255, 255)
  GREEN = (0, 255, 0)
  RED = (255, 0, 0)
  
  pygame.init()
  size = (350, 350)
  screen = pygame.display.set_mode(size)
  pygame.display.set_caption("My Game")
  done = False
  clock = pygame.time.Clock()
  
  width=22
  height=22
  margin=12
  
  
  grid=[]
  #Loop for each row in the list
  for row in range(7):
      #for each row, create a list that will represent an entire row
      grid.append([])
      #loop for each column
      for column in range(7):
          #add the number zero to the current row
          grid[row].append(0)
          #set row 1, column 5 to one
  #grid[1][3]=1
  #print(grid[1][3]) #this is the 2nd row and the 4th element along (0...1 row and 0...1...2....3 Column)
  
  
  # -------- Main Program Loop -----------
  while not done:
  #ALL EVENT PROCESSING SHOULD GO BELOW THIS LINE
  
      # --- Main event loop
      for event in pygame.event.get(): 
          if event.type == pygame.QUIT: 
              done = True
              #************CODE ADDED HERE**********************
          elif event.type == pygame.MOUSEBUTTONDOWN:
              #print("user clicked the screen")
              pos=pygame.mouse.get_pos()
              #x = grid[0]
              #y=  grid[1]
              #print(pos)
              #CHANGE THE X and Y screen coordinates as in the comments above to grid coordinates
              column=pos[0]//(width+margin+50)
             row=pos[1]//(height+margin+60)
             #set the location to one (when selected by the mouse)
              grid[row][column]=1
              #print("User click ", pos, "Grid coordinates:", row+1, column+1)
  
  
  
       # --- Game logic should go here
  
  
      # --- Screen-clearing code goes here
  
    # Here, we clear the screen to white. Don't put other drawing commands
     # above this, or they will be erased with this command.
  
     # If you want a background image, replace this clear with blit'ing the
     # background image.
       screen.fill(BLACK)
  
      # --- Drawing code should go here
      #Drawing the red and Green rectangles
      pygame.draw.rect(screen,RED, [0,0,120,50])
      pygame.draw.rect(screen,GREEN, [240,0,120,50])
  
      for row in range(7):
          #the column number - this refers to the number of columns it will produce. 2, for example, will produce only 2 columns
          for column in range(7):
              color = WHITE
              if grid[row][column] ==1:
                  color = RED
                  #****MOVING THE REST OF THE GRID DOWN*****
                  #the 60 is the margin from the top
                  #the 50 is the margin from the left
              pygame.draw.rect(screen,color,[(margin + width) * column + margin+50, (margin + height) * row + margin+60,width,height])
  
  #*******PRINTING TEXT TO THE SCREEN**********
      # Select the font to use, size, bold, italics
      #font = pygame.font.SysFont('Calibri', 25, True, False)
      #text = font.render("a", True, BLACK)
      # Put the image of the text on the screen at 250x250
      #screen.blit(text, [25, 25])
  
      # --- This bit updates the screen with what we've drawn.
  pygame.display.flip()
  
      # --- Limit to 60 frames per second
  clock.tick(60)
  
  # Close the window and quit.
  pygame.quit()
  </code></pre>