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

feat(tour): better frontend for tournament start phase, and auto start after X seconds

Browse source
This commit is contained in:
Maieul BOYER 2026-01-10 17:43:04 +01:00 • committed by Maix0
parent 3c95af8ede
commit 901e3e5a8e
6 changed files with 140 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,22 +2,29 @@
<div id="mainbox" class="pong-mainboxDisplay rounded-elem">
<div class="grid grid-cols-3">
<div class="flex flex-col gap-2">
<button id="QueueBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Queue Up</button>
<button id="LocalBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Local Game</button>
<button id="QueueBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Queue
Up</button>
<button id="LocalBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Local
Game</button>
<button id="TourBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">
<span class="mx-2">Create Tournament</span>
</button> <!-- tournament hdl -->
</button>
<!-- tournament hdl -->
</div>
<div class="flex flex-col gap-2">
<h1 class="page-title">Pong Box</h1>
<br>
<br />
</div>
<div class="flex flex-col gap-2 items-end">
<span id="queue-info" class="fit-all rounded-elem gray-color text-white">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | games-->
<button id="play-info" class="circle-8 pong-btn-style gray-color blue-hover">?</button> <!-- how to play? pong-how-to-play rounded-elem rounded-full blue-hover-->
</div>
<span id="queue-info" class="fit-all rounded-elem gray-color text-white">?👤 ?⏳ ?▮•▮</span>
<!-- total | in queue | games-->
<span id="tour-info" class="fit-all rounded-elem gray-color text-white">⚪️ ?👤 ?▮•▮</span>
<!-- [Owner|Registered|NotRegisterd|nonExistant] | Player | games -->
<!-- 👑 ✅ ❌ ⚪️ -->
<button id="play-info" class="circle-8 pong-btn-style gray-color blue-hover">?</button>
<!-- how to play? pong-how-to-play rounded-elem rounded-full blue-hover-->
</div>
</div>
<!-- Horizontal Message Box -->
<div id="score-box" class="grid grid-cols-3 items-center">
<h1 id="player-left"></h1>
@ -34,17 +41,19 @@
<kbd class="pong-protips-key">W</kbd>
down:
<kbd class="pong-protips-key">S</kbd>
<br>
You are <span class="text-red-500">red</span>. <br> Your goal is to bounce the ball back to the
adversary.
<br>
<span class="text-gray-400">local games keys for the left paddle:<br>
<br />
You are <span class="text-red-500">red</span>.
<br />
Your goal is to bounce the ball back to the adversary.
<br />
<span class="text-gray-400">local games keys for the left paddle:
<br />
up:
<kbd class="disp-key">O</kbd>
down:
<kbd class="disp-key">L</kbd>
</span>
</div>
</div>
<button id="readyup-btn" class="justify-center white-color focus-elem rounded-elem">ready!</button>
<div class="pong-field">
<div id="batleft" class="pong-bat pong-batleft top-0"></div>
@ -56,4 +65,4 @@
</div>
</div>
</div>
</div>
</div>

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

@ -42,6 +42,14 @@ enum TourBtnState {
AbeToProcreate = "He would be proud",
}
enum TourInfoState {
Running = "🟢",
Owner = "👑",
Registered = "✅",
NotRegisted = "❌",
NoTournament = "⚪️",
}
document.addEventListener("ft:pageChange", (newUrl) => {
if (
newUrl.detail.startsWith("/app/pong") ||
@ -105,6 +113,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
document.querySelector<HTMLDivElement>("#pong-end-screen");
const tournamentBtn =
document.querySelector<HTMLButtonElement>("#TourBtn");
const tour_infos =
document.querySelector<HTMLSpanElement>("#tour-info");
let socket = getSocket();
@ -126,7 +136,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
!LocalGameBtn ||
!rdy_btn ||
!end_scr ||
!tournamentBtn
!tournamentBtn ||
!tour_infos
)
// sanity check
return showError("fatal error");
@ -137,7 +148,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
switch (tournamentBtn.innerText) {
case TourBtnState.AbleToStart:
//socket.emit('')
socket.emit('tourStart')
break;
case TourBtnState.AbleToJoin:
socket.emit("tourRegister");
@ -152,8 +163,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
socket.emit("tourUnregister");
break;
case TourBtnState.Started:
showInfo("tournament Started");
//socket.emit("tourStart");
break;
}
});
@ -264,6 +273,10 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
socket.on("gameUpdate", (state: GameUpdate) => {
render(state);
});
socket.on("tourEnding", (ending) => {
showInfo(ending);
})
// ---
// position logic (client) end
// ---
@ -405,19 +418,23 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
if (s === null) {
tournamentBtn.innerText = TourBtnState.AbleToCreate;
// create tournament
tour_infos.innerText = `${TourInfoState.NoTournament} 0👤 0▮•▮`;
return;
}
let weIn = s.players.some((p) => p.id === user.id);
let imOwner = s.ownerId === user.id;
// TODO: fix this so the number of remaining games are correct
switch (s.state) {
case "ended":
tournamentBtn.innerText = TourBtnState.AbleToCreate;
break;
case "playing":
tournamentBtn.innerText = TourBtnState.Started;
tour_infos.innerText = `${TourInfoState.Running} ${s.players.length}👤 ?▮•▮`;
break;
case "prestart":
tour_infos.innerText = `${imOwner ? TourInfoState.Owner : (weIn ? TourInfoState.Registered : TourInfoState.NotRegisted)} ${s.players.length}👤 ?▮•▮`;
if (imOwner) {
tournamentBtn.innerText = TourBtnState.AbleToStart;
} else {
@ -427,8 +444,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
break;
}
console.log(s.players);
});
socket.on("tournamentRegister", ({ kind, msg }) => {

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

@ -32,7 +32,7 @@ export type GameMove = {
export type TourInfo = {
ownerId: string;
state: 'prestart' | 'playing' | 'ended';
state: 'prestart' | 'playing' | 'ended' | 'canceled';
players: { id: string; name: string; score: number }[];
currentGameInfo: GameUpdate | null;
};
@ -42,17 +42,19 @@ export interface ClientToServer {
dequeue: () => void;
readyUp: () => void;
readyDown: () => void;
debugInfo: () => void;
gameMove: (up: GameMove) => void;
connectedToGame: (gameId: string) => void;
localGame: () => void;
hello: () => void;
// TOURNAMENT
tourRegister: () => void;
tourUnregister: () => void;
tourCreate: () => void;
tourStart: () => void;
}
export interface ServerToClient {
@ -74,6 +76,8 @@ export interface ServerToClient {
msg?: string;
}) => void;
tournamentInfo: (info: TourInfo | null) => void;
tourEnding: (msg: string) => void;
}
export type SSocket = Socket<ClientToServer, ServerToClient>;