Javascript Errors

const grid = document.querySelector('.grid')
let squares = document.querySelectorAll('.grid div')
const ScoreDisplay = document.querySelector('#score')
const StartBtn = document.querySelector('#start-button')
const width = 10
let nextRandom = 0

const lTetromino = [
    [1, width+1, width*2+1, 2],
    [width, width+1, width*2+1, width*2+2],
    [1, width+1, width*2+1, width*2],
    [width, width*2, width*2+1, width*2+2]
]


const zTetromino = [
    [0, width, width+1, width*2+1],
    [width+1, width+2, width*2, width*2+1],
    [0, width, width+1, width*2+1],
    [width+1, width+2, width*2, width*2+1]
]


const tTetromino = [
    [1, width, width+1, width+2],
    [1, width+1, width+2, width*2+1],
    [width, width+1, width+2, width*2+1],
    [1, width, width+1, width*2+1]
]

const oTetromino = [
    [0, 1, width, width+1],
    [0, 1, width, width+1],
    [0, 1, width, width+1],
    [0, 1, width, width+1]
]

const iTetromino = [
    [1, width+1, width*2+1, width*3+1],
    [width, width+1, width+2, width+3],
    [1, width+1, width*2+1, width*3+1],
    [width, width+1, width+2, width+3]
]

const theTetromino = [lTetromino, zTetromino, tTetromino, oTetromino, iTetromino]

let currentPosition = 4
let currentRotation = 0
// randomly select a tetromino and its rotation
let random = Math.floor(Math.random()*theTetromino.length)
let current = theTetromino[random][currentRotation]

// draw the tetromino

function draw () {
    current.forEach(index => {
        squares[currentPosition + index].classList.add('tetromino')
    })
}

// undraw the tetromino

function undraw () {
    current.forEach(index => {
        squares[currentPosition + index].classList.remove('tetromino')
    })
}


// make the tetromino move down every second. grid

timerId = setInterval(moveDown, 1000)

// keyCode
function control (e) {
    if(e.keyCode === 37) {
        moveLeft()
    } else if (e.keyCode === 38) {
        rotate()
    } else if (e.keyCode === 39) {
        moveRight()
    } else if (e.keyCode === 40) {
        moveDown()
    }

}
document.addEventListener('keyup', control)

// move down function

function moveDown () {
    undraw()
    currentPosition += width
    draw()
    freeze()
}
// freeze function
function freeze() {
    if(current.some(index => squares[currentPosition + index + width].classList.contains('taken'))) {
    current.forEach(index => squares[currentPosition + index].classList.add('taken'))
    // start new tetromino falling
    random = nextRandom
    nextRandom = Math.floor(Math.random() * theTetromino.length)
    current = theTetromino[random][currentRotation]
    currentPosition = 4 
    draw()
    displayShape()
    }
}

// move the tetromino left

function moveLeft() {
    undraw()
    const isAtLeftEdge = current.some(index => (currentPosition + index) % width === 0)

    if(!isAtLeftEdge) currentPosition -=1

    if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {
        currentPosition +=1
    }
    draw()
}

// move the tetromino right, unless is at the edge of the block
function moveRight(){
    undraw()
    const isAtRightEdge = current.some(index => (currentPosition + index) % width === width -1)
    if(!isAtRightEdge) currentPosition +=1

    if(current.some(index => squares[currentPosition + index].classList.contains('taken'))) {
        currentPosition -=1
    }

    draw()
}

// rotate the tetromino
function rotate () {
    undraw()
    currentRotation ++
    if(currentRotation === current.length){ // if the current rotation gets to 4
        currentRotation = 0
    }
    current = theTetromino[random][currentRotation]
    draw()
}

// show up-next tetromino in mini-grid

const displaySquare = document.querySelectorAll('mini-grid div')
const displayWidth = 4
let displayIndex = 0

// the tetromino w/o rotation
const upNextTetromino = [
    [1, displayWidth+1, displayWidth*2+1, 2], //lTetromino
    [0, displayWidth, displayWidth+1, displayWidth*2+1], // zTetromino
    [1, displayWidth, displayWidth+1, displayWidth+2]
    [0, 1, displayWidth, displayWidth+1],
    [1, displayWidth+1, displayWidth*2+1, displayWidth*3+1]
    ]



// display mini grid
function displayShape() {
    //remove any trace of tetromino from the grid
    displaySquare.forEach(squares => {
        squares.classList.remove('tetromino')
    })
    upNextTetromino[nextRandom].forEach( index => {
        displaySquare[displayIndex + index].classList.add('tetromino')
    })
}