not an issue but do you have an email?

[hankypoo7]

I was gonna email you asking for help with CSS but I see you don't have one. I was wondering if you know how to fix my code real quick. Can you look at the code below and tell me how to make the grass light green immediately after the mower mows over it? github repo: (https://github.com/hankypoo7/lawn-mower-incremental) thank you so much :)

[CPScript]

is this how you want it? Screen recording 2024-11-18 2.44.04 PM.webm

here is the updated code: https://github.com/CPScript/lawn-mower-incremental

style.css

.grid-cell {
    background-color: #3e7e42; /* Dark green (unmowed grass) */
    width: 100%;
    height: 100%;
    transition: background-color 0.5s ease; /* take 0.5 seconds so it looks like it cutes the grass instantly */
}

script.js

// Function to reset the grass color to dark green after 2 seconds
function regrowGrass() {
    const cells = document.querySelectorAll('.grid-cell');
    cells.forEach(cell => {
        if (cell.style.backgroundColor === 'lightgreen') {
            setTimeout(() => {
                cell.style.backgroundColor = '#3e7e42'; // Dark green (unmowed grass)
            }, 2000); // Delay before transitioning back to dark green (2 seconds)
        }
    });
}

// Function to handle mower movement and mowing
function moveMower(direction) {
    const mower = document.getElementById('mower');
    const x = mowerPosition.x;
    const y = mowerPosition.y;
    const grid = document.getElementById('grid');
    const cell = grid.querySelector(`[data-x="${x}"][data-y="${y}"]`);

    // Immediately change the color of the grass to light green when the mower moves over it
    if (cell && cell.style.backgroundColor !== 'lightgreen') {
        cell.style.backgroundColor = 'lightgreen'; // Mowed grass
        grassCounter++; // Increment the grass counter
        document.getElementById('grassCounter').textContent = `Grass Mowed: ${grassCounter}`;
    }

    // Move the mower based on the direction
    if (direction === 'up' && y > 0) mowerPosition.y--;
    if (direction === 'down' && y < gridSize - 1) mowerPosition.y++;
    if (direction === 'left' && x > 0) mowerPosition.x--;
    if (direction === 'right' && x < gridSize - 1) mowerPosition.x++;

    // Update the mower's position on the screen
    mower.style.top = `${mowerPosition.y * 50}px`;
    mower.style.left = `${mowerPosition.x * 50}px`;

    // Call regrowGrass after mowing
    regrowGrass(); // Start the regrowth process
}

I'm pretty sure this is what you wanted