const cs = 1024;
const assets = [
    'assets/player.svg',
    'assets/head.svg',
];

class Game extends GameBasic {
    constructor() {
        super();

        let assetsIn = {};

        for (let asset in assets) {
            assetsIn[asset] = new Image();
            assetsIn[asset].src = assets[asset];
        }

        let canvas = document.querySelector("#canvas");

        canvas.width = canvas.height = cs;

        this.canvas = canvas;
        this.ctx = canvas.getContext("2d");
        this.assetsIn = assetsIn;
    }
    render() {
        let { ctx, assetsIn, entities, player } = this;

        ctx.clearRect(0, 0, cs, cs);

        ctx.save();

        ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2);

        for (let ent of entities) {
            if (ent.health <= 0) continue;

            ctx.save();

            ctx.translate(ent.pos.x, ent.pos.y);
            ctx.rotate(ent.rot);
            ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);

            ctx.restore();

            ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
            
            ctx.fillStyle = ent.you.split('-')[0];
            ctx.strokeStyle = "rgb(255,255,255)";
            ctx.lineWidth = "8";
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
            ctx.font = "bold 16px sans-serif";

            let args = [`HP: ${ent.health} KO: ${ent.headCount}`, ent.pos.x, ent.pos.y - 64 / 2];

            ctx.strokeText(...args);
            ctx.fillText(...args);
        }

        ctx.restore();

        if (player.health <= 0) {
            ctx.fillStyle = 'rgba(0,0,0,0.5)';
            ctx.fillRect(0, 0, cs, cs);
            ctx.fillStyle = 'rgb(255,255,255)';
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.font = "bold 48px sans-serif";
            ctx.fillText('You died! Click to respawn', cs / 2, cs / 2);
        }
    }
    click() {
        let { player } = this;

        if (player.health <= 0) {
            this.player = new Player(false, true);
            this.entities.push(this.player);
        } else {
            player.bump();
        }
    }
    init() {
        super.init();

        let that = this;

        setInterval(function () { that.render() }, 1000 / 60);

        game.canvas.onclick = () => that.click();
    }
}

var game = new Game();

game.init();