mirror of
https://github.com/AudebertAdrien/ft_transcendence.git
synced 2026-11-09 18:17:07 +01:00
added frontend, backend game logic v1
This commit is contained in:
CHIBOUB Chakib
201
pong/static/game.js
Normal file
201
pong/static/game.js
Normal file
@@ -0,0 +1,201 @@
|
||||
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;
|
||||
|
||||
checkNicknameButton.addEventListener('click', handleCheckNickname);
|
||||
registerButton.addEventListener('click', handleRegister);
|
||||
loginButton.addEventListener('click', handleLogin);
|
||||
|
||||
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';
|
||||
} else {
|
||||
authForm.style.display = 'none';
|
||||
registerForm.style.display = 'block';
|
||||
}
|
||||
} 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) {
|
||||
registerForm.style.display = 'none';
|
||||
gameContainer.style.display = 'flex';
|
||||
startGame();
|
||||
} 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 === '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;
|
||||
}
|
||||
|
||||
});
|
||||
42
pong/static/index.html
Normal file
42
pong/static/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pong Game</title>
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
|
||||
</head>
|
||||
<body>
|
||||
<div id="auth-form">
|
||||
<label for="nickname">Enter your nickname:</label>
|
||||
<input type="text" id="nickname" name="nickname">
|
||||
<button id="check-nickname">Check Nickname</button>
|
||||
</div>
|
||||
<div id="register-form" style="display: none;">
|
||||
<label for="password">Enter your password:</label>
|
||||
<input type="password" id="password" name="password">
|
||||
<label for="confirm-password">Confirm your password:</label>
|
||||
<input type="password" id="confirm-password" name="confirm-password">
|
||||
<button id="register">Register</button>
|
||||
</div>
|
||||
<div id="login-form" style="display: none;">
|
||||
<label for="login-password">Enter your password:</label>
|
||||
<input type="password" id="login-password" name="login-password">
|
||||
<button id="login">Login</button>
|
||||
</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">
|
||||
<div id="player1-score" class="score">0</div>
|
||||
<div id="player2-score" class="score">0</div>
|
||||
<div id="player1-pad" class="pad"></div>
|
||||
<div id="player2-pad" class="pad"></div>
|
||||
<div id="ball"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{% static 'game.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
113
pong/static/styles.css
Normal file
113
pong/static/styles.css
Normal file
@@ -0,0 +1,113 @@
|
||||
/* General styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #ffffff;
|
||||
background-color: #000000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
margin: 5px 0 20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#game1 {
|
||||
width: 810px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.game-code {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#gameCode {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
#player1-name {
|
||||
left: 10px; /* Adjust player score position */
|
||||
}
|
||||
|
||||
#player2-name {
|
||||
right: 10px; /* Adjust bot score position */
|
||||
}
|
||||
|
||||
#game2 {
|
||||
top: 60px;
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
border: 2px solid red; /* Add red border */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#player1-score {
|
||||
left: 50px; /* Adjust player score position */
|
||||
}
|
||||
|
||||
#player2-score {
|
||||
right: 50px; /* Adjust bot score position */
|
||||
}
|
||||
|
||||
.pad {
|
||||
width: 10px;
|
||||
height: 100px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#player1-pad {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#player2-pad {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#ball {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #ff0000;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
Reference in New Issue
Block a user