const canvasHeight = 384;
const canvasWidth = 500;
const numCupcakes = 6;
const numTrolls = 2;

let images = [];
let cupcakes = [];
let score;
let message;
let playing;

const Images = {
    none : -1,
    background : 0,
    cupcake : 1,
    explode1 : 2,
    explode2 : 3,
    explode3 : 4
};

class Cupcake {
    constructor() {
        this.clicked = false;
        this.x = 0;
        this.y = 0;
        this.costume = Images.cupcake;
        this.alternateCostume = Images.cupcake;
        
        this.width = images[this.costume].width;
        this.height = images[this.costume].height;
    }
    
    draw() {
        if (this.costume != Images.none)
            image(images[this.costume], this.x, this.y);
    }
    
    reveal() {
        if (this.costume != Images.none)
            this.costume = this.alternateCostume;
    }
    
    hasTrollInside() {
        return (this.alternateCostume != Images.cupcake);
    }
}

function newGame() {
    score = 0;
    playing = true;

    // resize images
    for (let i = 1; i < images.length; i++)
        images[i].resize(66, 0);

    // resize background image so it fits canvas
    images[Images.background].resize(canvasWidth, canvasHeight);
    
    for (let i = 0; i < numCupcakes; i++)
        cupcakes[i] = new Cupcake();

    // assign a cupcake with a troll to the first n cupcakes
    for (let i = 0; i < numTrolls; i++)
        cupcakes[i].alternateCostume = Images.explode1 + i;
    
    // now shuffle our array so the cupcakes with trolls are in random positions
    shuffle(cupcakes, true);

    // setup initial coordinates for cupcakes
    let x = 30;
    let y = canvasHeight / 2 + 25;

    for (cupcake of cupcakes)
    {
        const margin = 8;
        cupcake.x = x;
        cupcake.y = y;
        x += (cupcake.width + margin);
    }

    message = 'Start by picking a cupcake. Beware, Codey and his troll friends have concocted a prank. ' + numTrolls + ' of these cupcakes are not what they seem. See how high a score you can get!';
}

function endGame(msg) {    
    message = msg;
    playing = false;
    
    // reveal all hidden trolls in cupcakes
    for (const cupcake of cupcakes)
        cupcake.reveal();
}

function onCupcakeClicked(cupcake) {
    if (!playing || cupcake.clicked)
        return;
    
    if (cupcake.hasTrollInside()) {
        // go ahead and change the messages here for different scores
        if (score == 0)
            return endGame('Game over. Uh oh, that is not a cupcake. Better luck next time. Press Enter to play again.');
        else
            return endGame('Game over. Uh oh, that is not a cupcake, but you did alright. Press Enter to play again.');
    }

    cupcake.clicked = true;
    
    cupcake.costume = Images.none;
    score++;

    let remainingCupcakes = numCupcakes - score;

    // If the number of remaining cupcakes is at least equal to the number of cupcakes with trolls, then the game is won. We know for a fact the remaining cupcakes have Codey or one of his friends inside.
    if (remainingCupcakes <= numTrolls)
        return endGame("Congratulations, you have foiled Codey's prank and have claimed all the cupcakes for yourself. Press Enter to play again.");
    else
        message = "Mmmmm, delicious! Now pick another one.";
}

function preload() {
    images[Images.background] = loadImage('images/background.png');
    images[Images.cupcake] = loadImage('images/cupcake.png');
    images[Images.explode1] = loadImage('images/explode-1.png');
    images[Images.explode2] = loadImage('images/explode-2.png');
    images[Images.explode3] = loadImage('images/explode-3.png');
}

function setup() {    
    // setup canvas
    createCanvas(canvasWidth, canvasHeight);

    newGame();
}

function draw() {    
    // draw background
    background(images[Images.background]);
    
    // place all cupcakes on table
    for (const cupcake of cupcakes)
        cupcake.draw();
        
    // print message at top center of screen in a white speech bubble
    if (message) {
        textAlign(CENTER, TOP);
        fill(250, 252, 245);
        rect(20, 15, canvasWidth - 20, 100, 20);
        textSize(18);
        fill(8, 8, 2);
        text(message, 20, 25, canvasWidth - 15, canvasHeight - 15);
    }

    // print score on lower left of screen in smaller dark text
    push();
    textSize(20);
    fill(12, 12, 12);
    textAlign(LEFT, BOTTOM);
    text('Score: ' + score, 8, -8, canvasWidth, canvasHeight);
    pop();
}

function mouseClicked() {    
    for (cupcake of cupcakes)
        if (mouseX > cupcake.x && mouseX < (cupcake.x + cupcake.width) &&
            mouseY > cupcake.y && mouseY < (cupcake.y + cupcake.height))
            return onCupcakeClicked(cupcake);
}

function keyPressed() {
    if (key == '3')
        console.log('clicked...')
    
    if (keyCode == ENTER && !playing)
        newGame();
}