rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pong bats working with css tailwind updates

Browse source
This commit is contained in:
NigeParis 2025-12-14 11:05:42 +01:00 • committed by Maix0
parent 1da4ae9c4c
commit 7571927097
5 changed files with 141 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/pages/pong/pong.html
View file

@ -7,17 +7,13 @@
<!-- Horizontal Message Box -->
<div id="system-box" class="system-info">System: connecting ... </div>
<!-- Pong Box -->
<p>try this in a terminal</p>
</br>
<p>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"</p>
<div class="flex justify-center mt-2">
<div id="pongspace" class="flex flex-col">
<div id="pongbox" class="pongbox-style">
<div class="pong-field">
<div id="batleft" class="pong-batleft bg-amber-400 top-0"></div>
<div class="pong-center-line"></div>
<div id="bat-left" class="pong-bat left"></div>
<div class="pong-bat right"></div>
</div>
<div id="batright" class="pong-batright bg-amber-400 top-0"></div>
</div>
</div>
</div>

137
frontend/src/pages/pong/pong.ts
View file

@ -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<string, boolean> = {};
@ -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(`</br>${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 {

8
frontend/src/pong/pong.css
View file

@ -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];
}

59
src/pong/src/app.ts
View file

@ -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() });

13
src/pong/src/routes/broadcast.ts
View file

@ -22,13 +22,24 @@ const route: FastifyPluginAsync = async (fastify): Promise<void> => {
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<void> => {
// fastify.post('/api/chat/broadcast', {