48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
<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-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>
|
|
|
|
<!-- Horizontal Message Box -->
|
|
<div id="score-box" class="grid grid-cols-[1fr_auto_1fr] items-center">
|
|
<h1 id="player-left"></h1>
|
|
<h1 id="score-board" class="justify-self-center text-p10 font-bold text-gray-800">0:0</h1>
|
|
<h1 id="player-right"></h1>
|
|
</div>
|
|
<!-- Pong Box -->
|
|
<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.
|
|
<br>
|
|
<span class="text-gray-400">local games keys for the left paddle:<br>
|
|
up:
|
|
<kbd class="pong-protips-key">O</kbd>
|
|
down:
|
|
<kbd class="pong-protips-key">L</kbd>
|
|
</span>
|
|
</div>
|
|
<button class="pong-rdy-screen" id="readyup-btn">ready!</button>
|
|
<div class="pong-field">
|
|
<div id="batleft" class="pong-batleft top-0"></div>
|
|
<div class="pong-center-line"></div>
|
|
<div id="batright" class="pong-batright top-0"></div>
|
|
<div id="ball" class="rounded-full border-4 bg-white border-gray-400"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|