import AbstractView from './AbstractView.js'

export default class extends AbstractView {
	constructor(params) {
		super(params, 'Game');
	}

	async getHtml() {
		return `
			<h1>Game</h1>
			<button id='startGameButton'>Start Game</button>
		`;
	}

	async postInit() {
		document.getElementById('startGameButton').onclick = this.startGame;
	}

	startGame() {
		this.game = new Game;
	}
}

class Game {
	constructor() {
		this.canvas = document.createElement('canvas');
		this.canvas.width = 480;
		this.canvas.height = 270;
		this.canvas.style.border = '1px solid #d3d3d3';
		this.canvas.style.backgroundColor = '#f1f1f1';
		this.context = this.canvas.getContext('2d');
		this.paddle = new Paddle(this.context);
		document.getElementById('app').appendChild(this.canvas);

		this.interval = setInterval(this.updateGame, 20);
	}

	clear() {
		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
	}

	updateGame() {
		this.clear();
		this.paddle.y += 1;
		this.paddle.update();
	}
}

class Paddle {
	constructor(context) {
		this.width = 10;
		this.height = 70;
		this.x = 5;
		this.y = 100;
		this.ctx = context;
		this.update();
	}

	update() {
		this.ctx.fillStyle = 'black';
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	}
}