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>