rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix up html order elements + end-screen

Browse source
This commit is contained in:
bgoulard 2026-01-13 17:58:43 +01:00 • committed by apetitco
parent 7ffb3d8ef4
commit 4f6aca819f
2 changed files with 19 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/pages/ttt/ttt.html
View file

@ -31,8 +31,8 @@
</div> </div>
<div class="rounded-elem white-color p-8 mt-2"> <div class="rounded-elem white-color p-8 mt-2">
<div class="ttt-play-area"> <div class="ttt-play-area">
<div class="absolute inset-0 flex items-center justify-center"> <div class="absolute inset-0 flex items-center justify-center hidden" id="ttt-end-screen">
<div class="focus-elem white-color rounded-elem hidden" id="ttt-end-screen">outcome</div> <div class="focus-elem white-color rounded-elem" id="end-msg">outcome</div>
</div> </div>
<div class="ttt-cell" id="cell1"></div> <div class="ttt-cell" id="cell1"></div>
<div class="ttt-cell" id="cell2"></div> <div class="ttt-cell" id="cell2"></div>

43
frontend/src/pages/ttt/ttt.ts
View file

@ -6,6 +6,7 @@ import {io} from "socket.io-client";
import type {CSocket as Socket, GameUpdate} from "./socket"; import type {CSocket as Socket, GameUpdate} from "./socket";
import {updateUser} from "@app/auth"; import {updateUser} from "@app/auth";
import client from "@app/api"; import client from "@app/api";
import { isNullish } from "@app/utils";
declare module 'ft_state' { declare module 'ft_state' {
@ -61,7 +62,12 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
const result_message = document.getElementById("ttt-end-screen"); const result_message = document.getElementById("ttt-end-screen");
const userOString = document.getElementById("playerO-name"); const userOString = document.getElementById("playerO-name");
const userXString = document.getElementById("playerX-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'); return showError('fatal error');
} }
@ -137,40 +143,21 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
}; };
const makeEnd = (type: 'win' | 'conceded' | 'draw', player: 'X' | 'O') => { const makeEnd = (type: 'win' | 'conceded' | 'draw', player: 'X' | 'O') => {
if (type === 'draw') { let text = 'It\'s a draw! :/';
result_message.innerText = "It's a draw! :/";
result_message.classList.remove("hidden");
setTimeout(() => {
result_message.classList.add("hidden");
}, msgNotifTimeOut);
}
if (type === 'win') { if (type === 'win') {
let youWin: boolean; if ((curGame?.playerX === user.id && player === 'X') ||
switch (player) { ((curGame?.playerO === user.id && player === 'O'))) {
case 'X': text = "You won the game! :)";
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);
} else { } else {
result_message.innerText = "You lost the game! :("; text = "You lost the game! :(";
}
}
txt_pos.innerHTML = text;
result_message.classList.remove("hidden"); result_message.classList.remove("hidden");
setTimeout(() => { setTimeout(() => {
result_message.classList.add("hidden"); result_message.classList.add("hidden");
}, msgNotifTimeOut); }, msgNotifTimeOut);
}
}
}; };
socket.on('gameEnd', () => { socket.on('gameEnd', () => {