user interface - Python: How to make drawn elements snap to grid in pygame

Question

I am experimenting with a Pathfinding project and got stuck while creating a working GUI. I'm using pygame and already created a grid and a feature, which draws cubes when you press (or keep pressing) the mouse-button. However, these cubes just go wherever you click, and do not snap to the grid. I thought about using modulo somehow but I cannot seem to get it to work. Please find the code attached below. The Cube class is what I use for the squares drawn on the screen. Moreover, the drawgrid() function is how I set up my grid. I'd love some help on this, as I've been stuck on this roadblock for three days now.

class Cube:
    def update(self):
        self.cx, self.cy = pygame.mouse.get_pos()
        self.square = pygame.Rect(self.cx, self.cy, 20, 20)

    def draw(self):
        click = pygame.mouse.get_pressed()
        if click[0]:  # evaluate left button
            pygame.draw.rect(screen, (255, 255, 255), self.square)

Other drawgrid() function:

def drawgrid(w, rows, surface):
    sizebtwn = w // rows  # Distance between Lines
    x = 0
    y = 0
    for i in range(rows):
        x = x + sizebtwn
        y = y + sizebtwn
        pygame.draw.line(surface, (255, 255, 255), (x, 0), (x, w))
        pygame.draw.line(surface, (255, 255, 255), (0, y), (w, y))

Answer 1

You have to align the position to the grids size. Use the floor division operator (//) to divide the coordinates by the size of a cell and compute the integral index in the grid:

x, y = pygame.mouse.get_pos()

ix = x // sizebtwn
iy = y // sizebtwn

Multiply the result by the size of a cell to compute the coordinate:

self.cx, self.cy = ix * sizebtwn, iy * sizebtwn

---

Minimal example:

import pygame
pygame.init()

screen = pygame.display.set_mode((200, 200))
clock = pygame.time.Clock()

def drawgrid(w, rows, surface):
    sizebtwn = w // rows 
    for i in range(0, w, sizebtwn):
        x, y = i, i
        pygame.draw.line(surface, (255, 255, 255), (x, 0), (x, w))
        pygame.draw.line(surface, (255, 255, 255), (0, y), (w, y))

class Cube:
    def update(self, sizebtwn):
        x, y = pygame.mouse.get_pos()
        ix = x // sizebtwn
        iy = y // sizebtwn
        self.cx, self.cy = ix * sizebtwn, iy * sizebtwn
        self.square = pygame.Rect(self.cx, self.cy, sizebtwn, sizebtwn)
    def draw(self, surface):
        click = pygame.mouse.get_pressed()
        if click[0]:
            pygame.draw.rect(surface, (255, 255, 255), self.square)

cube = Cube()

run = True
while run:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False

    cube.update(screen.get_width() // 10)

    screen.fill(0)
    drawgrid(screen.get_width(), 10, screen)
    cube.draw(screen)
    pygame.display.flip()