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

(feat): Queue/Dequeue button and waiting for match text

Browse source
This commit is contained in:
apetitco 2026-01-09 18:01:07 +01:00 • committed by Maix0
parent 6bd3a01f5f
commit 272c6f319c
8 changed files with 154 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<div class="displaybox">
<div id="mainbox" class="mainboxDisplay">
<button id="JoinQueueBtn" class="btn-style absolute top-4 right-6">New Game</button>
<button id="JoinQueueBtn" class="btn-style absolute top-4 right-6">Join Queue</button>
<h1 class="text-3xl font-bold text-gray-800">
Tic-tac-toe Box<span id="t-username"></span>
</h1><br>
@ -9,18 +9,18 @@
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 class="font-semibold text-gray-800" id="playerX-name"></div>
<div class="text-lg text-gray-800" id="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 id="currentPlayerTimer">Waiting for match...</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 class="font-semibold text-gray-800" id="playerO-name"></div>
<div class="text-lg text-gray-800" id="playerO-timer"></div>
</div>
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">
O

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

@ -15,6 +15,12 @@ declare module 'ft_state' {
}
}
enum QueueState {
InQueue = "In Queue",
InGame = "In Game",
Idle = "Join Queue",
};
document.addEventListener("ft:pageChange", () => {
if (window.__state.tttSock !== undefined) window.__state.tttSock.close();
if (window.__state.keepAliveInterval !== undefined) clearInterval(window.__state.keepAliveInterval);
@ -48,13 +54,27 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
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) {
const joinQueueBtn = document.getElementById("JoinQueueBtn");
const currentPlayerTimer = document.getElementById("currentPlayerTimer")
if (!userXString || !userOString || !currentPlayerIndicator || !joinQueueBtn || !currentPlayerTimer) {
return showError('fatal error');
}
joinQueueBtn.addEventListener("click", () => {
console.log('===== JOIN QUEUE BUTTON PRESSED =====');
if (joinQueueBtn.innerText !== QueueState.Idle) {
console.log("== Entering in first if ==");
if (joinQueueBtn.innerText === QueueState.InQueue) {
console.log("== Entering in second if ==");
socket.emit("dequeue");
joinQueueBtn.innerText = QueueState.Idle;
}
return;
}
joinQueueBtn.innerText = QueueState.InQueue;
socket.emit("enqueue");
});
let curGame: CurrentGameInfo | null = null;
let curGameX: {id: string, name: string} | null = null;
@ -64,6 +84,9 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
socket.on('newGame', async (gameState) => {
showInfo(`newGame: ${gameState.gameId}`)
currentPlayerTimer.innerText = "";
joinQueueBtn.innerText = QueueState.InGame;
curGame = { ...gameState, lastState: null };
let resX = await client.getUser({user: curGame.playerX});
@ -86,7 +109,8 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
userOString.classList.remove('text-gray-800');
userXString.classList.remove('text-red-800');
userXString.classList.add('text-gray-800');
} else if (user.id === curGameX.id) {
}
else if (user.id === curGameX.id) {
userXString.classList.add('text-red-800');
userXString.classList.remove('text-gray-800');
userOString.classList.remove('text-red-800');
@ -95,7 +119,6 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
userXString.innerText = curGameX.name;
userOString.innerText = curGameO.name;
});
socket.emit('enqueue');
const cells = app.querySelectorAll<HTMLDivElement>(".ttt-cell");
@ -131,11 +154,10 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
socket.on('gameEnd', () => {
curGame = null;
socket.emit('enqueue');
showInfo('Game is finished, enqueuing directly')
currentPlayerTimer.innerText = "Waiting for match...";
joinQueueBtn.innerText = QueueState.Idle;
})
socket.on('gameBoard', (u) => {
if (curGame === null) {
return showError('Got game State, but no in a game ?');
@ -153,8 +175,6 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
updateUI(u.boardState);
if (u.gameState && u.gameState !== "ongoing") {
// grid?.classList.add("pointer-events-none");
if (u.gameState !== curGame.lastState) {
curGame.lastState = u.gameState;
switch (u.gameState) {