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

[wip] colisions

Browse source
This commit is contained in:
bgoulard 2025-12-15 19:19:54 +01:00 • committed by Maix0
parent 40068bfb57
commit 0033956ca1
5 changed files with 75 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Docker.mk
View file

@ -8,7 +8,7 @@ DOCKER_SERVICE= \
tic-tac-toe \
nginx \
user \
pong \
all: build
docker compose up -d $(DOCKER_SERVICE)

3
frontend/index.html
View file

@ -36,7 +36,8 @@
<a href="/signin" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Signin</a>
<a href="/chat" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Chat</a>
<a href="/ttt" class="hover:bg-gray-700 rounded-md px-3 py-2">⭕ Tic-Tac-Toe</a>
<a href="/profile" class="hover:bg-gray-700 rounded-md px-3 py-2">⚙️ Profile</a>
<a href="/pong" class="hover:bg-gray-700 rounded-md px-3 py-2">▮•▮ Ping Pong</a>
<a href="/contact" class="hover:bg-gray-700 rounded-md px-3 py-2">⚙️ Settings</a>
<a href="/logout" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
</nav>
</aside>

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

@ -17,7 +17,7 @@
<div id="batleft" class="pong-batleft bg-amber-400 top-0"></div>
<div class="pong-center-line"></div>
<div id="batright" class="pong-batright bg-amber-400 top-0"></div>
<div id="ball" class="w-16 h-16 rounded-full border-4 bg-white border-gray-400"></div>
<div id="ball" class="w-8 h-8 rounded-full border-4 bg-white border-gray-400"></div>
</div>
</div>
</div>

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

@ -17,6 +17,10 @@ export const color = {
reset: '',
};
// TODO: local game (2player -> server -> 2player : current setup)
// TODO: tournament via remote (dedicated queu? idk)
//
// get the name of the machine used to connect
const machineHostName = window.location.hostname;
console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);

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

@ -90,6 +90,16 @@ declare module 'fastify' {
}
}
function batColision(ball_origin_x : number, ball_origin_y : number, ball_height : number, origin_bat_x : number, origin_bat_y : number, bat_w : number, bat_h : number)
{
if (((ball_origin_x >= origin_bat_x && ball_origin_x <= origin_bat_x + bat_w) ||
(ball_origin_x + ball_height >= origin_bat_x && ball_origin_x + ball_height <= origin_bat_x + bat_w))
&& ((ball_origin_y >= origin_bat_y && ball_origin_y <= origin_bat_y + bat_h) ||
(ball_origin_y + ball_height >= origin_bat_y && ball_origin_y + ball_height <= origin_bat_y + bat_h)))
return (true);
return (false);
}
async function onReady(fastify: FastifyInstance) {
// shows address for connection au server transcendance
@ -100,93 +110,106 @@ async function onReady(fastify: FastifyInstance) {
console.log(color.yellow, 'Connect at : https://' + machineName + ':8888/app/login');
}
const SPEED = 20; // bat speed
// DRAW AREA
const TOP_EDGE = 0; // top edge of the field
const BOTTOM_EDGE = 450; // bottom edge of the field;
const LEFT_EDGE = 0;
const RIGHT_EDGE = 800;
const MAX_PADDLE_Y = 370; // BOTTOM_EDGE - padle_height
const START_POS_Y = 178; // bat y in the middle of the field
// PADDLEs
const PADDLE_HEIGHT = 80;
const PADDLE_WIDTH = 12;
const START_BALLX = 364; //(RIGHT_EDGE / 2) - (ballradius*2 + ballBorder);
const START_BALLY = 189; //(BOTTOM_EDGE / 2) - (ballradius*2 + ballBorder);
const ACCELERATION_FACTOR = 1.15;
const PADDLE_SPEED = 20;
const PADDLE_X_OFFSET = 4;
let batLeft = START_POS_Y; //shared start bat position
let batRight = START_POS_Y; //shared start bat position
const MAX_PADDLE_Y = BOTTOM_EDGE - PADDLE_HEIGHT; // 370
const PADDLE_START = BOTTOM_EDGE / 2 - PADDLE_HEIGHT / 2; // 185
// BALL
const BALL_SIZE = 8 * 2 + 4; // widht times 2 bc rounded on moth sides + 4 for border
const START_BALLX = (RIGHT_EDGE / 2) - BALL_SIZE;
const START_BALLY = (BOTTOM_EDGE / 2) - BALL_SIZE;
const ACCELERATION_FACTOR = 1.0001;
const ABS_MAX_BALL_SPEED = 10;
// val inits
let paddleLeft = PADDLE_START; //shared start bat position
let paddleRight = PADDLE_START; //shared start bat position
let ballPosX = START_BALLX;
let ballPosY = START_BALLY;
let ballSpeedX = 1;
let ballSpeedY = 1;
let games : Record<UserId, string> = {}; // uuid, game uid - if not in game empty string
fastify.io.on('connection', (socket: Socket) => {
socket.emit("batLeft_update", batLeft);
socket.emit("batRight_update", batRight);
socket.emit("batLeft_update", paddleLeft);
socket.emit("batRight_update", paddleRight);
socket.emit("ballPos_update", ballPosX, ballPosY);
// GAME
// paddle handling
socket.on('batmove_Left', (direction: "up" | "down") => {
if (direction === "up") {
batLeft -= SPEED;
console.log('w pressed UP');
}
if (direction === "down") {
console.log('s pressed DOWN');
batLeft += SPEED;
}
// position of bat leftplokoplpl
batLeft = Math.max(TOP_EDGE, Math.min(MAX_PADDLE_Y, batLeft));
console.log('batLeft_update is called y:',batLeft);
socket.emit("batLeft_update", batLeft);
if (direction === "up") {
paddleLeft -= PADDLE_SPEED;
}
if (direction === "down") {
paddleLeft += PADDLE_SPEED;
}
// position of bat leftplokoplpl
paddleLeft = Math.max(TOP_EDGE, Math.min(MAX_PADDLE_Y, paddleLeft));
socket.emit("batLeft_update", paddleLeft);
});
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(MAX_PADDLE_Y, batRight));
console.log('batRight_update is called y:',batRight);
socket.emit("batRight_update", batRight);
if (direction === "up") {
paddleRight -= PADDLE_SPEED;
}
if (direction === "down") {
paddleRight += PADDLE_SPEED;
}
// position of bat left
paddleRight = Math.max(TOP_EDGE, Math.min(MAX_PADDLE_Y, paddleRight));
socket.emit("batRight_update", paddleRight);
});
// ball handling:
// TODO 1: l/r bat hit
// TODO 2: l/r wall hit : score
// TODO 2: l/r wall hit : score 5pt gagne
setInterval(async () => {
const new_ballPosX = ballPosX + ballSpeedX;
const new_ballPosY = ballPosY + ballSpeedY;
if (new_ballPosX < 0 || new_ballPosX + 36*2 > RIGHT_EDGE) {
if (batColision(new_ballPosX, new_ballPosY, BALL_SIZE, PADDLE_X_OFFSET, paddleLeft, PADDLE_WIDTH, PADDLE_HEIGHT) ||
batColision(new_ballPosX, new_ballPosY, BALL_SIZE, RIGHT_EDGE - PADDLE_X_OFFSET, paddleRight, PADDLE_WIDTH, PADDLE_HEIGHT))
{
ballSpeedX *= -1;
ballSpeedX *= ACCELERATION_FACTOR;
ballSpeedY *= ACCELERATION_FACTOR;
// TODO: score point + ball reset + spd reset
console.log('bat colision');
}
if (new_ballPosY < 0 || new_ballPosY + 36*2 > BOTTOM_EDGE) {
else if (new_ballPosX < 0 || new_ballPosX + BALL_SIZE*2 > RIGHT_EDGE) {
ballSpeedX *= -1;
ballSpeedX *= ACCELERATION_FACTOR;
ballSpeedY *= ACCELERATION_FACTOR;
console.log('wall colision');
// TODO: score point + ball reset + spd reset
}
else if (new_ballPosY < 0 || new_ballPosY + BALL_SIZE*2 > BOTTOM_EDGE) {
ballSpeedY *= -1;
ballSpeedX *= ACCELERATION_FACTOR;
ballSpeedY *= ACCELERATION_FACTOR;
}
ballSpeedX = Math.max(-10, Math.min(ballSpeedX, 10));
ballSpeedY = Math.max(-10, Math.min(ballSpeedY, 10));
ballSpeedX = Math.max(-ABS_MAX_BALL_SPEED, Math.min(ballSpeedX, ABS_MAX_BALL_SPEED));
ballSpeedY = Math.max(-ABS_MAX_BALL_SPEED, Math.min(ballSpeedY, ABS_MAX_BALL_SPEED));
ballPosX += ballSpeedX;
ballPosY += ballSpeedY;
socket.emit("ballPos_update", ballPosX, ballPosY);
}, 1024)
}, 16)
// QUEU HANDL
socket.on('queuJoin', async (uuid: UserId) => {