From deb391807aa155272c4f3c110f82c515c54f2401 Mon Sep 17 00:00:00 2001
From: apetitco <apetitco@student.42.fr>
Date: Tue, 13 Jan 2026 15:42:32 +0100
Subject: [PATCH] (tic-tac-toe): Added history button to check player's
 tic-tac-toe matches history

---
 frontend/src/pages/ttt/ttt.css  |  5 +++++
 frontend/src/pages/ttt/ttt.html |  1 +
 frontend/src/pages/ttt/ttt.ts   | 16 +++++++++++-----
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/ttt/ttt.css b/frontend/src/pages/ttt/ttt.css
index fdb4d64..dea61d4 100644
--- a/frontend/src/pages/ttt/ttt.css
+++ b/frontend/src/pages/ttt/ttt.css
@@ -82,3 +82,8 @@
     font-bold 
     hover:bg-gray-500
 }
+
+#historyBtn {
+  @apply
+  text-white
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ttt/ttt.html b/frontend/src/pages/ttt/ttt.html
index 0ea49e1..52d2c3c 100644
--- a/frontend/src/pages/ttt/ttt.html
+++ b/frontend/src/pages/ttt/ttt.html
@@ -1,5 +1,6 @@
 <div class="displaybox">
     <div class="mainboxDisplay" id="mainbox">
+        <button class="btn-style absolute top-4 left-6" id="historyBtn">History</button>
         <button class="btn-style absolute top-4 right-6" id="JoinQueueBtn">Join Queue</button>
         <h1 class="text-3xl font-bold text-gray-800">
             Tic-tac-toe Box<span id="t-username"></span>
diff --git a/frontend/src/pages/ttt/ttt.ts b/frontend/src/pages/ttt/ttt.ts
index c44b0f8..9324577 100644
--- a/frontend/src/pages/ttt/ttt.ts
+++ b/frontend/src/pages/ttt/ttt.ts
@@ -1,5 +1,5 @@
 import "./ttt.css"
-import {addRoute, setTitle, type RouteHandlerReturn} from "@app/routing";
+import {addRoute, setTitle, navigateTo, type RouteHandlerReturn} from "@app/routing";
 import tttPage from "./ttt.html?raw";
 import {showError, showInfo} from "@app/toast";
 import {io} from "socket.io-client";
@@ -54,13 +54,14 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
             if (user === null)
                 return;
 
-            const userXString = document.getElementById("playerX-name");
-            const userOString = document.getElementById("playerO-name");
             const currentPlayerIndicator = document.getElementById("currentPlayer");
+            const currentPlayerTimer = document.getElementById("currentPlayerTimer");
+            const historyButton = document.getElementById("historyBtn");
             const joinQueueBtn = document.getElementById("JoinQueueBtn");
-            const currentPlayerTimer = document.getElementById("currentPlayerTimer")
             const result_message = document.getElementById("ttt-end-screen");
-            if (!userXString || !userOString || !currentPlayerIndicator || !joinQueueBtn || !currentPlayerTimer || !result_message) {
+            const userOString = document.getElementById("playerO-name");
+            const userXString = document.getElementById("playerX-name");
+            if (!currentPlayerIndicator || !currentPlayerTimer || !historyButton || !joinQueueBtn || !result_message || !userOString || !userXString) {
                 return showError('fatal error');
             }
 
@@ -79,6 +80,11 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
                 socket.emit("enqueue");
             });
 
+            //TODO: Redirect to /app/ttt
+            historyButton.addEventListener("click", () => {
+                navigateTo("/app/ttt/games");
+            });
+
             let curGame: CurrentGameInfo | null = null;
             let curGameX: { id: string, name: string } | null = null;
             let curGameO: { id: string, name: string } | null = null;