From 381159400fe03d0e3e77200bec123a91825ba31f Mon Sep 17 00:00:00 2001
From: Namonay <thek7995@gmail.com>
Date: Fri, 22 Mar 2024 16:26:37 +0100
Subject: [PATCH] add: TicTacToe online view

---
 frontend/static/css/tictactoe.css             |  5 +++++
 frontend/static/js/views/MatchMakingView.js   | 17 ++++++++++-------
 .../static/js/views/TicTacToeOnlineView.js    | 19 +++++++++++++++----
 3 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 frontend/static/css/tictactoe.css

diff --git a/frontend/static/css/tictactoe.css b/frontend/static/css/tictactoe.css
new file mode 100644
index 0000000..ff44527
--- /dev/null
+++ b/frontend/static/css/tictactoe.css
@@ -0,0 +1,5 @@
+#canva {
+    width: 660px;
+    height:660px;
+    margin: 0px auto;
+  }
\ No newline at end of file
diff --git a/frontend/static/js/views/MatchMakingView.js b/frontend/static/js/views/MatchMakingView.js
index 6741583..6ca775e 100644
--- a/frontend/static/js/views/MatchMakingView.js
+++ b/frontend/static/js/views/MatchMakingView.js
@@ -20,8 +20,7 @@ export default class extends AbstractAuthenticatedView {
         else
         {
             let nb_players = this.input.value;
-
-            await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players);
+            await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players, this.gamemode);
 
             this.button.innerHTML = lang.get("matchmakingStopSearch");
         }
@@ -36,7 +35,10 @@ export default class extends AbstractAuthenticatedView {
     {
         if (data.detail === "game_found")
         {
-            navigateTo(`/games/${data.game_id}`);
+            if (this.gamemode.value == "pong")
+                navigateTo(`/games/${data.game_id}`);
+            else
+                navigateTo(`/games/${this.gamemode.value}/${data.game_id}`);
             return;
         }
         this.display_data(data);
@@ -52,7 +54,8 @@ export default class extends AbstractAuthenticatedView {
     {
         this.button = document.getElementById("toggle-search");
         this.input = document.getElementById("nb-players-input");
-        
+        this.gamemode = document.getElementById("game-choice");
+
         let container = document.getElementById("nb-players-container");
         let gameChoice = document.getElementById("game-choice");
 
@@ -68,7 +71,7 @@ export default class extends AbstractAuthenticatedView {
 
         gameChoice.addEventListener("change", function()
         {
-            if (this.value === "TicTacToe")
+            if (this.value === "tictactoe")
             {
                 container.style.display = 'none';
                 document.getElementById("nb-players-input").value = 2;
@@ -94,8 +97,8 @@ export default class extends AbstractAuthenticatedView {
                 <div>
                     <div class='form-floating mb-2'>
                         <select class='form-control' id='game-choice'>
-                            <option value='Pong'>Pong</option>
-                            <option value='TicTacToe'>TicTacToe</option>
+                            <option value='pong'>Pong</option>
+                            <option value='tictactoe'>ticTacToe</option>
                         </select>
                         <label for='game-choice'>${lang.get("gamemodeChoice")}</label>
                     </div>
diff --git a/frontend/static/js/views/TicTacToeOnlineView.js b/frontend/static/js/views/TicTacToeOnlineView.js
index 1a400a1..c7c365c 100644
--- a/frontend/static/js/views/TicTacToeOnlineView.js
+++ b/frontend/static/js/views/TicTacToeOnlineView.js
@@ -1,21 +1,27 @@
 import AbstractView from "./abstracts/AbstractView.js";
+import { lang } from "../index.js";
+import { TicTacToe } from "../api/game/TicTacToeGame.js"
 
 export default class extends AbstractView
 {
     constructor(params, titleKey)
     {
+        super(params, lang.get('ticTacToeTitle'));
         this.params = params;
         this.titleKey = titleKey;
+        this.height = 660;
+        this.width = 660;
     }
 
     async postInit()
     {
-
+        this.Morpion = new TicTacToe(this.height, this.width, 60, 60, document.getElementById("Morpion"));
+        this.Morpion.DrawSuperMorpion();
     }
 
     async leavePage()
     {
-        
+
     }
 
     setTitle()
@@ -24,7 +30,12 @@ export default class extends AbstractView
     }
 
     async getHtml() {
-        return `<h1>Work in progress bozo</h1>
-            <img src="https://cdn.discordapp.com/attachments/1089527100681240716/1219360784224616498/Snapinsta.app_424926392_1109913580191337_8974514051687331181_n_1080.jpg?ex=660b0539&is=65f89039&hm=25dbcab44e50ec8ca3019dab476293a1001c224c6b6312bd9e30fba1f72667b5&">`;
+        return `
+        <link rel="stylesheet" href="/static/css/tictactoe.css">
+        <div id="canva">
+			<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
+		</div>
+        <h1>Work in progress bozo</h1>
+        <img src="https://cdn.discordapp.com/attachments/1089527100681240716/1219360784224616498/Snapinsta.app_424926392_1109913580191337_8974514051687331181_n_1080.jpg?ex=660b0539&is=65f89039&hm=25dbcab44e50ec8ca3019dab476293a1001c224c6b6312bd9e30fba1f72667b5&">`;
     }
 }
\ No newline at end of file