add: Morpion class & matchmaking

frontend/static/js/api/Matchmaking.js

@@ -21,11 +21,12 @@ class MatchMaking
 	 * @param {Number} mode The number of players in a game 
 	 * @returns {Promise<?>}
 	 */
-	async start(receive_func, disconnect_func, mode)
+	async start(receive_func, disconnect_func, mode, gamemode)
 	{
 		if (!await this.client.isAuthenticated())
 			return null;
 		
+		this.gamemode = gamemode
 		let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${mode}`;
 
 		this._socket = new WebSocket(url);

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

@@ -0,0 +1,74 @@
+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 };