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

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

	async postInit()
	{
		let morpion = [[],[],[],[],[],[],[],[],[]];
		let currMorpion = 4;
		let gap = 30;
		for (let i = 0; i < 9; i++)
			for (let j = 0; j < 9; j++)
				morpion[i].push(-1);
		const canvas = document.getElementById("Morpion");
		this.ctx = canvas.getContext("2d");
		this.ctx.fillStyle = "white";
		this.ctx.fillRect(0, 0, canvas.width, canvas.height);
		for (let i = 1, x = gap, y  = gap; i <= 9; i++)
		{
			this.DrawMorpion(x, y);
			x += 180 + gap;
			if (i % 3 == 0)
			{
				y += 180 + gap;
				x = gap;
			}
		}
	}

	DrawMorpion(start_x, start_y)
	{
		for (let i = 1, x = 0, y = 0; i <= 9; i++)
		{
			this.ctx.strokeRect(start_x + x, start_y + y, 60, 60);
			x += 60;
			if (i % 3 == 0)
			{
				y += 60;
				x = 0;
			}
		}
	}
    async getHtml() 
	{
        return `
            <h1>${lang.get('ticTacToe')}</h1>
			<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
        `;
    }
}