core: split: game and pong

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

@@ -0,0 +1,158 @@
+
+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;
+    }
+
+	init()
+	{
+		this.canvas.addEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
+	}
+
+	uninit()
+	{
+		this.canvas.addEventListener("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)
+		}
+
+		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;
+		}
+
+		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);
+		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(color)
+	{
+		this.context.beginPath();
+		this.context.strokeStyle = color;
+		this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
+        this.context.stroke();
+		this.context.closePath();
+	}
+}
+
+export { TicTacToe };