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

wip

Browse source
This commit is contained in:
bgoulard 2026-01-05 17:11:23 +01:00 • committed by Maix0
parent 61b49ab370
commit 94d263993d
5 changed files with 32 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/pages/pong/pong.html
View file

@ -1,6 +1,8 @@
<div class="displaybox">
<div id="mainbox" class="mainboxDisplay">
<button id="QueueBtn" class="btn-style absolute top-4 left-6">Queue Up</button>
<button id="LocalBtn" class="btn-style absolute top-14 left-6">Local Game</button>
<span id="queue-info" class="flex rounded-3xl border-10 border-gray-500 bg-gray-500 absolute top-4 right-6">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | playing-->
<br>
<h1 class="text-3xl font-bold text-gray-800">
Pong Box<span id="t-username"></span>

30
frontend/src/pages/pong/pong.ts
View file

@ -20,6 +20,7 @@ enum QueueState {
InQueu = "In Queue",
InGame = "In Game",
Iddle = "Queue Up",
In_local = "In Local",
};
document.addEventListener("ft:pageChange", (newUrl) => {
@ -54,7 +55,9 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const playerL = document.querySelector<HTMLDivElement>('#player-left');
const playerR = document.querySelector<HTMLDivElement>('#player-right');
const queueBtn = document.querySelector<HTMLButtonElement>("#QueueBtn");
const LocalGameBtn = document.querySelector<HTMLButtonElement>("#LocalBtn");
const gameBoard = document.querySelector<HTMLDivElement>("#pongbox");
const queue_infos = document.querySelector<HTMLSpanElement>("#queue-info");
let socket = getSocket();
@ -62,7 +65,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
navigateTo("/app");
return ;
}
if (!batLeft || !batRight || !ball || !score || !queueBtn || !playerL || !playerR || !gameBoard) // sanity check
if (!batLeft || !batRight || !ball || !score || !queueBtn || !playerL || !playerR || !gameBoard || !queue_infos || !LocalGameBtn) // sanity check
return showError('fatal error');
// ---
@ -151,6 +154,18 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
queueBtn.innerText = QueueState.InQueu;
socket.emit('enqueue');
});
LocalGameBtn.addEventListener("click", () => {
if (queueBtn.innerText !== QueueState.Iddle || currentGame !== null) {
showError("cant launch a local game while in queue/in game");
return ;
}
socket.emit("localGame");
queueBtn.innerText = QueueState.In_local;
LocalGameBtn.innerText = "playing";
});
async function get_opponent(opponent_id : string) {
let t = await client.getUser({user:opponent_id});
@ -194,10 +209,13 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
new_div.innerText = 'you ' + end_txt;
new_div.className = "pong-end-screen";
gameBoard.appendChild(new_div);
setTimeout(() => {
new_div.remove();
}, 3 * 1000);
if (currentGame.local) {
LocalGameBtn.innerText = "Local Game"
}
}
render(DEFAULT_POSITIONS);
batLeft.style.backgroundColor = DEFAULT_COLOR;
@ -212,11 +230,17 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// ---
// queue evt end
// ---
queueBtn.innerText = QueueState.Iddle;
currentGame = null;
render(DEFAULT_POSITIONS);
batLeft.style.backgroundColor = DEFAULT_COLOR;
batRight.style.backgroundColor = DEFAULT_COLOR;
socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));
socket.on('updateInformation', (e) => {
showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue};g=${e.totalGames}`);
queue_infos.innerText = `${e.totalUser}👤 ${e.inQueue}⏳ ${e.totalGames}▮•▮`;
});
socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
showInfo("butter");
showInfo("butter-toast");

1
frontend/src/pages/pong/socket.ts
View file

@ -3,6 +3,7 @@ import { Socket } from 'socket.io-client';
export type UpdateInfo = {
inQueue: number,
totalUser: number,
totalGames : number
}
export type PaddleData = {