import { lang } from "../index.js";
import AbstractView from "./abstracts/AbstractView.js";

export default class extends AbstractView 
{
    constructor(params) 
	{
        super(params, lang.get('ticTacToeOnline'));
		this.width = 660;
		this.height = 660;
		this.rectsize = 60;
		this.gap = 60;
    }

	DrawMorpion(start_x, start_y)
	{
		this.ctx.beginPath();
		this.ctx.strokeStyle = `rgb(200 200 200)`;
		for (let i = 1, x = 0, y = 0; i <= 9; i++)
		{
			this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
			x += this.rectsize;
			if (i % 3 == 0)
			{
				y += this.rectsize;
				x = 0;
			}
		}
		this.ctx.closePath();
	}

	async postInit()
	{
		this.canvas = document.getElementById("Morpion");
		this.ctx = this.canvas.getContext("2d");
		this.ctx.fillStyle = "black";
		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
		for (let i = 1, x = this.gap, y  = this.gap; i <= 9; i++)
		{
			this.DrawMorpion(x, y);
			x += this.rectsize * 3;
			if (i % 3 == 0)
			{
				y += this.rectsize * 3;
				x = this.gap;
			}
		}
		this.ctx.lineWidth = 6;
		for (let i = 0; i < 4; i++)
		{
			this.ctx.beginPath();
			this.ctx.strokeStyle = `rgb(230 230 230)`;
			this.ctx.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3);
			this.ctx.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
			this.ctx.stroke();
			this.ctx.closePath();
		};
		for (let i = 0; i < 4; i++)
		{
			this.ctx.beginPath();
			this.ctx.strokeStyle = `rgb(230 230 230)`;
			this.ctx.moveTo(this.gap, this.gap + i * this.rectsize * 3);
			this.ctx.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
			this.ctx.stroke();
			this.ctx.closePath();
		}
	}

	async leavePage()
	{

	}

    setTitle() 
	{
        document.title = lang.get(this.titleKey, this.titleKey);
    }

    async getHtml() 
	{
        return `
			<h1>${lang.get('ticTacToeOnline')}</h1>
			<div style="display: flex">
				<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
				<div>
					<h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2>
					<h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5>
					<h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5>
					<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5>
				</div>
			</div>
		`;
    }
}