pong pro-tips / how-to-play added

frontend/src/pages/pong/pong.css

@@ -155,3 +155,38 @@
     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
+}

frontend/src/pages/pong/pong.html

@@ -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>

frontend/src/pages/pong/pong.ts

@@ -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