added Morpion in dictionary

frontend/static/js/lang/en.json

@@ -38,5 +38,5 @@
 	"profileBlock": "Block",
 	"gameGoalTaken": "Goal Taken",
 	"gamePlayersListName": "Players",
-	"ticTacToe": "Morpion"
+	"ticTacToe": "TicTacToe"
 }

frontend/static/js/lang/fr.json

@@ -37,5 +37,6 @@
 	"profileUnblock": "Débloquer",
 	"profileBlock": "Bloquer",
 	"gameGoalTaken": "But pris",
-	"gamePlayersListName": "Joueurs"
+	"gamePlayersListName": "Joueurs",
+	"ticTacToe" : "Morpion"
 }

frontend/static/js/views/TicTacToeView.js

@@ -1,6 +1,7 @@
 import { lang } from "../index.js";
 import AbstractView from "./abstracts/AbstractView.js";
 
+
 export default class extends AbstractView 
 {
     constructor(params)
@@ -8,45 +9,157 @@ export default class extends AbstractView
         super(params, lang.get('ticTacToe'));
 		this.width = 660;
 		this.height = 660;
+		this.morpion = [[],[],[],[],[],[],[],[],[]];
+		this.rectsize = 60;
+		this.gap = 60;
+		this.playerTurn = 0;
+		this.playerOneCurrentTab = 4;
+		this.playerTwoCurrentTab = 4;
     }
 
+	async leavePage()
+	{
+		this.canvas.removeEventListener("mousedown", this.onClick, false);
+	}
+
+	onClick(event)
+	{
+		console.log(this);
+		let targetTabX, targetTabY, targetTab;
+		let squareTab;
+		let x = event.offsetX;
+		let y = event.offsetY;
+
+		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 drawNewCase(targetTab, squareTab, morpion)
+		{
+			let targetX = (morpion.gap + targetTab % 3 * morpion.rectsize * 3) + (squareTab % 3 * morpion.rectsize);
+			let targetY = (morpion.gap + Math.floor(targetTab / 3) * morpion.rectsize * 3) + (Math.floor(squareTab / 3) * morpion.rectsize);
+			if (!morpion.playerTurn)
+			{
+				morpion.ctx.moveTo(targetX + 15, targetY + 15);
+				morpion.ctx.lineTo(targetX + 45, targetY + 45);
+				morpion.ctx.stroke();
+				morpion.ctx.closePath();
+				morpion.ctx.moveTo(targetX + 45, targetY + 15);
+				morpion.ctx.lineTo(targetX + 15, targetY + 45);
+				morpion.ctx.stroke();
+				morpion.ctx.closePath();
+			}
+			else
+			{
+				targetX += morpion.rectsize / 2;
+				targetY += morpion.rectsize / 2;
+				morpion.ctx.arc(targetX, targetY, 20, 0, 2 * Math.PI);
+				morpion.ctx.stroke();
+				morpion.ctx.closePath();
+			}
+		}
+
+		function updateMorpion(targetTab, squareTab, morpion)
+		{
+			console.log("targettab : " + targetTab + " squaretab : " + squareTab + " playerturn : " + morpion.playerTurn);
+			if (morpion.playerTurn && targetTab != morpion.playerTwoCurrentTab)
+				return -1;
+			console.log("targettab : " + targetTab + " squaretab : " + squareTab);
+			if (!morpion.playerTurn && targetTab != morpion.playerOneCurrentTab)
+				return -1;
+			  if (morpion.morpion[targetTab][squareTab] == -1)
+			 	morpion.morpion[targetTab][squareTab] = morpion.playerTurn;
+			else
+				return -1;
+			 if (morpion.playerTurn)
+				 morpion.playerTwoCurrentTab = squareTab;
+			else
+				 morpion.playerOneCurrentTab = squareTab;
+			drawNewCase(targetTab, squareTab, morpion);
+				 morpion.playerTurn = !morpion.playerTurn; 
+			return 0;
+		}
+
+		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;
+		}
+
+		targetTabX = findPlace(x, this);
+		targetTabY = findPlace(y, this);
+		if (targetTabX < 0 || targetTabY < 0)
+			return -1;
+		targetTab = targetTabX + targetTabY * 3;
+		squareTab = findSquare(x, this.rectsize * 3 * targetTabX + this.gap, this) + findSquare(y, this.rectsize * 3 * targetTabY + this.gap, this) * 3;
+		updateMorpion(targetTab, squareTab, this);
+	}
+
 	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);
+				this.morpion[i].push(-1);
-		const canvas = document.getElementById("Morpion");
+		this.canvas = document.getElementById("Morpion");
-		this.ctx = canvas.getContext("2d");
+		this.ctx = this.canvas.getContext("2d");
 		this.ctx.fillStyle = "white";
-		this.ctx.fillRect(0, 0, canvas.width, canvas.height);
+		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
-		for (let i = 1, x = gap, y  = gap; i <= 9; i++)
+		for (let i = 1, x = this.gap, y  = this.gap; i <= 9; i++)
 		{
 			this.DrawMorpion(x, y);
-			x += 180 + gap;
+			x += this.rectsize * 3;
 			if (i % 3 == 0)
 			{
-				y += 180 + gap;
+				y += this.rectsize * 3;
-				x = gap;
+				x = this.gap;
 			}
 		}
+		this.ctx.lineWidth = 6;
+		for (let i = 0; i < 4; i++)
+		{
+			this.ctx.beginPath();
+			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();
+		};
+		for (let i = 0; i < 4; i++)
+		{
+			this.ctx.beginPath();
+			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.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false);
 	}
 
 	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);
+			this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
-			x += 60;
+			x += this.rectsize;
 			if (i % 3 == 0)
 			{
-				y += 60;
+				y += this.rectsize;
 				x = 0;
 			}
 		}
 	}
+
     async getHtml() 
 	{
         return `
@@ -55,3 +168,4 @@ export default class extends AbstractView
         `;
     }
 }
+