From 75719270970963bc20a5084390a8f0e39b9d40ad Mon Sep 17 00:00:00 2001 From: NigeParis Date: Sun, 14 Dec 2025 11:05:42 +0100 Subject: [PATCH] pong bats working with css tailwind updates --- frontend/src/pages/pong/pong.html | 8 +- frontend/src/pages/pong/pong.ts | 137 +++++++++++++++++------------- frontend/src/pong/pong.css | 8 +- src/pong/src/app.ts | 59 ++++++++++--- src/pong/src/routes/broadcast.ts | 13 ++- 5 files changed, 141 insertions(+), 84 deletions(-) diff --git a/frontend/src/pages/pong/pong.html b/frontend/src/pages/pong/pong.html index dae04ac..c46c9cd 100644 --- a/frontend/src/pages/pong/pong.html +++ b/frontend/src/pages/pong/pong.html @@ -7,17 +7,13 @@
System: connecting ...
-

try this in a terminal

-
-

curl -k --data-raw '{"message": "Message SENT from the terminal en REMOTE"}' 'https://local.maix.me:8888/api/pong/broadcast' -H "Content-Type: application/json"

+
-
-
-
+
diff --git a/frontend/src/pages/pong/pong.ts b/frontend/src/pages/pong/pong.ts index 0749b7c..f960665 100644 --- a/frontend/src/pages/pong/pong.ts +++ b/frontend/src/pages/pong/pong.ts @@ -113,14 +113,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn systemWindow.scrollTop = systemWindow.scrollHeight; }); - /** - * sockets different listeners - * transport different data formats - */ - - - - const keys: Record = {}; @@ -133,68 +125,93 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn }); setInterval(() => { - if (keys['w']) socket.emit("bat:move", "up"); - - - if (keys['s']) { - console.log('s pressed'); - socket.emit("bat:move", "down"); - + if (keys['w']) { + socket.emit("batmove_Left", "up"); + console.log('north key pressed - emit batmove_Left up'); } - - + if (keys['s']) { + socket.emit("batmove_Left", "down"); + console.log('south key pressed - emit batmove_Left down'); + } + if (keys['p']) { + socket.emit("batmove_Right", "up"); + console.log('north key pressed - emit batmove_Right up'); + } + if (keys['l']) { + socket.emit("batmove_Right", "down"); + console.log('south key pressed - emit batmove_Right down'); + } }, 16); + + + // Listen for Left bat updates + socket.on("batLeft_update", (y: number) => { + console.log('batLeft_update received y: ', y); + const bat = document.getElementById("batleft") as HTMLDivElement | null; + if (!bat) { + console.error("FATAL ERROR: Bat element with ID 'bat-left' not found. Check HTML."); + return ; + } + if (typeof y === 'number' && !isNaN(y)) { + bat.style.transform = `translateY(${y}px)`; + } else { + console.warn(`Received invalid Y value: ${y}`); + } + }); + + // Listen for Right bat updates + socket.on("batRight_update", (y: number) => { + console.log('batRight_update received y: ', y); + const bat = document.getElementById("batright") as HTMLDivElement | null; + if (!bat) { + console.error("FATAL ERROR: Bat element with ID 'bat-Right' not found. Check HTML."); + return ; + } + if (typeof y === 'number' && !isNaN(y)) { + bat.style.transform = `translateY(${y}px)`; + } else { + console.warn(`Received invalid Y value: ${y}`); + } + }); + + + + - - 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(`
${data.message.text}`); - }); - - socket.on('profilMessage', (profil: ClientProfil) => { - console.log('%csocket.on profilMessage', color.yellow ); - }); - - socket.on('inviteGame', (invite: ClientProfil) => { - console.log('%csocket.on inviteGame', color.yellow ); - }); - - socket.on('blockUser', (blocked: ClientProfil) => { - console.log('%csocket.on blockUser', color.yellow ); - }); - - socket.on('logout', () => { - console.log('%csocket.on logout', color.yellow ); - }); - - socket.on('privMessageCopy', (message) => { - console.log('%csocket.on privMessageCopy', color.yellow ); - }) - - socket.on('nextGame', (message: string) => { - console.log('%csocket.on nextGame', color.yellow ); - }) - - socket.on('listBud', async (myBuddies: string) => { - console.log('%csocket.on listBud', color.yellow ); - addPongMessage('socket.once \'listBud\' called') - - }); - socket.once('welcome', (data) => { console.log('%cWelcome PONG PAGE', color.yellow ); addPongMessage('socket.once \'Welcome\' called') }); + + // Listen for messages from the server "MsgObjectServer" + socket.on("MsgObjectServer", (data: { message: ClientMessage}) => { + // Display the message in the chat window + const systemWindow = document.getElementById('system-box') as HTMLDivElement; + + + const MAX_SYSTEM_MESSAGES = 10; + + if (systemWindow && data.message.destination === "system-info") { + const messageElement = document.createElement("div"); + messageElement.textContent = `${data.message.user}: ${data.message.text}`; + systemWindow.appendChild(messageElement); + + // keep only last 10 + while (systemWindow.children.length > MAX_SYSTEM_MESSAGES) { + systemWindow.removeChild(systemWindow.firstChild!); + } + systemWindow.scrollTop = systemWindow.scrollHeight; + } + console.log("Getuser():", getUser()); + }); + + + + + setTitle('Pong Page'); return { diff --git a/frontend/src/pong/pong.css b/frontend/src/pong/pong.css index 960b3da..4df8ad0 100644 --- a/frontend/src/pong/pong.css +++ b/frontend/src/pong/pong.css @@ -115,12 +115,12 @@ @apply absolute w-[12px] h-[80px] bg-white; } -.pong-bat.left { - @apply left-4 top-1/2 -translate-y-1/2; +.pong-batleft { + @apply absolute left-4 w-[12px] h-[80px] top-[0px]; } -.pong-bat.right { - @apply right-4 top-1/2 -translate-y-1/2; +.pong-batright { + @apply absolute right-4 w-[12px] h-[80px] top-[0px]; } diff --git a/src/pong/src/app.ts b/src/pong/src/app.ts index 8be15b2..2bfc2c7 100644 --- a/src/pong/src/app.ts +++ b/src/pong/src/app.ts @@ -76,8 +76,11 @@ declare module 'fastify' { io: Server<{ inviteGame: (data: ClientProfil) => void; message: (msg: string) => void; - pong_bat_left: (direction: "up" | "down") => void; - + batmove_Left: (direction: "up" | "down") => void; + batmove_Right: (direction: "up" | "down") => void; + batLeft_update: (y:number) => void; + batRight_update: (y:number) => void; + MsgObjectServer: (data: { message: ClientMessage }) => void; }>; } } @@ -92,30 +95,60 @@ 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; - + const SPEED = 20; // bat speed + const BOTTOM_EDGE = 370; // bottom edge of the field; + const TOP_EDGE = 0; // top edge of the field + const START_POS_Y = 178; // bat y in the middle of the field + let batLeft = START_POS_Y; //shared bat position + let batRight = START_POS_Y; //shared bat position + fastify.io.on('connection', (socket: Socket) => { + socket.emit("batLeft_update", batLeft); + socket.emit("batRight_update", batRight); - socket.emit("bat:update", batY); - - socket.on('bat:move', (direction: "up" | "down") => { + socket.on('batmove_Left', (direction: "up" | "down") => { if (direction === "up") { - batY -= SPEED; + batLeft -= SPEED; console.log('w pressed UP'); } if (direction === "down") { console.log('s pressed DOWN'); - batY += SPEED; + batLeft += SPEED; } - // clamp inside field - batY = Math.max(0, Math.min(370, batY)); + // position of bat leftplokoplpl + batLeft = Math.max(TOP_EDGE, Math.min(BOTTOM_EDGE, batLeft)); - socket.emit("bat:update", batY); + console.log('batLeft_update is called y:',batLeft); + + socket.emit("batLeft_update", batLeft); }); + socket.on('batmove_Right', (direction: "up" | "down") => { + if (direction === "up") { + batRight -= SPEED; + console.log('p pressed UP'); + } + if (direction === "down") { + console.log('l pressed DOWN'); + + batRight += SPEED; + } + // position of bat left + batRight = Math.max(TOP_EDGE, Math.min(BOTTOM_EDGE, batRight)); + + console.log('batRight_update is called y:',batRight); + + socket.emit("batRight_update", batRight); + }); + + + + + + + socket.on('message', (message: string) => { const obj: ClientMessage = JSON.parse(message) as ClientMessage; clientChat.set(socket.id, { user: obj.user, lastSeen: Date.now() }); diff --git a/src/pong/src/routes/broadcast.ts b/src/pong/src/routes/broadcast.ts index 2b2481c..d223444 100644 --- a/src/pong/src/routes/broadcast.ts +++ b/src/pong/src/routes/broadcast.ts @@ -22,13 +22,24 @@ const route: FastifyPluginAsync = async (fastify): Promise => { config: { requireAuth: false }, }, async function(req, res) { - broadcast(this, { command: '', destination: '', user: 'CMwaLeSever!!', text: req.body.message, SenderWindowID: 'server' }); + broadcast(this, { command: '', destination: 'system-info', user: 'CMwaLeSever!!', text: req.body.message, SenderWindowID: 'server' }); void res; }, ); }; export default route; +/** + * + * try this in a terminal + * + * curl -k --data-raw '{"message": "Message SENT from the terminal en REMOTE"}' 'https://local.maix.me:8888/api/pong/broadcast' -H "Content-Type: application/json" + * + * send message info to the fronatend via the route '/api/pong/broadcast' + */ + + + // const route: FastifyPluginAsync = async (fastify): Promise => { // fastify.post('/api/chat/broadcast', {