// Legend of grid case

const legend = {
    empty: 0,
    laser: 1,
    coloredLaser: 2,
    mirror: 3,
    door:4,
    button: 5,
    wall: 6,
    demiWall: 7,
    target: 8,
    ligthLaser: 9,
}

// Grid test

let grid = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 3, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]

// Function to print grid
let mirrorCoordinates = [];

function loadGrid () {
    const mapDiv = document.getElementById("map"); // Div with map in DOM
    mapDiv.innerHTML = "";

    for (let y = 0; y < grid.length; y++) {
        const lign = document.createElement("div");
        lign.classList.add("lign");

        for (let x = 0; x < grid[y].length; x++) {
            const cell = document.createElement("div");
            cell.classList.add("cell");

            switch (grid[y][x]) {
                case legend.empty:
                    cell.classList.add("empty");
                    break;
                case legend.laser:
                    cell.classList.add("laser");
                    break;
                case legend.coloredLaser:
                    cell.classList.add("colored-laser");
                    break;
                case legend.mirror:
                    const btnMirror = document.createElement("button");
                    btnMirror.classList.add("btn-mirror");
                    btnMirror.addEventListener("click", () => rotateMirror(btnMirror));
                    btnMirror.style.transform = "rotate(0deg)";
                    btnMirror.style.width = "100%";
                    cell.appendChild(btnMirror);
                    cell.classList.add("mirror");
                    break;
                case legend.door:
                    cell.classList.add("door");
                    break;
                case legend.button:
                    cell.classList.add("button");
                    break;
                case legend.wall:
                    cell.classList.add("wall");
                    break;
                case legend.demiWall:
                    cell.classList.add("demi-wall");
                    break;
                case legend.target:
                    cell.classList.add("target");
                    break;
                case legend.ligthLaser:
                    cell.classList.add("light-laser");
                    break;
            }

            lign.appendChild(cell);          
        }

        mapDiv.appendChild(lign);         
    }
}

loadGrid();

// Function to rotate mirror

function rotateMirror(mirror) {
    let angle = 0;
    if (mirror.style.transform == "") {
        angle = 0;
    } else {
        angle = parseInt(mirror.style.transform.split("(")[1].split("deg")[0])%360;
    }
    mirror.style.transform = `rotate(${angle+45}deg)`;
}