WIP bats left does not move

frontend/src/pages/pong/pong.html

@@ -15,8 +15,8 @@
           <div id="pongbox" class="pongbox-style">
             <div class="pong-field">
               <div class="pong-center-line"></div>
-              <div class="pong-bat left"></div>
-              <div class="pong-bat right"></div>
+                <div id="bat-left" class="pong-bat left"></div>
+                <div class="pong-bat right"></div>
             </div>
           </div>
         </div>

frontend/src/pages/pong/pong.ts

@@ -81,6 +81,9 @@ async function whoami(socket: Socket) {
 };
 
 
+
+
+
 function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
 	
 	let socket = getSocket();
@@ -115,6 +118,42 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 	 * transport different data formats
 	 */
 
+
+
+	
+	
+	const keys: Record<string, boolean> = {};
+	
+	document.addEventListener("keydown", (e) => {
+		keys[e.key.toLowerCase()] = true;
+	});
+	
+	document.addEventListener("keyup", (e) => {
+		keys[e.key.toLowerCase()] = false;
+	});
+	
+	setInterval(() => {
+		if (keys['w']) socket.emit("bat:move", "up");
+		
+		
+		if (keys['s']) { 
+			console.log('s pressed');
+			socket.emit("bat:move", "down");
+			
+		}
+		
+		
+	}, 16);
+	
+	
+	
+	const bat = document.getElementById("pong-bat.left") ;
+	
+	socket.on("bat:update", (y) => {
+		if (bat)	
+	  		bat.style.top = `${y}px`;
+	});
+
 	socket.on("MsgObjectServer", (data: { message: ClientMessage}) => {
 		console.log('%csocket.on MsgObjectServer', color.yellow );
 		addPongMessage(`</br>${data.message.text}`);

src/pong/src/app.ts

@@ -76,6 +76,8 @@ declare module 'fastify' {
 		io: Server<{
 			inviteGame: (data: ClientProfil) => void;
 			message: (msg: string) => void;
+			pong_bat_left: (direction: "up" | "down") => void;
+
 		}>;
 	}
 }
@@ -90,9 +92,30 @@ async function onReady(fastify: FastifyInstance) {
 		console.log(color.yellow, 'Connect at : https://' + machineName + ':8888/app/login');
 	}
 
+	let batY = 185; // shared bat position
+	const SPEED = 10;
 
 	fastify.io.on('connection', (socket: Socket) => {
 
+
+  		socket.emit("bat:update", batY);
+
+  		socket.on('bat:move', (direction: "up" | "down") => {
+  		  if (direction === "up") {  
+			batY -= SPEED; 
+			console.log('w pressed UP');
+		  }
+  		  if (direction === "down") { 
+			console.log('s pressed DOWN');
+
+			batY += SPEED;
+		  }
+  		  // clamp inside field
+  		  batY = Math.max(0, Math.min(370, batY));
+		
+  		  socket.emit("bat:update", batY);
+  		});
+
 		socket.on('message', (message: string) => {
 			const obj: ClientMessage = JSON.parse(message) as ClientMessage;
 			clientChat.set(socket.id, { user: obj.user, lastSeen: Date.now() });