mirror of
https://github.com/AudebertAdrien/ft_transcendence.git
synced 2025-12-16 14:07:49 +01:00
pb
This commit is contained in:
Theouche
commit
9fe4e51c53
5
makefile
5
makefile
@ -28,11 +28,11 @@ destroy:
|
||||
logs:
|
||||
$(COMPOSE) logs -f $(CONTAINER)
|
||||
|
||||
re: destroy up
|
||||
|
||||
ps:
|
||||
$(COMPOSE) ps
|
||||
|
||||
re: destroy up
|
||||
|
||||
db-shell:
|
||||
$(COMPOSE) exec db psql -U 42student players_db
|
||||
|
||||
@ -48,4 +48,3 @@ help:
|
||||
@echo " make logs [c=service] # Tail logs of containers"
|
||||
@echo " make ps # List containers"
|
||||
@echo " make help # Show this help"
|
||||
|
||||
|
||||
@ -15,11 +15,6 @@ from django.views.decorators.csrf import csrf_exempt
|
||||
import json
|
||||
import uuid
|
||||
|
||||
|
||||
def index(request):
|
||||
return render(request, 'index.html')
|
||||
|
||||
|
||||
@csrf_exempt
|
||||
def register_user(request):
|
||||
if request.method == 'POST':
|
||||
|
||||
@ -10,6 +10,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const loginPasswordInput = document.getElementById('login-password');
|
||||
const loginForm = document.getElementById('login-form');
|
||||
const registerForm = document.getElementById('register-form');
|
||||
const formBlock = document.getElementById('block-form');
|
||||
|
||||
|
||||
let socket;
|
||||
let token;
|
||||
@ -29,85 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
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) {
|
||||
@ -173,6 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
//await createPlayer(nickname);
|
||||
registerForm.style.display = 'none';
|
||||
gameContainer.style.display = 'flex';
|
||||
formBlock.style.display = 'none';
|
||||
startWebSocketConnection(token);
|
||||
} else {
|
||||
alert('Registration failed. Please try again.');
|
||||
@ -208,6 +132,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (result) {
|
||||
loginForm.style.display = 'none';
|
||||
gameContainer.style.display = 'flex';
|
||||
formBlock.style.display = 'none';
|
||||
startWebSocketConnection(token);
|
||||
} else {
|
||||
alert('Authentication failed. Please try again.');
|
||||
@ -280,6 +205,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
function handleKeyDown(event) {
|
||||
console.log('Key press: ', event.key);
|
||||
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
||||
sendKeyPress(event.key.toLowerCase());
|
||||
}
|
||||
|
||||
@ -1,13 +1,31 @@
|
||||
{% 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' %}">
|
||||
<div class="logo">
|
||||
<img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
|
||||
</div>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background">
|
||||
<div class="stars" id="stars"></div>
|
||||
</div>
|
||||
<div class="pong-elements">
|
||||
<div class="paddle paddle-left"></div>
|
||||
<div class="paddle paddle-right"></div>
|
||||
<div class="ball_anim"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="block-form">
|
||||
<h1>BIENVENUE DANS LE PONG 42</h1>
|
||||
<div class="input-container">
|
||||
<div id="auth-form">
|
||||
<label for="nickname">Enter your nickname:</label>
|
||||
<input type="text" id="nickname" name="nickname">
|
||||
@ -25,6 +43,9 @@
|
||||
<input type="password" id="login-password" name="login-password">
|
||||
<button id="login">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@ -38,5 +59,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<script src="{% static 'game.js' %}"></script>
|
||||
<script>
|
||||
const starsContainer = document.getElementById('stars');
|
||||
for (let i = 0; i < 500; i++) {
|
||||
const star = document.createElement('div');
|
||||
star.className = 'star';
|
||||
star.style.width = `${Math.random() * 3}px`;
|
||||
star.style.height = star.style.width;
|
||||
star.style.left = `${Math.random() * 100}%`;
|
||||
star.style.top = `${Math.random() * 100}%`;
|
||||
star.style.animationDuration = `${Math.random() * 2 + 1}s`;
|
||||
starsContainer.appendChild(star);
|
||||
}
|
||||
|
||||
setInterval(createTrail, 100);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
pong/static/logo-42-perpignan.png
Normal file
BIN
pong/static/logo-42-perpignan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@ -1,15 +1,18 @@
|
||||
/* General styles */
|
||||
body {
|
||||
body,
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #ffffff;
|
||||
background-color: #000000;
|
||||
color: #00ffff;
|
||||
background-color: #0a0a2a;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
@ -23,8 +26,23 @@ input {
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #00ffff;
|
||||
color: #000033;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 10px;
|
||||
margin-top: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #000033;
|
||||
color: #00ffff;
|
||||
box-shadow: 0 0 20px #00ffff;
|
||||
}
|
||||
|
||||
#game1 {
|
||||
@ -32,6 +50,8 @@ button {
|
||||
height: 500px;
|
||||
position: relative;
|
||||
background-color: #000;
|
||||
border: 3px solid #00ffff;
|
||||
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -55,11 +75,13 @@ button {
|
||||
}
|
||||
|
||||
#player1-name {
|
||||
left: 10px; /* Adjust player score position */
|
||||
left: 10px;
|
||||
/* Adjust player score position */
|
||||
}
|
||||
|
||||
#player2-name {
|
||||
right: 10px; /* Adjust bot score position */
|
||||
right: 10px;
|
||||
/* Adjust bot score position */
|
||||
}
|
||||
|
||||
#game2 {
|
||||
@ -69,7 +91,8 @@ button {
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
border: 2px solid red; /* Add red border */
|
||||
border: 2px solid white;
|
||||
/* Add red border */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -82,11 +105,13 @@ button {
|
||||
}
|
||||
|
||||
#player1-score {
|
||||
left: 50px; /* Adjust player score position */
|
||||
left: 50px;
|
||||
/* Adjust player score position */
|
||||
}
|
||||
|
||||
#player2-score {
|
||||
right: 50px; /* Adjust bot score position */
|
||||
right: 50px;
|
||||
/* Adjust bot score position */
|
||||
}
|
||||
|
||||
.pad {
|
||||
@ -107,7 +132,122 @@ button {
|
||||
#ball {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #ff0000;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
font-size: 3rem;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 15px #00ffff;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 2s infinite alternate;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pong-elements {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.paddle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
background-color: #00ffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 15px #00ffff;
|
||||
}
|
||||
|
||||
.paddle-left {
|
||||
left: 50px;
|
||||
animation: paddleMove 5s infinite alternate ease-in-out;
|
||||
}
|
||||
|
||||
.paddle-right {
|
||||
right: 50px;
|
||||
animation: paddleMove 4s infinite alternate-reverse ease-in-out;
|
||||
}
|
||||
|
||||
.ball_anim {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #00ffff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20px #00ffff;
|
||||
left: 80px;
|
||||
top: 50%;
|
||||
transform-style: preserve-3d;
|
||||
animation: ballMove 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes paddleMove {
|
||||
0% {
|
||||
transform: translateY(10vh);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(70vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ballMove {
|
||||
0% {
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateZ(-500px) scale(0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 40, 0.8);
|
||||
padding: 3rem;
|
||||
border-radius: 15px;
|
||||
border: 3px solid #00ffff;
|
||||
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 80%;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user