ticTacToe initial commit

frontend/static/js/views/HomeView.js

@@ -12,6 +12,7 @@ export default class extends AbstractAuthenticatedView {
 			<h1>${lang.get('homeTitle', 'Home')}</h1>
             <a href="/matchmaking" data-link>${lang.get('homeOnline', 'Play online')}</a>
             <a href="/games/offline" data-link>${lang.get('homeOffline', 'Play offline')}</a>
+			<a href="/tictactoe" data-link>${lang.get('ticTacToe')}</a>
             <a href="/settings" data-link>${lang.get('homeSettings', 'Settings')}</a>
             <a href="/logout" data-link>${lang.get('homeLogout', 'Logout')}</a>
         `;

frontend/static/js/views/TicTacToeView.js

@@ -0,0 +1,57 @@
+import { lang } from "../index.js";
+import AbstractView from "./abstracts/AbstractView.js";
+
+export default class extends AbstractView 
+{
+    constructor(params)
+	{
+        super(params, lang.get('ticTacToe'));
+		this.width = 660;
+		this.height = 660;
+    }
+
+	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);
+		const canvas = document.getElementById("Morpion");
+		this.ctx = canvas.getContext("2d");
+		this.ctx.fillStyle = "white";
+		this.ctx.fillRect(0, 0, canvas.width, canvas.height);
+		for (let i = 1, x = gap, y  = gap; i <= 9; i++)
+		{
+			this.DrawMorpion(x, y);
+			x += 180 + gap;
+			if (i % 3 == 0)
+			{
+				y += 180 + gap;
+				x = gap;
+			}
+		}
+	}
+
+	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);
+			x += 60;
+			if (i % 3 == 0)
+			{
+				y += 60;
+				x = 0;
+			}
+		}
+	}
+    async getHtml() 
+	{
+        return `
+            <h1>${lang.get('ticTacToe')}</h1>
+			<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
+        `;
+    }
+}