class TicTacToe
{
    constructor(height, width, gap, rectsize, canvas)
    {
        this.height = height;
        this.width = width;
        this.gap = gap;
        this.rectsize = rectsize;
        this.game = [[],[],[],[],[],[],[],[],[]];
        for (let i = 0; i < 9; i++)
			for (let j = 0; j < 9; j++)
				this.game[i].push(-1);

        this.canvas = canvas
        this.context = this.canvas.getContext("2d");
    }

    DrawSuperMorpion()
    {
        this.context.fillStyle = "#1a1a1d";
		this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 20);
        this.context.fill();
		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.context.lineWidth = 6;
		for (let i = 0; i < 4; i++)
		{
			this.context.beginPath();
			this.context.strokeStyle = `rgb(230 230 230)`;
			this.context.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3);
			this.context.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
			this.context.stroke();
			this.context.closePath();
		};
		for (let i = 0; i < 4; i++)
		{
			this.context.beginPath();
			this.context.strokeStyle = `rgb(230 230 230)`;
			this.context.moveTo(this.gap, this.gap + i * this.rectsize * 3);
			this.context.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
			this.context.stroke();
			this.context.closePath();
		}
    }

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


}

export { TicTacToe };