//! Variables

const width = 9
const height = 8
const cellCount = width * height
const cells = []
let counter = 0
let timer

//! Car movement

// car1

const carRowIndexLeft = 6
const carGapLeft = 2
const carStartIndexLeft = width * carRowIndexLeft 
let carsLeft = []

// car2

const carRowIndexRight = 4
const carGapRight = 2
const carStartIndexRight = width * carRowIndexRight
let carsRight = []

//!Creating a grid function

function createGrid() {
for (let i = 0; i < cellCount; i++) {
  const cell = document.createElement('div')
  cell.innerText = i
  cell.dataset.index = i
  cells.push(cell)
  grid.appendChild(cell) 
}
carsLeft = Array.from(cells).slice(carStartIndexLeft, carStartIndexLeft + width)
carsRight = Array.from(cells).slice(carStartIndexRight, carStartIndexRight + width)

// Starting the game

function startGame() {
timer = setInterval(() => {
  counter++
  cells.forEach(cell => cell.classList.remove('car1', 'car2'))

  carsLeft.forEach((car, i) => {
    if (i % carGapLeft === carGapLeft - 1 - counter % carGapLeft){
      car.classList.add('car1')

//Here i should have the movement for car2 to the right side.

 }, 500)
}