window.addEventListener('load', function() {

    const canvas = this.document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');
    canvas.width = 1500;
    canvas.height = 500;

    class InputHandler {
        constructor(game) {
            this.game = game;
            window.addEventListener('keydown', e => {
                if (((e.key === 'ArrowUp') || (e.key === 'ArrowDown') )
                    && (this.game.keys.indexOf(e.key) === -1)) {
                    this.game.keys.push(e.key);
                } else if ( e.key === ' ' ) {
                    this.game.player.shootTop();
                }
            });
            window.addEventListener('keyup', e => {
                if (this.game.keys.indexOf(e.key) > -1) {
                    this.game.keys.splice(this.game.keys.indexOf(e.key), 1);
                }
            });
        }
    }
    class Projectile {
        constructor(game, x, y) {
            this.game = game;
            this.x = x;
            this.y = y;
            this.width = 10;
            this.height = 3;
            this.speed = 3;
            this.markedForDeletion = false;
        }
        update() {
            this.x += this.speed;
            if (this.x > this.game.wdith * 0.8) { this.markedForDeletion = true; }
        }
        draw(context) {
            context.fillStyle = 'yellow';
            context.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    class Particle {

    }
    class Player {
        constructor(game) {
            this.game = game;
            this.width = 120;   // width of single sprite in Sprite sheet used in course
            this.height = 190;  // height of single sprite in sprite sheet
            this.x = 20;
            this.y = 100;
            this.speedY = 0;
            this.maxSpeed = 2;
            this.projectiles = [];
        }
        update() {
            if (this.game.keys.includes('ArrowUp')) { this.speedY = -this.maxSpeed}
            else if (this.game.keys.includes('ArrowDown')) { this.speedY = this.maxSpeed}
            else { this.speedY = 0; }
            this.y += this.speedY;
            // handle projectiles
            this.projectiles.forEach(projectile => {
                projectile.update();
            });
            this.projectiles = this.projectiles.filter(projectile => !projectile.markedForDeletion);
        }
        draw(context) {
            context.fillStyle = 'black';
            context.fillRect(this.x, this.y, this.width, this.height);
            this.projectiles.forEach(projectile => {
                projectile.draw(context);
            });
        }
        shootTop() {
            if ( this.game.ammo > 0 ) {
                this.projectiles.push(new Projectile(this.game, this.x + 80, this.y + 30));
                this.game.ammo--;
            }

        }
    }
    class Enemy {

    }
    class Layer {

    }
    class Background {d

    }
    class UI {

    }
    class Game {
        constructor(width, height) {
            this.wdith = width;
            this.height = height;
            this.player = new Player(this);
            this.input = new InputHandler(this);
            this.keys = [];
            this.ammo = 20;
        }
        update() {
            this.player.update();
        }
        draw(context) {
            this.player.draw(context);
        }
    }

    const game = new Game(canvas.width, canvas.height);
    // animation loop
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        game.update();
        game.draw(ctx);
        requestAnimationFrame(animate);
    }
    animate();
});

/*
Ref: Make Your Own Animated 2D Games
Author: Frank Dvorak 
Udemy Course

---
Classes need to be defined in particular order.  Classes are hoisted but 
if hoisted classes are NOT initialized.  Therefore any class that is used by
another class must be defined prior to being used. 
(Module 3: Object Orientd Programming with JavaScript, ~2m20s)
*/