"use strict";

document.addEventListener('DOMContentLoaded', init);


function init() {
    let ctx, canvas = document.createElement("canvas");
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    ctx = canvas.getContext('2d');
    document.body.insertBefore(canvas, document.body.childNodes[0]);

    function run() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        refresh();
        requestAnimationFrame(run);
    }

    // -------------------------------------------------------------------
    let gstate = 1;
    let key = new Key(controls);
    let intro = new Intro(ctx);
    let score = new Score(ctx);
    let bar = new Bar(ctx, key);

    function controls(e) {
        switch (gstate) {
            case 0: // Waiting to start
                if (e.code=='Space') newGame();
                break;
            case 1: // Playing...
                break;
            case 2: // Game Over
                if (e.code=='Space') newGame();
                break;
        }
    }

    function newGame() {
        gstate = 1;
        score.reset();
        bar.reset();
    }

    function refresh() {
        switch (gstate) {
            case 0: // Waiting to start
                intro.update();
                break;
            case 1: // Playing...
                bar.update();
                score.update();
                break;
            case 2: // Game Over
                break;
        }
    }

    run();
}




class ball {
    constructor(x, y, speed, angle) {
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.angle = angle;
        this.color = 'black';
        this.size = 20;
    }

    update() {
        this.move();
        this.draw();
    }

    draw() {
        this.ctx.fillStyle = this.color;
        this.ctx.fillRect(this.x, this.y, this.size, this.size);
    }

    move() {
        this.x += this.speed * Math.cos(this.angle);
        this.y += this.speed * Math.sin(this.angle);

        if (this.x < 0 || this.x > this.ctx.canvas.width || this.y < 0 || this.y > this.ctx.canvas.height)
            this.bounce();
    }

    bounce() {
        this.angle += 180;
    }
}