Added online page (WIP)

frontend/static/js/index.js

@@ -19,6 +19,7 @@ import TournamentsListView 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";
+import TicTacToeOnlineView from "./views/TicTacToeViewOnline.js";
 import GameHistoryView from "./views/GameHistoryView.js";
 
 let client = new Client(location.origin);
@@ -92,6 +93,7 @@ const router = async(uri) => {
         { path: "/matchmaking", view: MatchMakingView },
         { path: "/games/offline", view: GameOfflineView },
 		{ path: "/tictactoe", view: TicTacToeView },
+		{ path: "/tictactoeonline", view: TicTacToeOnlineView },
         { path: "/games/:id/0", view: GameView2D },
         { path: "/games/:id/1", view: GameView3D },
     ];

frontend/static/js/lang/cr.json

@@ -38,7 +38,8 @@
 	"profileBlock": "Quoicoubloquer",
 	"gameGoalTaken": "Tu es quoicoucringe",
 	"gamePlayersListName": "Crampteurs",
-	"ticTacToe": "Quoicoumorpion",
+	"ticTacToe": "Quoicoumorpion hors crampté",
+	"ticTacToeOnline" : "Quoicoumorpion crampté",
 	"ruleTitle" : "Règles cramptés",
 	"ruleBase" : "cramptun. Vous devez quouicougagner sur une des 9 quoicougrilles pour gagner la croustipartie",
 	"ruleMovement" : "quoicoudeux. Vous quoicommencez sur le morpion quoicoucentral, et jouez sur le quoicoumorpion correspondant a votre croustichoix a votre prochain cramptour",

frontend/static/js/lang/en.json

@@ -38,7 +38,8 @@
 	"profileBlock": "Block",
 	"gameGoalTaken": "Goal Taken",
 	"gamePlayersListName": "Players",
-	"ticTacToe": "TicTacToe",
+	"ticTacToe": "TicTacToe offline",
+	"ticTacToeOnline" : "TicTacToe online",
 	"ruleTitle" : "Rules",
 	"ruleBase" : "1. Win on one of the 9 tictactoe to win the game",
 	"ruleMovement" : "2. You start on the central tictactoe, and play on the one corresponding to your choice on the next turn",

frontend/static/js/lang/fr.json

@@ -38,7 +38,8 @@
 	"profileBlock": "Bloquer",
 	"gameGoalTaken": "But pris",
 	"gamePlayersListName": "Joueurs",
-	"ticTacToe" : "Morpion",
+	"ticTacToe" : "Morpion hors ligne",
+	"ticTacToeOnline" : "Morpion en ligne",
 	"ruleTitle" : "Règles",
 	"ruleBase" : "1. Vous devez gagner sur une des 9 grilles pour gagner la partie",
 	"ruleMovement" : "2. Vous commencez sur le morpion central, et jouez sur le morpion correspondant a votre choix a votre prochain tour",

frontend/static/js/lang/tp.json

@@ -38,7 +38,8 @@
 	"profileBlock": "Tawa e nimi pi jan ni",
 	"gameGoalTaken": "Wile pali",
 	"gamePlayersListName": "Musi",
-	"ticTacToe": "TicTacToe",
+	"ticTacToe": "TicTacToe offline",
+	"ticTacToeOnline" : "TicTacToe bismillah",
 	"ruleTitle" : "Rules",
 	"ruleBase" : "1. Win on wan pi the 9 tictactoe tawa win the game",
 	"ruleMovement" : "2. Sina open on the central tictactoe, en play on the wan corresponding tawa your choice on the next turn",

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="/tictactoeonline" data-link>${lang.get('ticTacToeOnline')}</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

@@ -124,7 +124,7 @@ export default class extends AbstractView
 			morpion.ctx.fillRect(morpion.width / 2 - 200, morpion.height - morpion.gap + 10, 400, 80);
 			morpion.ctx.closePath();
 			morpion.ctx.beginPath();
-			morpion.ctx.fillStyle = "black";
+			morpion.ctx.fillStyle = (morpion.Winner) ? "red" : "green";
 			morpion.ctx.fillText((morpion.Winner) ? "Winner is : O" : "Winner is : X", morpion.width / 2 - 30, morpion.height - morpion.gap / 2, 140);
 			morpion.ctx.closePath();
 		}

frontend/static/js/views/TicTacToeViewOnline.js

@@ -0,0 +1,94 @@
+import { lang } from "../index.js";
+import AbstractView from "./abstracts/AbstractView.js";
+
+export default class extends AbstractView 
+{
+    constructor(params) 
+	{
+        super(params, lang.get('ticTacToeOnline'));
+		this.width = 660;
+		this.height = 660;
+		this.rectsize = 60;
+		this.gap = 60;
+    }
+
+	DrawMorpion(start_x, start_y)
+	{
+		this.ctx.beginPath();
+		this.ctx.strokeStyle = `rgb(200 200 200)`;
+		for (let i = 1, x = 0, y = 0; i <= 9; i++)
+		{
+			this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
+			x += this.rectsize;
+			if (i % 3 == 0)
+			{
+				y += this.rectsize;
+				x = 0;
+			}
+		}
+		this.ctx.closePath();
+	}
+
+	async postInit()
+	{
+		this.canvas = document.getElementById("Morpion");
+		this.ctx = this.canvas.getContext("2d");
+		this.ctx.fillStyle = "black";
+		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+		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.ctx.lineWidth = 6;
+		for (let i = 0; i < 4; i++)
+		{
+			this.ctx.beginPath();
+			this.ctx.strokeStyle = `rgb(230 230 230)`;
+			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();
+			this.ctx.closePath();
+		};
+		for (let i = 0; i < 4; i++)
+		{
+			this.ctx.beginPath();
+			this.ctx.strokeStyle = `rgb(230 230 230)`;
+			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.ctx.closePath();
+		}
+	}
+
+	async leavePage()
+	{
+
+	}
+
+    setTitle() 
+	{
+        document.title = lang.get(this.titleKey, this.titleKey);
+    }
+
+    async getHtml() 
+	{
+        return `
+			<h1>${lang.get('ticTacToeOnline')}</h1>
+			<div style="display: flex">
+				<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
+				<div>
+					<h2 style="padding-left: 50px"><B>${lang.get('ruleTitle')}</B></h2>
+					<h5 style="padding-left: 30px">${lang.get('ruleBase')}<br><br></h5>
+					<h5 style="padding-left: 30px">${lang.get('ruleMovement')}<br><br></h5>
+					<h5 style="padding-left: 30px">${lang.get('ruleDraw')}</h5>
+				</div>
+			</div>
+		`;
+    }
+}