From e5ee0b34e5d27e98b9c8ef5de131d16d18a0c997 Mon Sep 17 00:00:00 2001
From: Namonay <thek7995@gmail.com>
Date: Tue, 20 Feb 2024 18:52:14 +0100
Subject: [PATCH] ticTacToe initial commit

---
 frontend/static/js/index.js               |  2 +
 frontend/static/js/lang/cr.json           |  3 +-
 frontend/static/js/lang/en.json           |  3 +-
 frontend/static/js/lang/tp.json           |  3 +-
 frontend/static/js/views/HomeView.js      |  1 +
 frontend/static/js/views/TicTacToeView.js | 57 +++++++++++++++++++++++
 6 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 frontend/static/js/views/TicTacToeView.js

diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js
index c71ecc0..71b3325 100644
--- a/frontend/static/js/index.js
+++ b/frontend/static/js/index.js
@@ -17,6 +17,7 @@ import TournamentPageView from "./views/tournament/TournamentPageView.js";
 import TournamentsView from "./views/tournament/TournamentsListView.js";
 import TournamentCreateView from "./views/tournament/TournamentCreateView.js";
 import AuthenticationView from "./views/accounts/AuthenticationView.js";
+import TicTacToeView from "./views/TicTacToeView.js";
 
 let client = new Client(location.origin);
 let lang = client.lang;
@@ -88,6 +89,7 @@ const router = async(uri) => {
         { path: "/matchmaking", view: MatchMakingView },
         { path: "/games/offline", view: GameOfflineView },
         { path: "/games/:id", view: GameView },
+		{ path: "/tictactoe", view: TicTacToeView },
     ];
 
     // Test each route for potential match
diff --git a/frontend/static/js/lang/cr.json b/frontend/static/js/lang/cr.json
index c5d8b44..558e5d1 100644
--- a/frontend/static/js/lang/cr.json
+++ b/frontend/static/js/lang/cr.json
@@ -37,5 +37,6 @@
 	"profileUnblock": "Quoicoudebloquer",
 	"profileBlock": "Quoicoubloquer",
 	"gameGoalTaken": "Tu es quoicoucringe",
-	"gamePlayersListName": "Crampteurs"
+	"gamePlayersListName": "Crampteurs",
+	"ticTacToe": "Quoicoumorpion"
 }
diff --git a/frontend/static/js/lang/en.json b/frontend/static/js/lang/en.json
index fab053d..1af3756 100644
--- a/frontend/static/js/lang/en.json
+++ b/frontend/static/js/lang/en.json
@@ -37,5 +37,6 @@
 	"profileUnblock": "Unblock",
 	"profileBlock": "Block",
 	"gameGoalTaken": "Goal Taken",
-	"gamePlayersListName": "Players"
+	"gamePlayersListName": "Players",
+	"ticTacToe": "Morpion"
 }
diff --git a/frontend/static/js/lang/tp.json b/frontend/static/js/lang/tp.json
index 7874462..5254e1f 100644
--- a/frontend/static/js/lang/tp.json
+++ b/frontend/static/js/lang/tp.json
@@ -35,6 +35,7 @@
 	"profileDenyRequest": "ante e ijo ni",
 	"profileAcceptRequest": "kama jo e ijo ni",
 	"profileUnblock": "Tawa ala e nimi pi jan ni",
-	"profileBlock": "Tawa e nimi pi jan ni"
+	"profileBlock": "Tawa e nimi pi jan ni",
+	"ticTacToe": "TicTacToe"
 }
 
diff --git a/frontend/static/js/views/HomeView.js b/frontend/static/js/views/HomeView.js
index 1724176..aa153d4 100644
--- a/frontend/static/js/views/HomeView.js
+++ b/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>
         `;
diff --git a/frontend/static/js/views/TicTacToeView.js b/frontend/static/js/views/TicTacToeView.js
new file mode 100644
index 0000000..f0b83cb
--- /dev/null
+++ b/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>
+        `;
+    }
+}