add: added onClick event in online tictactoe

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

@@ -1,6 +1,7 @@
+
 class TicTacToe
 {
-    constructor(height, width, gap, rectsize, canvas)
+    constructor(height, width, gap, rectsize, canvas, blitz = false)
     {
         this.height = height;
         this.width = width;
@@ -13,8 +14,56 @@ class TicTacToe
 
         this.canvas = canvas
         this.context = this.canvas.getContext("2d");
+		this.blitz = blitz;
     }
 
+	init()
+	{
+		this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false);
+	}
+
+	uninit()
+	{
+		this.canvas.removeEventListener("mousedown", this.onClick, false);
+	}
+
+	onClick(event)
+	{
+		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;
+		}
+
+		let x = event.offsetX;
+		let y = event.offsetY;
+		let targetMorpion, targetCase;
+
+		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;
+		console.log("TargetMorpion :" + targetMorpion + " targetCase :" + targetCase);
+	}
+
     DrawSuperMorpion()
     {
         this.context.fillStyle = "#1a1a1d";
@@ -68,7 +117,22 @@ class TicTacToe
 		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 };

frontend/static/js/views/TicTacToeOnlineView.js

@@ -17,11 +17,13 @@ export default class extends AbstractView
     {
         this.Morpion = new TicTacToe(this.height, this.width, 60, 60, document.getElementById("Morpion"));
         this.Morpion.DrawSuperMorpion();
+		this.Morpion.SetOutline("#43d166");
+		this.Morpion.init();
     }
 
     async leavePage()
     {
-
+		this.Morpion.uninit();
     }
 
     setTitle()

frontend/static/js/views/TicTacToeView.js

@@ -155,7 +155,7 @@ export default class extends AbstractView
 			highlightNewTab(morpion);
 			return 0;
 		}
-
+		
 		function findSquare(x, gap, morpion)
 		{
 			if (x <= gap + morpion.rectsize)