// Canvas board game
// Global variables
var ctx = null;
var tileW = 100, tileH = 100;
var mapW = 10, mapH = 10;

var tileMap = [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 2, 1, 3, 1, 2, 1, 0, 0,
    0, 0, 1, 2, 1, 2, 3, 2, 0, 0,
    0, 0, 2, 1, 3, 1, 2, 1, 0, 0,
    0, 0, 1, 2, 1, 2, 1, 2, 0, 0,
    0, 0, 3, 1, 2, 1, 3, 1, 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,
];

// left and right positions of beads, for player2 I need to add 30 to left so they are not on top of each other
var tiles = [
    {left: 220, bottom: 715},
    {left: 320, bottom: 715},
    {left: 420, bottom: 715, data: {type: "TRAP", move: "SKIP", instruction: "Skip 1 turn.", text: "A camp of evil thieves lays ahead of you, they are too many to confront and you decide to wait until they are gone."}},
    {left: 520, bottom: 715},
    {left: 620, bottom: 715},
    {left: 720, bottom: 715},
    {left: 220, bottom: 615},
    {left: 320, bottom: 615},
    {left: 420, bottom: 615},
    {left: 520, bottom: 615},
    {left: 620, bottom: 615, data: {type: "TRAP", move: "FORWARDS", steps: 3, instruction: "Move forwards 3 steps.", text: "A friendly looking dragon is ahead of you and you decide to hitch a ride."}},
    {left: 720, bottom: 615},
    {left: 220, bottom: 515},
    {left: 320, bottom: 515},
    {left: 420, bottom: 515, data: {type: 'TRAP', move: "GAMBLE", instruction: "Roll 2, 4 or 6 to move forward or roll 1, 3 and 5 to move backwards.", text: "You are robbed of your travel supplies and continuing the journey may be dangerous. You decide to gamble on continuing the journey(roll: 2, 4, 6) or go back to get new supplies(roll: 1, 3, 5)."}},
    {left: 520, bottom: 515},
    {left: 620, bottom: 515},
    {left: 720, bottom: 515},
    {left: 220, bottom: 415},
    {left: 320, bottom: 415},
    {left: 420, bottom: 415},
    {left: 520, bottom: 415},
    {left: 620, bottom: 415},
    {left: 720, bottom: 415},
    {left: 220, bottom: 315, data: {type: 'TRAP', move: "BACKWARDS", steps: -3, instruction: "Move backwards 3 steps.", text: "A group of nightwalkers see you an you have to run!"}},
    {left: 320, bottom: 315},
    {left: 420, bottom: 315},
    {left: 520, bottom: 315},
    {left: 620, bottom: 315, data: {type: 'TRAP', move: "ROLLHIGH" , steps: -1, instruction: "Roll a 3 or above to win or move backwards 1 step.", text: "A war is being faught and you have to assist."}},
    {left: 720, bottom: 315} // When this tile is reached, send user to victory screen
];

// Draw canvas when window has loaded
window.onload = function() {
    ctx = document.querySelector(".canvas").getContext("2d");
    this.requestAnimationFrame(drawGame);
    ctx.font = 'bold 16px "Open Sans", sans-serif';
};

function drawGame() {
    if(ctx==null) {
        alert("Your browser does not support HTML canvas. Upgrade it to play the game.");
        return;
    }

    for(var y = 0; y < mapH; y++) {
        for(var x = 0; x < mapW; x++) {

            switch(tileMap[((y*mapW)+x)]) {
                case 1:
                    ctx.fillStyle = "#FFFFFF";
                    break;
                case 2:
                    ctx.fillStyle = "#5A6C7A";
                    break;
                case 3:
                    ctx.fillStyle = "#D3A52F";
                    break;
                default:
                    ctx.fillStyle = "#FFFFFF";
            }
            ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
        }
    }

    // Draw board border
    ctx.beginPath();
    ctx.rect(200, 100, 600, 500);
    ctx.lineWidth = "2";
    ctx.strokeStyle = "#5A6C7A";
    ctx.stroke();

    // Draw board seperation lines
    ctx.beginPath();
    ctx.moveTo(200, 204);
    ctx.lineTo(700, 204);

    ctx.moveTo(300, 304);
    ctx.lineTo(800, 304);

    ctx.moveTo(200, 404);
    ctx.lineTo(700, 404);

    ctx.moveTo(300, 504);
    ctx.lineTo(800, 504);

    ctx.lineWidth = "8";
    ctx.strokeStyle = "#000000";
    ctx.stroke();

    // Draw images
    var throneImg = new Image();
    var warningImg = new Image();

    throneImg.onload = function (){
        ctx.drawImage(throneImg, 640, 620);

        ctx.drawImage(warningImg, 427, 125);
        ctx.drawImage(warningImg, 627, 225);
        ctx.drawImage(warningImg, 427, 325);
        ctx.drawImage(warningImg, 627, 525);
        ctx.drawImage(warningImg, 227, 525);
    }
    throneImg.src = "images/iron_throne_small.png";
    warningImg.src = "images/warning.png";

    // Draw text
    ctx.fillStyle = "#000000";
    ctx.fillText("GOAL", 727, 525);

    ctx.fillStyle = "#FFFFFF";
    ctx.fillText("START", 223, 120);

    ctx.fillStyle = "#000000";
    ctx.fillText("Who can reach the Iron Throne first?", 300, 700);

    ctx.fillText("Watch out for the yellow tiles, danger may be lurking!", 200, 70);
};

// Function to insert name of players turn
function playerTurn() {
    var playerTurn = document.querySelector(".player-turn");
    var player1 = localStorage.getItem("player1");
    var player2 = localStorage.getItem("player2");

    player1Img = document.querySelector(".bead1");
    player2Img = document.querySelector(".bead2");
    var player1SRC = localStorage.getItem("player1").split(' ', 1)[0];
    var player2SRC = localStorage.getItem("player2").split(' ', 1)[0];
    player1Img.src = "images/" + player1SRC + "_small.png";
    player2Img.src = "images/" + player2SRC + "_small.png";


    playerTurn.innerHTML = player1;
    /*
    if(playerRoll == 6) {
        playerTurn.innerHTML = playerTurn;
    } else {
        if(playerTurn.innerHTML == player2) {
            playerTurn.innerHTML = player1;
        } else if (playerTurn.innerHTML == player1) {
            playerTurn.innerHTML = player2;
        } else {
            playerTurn.innerHTML = player1;
        }
    }*/
};
playerTurn();

// Function to spin dice on click
(function(){
    var div = document.querySelector('.dice-container');
    var dice = document.querySelector('#dice');
    var open = false;

    div.addEventListener('click', function(){
      if(open){
        dice.className = 'icon-dice';
      } else{
        dice.className = 'icon-dice rotate';
      }
      open = !open;
    });
})();

// Roll result
function rollDice() {
    var rollNumber = roll();
    var playerRoll = document.querySelector(".player-roll");

    playerRoll.innerHTML = "You rolled a " + rollNumber + ".";
    // animate players token to move to correct tile
};

// Function to generate a number from 1-6
function roll() {
    return Math.floor(Math.random() * 6) + 1;
};

// Move bead based on roll
// ...code
// everything here is attempts at how to make roll move dices and include everything else This uses px isntead of the x, y I need
var rollHistory = [];
var currentPosition = 0; // starting positon
var button = document.querySelector("roll-button");

button.addEventListener("click", (e) => {
    const roll = rollDice();

    // this is not for my array of tiles
    if (currentPosition + roll >= tiles.length) {
        // not enought tiles left, go to last
        currentPosition = tiles.length - 1;
    } else {
        currentPosition += roll;
    }

    // have to draw image at new position in canvas
    bead.style.left = tiles[currentPosition].left + 'px';
    bead.style.top = tiles[currentPosition].bottom + 'px';

    // if on last, Win!
    if (currentPosition === tiles.length - 1) {
        setTimeout(() => alert('You win!'), 1);
        // When a bead lands on the last tile go to window.location = "file:///F:/School_Noroff/2019_Year2_Semester1/2020-01-27_Semester-Project2_Lisa-Ingemann/WF/Web/finale.html";
    }

    // If bead lands on yellow tile, activate trap
    for(var i = 0; i < tiles.length; i++) {
        var currentPositionX = tiles[i].x;
        var currentPositionY = tiles[i].y;

        if(tiles[i].data.type == "TRAP") {
            // Display trap message and instructions if bead has landed on a trap
            var trapContainer = document.querySelector(".message-trap");
            var trapInfo = document.querySelector(".text-trap");
            var trapInstructions = document.querySelector(".instruction");

            trapContainer.style.display = "block";
            trapInfo.innerHTML = tiles[i].data.text;
            trapInstructions.innerHTML = tiles[i].data.instruction;

            if(tiles[i].data.move == "BACKSWARDS") {
                var backwards = tiles[i].data.steps;
                // Move playerTurn(1 or 2 whoever rolled) backwards amount of steps

            } else if(tiles[i].data.move == "FORWARDS") {
                var forwards = tiles[i].data.steps;
                // Move playerTurn(1 or 2 whoever rolled) forwards amount of steps

            } else if(tiles[i].data.move == "GAMBLE") {
                // Current player needs to roll again
                var roll = "";
                if((roll == 2) || (roll == 4) || (roll == 6)) {
                    // move players bead forwards steps equal to roll
                } else [
                    // move players bead backwards steps equal to roll
                ]

            } else if(tiles[i].data.move == "SKIP") {
                var roll = tiles[i].data.roll;
                // Current players next turn will be skipped????? How?
                var skipNext = [
                    {player: playerTurn, }
                ]; // store this in gloabal varialbe and check for true if playerTurn == this playerTurn and remove it after said player has skipped turn? Check if its true everytime and if it is skip then remove?

            } else if(tiles[i].data.move == "ROLLHIGH") {
                var roll = tiles[i].data.roll;
                //

            }
        } else {
            // Switch Player
            trapContainer.style.display = "none";
        }
    }
});