mirror of
https://github.com/AudebertAdrien/ft_transcendence.git
synced 2025-12-16 05:57:48 +01:00
318 lines
12 KiB
JavaScript
318 lines
12 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const checkNicknameButton = document.getElementById('check-nickname');
|
|
const registerButton = document.getElementById('register');
|
|
const loginButton = document.getElementById('login');
|
|
const authForm = document.getElementById('auth-form');
|
|
const gameContainer = document.getElementById('game1');
|
|
const nicknameInput = document.getElementById('nickname');
|
|
const passwordInput = document.getElementById('password');
|
|
const confirmPasswordInput = document.getElementById('confirm-password');
|
|
const loginPasswordInput = document.getElementById('login-password');
|
|
const loginForm = document.getElementById('login-form');
|
|
const registerForm = document.getElementById('register-form');
|
|
|
|
let socket;
|
|
let token;
|
|
let gameState;
|
|
|
|
// Auto-focus and key handling for AUTH-FORM
|
|
nicknameInput.focus();
|
|
nicknameInput.addEventListener('keypress', function(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
checkNicknameButton.click();
|
|
}
|
|
});
|
|
|
|
checkNicknameButton.addEventListener('click', handleCheckNickname);
|
|
registerButton.addEventListener('click', handleRegister);
|
|
loginButton.addEventListener('click', handleLogin);
|
|
|
|
|
|
/// THEOUCHE NOT CERTAIN ///
|
|
async function createPlayer(name, totalMatch = 0, totalWin = 0, pWin = null, mScoreMatch = null, mScoreAdvMatch = null, bestScore = 0, mNbrBallTouch = null, totalDuration = null, mDuration = null, numParticipatedTournaments = 0, numWonTournaments = 0) {
|
|
try {
|
|
const response = await fetch('/api/create_player/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
name,
|
|
total_match: totalMatch,
|
|
total_win: totalWin,
|
|
p_win: pWin,
|
|
m_score_match: mScoreMatch,
|
|
m_score_adv_match: mScoreAdvMatch,
|
|
best_score: bestScore,
|
|
m_nbr_ball_touch: mNbrBallTouch,
|
|
total_duration: totalDuration,
|
|
m_duration: mDuration,
|
|
num_participated_tournaments: numParticipatedTournaments,
|
|
num_won_tournaments: numWonTournaments
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || 'Network response was not ok');
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
|
|
} catch (error) {
|
|
// Afficher l'erreur avec un message plus spécifique
|
|
console.error('Error creating player:', error.message);
|
|
alert(`Failed to create player: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
async function createTournoi(name, nbr_player, date, winner_id) {
|
|
try {
|
|
const response = await fetch('/api/create_tournoi/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ name, nbr_player, date, winner_id })
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error('Error creating tournoi:', error);
|
|
}
|
|
}
|
|
|
|
async function createMatch(player1_id, player2_id, score_player1, score_player2, nbr_ball_touch_p1, nbr_ball_touch_p2, duration, is_tournoi, tournoi_id) {
|
|
try {
|
|
const response = await fetch('/api/create_match/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ player1_id, player2_id, score_player1, score_player2, nbr_ball_touch_p1, nbr_ball_touch_p2, duration, is_tournoi, tournoi_id })
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error('Error creating match:', error);
|
|
}
|
|
}
|
|
|
|
/// THEOUCHE NOT CERTAIN ///
|
|
|
|
async function handleCheckNickname() {
|
|
const nickname = nicknameInput.value.trim();
|
|
if (nickname) {
|
|
try {
|
|
const exists = await checkUserExists(nickname);
|
|
if (exists) {
|
|
authForm.style.display = 'none';
|
|
loginForm.style.display = 'block';
|
|
// Auto-focus and key handling for LOGIN-FORM
|
|
loginPasswordInput.focus();
|
|
loginPasswordInput.addEventListener('keypress', function(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
loginButton.click();
|
|
}
|
|
});
|
|
} else {
|
|
authForm.style.display = 'none';
|
|
registerForm.style.display = 'block';
|
|
// Auto-focus and key handling for REGISTER-FORM
|
|
passwordInput.focus();
|
|
passwordInput.addEventListener('keypress', function(event) {
|
|
if (event.key === 'Enter') {
|
|
confirmPasswordInput.focus();
|
|
confirmPasswordInput.addEventListener('keypress', function(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
registerButton.click();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking user existence:', error);
|
|
}
|
|
} else {
|
|
alert('Please enter a nickname.');
|
|
}
|
|
}
|
|
|
|
async function checkUserExists(username) {
|
|
const response = await fetch('/api/check_user_exists/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ username })
|
|
});
|
|
const data = await response.json();
|
|
return data.exists;
|
|
}
|
|
|
|
async function handleRegister() {
|
|
const nickname = nicknameInput.value.trim();
|
|
const password = passwordInput.value.trim();
|
|
const confirmPassword = confirmPasswordInput.value.trim();
|
|
|
|
if (password === confirmPassword) {
|
|
try {
|
|
const result = await registerUser(nickname, password);
|
|
if (result) {
|
|
//await createPlayer(nickname);
|
|
registerForm.style.display = 'none';
|
|
gameContainer.style.display = 'flex';
|
|
startWebSocketConnection(token);
|
|
} else {
|
|
alert('Registration failed. Please try again.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error registering user:', error);
|
|
}
|
|
} else {
|
|
alert('Passwords do not match.');
|
|
}
|
|
}
|
|
|
|
async function registerUser(username, password) {
|
|
const response = await fetch('/api/register_user/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
const data = await response.json();
|
|
if (data.registered) {
|
|
token = data.token;
|
|
}
|
|
return data.registered;
|
|
}
|
|
|
|
async function handleLogin() {
|
|
const nickname = nicknameInput.value.trim();
|
|
const password = loginPasswordInput.value.trim();
|
|
try {
|
|
const result = await authenticateUser(nickname, password);
|
|
if (result) {
|
|
loginForm.style.display = 'none';
|
|
gameContainer.style.display = 'flex';
|
|
startWebSocketConnection(token);
|
|
} else {
|
|
alert('Authentication failed. Please try again.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error authenticating user:', error);
|
|
}
|
|
}
|
|
|
|
async function authenticateUser(username, password) {
|
|
const response = await fetch('/api/authenticate_user/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
const data = await response.json();
|
|
if (data.authenticated) {
|
|
token = data.token;
|
|
}
|
|
return data.authenticated;
|
|
}
|
|
|
|
function startWebSocketConnection(token) {
|
|
socket = new WebSocket(`ws://${window.location.host}/ws/game/`);
|
|
|
|
socket.onopen = function (event) {
|
|
console.log('WebSocket connection established');
|
|
socket.send(JSON.stringify({ type: 'authenticate', token: token }));
|
|
};
|
|
|
|
socket.onmessage = function (event) {
|
|
const data = JSON.parse(event.data);
|
|
if (data.type === 'authenticated') {
|
|
console.log('Authentication successful');
|
|
} else if (data.type === 'waiting_room') {
|
|
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);
|
|
} else if (data.type === 'game_state_update') {
|
|
updateGameState(data.game_state);
|
|
} else if (data.type === 'player_disconnected') {
|
|
console.log("Player disconnected:", data.player);
|
|
} else if (data.type === 'game_ended') {
|
|
console.log("Game ended:", data.game_id);
|
|
} else if (data.type === 'error') {
|
|
console.error(data.message);
|
|
} else {
|
|
console.log('Message from server:', data.type, data.message);
|
|
}
|
|
};
|
|
|
|
socket.onclose = function (event) {
|
|
console.log('WebSocket connection closed');
|
|
};
|
|
|
|
socket.onerror = function (error) {
|
|
console.error('WebSocket error:', error);
|
|
};
|
|
}
|
|
|
|
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') {
|
|
sendKeyPress(event.key.toLowerCase());
|
|
}
|
|
}
|
|
|
|
function sendKeyPress(key) {
|
|
if (socket.readyState === WebSocket.OPEN) {
|
|
socket.send(JSON.stringify({ type: 'key_press', key }));
|
|
}
|
|
}
|
|
|
|
function updateGameState(newState) {
|
|
gameState = newState;
|
|
renderGame();
|
|
}
|
|
|
|
function renderGame() {
|
|
const player1Pad = document.getElementById('player1-pad');
|
|
player1Pad.style.top = `${gameState.player1_position}px`;
|
|
|
|
const player2Pad = document.getElementById('player2-pad');
|
|
player2Pad.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`;
|
|
|
|
const player1Score = document.getElementById('player1-score');
|
|
player1Score.textContent = gameState.player1_score;
|
|
|
|
const player2Score = document.getElementById('player2-score');
|
|
player2Score.textContent = gameState.player2_score;
|
|
}
|
|
|
|
});
|