ft_transcendence/frontend/static/js/views/Game.js

import AbstractView from './AbstractView.js'

export default class extends AbstractView {
	constructor(params) {
		super(params, 'Game');
		this.game = null;
	}

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

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

	startGame() {
		if (this.game == null) {
			document.getElementById('startGameButton').innerHTML = 'Reset Game';
			this.game = new Game;
		}
		else {
			document.getElementById('app').removeChild(this.game.canvas);
			this.game.cleanup();
			this.game = new Game;
		}
	}

	stopGame() {
		if (!this.game)
			return;
		document.getElementById('app').removeChild(this.game.canvas);
		this.game.cleanup();
		this.game = null;
		document.getElementById('startGameButton').innerHTML = 'Start Game';
	}
}

class Game {
	constructor() {
		this.canvas = document.createElement('canvas');
		this.canvas.id = 'gameCanvas';
		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);
		this.ball = new Ball(this.context);
		document.getElementById('app').appendChild(this.canvas);

		this.interval = setInterval(this.updateGame.bind(this), 10);

		this.keys = [];
		this.keyUpHandler = this.keyUpHandler.bind(this);
		this.keyDownHandler = this.keyDownHandler.bind(this);
		document.addEventListener('keydown', this.keyDownHandler);
		document.addEventListener('keyup', this.keyUpHandler);
	}

	cleanup() {
		clearInterval(this.interval);
		document.removeEventListener('keydown', this.keyDownHandler);
		document.removeEventListener('keyup', this.keyUpHandler);
	}

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

	updateGame() {

		if (this.keys.includes('Escape'))
			this.cleanup();

		if (this.keys.includes('s') &&
			this.paddle.y + this.paddle.height < this.canvas.height - this.paddle.x)
				this.paddle.y += this.paddle.speed;
		if (this.keys.includes('w') &&
			this.paddle.y > 0 + this.paddle.x)
				this.paddle.y -= this.paddle.speed;

		if (this.ball.x - this.ball.radius <= this.paddle.x + this.paddle.width
			&& (this.ball.y >= this.paddle.y && this.ball.y <= this.paddle.y + this.paddle.height))
			this.ball.vx *= -1;
		if (this.ball.x - this.ball.radius <= 0)
			this.ball.vx *= -1;
		else if (this.ball.x + this.ball.radius >= this.canvas.width)
			this.ball.vx *= -1;
		if (this.ball.y - this.ball.radius <= 0)
			this.ball.vy *= -1;
		else if (this.ball.y + this.ball.radius >= this.canvas.height)
			this.ball.vy *= -1;
		this.ball.x += this.ball.vx;
		this.ball.y += this.ball.vy;

		this.clear();
		this.paddle.update();
		this.ball.update();
	}

	keyUpHandler(ev) {
		const idx = this.keys.indexOf(ev.key);
		if (idx != -1)
			this.keys.splice(idx, 1);
	}

	keyDownHandler(ev) {
		if (!this.keys.includes(ev.key))
			this.keys.push(ev.key);
	}
}

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

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

class Ball {
	constructor(context) {
		this.radius = 5;
		this.x = 240;
		this.y = 135;
		this.vx = 2;
		this.vy = 2;
		this.ctx = context;
		this.update();
	}

	update() {
		this.ctx.fillStyle = 'black';
		this.ctx.beginPath();
		this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		this.ctx.fill();
	}
}