42_ft_transcendence/frontend/static/js/api/game/tictactoe/TicTacToeGame.js

class TicTacToe
{
    constructor(height, width, gap, rectsize, canvas, blitz = false)
    {
        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");
		this.blitz = blitz;
		this.sign = "cross";
		this.outline = false;
    }

	init()
	{
		this.canvas.addEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
	}

	uninit()
	{
		this.canvas.removeEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
	}

	onClick(event, morpion)
	{
		let x = event.offsetX;
		let y = event.offsetY;
		let targetMorpion, targetCase;

		function checkCase(targetMorpion, targetCase)
		{
			console.log("TargetMorpion :" + targetMorpion + " targetCase :" + targetCase);
			return (morpion.game[targetMorpion][targetCase] == -1);
		}

		function incorrectCase()
		{
			console.log("bozo");
		}

		function sendCase(targetMorpion, targetCase)
		{
			// send to backend (stp camille code bien)
			morpion.game[targetMorpion][targetCase] = (morpion.sign == "cross") ? 0 : 1;
		}

		function printSign(targetMorpion, targetCase)
		{
			let targetX = (morpion.gap + targetMorpion % 3 * morpion.rectsize * 3) + (targetCase % 3 * morpion.rectsize);
			let targetY = (morpion.gap + Math.floor(targetMorpion / 3) * morpion.rectsize * 3) + (Math.floor(targetCase / 3) * morpion.rectsize);
			if (morpion.sign == "cross")
			{
				morpion.context.beginPath();
				morpion.context.strokeStyle = "green";
				morpion.context.moveTo(targetX + 15, targetY + 15);
				morpion.context.lineTo(targetX + 45, targetY + 45);
				morpion.context.moveTo(targetX + 45, targetY + 15);
				morpion.context.lineTo(targetX + 15, targetY + 45);
				morpion.context.stroke();
				morpion.context.closePath();
			}
			else
			{
				morpion.context.beginPath();
				morpion.context.strokeStyle = "red";
				targetX += morpion.rectsize / 2;
				targetY += morpion.rectsize / 2;
				morpion.context.arc(targetX, targetY, 20, 0, 2 * Math.PI);
				morpion.context.stroke();
				morpion.context.closePath();
			}
		}

		function findPlace(x, morpion)
		{	
			if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9)
				return -1;
			if (x <= morpion.gap + morpion.rectsize * 3)
				return 0;
			if (x >= morpion.gap + morpion.rectsize * 3 && x <= morpion.gap + morpion.rectsize * 6)
				return 1;
			if (x >= morpion.gap + morpion.rectsize * 6)
				return 2;
			return -1;
		}

		function findSquare(x, gap, morpion)
		{
			if (x <= gap + morpion.rectsize)
				return 0;
			if (x >= gap + morpion.rectsize && x <= gap + morpion.rectsize * 2)
				return 1;
			if (x >= gap + morpion.rectsize * 2)
				return 2;
			return -1;
		}

		function setOutline()
		{
			if (morpion.outline)
			{
				morpion.context.beginPath();
				morpion.context.strokeStyle = (morpion.sign == "cross") ? "green" : "red";
				morpion.context.roundRect(0, 0, morpion.canvas.width, morpion.canvas.height, 25);
				morpion.context.stroke();
				morpion.context.closePath();
			}
			else
			{
				morpion.context.beginPath();
				morpion.context.strokeStyle = "#1a1a1d";
				morpion.context.roundRect(0, 0, morpion.canvas.width, morpion.canvas.height, 25);
				morpion.context.stroke();
				morpion.context.closePath();
			}
			morpion.outline = !morpion.outline;
		}

		targetMorpion = findPlace(x, this) + findPlace(y, this) * 3;
		if (findPlace(x, this) < 0 || findPlace(y, this) < 0)
			return -1;
		targetCase = findSquare(x, this.rectsize * 3 * findPlace(x, this) + this.gap, this) + findSquare(y, this.rectsize * 3 * findPlace(y, this) + this.gap, this) * 3;

		if (checkCase(targetMorpion, targetCase))
		{
			sendCase(targetMorpion, targetCase);
			printSign(targetMorpion, targetCase);
			setOutline();
		}
		else
			incorrectCase();
	}

    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();
    }

	selectCase(x, y)
	{
		case_morpion = Math.floor(x / this.rectsize) + Math.floor((y / this.rectsize)) * 3
		case_square = Math.floor(x / Math.floor(this.rectsize / 3)) % this.rectsize + Math.floor(y / this.rectsize) % this.rectsize
		// ask server if case_morpion == playing_case && case_square == empty

	}

	setOutline()
	{
		if (this.outline)
		{
			this.context.beginPath();
			this.context.strokeStyle = (this.sign == "cross") ? "green" : "red";
			this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
			this.context.stroke();
			this.context.closePath();
		}
		else
		{
			this.context.beginPath();
			this.context.strokeStyle = "#1a1a1d";
			this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
			this.context.stroke();
			this.context.closePath();
		}
		this.outline = !this.outline;
	}
}

export { TicTacToe };