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', {