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

pong pro-tips / how-to-play added

Browse source
This commit is contained in:
bgoulard 2026-01-07 14:41:56 +01:00 • committed by Nigel
parent 20a0e4cc61
commit 5e19ed3ed9
3 changed files with 58 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/pages/pong/pong.css
View file

@ -154,4 +154,39 @@
text-base
bg-white
z-50
}
.pong-protips-box {
@apply
justify-center
absolute
bg-white
border-10
rounded-3xl
border-white
text-center
text-2xl
text-black
}
.pong-protips-key {
@apply
inline-flex
items-center
justify-center
min-w-[2rem] h-8 px-2
rounded-md border border-gray-300
bg-gray-100 text-gray-800
font-mono text-sm font-medium
shadow-sm
select-none
}
.pong-how-to-play {
@apply
inline-flex items-center justify-center
rounded-full w-8 h-8 bg-blue-500
border-10 border-blue-500
}

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

@ -2,14 +2,13 @@
<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-->
<span id="queue-info" class="flex rounded-3xl border-7 border-gray-500 bg-gray-500 absolute top-4 right-6">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | games-->
<button id="play-info" class="pong-how-to-play absolute top-14 right-6">?</button> <!-- how to play?-->
<br>
<h1 class="text-3xl font-bold text-gray-800">
Pong Box<span id="t-username"></span>
</h1><br>
<!-- todo: print keys for moving -->
<!-- Horizontal Message Box -->
<div id="score-box" class="grid grid-cols-[1fr_auto_1fr] items-center">
<h1 id="player-left"></h1>
@ -20,6 +19,14 @@
<div class="flex justify-center mt-2">
<div id="pongspace" class="flex flex-col">
<div id="pongbox" class="pongbox-style">
<div id="protips-box" class="pong-protips-box z-50 hidden">
up:
<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.
</div>
<button class="pong-rdy-screen" id="readyup-btn">ready!</button>
<div class="pong-field">
<div id="batleft" class="pong-batleft top-0"></div>

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

@ -66,6 +66,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const LocalGameBtn = document.querySelector<HTMLButtonElement>("#LocalBtn");
const gameBoard = document.querySelector<HTMLDivElement>("#pongbox");
const queue_infos = document.querySelector<HTMLSpanElement>("#queue-info");
const how_to_play_btn = document.querySelector<HTMLButtonElement>("#play-info");
const protips = document.querySelector<HTMLDivElement>("#protips-box");
let socket = getSocket();
@ -75,16 +77,27 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
if (!batLeft || !batRight || !ball || !score || !queueBtn || !playerL || !playerR || !gameBoard || !queue_infos || !LocalGameBtn || !rdy_btn) // sanity check
return showError('fatal error');
if (!how_to_play_btn || !protips)
showError('missing protips'); // not a fatal error
// ---
// keys handler
// ---
const keys: Record<string, boolean> = {};
if (how_to_play_btn && protips)
how_to_play_btn.addEventListener("click", ()=>{
protips.classList.toggle("hidden");
how_to_play_btn.innerText = how_to_play_btn.innerText === '?' ? 'x' : '?';
});
document.addEventListener("keydown", (e) => {keys[e.key.toLowerCase()] = true;});
document.addEventListener("keyup", (e) => {keys[e.key.toLowerCase()] = false;});
setInterval(() => { // key sender
if (keys['escape'] === true && protips && how_to_play_btn) {
protips.classList.add("hidden");
how_to_play_btn.innerText = '?';
}
if (queueBtn.innerText !== QueueState.InGame)//we're in game ? continue | gtfo
return ;
if (currentGame === null) return;
@ -150,8 +163,6 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
score.innerText = `${state.left.score} | ${state.right.score}`
}
socket.on('gameUpdate', (state: GameUpdate) => {
// if (rdy_btn)
// rdy_btn.classList.add('hidden');
render(state);});
// ---
// position logic (client) end