var player, turns, waiting = false;
var otherLasts = [];

/**
* * Game State Comments
* TODO: Left Off Here
* ? Replace This At a Later Time
* ! Section
*/

//! ==================================================================================================================

// BUTTONS

// Lock In Ships

socket.on('start-turn', data => {
    player.isGo = true;
    waiting = false;
    console.log("Start Turn Packet : " + data);
});

socket.on('shot-result', data => {
    let otherPlayerShot = [];

    otherPlayerShot.push(data.x); otherPlayerShot.push(data.y);
    otherLasts.push(otherPlayerShot);
    console.log("Shot Result Packet : " + data);
});

socket.on('game-over', data => {
    console.log("Game Over Packer : " + data);
    if(data.winner == false) {
        console.log('You lost, loser. lol. gottem. and btw the game was ' +data.turns+ ' long.');
    }
    else {
        console.log('gj, you won. i guess... btw the game was ' +data.turns+ ' long.');
    }
});

lockInBtn = new Clickable();
lockInBtn.text = 'Lock In!'; lockInBtn.locate(575, 225);

lockInBtn.onPress = function() {
    player.lockedIn = true;
    turns = 0;

    //? Send server the board packet
    socket.emit('ships-placed', {board: board.board, id:gameId})
    console.log("Sending Ships Placed Packet")
    wating = true;
}
lockInBtn.onHover = function() {this.color = '#b30000';}; lockInBtn.onOutside = function() {this.color = '#070707';}

// Fire Shot

shotBtn = new Clickable();
shotBtn.text = 'FIRE!'; shotBtn.locate(575, 225); shotBtn.textSize = 40;

shotBtn.onPress = function(){
    turns += 1;

    player.shot = [hitSquare.x-17, hitSquare.y];
    player.playerLasts.push(player.shot);

    console.log('Turn ' +turns+ ', you shot here --> ' + (player.shot[0]+1) + ',' + (player.shot[1]+1));

    //? Send server the shot packet
    socket.emit('fire-shot', {x:player.shot[0], y:player.shot[1], id:gameId})
    console.log("Sending fire shot packet!")
    waiting = true;

    player.isGo = false;
}
shotBtn.onHover = function() {this.color = '#b30000';}; shotBtn.onOutside = function() {this.color = '#070707';}


//! ==================================================================================================================

function setup() {
    // Create the canvas and display grid
    createCanvas(1350, 500);
    board = new Gameboard(10, 500);
    board.create();

    // Initialise player object
    player = new Player();

    // Create a square for use when firing shots
    hitSquare = new hitSquare(20, 5);
}

//! ==================================================================================================================

function draw() {
    //* DRAW BOARD
    // Draw background (eventually an image) and display grid visuals
    background('#080808');
    board.display();



    //* GAME STATE 0 - Waiting for Other Player
    // Show text 'Waiting...' with animation



    //* GAME STATE 1 - Placing Ships

    // Display the ships
    for(let i=0; i<player.shipArray.length; i++) {
        player.shipArray[i].display();

        // If they being clicked on, drag them!
        if (player.shipArray[i].drag == true) {
            player.shipArray[i].dragging();
        }
    }

    // If all the ships are in valid places display the button that allows the user to lock in there ships
    if(player.allPlaced == true && player.lockedIn == false) {
        lockInBtn.draw();
    }

    // If the player has locked in their ships, display a waiting function until I'm told the game starts
    //? When I recieve 'YOUR GO' packet, player.isGo = true;




    //* GAME STATE 2 - Firing Shot

    // If the shot square is up, display it, will be replaced with
    if(player.isGo == true) {
        hitSquare.display();
        if(hitSquare.moving == true) {
            hitSquare.move();
        }
        else {
            shotBtn.draw();
        }
    }


    //* GAME STATE 3 - Recieving Shot
    // Get the shot from the other player and print it onto my canvas
    //? When I recieve 'SHOT' packet...


    if(otherLasts.length > 0) {
        displayX(otherLasts, 0);
    }

    if(player.playerLasts.length > 0) {
        displayX(player.playerLasts, 17*board.tileSize);
    }

    //* GAME STATE 4 - Ending Game
    // End the game when I get the finishing packet

}

//! ==================================================================================================================

// Display previous turn results
function displayX(array, offset) {
    for(let i=0; i<array.length; i++ ){
        stroke('#ffffff'); strokeWeight(3);
        line(array[i][0]*board.tileSize +offset, array[i][1]*board.tileSize, (array[i][0]+1)*board.tileSize +offset, (array[i][1]+1)*board.tileSize);
        line(array[i][0]*board.tileSize +offset, (array[i][1]+1)*board.tileSize, (array[i][0]+1)*board.tileSize +offset, array[i][1]*board.tileSize );
    }
}

//! ==================================================================================================================

function mousePressed() {
    if(player.lockedIn == false) {
        for(let i=0; i<player.shipArray.length; i++) {
            player.shipArray[i].click();
        }
    }

    if(player.lockedIn == true && player.isGo == true) {
        if(hitSquare.moving == false) {
            if(mouseX < width && mouseX > width-500 && mouseY < height && mouseY > 0) {
                hitSquare.moving = true;
            }
        }
        else {
            hitSquare.moving = false;
        }
    }
}

function mouseReleased() {
    player.allPlaced = true;

    for(let i=0; i<player.shipArray.length; i++) {
        if(player.shipArray[i].drag == true) {
            player.shipArray[i].snap();
        }

        if(player.shipArray[i].placed == false) {
            player.allPlaced = false;
        }
    }

    board.updateGameArray();

}

function keyReleased() {
    for(let i=0; i<player.shipArray.length; i++) {
        if (player.shipArray[i].drag == true) {
            if(keyCode === 32) {
                player.shipArray[i].rotateShip();
            }
        }
    }
}