Ladebeze66/ft_transcendence
1
0
Fork 0
mirror of https://github.com/AudebertAdrien/ft_transcendence.git synced 2026-11-10 01:07:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

starting the tournament code

Browse Source
This commit is contained in:
CHIBOUB Chakib
2024-08-27 18:46:56 +02:00
parent 6ac9629f6a
commit 697d8b5d0f
9 changed files with 116 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
pong/static/game.js
View File

@@ -28,6 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
const loginButton2 = document.getElementById('login2');
const gameContainer = document.getElementById('game1');
const tournamentContainer = document.getElementById('tournament-bracket');
const menuButton = document.querySelector('.burger-menu');
const dropdownMenu = document.getElementById('dropdown-menu');
@@ -351,7 +352,12 @@ document.addEventListener('DOMContentLoaded', () => {
}
function startTournament() {
console.log("For now, do nothing, hurry up and work Senor chaku !!!!")
tournamentContainer.style.display = 'flex';
logo.style.display = 'none';
pongElements.style.display = 'none';
//menuButton.style.display = 'none';
formBlock.style.display = 'none';
startWebSocketConnection(token, 42);
}
function startWebSocketConnection(token, players) {
@@ -360,11 +366,14 @@ document.addEventListener('DOMContentLoaded', () => {
socket.onopen = function (event) {
console.log('WebSocket connection established');
if (players === 1) {
console.log("Sending token for 1 player game");
console.log("Sending token for a quick match game");
socket.send(JSON.stringify({ type: 'authenticate', token: token }));
} else {
console.log("Sending tokens for 2 player game");
} else if (players === 2) {
console.log("Sending tokens for a local game");
socket.send(JSON.stringify({ type: 'authenticate2', token_1: token, token_2: token2 }));
} else {
console.log("Sending token for a tournament game")
socket.send(JSON.stringify({ type: 'authenticate3', token: token }));
}
};
@@ -376,7 +385,7 @@ document.addEventListener('DOMContentLoaded', () => {
console.log('Entered the WAITING ROOM');
} else if (data.type === 'game_start') {
console.log('Game started:', data.game_id, '(', data.player1, 'vs', data.player2, ')');
startGame(data.game_id, data.player1, data.player2);
document.addEventListener('keydown', handleKeyDown);
} else if (data.type === 'game_state_update') {
updateGameState(data.game_state);
} else if (data.type === 'player_disconnected') {
@@ -385,6 +394,8 @@ document.addEventListener('DOMContentLoaded', () => {
console.log("Game ended:", data.game_id);
} else if (data.type === 'error') {
console.error(data.message);
} else if (data.type === 'update_waiting_room') {
document.getElementById('tournament-bracket').innerHTML = data.html;
} else {
console.log('Message from server:', data.type, data.message);
}
@@ -399,14 +410,6 @@ document.addEventListener('DOMContentLoaded', () => {
};
}
function startGame(gameCode, player1_name, player2_name) {
document.getElementById('gameCode').textContent = `Game Code: ${gameCode}`;
document.getElementById('player1-name').textContent = `${player1_name}`;
document.getElementById('player2-name').textContent = `${player2_name}`;
document.addEventListener('keydown', handleKeyDown);
}
function handleKeyDown(event) {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'w' || event.key === 's') {
//console.log('Key press: ', event.key);
@@ -427,24 +430,21 @@ document.addEventListener('DOMContentLoaded', () => {
}
function renderGame() {
const player1Pad = document.getElementById('player1-pad');
player1Pad.style.top = `${gameState.player1_position}px`;
document.getElementById('player1-name').textContent = `${gameState.player1_name}`;
document.getElementById('player2-name').textContent = `${gameState.player2_name}`;
const player2Pad = document.getElementById('player2-pad');
player2Pad.style.top = `${gameState.player2_position}px`;
document.getElementById('player1-pad').style.top = `${gameState.player1_position}px`;
document.getElementById('player2-pad').style.top = `${gameState.player2_position}px`;
const ball = document.getElementById('ball');
ball.style.left = `${gameState.ball_position.x}px`;
ball.style.top = `${gameState.ball_position.y}px`;
document.getElementById('ball').style.left = `${gameState.ball_position.x}px`;
document.getElementById('ball').style.top = `${gameState.ball_position.y}px`;
const player1Score = document.getElementById('player1-score');
player1Score.textContent = gameState.player1_score;
document.getElementById('player1-score').textContent = gameState.player1_score;
document.getElementById('player2-score').textContent = gameState.player2_score;
const player2Score = document.getElementById('player2-score');
player2Score.textContent = gameState.player2_score;
document.getElementById('game-text').textContent = gameState.game_text;
}
////////////////////////////// BEG BURGER BUTTON ////////////////////////////////
menuButton.addEventListener('click', toggleMenu);

4
pong/static/index.html
View File

@@ -111,8 +111,9 @@
</div>
</div>
<div id="tournament-bracket" style="display: none;"></div>
<div id="game1" style="display: none;">
<div id="gameCode" class="game-code">Game Code : </div>
<div id="player1-name" class="name">Player 1</div>
<div id="player2-name" class="name">Player 2</div>
<div id="game2">
@@ -121,6 +122,7 @@
<div id="player1-pad" class="pad"></div>
<div id="player2-pad" class="pad"></div>
<div id="ball"></div>
<div id="game-text" class="gameText"></div>
</div>
</div>

19
pong/static/styles.css
View File

@@ -59,20 +59,10 @@ button:hover {
align-items: center;
}
.game-code {
font-size: 24px;
position: absolute;
top: 10px;
}
#gameCode {
left: 10px;
}
.name {
font-size: 24px;
position: absolute;
top: 30px;
top: 20px;
}
#player1-name {
@@ -144,6 +134,13 @@ button:hover {
position: absolute;
}
#game-text {
font-size: 64px;
color: #00ffff;
position: absolute;
top: 150px;
}
.logo {
position: absolute;
top: 20px;