(() => {

let canvas = document.getElementById("game");
let game = canvas.getContext("2d");
let lastTimestamp = 0;

const FRAME_RATE = 60;
const FRAME_DURATION = 1000 / FRAME_RATE;


let fallers = [];
let score = 0;


let colourValues = ["red", "blue"]
colourValues = {
  red: "#ff0000",
  blue: "#0000ff"
};

let colour = colourValues[Math.floor(Math.random()*colourValues.length)];

//ignore
//let scoreCount = document.getElementById("scoreCount”);

let showScore = function(){
    scoreCount.innerHTML = "Your score is " + score;
};


let addScore = function(pointValue){
    score += pointValue;
    showScore();
};

let fallerIn = function(inside){
    inside.captured = true;
    addScore(inside.pointValue);
};

const DEFAULT_DESCENT = 0.0001; // This is per millisecond.
let Faller = function (x, y, width, height, dx = 0, dy = 0, ax = 0, ay = DEFAULT_DESCENT) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    this.captured = false;
    this.pointValue = 5;
    this.colour;

    // Velocity.
    this.dx = dx;
    this.dy = dy;

    // Acceleration.
    this.ax = ax;
    this.ay = ay;
};

Faller.prototype.draw = function () {
    game.fillStyle = colour;
    game.fillRect(this.x, this.y, this.width, this.height);
};

Faller.prototype.move = function (millisecondsElapsed) {
    this.x += this.dx * millisecondsElapsed;
    this.y += this.dy * millisecondsElapsed;

    this.dx += this.ax * millisecondsElapsed;
    this.dy += this.ay * millisecondsElapsed;
};


const DEFAULT_PLAYER_WIDTH = 65;
const DEFAULT_PLAYER_HEIGHT = 45;
const DEFAULT_PLAYER_Y = canvas.height - DEFAULT_PLAYER_HEIGHT;
let Player = function (x, y = DEFAULT_PLAYER_Y, width = DEFAULT_PLAYER_WIDTH, height = DEFAULT_PLAYER_HEIGHT) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
};

Player.prototype.draw = function () {
    let grd = game.createLinearGradient(0, 200, 200, 0);
    grd.addColorStop(0, "black");
    grd.addColorStop(0.5, "red");
    grd.addColorStop(1, "white");
    game.fillStyle = grd;
    game.fillRect(this.x, this.y, this.width, this.height);
    game.fill();
};

let player = new Player(canvas.width / 2);

let draw = (millisecondsElapsed) => {
    game.clearRect(0, 0, canvas.width, canvas.height);

    fallers.forEach((faller) => {
        faller.draw();
        faller.move(millisecondsElapsed);
        if (!(faller.captured)&&
          faller.y + faller.height > canvas.height &&
            faller.x + faller.width < player.x + player.width &&
            faller.x > player.x){
            fallerIn(faller);
            }
    });

    player.draw();

    fallers = fallers.filter((faller) => {
        return faller.y < canvas.height;
    });

};

const MIN_WIDTH = 10;
const WIDTH_RANGE = 20;
const MIN_HEIGHT = 10;
const HEIGHT_RANGE = 20;
const MILLISECONDS_BETWEEN_FALLERS = 750;

let fallerGenerator;
let startFallerGenerator = () => {
    fallerGenerator = setInterval(() => {

        let fallerWidth = Math.floor(Math.random() * WIDTH_RANGE) + MIN_WIDTH;
        fallers.push(new Faller(
            Math.floor(Math.random() * (canvas.width - fallerWidth)), 0,
            fallerWidth, Math.floor(Math.random() * HEIGHT_RANGE) + MIN_HEIGHT
        ));
    }, MILLISECONDS_BETWEEN_FALLERS);
};

let stopFallerGenerator = () => clearInterval(fallerGenerator);

let setPlayerPositionBasedOnMouse = (event) => {
    player.x = event.clientX / document.body.clientWidth * canvas.width;
};

document.body.addEventListener("mouseenter", setPlayerPositionBasedOnMouse);
document.body.addEventListener("mousemove", setPlayerPositionBasedOnMouse);

let running = false;
let nextFrame = (timestamp) => {
    if (!lastTimestamp) {
        lastTimestamp = timestamp;
    }

    if (timestamp - lastTimestamp < FRAME_DURATION) {
        if (running) {
            window.requestAnimationFrame(nextFrame);
        }

        return;
    }

    draw(timestamp - lastTimestamp);

    lastTimestamp = timestamp;
    if (running) {
        window.requestAnimationFrame(nextFrame);
    }
};

document.getElementById("start-button").addEventListener("click", () => {
    running = true;
    lastTimestamp = 0;
    startFallerGenerator();
    window.requestAnimationFrame(nextFrame);
});

document.getElementById("stop-button").addEventListener("click", () => {
    stopFallerGenerator();
    running = false;
});
})();