//loops and arrays part 3

//Challenge: Build a pac-man board. A pacman board is a board 18 x 18 squares large that has squares 
//coloured based on if there is a wall in the square, a power-pellet in the square, a pac-dot in the
//square, pac-man himself, or the four ghosts, inky, blinky, pinky and clyde. Based on the game //board example, and what you have learned about if statements and adding classes in javascript, I //would like you to create your own pac-man board. Be as creative with the maze as you like.

//I have gone ahead an added 324 squares for you in the html and made an array for you to work //with.

//please dont forget to share your code on the #share-your--code channel on discord.

const squares = Array.from(document.querySelectorAll('.grid div'))

// Create layout array
const layout = [
    1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, // 1
    1,9,2,2,2,2,1,2,2,2,1,2,2,2,2,2,9,1, // 2
    1,2,1,1,1,2,2,2,1,2,2,2,1,1,1,1,2,1, // 3
    1,2,2,2,1,2,1,1,1,1,1,2,1,2,2,2,2,1, // 4
    1,1,1,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1, // 5
    1,1,1,2,1,1,1,1,2,1,1,1,1,2,1,1,1,1, // 6
    1,1,1,2,1,2,2,2,7,2,2,2,1,2,1,1,1,1, // 7
    1,1,1,2,1,2,1,1,2,1,1,2,1,2,1,1,1,1, // 8
    10,4,4,2,2,2,1,8,6,2,1,2,2,2,4,4,4,4, // 9 
    1,1,1,2,1,2,1,1,1,1,1,2,1,2,1,1,1,1, // 10
    1,1,1,2,1,2,2,2,2,2,2,2,1,2,1,1,1,1, // 11
    1,1,1,2,1,1,1,1,2,1,1,1,1,2,1,1,1,1, // 12
    1,2,2,2,2,2,2,2,3,2,2,2,2,2,2,2,2,1, // 13
    1,1,1,2,1,2,1,1,1,1,1,2,1,2,1,1,1,1, // 14
    1,2,2,2,1,2,2,2,1,2,2,2,1,2,2,2,2,1, // 15
    1,2,1,1,1,1,1,2,1,2,1,1,1,1,1,1,2,1, // 16
    1,9,2,2,2,2,2,2,2,5,2,2,2,2,2,2,9,1, // 17
    1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, // 18
//  1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 
]

// Loop over divs in squares array and add appropriate classes
for (let i = 0; i < squares.length; i++){
    if (layout[i] === 1) {
        squares[i].classList.add("wall");
    }
    if (layout[i] === 3) {
        squares[i].classList.add("pacman");
    }
    if (layout[i] === 2) {
        squares[i].classList.add("ghost", "pacdot");
    }
    if (layout[i] === 5) {
        squares[i].classList.add("ghost", "inky");
    }
    if (layout[i] === 6) {
        squares[i].classList.add("ghost", "blinky");
    }
    if (layout[i] === 7) {
        squares[i].classList.add("ghost", "pinky");
    }
    if (layout[i] === 8) {
        squares[i].classList.add("ghost", "clyde");
    }
    if (layout[i] === 9) {
        squares[i].classList.add("power-pellet");
    }
}