From 4f6aca819f7ebd51b32cbedbf10901d39a700e50 Mon Sep 17 00:00:00 2001
From: bgoulard <bgoulard@student.42.fr>
Date: Tue, 13 Jan 2026 17:58:43 +0100
Subject: [PATCH] fix up html order elements + end-screen

---
 frontend/src/pages/ttt/ttt.html |  4 +--
 frontend/src/pages/ttt/ttt.ts   | 47 ++++++++++++---------------------
 2 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/frontend/src/pages/ttt/ttt.html b/frontend/src/pages/ttt/ttt.html
index cab9e8b..9c5f73a 100644
--- a/frontend/src/pages/ttt/ttt.html
+++ b/frontend/src/pages/ttt/ttt.html
@@ -31,8 +31,8 @@
         </div>
         <div class="rounded-elem white-color p-8 mt-2">
             <div class="ttt-play-area">
-                <div class="absolute inset-0 flex items-center justify-center">
-                   <div class="focus-elem white-color rounded-elem hidden" id="ttt-end-screen">outcome</div>
+                <div class="absolute inset-0 flex items-center justify-center hidden" id="ttt-end-screen">
+                    <div class="focus-elem white-color rounded-elem" id="end-msg">outcome</div>
                 </div> 
                 <div class="ttt-cell" id="cell1"></div>
                 <div class="ttt-cell" id="cell2"></div>
diff --git a/frontend/src/pages/ttt/ttt.ts b/frontend/src/pages/ttt/ttt.ts
index 25a5eb2..badbe6e 100644
--- a/frontend/src/pages/ttt/ttt.ts
+++ b/frontend/src/pages/ttt/ttt.ts
@@ -6,6 +6,7 @@ import {io} from "socket.io-client";
 import type {CSocket as Socket, GameUpdate} from "./socket";
 import {updateUser} from "@app/auth";
 import client from "@app/api";
+import { isNullish } from "@app/utils";
 
 
 declare module 'ft_state' {
@@ -61,7 +62,12 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
             const result_message = document.getElementById("ttt-end-screen");
             const userOString = document.getElementById("playerO-name");
             const userXString = document.getElementById("playerX-name");
-            if (!currentPlayerIndicator || !currentPlayerTimer || !historyButton || !joinQueueBtn || !result_message || !userOString || !userXString) {
+            const txt_pos = document.getElementById("end-msg");
+
+            if (!currentPlayerIndicator || !currentPlayerTimer 
+                || !historyButton || !joinQueueBtn 
+                || !result_message || !userOString 
+                || !userXString || !txt_pos) {
                 return showError('fatal error');
             }
 
@@ -137,40 +143,21 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
             };
 
             const makeEnd = (type: 'win' | 'conceded' | 'draw', player: 'X' | 'O') => {
-                if (type === 'draw') {
-                    result_message.innerText = "It's a draw! :/";
-                    result_message.classList.remove("hidden");
-                    setTimeout(() => {
-                        result_message.classList.add("hidden");
-                    }, msgNotifTimeOut);
-                }
+                let text = 'It\'s a draw! :/';
 
                 if (type === 'win') {
-                    let youWin: boolean;
-                    switch (player) {
-                        case 'X':
-                            youWin = (curGame?.playerX === user.id);
-                            break;
-                        case 'O':
-                            youWin = (curGame?.playerO === user.id);
-                            break;
-                        default:
-                            return;
-                    }
-                    if (youWin) {
-                        result_message.innerText = "You won the game! :)";
-                        result_message.classList.remove("hidden");
-                        setTimeout(() => {
-                            result_message.classList.add("hidden");
-                        }, msgNotifTimeOut);
+                    if ((curGame?.playerX === user.id && player === 'X') || 
+                        ((curGame?.playerO === user.id && player === 'O'))) {
+                        text = "You won the game! :)";
                     } else {
-                        result_message.innerText = "You lost the game! :(";
-                        result_message.classList.remove("hidden");
-                        setTimeout(() => {
-                            result_message.classList.add("hidden");
-                        }, msgNotifTimeOut);
+                        text = "You lost the game! :(";
                     }
                 }
+                txt_pos.innerHTML = text;
+                result_message.classList.remove("hidden");
+                setTimeout(() => {
+                    result_message.classList.add("hidden");
+                }, msgNotifTimeOut);
             };
 
             socket.on('gameEnd', () => {