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

(frontend): added player names to game page and current player turn indicator

Browse source
This commit is contained in:
apetitco 2026-01-09 16:31:27 +01:00 • committed by Maix0
parent 1fe5d4711a
commit f9d11bd6fa
2 changed files with 90 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,28 @@
<h1 class="text-3xl font-bold text-gray-800">
Tic-tac-toe Box<span id="t-username"></span>
</h1><br>
<div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center rounded-lg px-4 py-3">
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerX">
X
</div>
<div class="text-left">
<div class="font-semibold text-gray-800" id="playerX-name">${playerX.name}</div>
<div class="text-lg text-gray-800" id="playerX-timer">${playerX.timer}</div>
</div>
<div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">
<div id="currentPlayer" class='text-7xl font-bold'></div>
<div id="currentPlayerTimer">${currentPlayerTimer}</div>
</div>
<div class="text-right">
<div class="font-semibold text-gray-800" id="playerO-name">${playerO.name}</div>
<div class="text-lg text-gray-800" id="playerO-timer">${playerO.timer}</div>
</div>
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">
O
</div>
</div>
<div class="grid-box mt-2">
<div class="grid-layout">
<div id="cell1" class="ttt-cell"></div>

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

@ -5,6 +5,7 @@ import { showError, showInfo, showSuccess, showWarn } from "@app/toast";
import { io } from "socket.io-client";
import type { GameUpdate, CSocket as Socket } from "./socket";
import { updateUser } from "@app/auth";
import client from "@app/api";
declare module 'ft_state' {
@ -45,6 +46,20 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
if (user === null)
return;
// BEGINNING
const userXString = document.getElementById("playerX-name");
const userOString = document.getElementById("playerO-name");
if (!userXString || !userOString) {
return showError('fatal error');
}
const currentPlayerIndicator = document.getElementById("currentPlayer");
if (!currentPlayerIndicator) {
return showError('fatal error');
}
// END
const joinQueueBtn = document.querySelector<HTMLButtonElement>("#JoinQueueBtn");
if (!joinQueueBtn) {
@ -62,12 +77,54 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
});
let curGame: CurrentGameInfo | null = null;
let curGameX: {id: string, name: string} | null = null;
let curGameO: {id: string, name: string} | null = null;
socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));
socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
socket.on('newGame', (gameState) => {
socket.on('newGame', async (gameState) => {
showInfo(`newGame: ${gameState.gameId}`)
curGame = { ...gameState, lastState: null };
let resX = await client.getUser({user: curGame.playerX});
curGameX = {id: curGame.playerX, name: 'Player X'};
if (resX.kind === 'success')
curGameX.name = resX.payload.name;
else
showError(`Unable to get player information: ${resX.msg}`);
let resO = await client.getUser({user: curGame.playerO});
curGameO = {id: curGame.playerO, name: 'Player O'};
if (resO.kind === 'success')
curGameO.name = resO.payload.name;
else
showError(`Unable to get player information: ${resO.msg}`);
if (user.id === curGameO.id)
{
userOString.classList.add('text-red-800');
userOString.classList.remove('text-gray-800');
userXString.classList.remove('text-red-800');
userXString.classList.add('text-gray-800');
}
else if (user.id === curGameX.id)
{
userXString.classList.add('text-red-800');
userXString.classList.remove('text-gray-800');
userOString.classList.remove('text-red-800');
userOString.classList.add('text-gray-800');
}
userXString.innerText = curGameX.name;
userOString.innerText = curGameO.name;
});
socket.emit('enqueue');
@ -115,6 +172,16 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
if (curGame === null) {
return showError('Got game State, but no in a game ?');
}
curGame = {...u, lastState: curGame.lastState};
if (curGame.currentPlayer === 'X')
{
currentPlayerIndicator.innerText = "<";
} else if (curGame.currentPlayer === 'O') {
currentPlayerIndicator.innerText = ">";
}
updateUI(u.boardState);
if (u.gameState && u.gameState !== "ongoing") {