mirror of
https://github.com/AudebertAdrien/ft_transcendence.git
synced 2025-12-18 06:57:48 +01:00
489 lines
18 KiB
HTML
489 lines
18 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<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' %}?v=1">
|
|
<div class="logo">
|
|
<img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
|
|
</div>
|
|
<style>
|
|
.language-switcher {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.language-switcher img {
|
|
width: 30px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
color: rgb(0, 255, 255); /* Valeur par défaut */
|
|
font-family: Arial, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
<style>
|
|
#settings-btn {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
border: none;
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
#settings-menu {
|
|
position: fixed;
|
|
bottom: 50px;
|
|
right: 10px;
|
|
padding: 20px;
|
|
background-color: rgb(66, 63, 63);
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
width: 250px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#close-settings {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgb(0,0,0);
|
|
background-color: rgba(0,0,0,0.4);
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 5% auto;
|
|
padding: 20px;
|
|
border: 5px solid #888;
|
|
width: 80%;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="language-switcher">
|
|
<img src="{% static 'flags/fr.svg' %}" alt="Français" onclick="changeLanguage('fr')">
|
|
<img src="{% static 'flags/us.svg' %}" alt="English" onclick="changeLanguage('en')">
|
|
<img src="{% static 'flags/it.svg' %}" alt="Italiano" onclick="changeLanguage('it')">
|
|
<img src="{% static 'flags/es.svg' %}" alt="Español" onclick="changeLanguage('es')">
|
|
<img src="{% static 'flags/de.svg' %}" alt="Deutsch" onclick="changeLanguage('de')">
|
|
</div>
|
|
<div class="background">
|
|
<div class="stars" id="stars"></div>
|
|
</div>
|
|
<div id="pong-elements" style="display: flex;">
|
|
<div class="paddle paddle-left"></div>
|
|
<div class="paddle paddle-right"></div>
|
|
<div class="ball_anim"></div>
|
|
</div>
|
|
|
|
<button id="settings-btn">⚙️ Réglages</button>
|
|
<div id="settings-menu" style="display: none;">
|
|
<button id="close-settings">✖️</button>
|
|
<h2>Reglages</h2>
|
|
<label for="color-picker">Couleur:</label>
|
|
<input type="color" id="color-picker">
|
|
<br>
|
|
<label for="font-selector">Police:</label>
|
|
<select id="font-selector">
|
|
<option value="Arial">Arial</option>
|
|
<option value="Verdana">Verdana</option>
|
|
<option value="Times New Roman">Times New Roman</option>
|
|
<option value="Courier New">Courier New</option>
|
|
</select>
|
|
<br>
|
|
<label for="font-size-slider">Taille:</label>
|
|
<input type="range" id="font-size-slider" min="12" max="36" value="16">
|
|
</div>
|
|
|
|
|
|
<button id="myBtn">Resultat</button>
|
|
<div id="myModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<pre id="jsonContent"></pre>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var modal = document.getElementById("myModal");
|
|
var btn = document.getElementById("myBtn");
|
|
var span = document.getElementsByClassName("close")[0];
|
|
var jsonContent = document.getElementById("jsonContent");
|
|
btn.onclick = function() {
|
|
fetch('/web3/')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
jsonContent.textContent = JSON.stringify(data, null, 2);
|
|
modal.style.display = "block";
|
|
});
|
|
}
|
|
span.onclick = function() {
|
|
modal.style.display = "none";
|
|
}
|
|
window.onclick = function(event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="container" id="block-form">
|
|
<h1 id="welcome">BIENVENUE DANS LE PONG 42</h1>
|
|
<div class="input-container">
|
|
<div id="auth-form">
|
|
<label for="nickname" id="label-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" id="label-password">Enter your password:</label>
|
|
<input type="password" id="password" name="password">
|
|
<label for="confirm-password" id="label-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" id="label-login-password">Enter your password:</label>
|
|
<input type="password" id="login-password" name="login-password">
|
|
<button id="login">Login</button>
|
|
</div>
|
|
<div id="post-form-buttons" style="display: none;">
|
|
<button id="quick-match">Quick Match</button>
|
|
<button id="tournament">Tournament</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar">
|
|
<button class="burger-menu">☰</button>
|
|
<div id="dropdown-menu" class="dropdown-content">
|
|
<a href="#" data-table="player-list">Players</a>
|
|
<a href="#" data-table="match-list">Matches</a>
|
|
<a href="#" data-table="tournoi-list">Tournois</a>
|
|
<a href="#" data-table="blockchain-list">blockchain</a>
|
|
</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>
|
|
<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>
|
|
|
|
<div id="match-list" class="content-list" style="display: none;">
|
|
<h1>Matches</h1>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Player 1</th>
|
|
<th>Player 2</th>
|
|
<th>Score Player 1</th>
|
|
<th>Score Player 2</th>
|
|
<th>Winner</th>
|
|
<th>Ball Touches Player 1</th>
|
|
<th>Ball Touches Player 2</th>
|
|
<th>Duration</th>
|
|
<th>Date</th>
|
|
<th>Is Tournament</th>
|
|
<th>Tournament</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for match in matches %}
|
|
<tr>
|
|
<td>{{ match.id }}</td>
|
|
<td>{{ match.player1.name }}</td>
|
|
<td>{{ match.player2.name }}</td>
|
|
<td>{{ match.score_player1 }}</td>
|
|
<td>{{ match.score_player2 }}</td>
|
|
<td>{{ match.winner.name }}</td>
|
|
<td>{{ match.nbr_ball_touch_p1 }}</td>
|
|
<td>{{ match.nbr_ball_touch_p2 }}</td>
|
|
<td>{{ match.duration }}</td>
|
|
<td>{{ match.date }}</td>
|
|
<td>{{ match.is_tournoi }}</td>
|
|
<td>{{ match.tournoi.name }}</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="12">No matches found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="player-list" class="content-list" style="display: none;">
|
|
<h1>Players</h1>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Total Matches</th>
|
|
<th>Total Wins</th>
|
|
<th>Win Percentage</th>
|
|
<th>Average Match Score</th>
|
|
<th>Average Opponent Score</th>
|
|
<th>Best Score</th>
|
|
<th>Average Ball Touches</th>
|
|
<th>Total Duration</th>
|
|
<th>Average Duration</th>
|
|
<th>Participated Tournaments</th>
|
|
<th>Won Tournaments</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for player in players %}
|
|
<tr>
|
|
<td>{{ player.id }}</td>
|
|
<td>{{ player.name }}</td>
|
|
<td>{{ player.total_match }}</td>
|
|
<td>{{ player.total_win }}</td>
|
|
<td>{{ player.p_win }}</td>
|
|
<td>{{ player.m_score_match }}</td>
|
|
<td>{{ player.m_score_adv_match }}</td>
|
|
<td>{{ player.best_score }}</td>
|
|
<td>{{ player.m_nbr_ball_touch }}</td>
|
|
<td>{{ player.total_duration }}</td>
|
|
<td>{{ player.m_duration }}</td>
|
|
<td>{{ player.num_participated_tournaments }}</td>
|
|
<td>{{ player.num_won_tournaments }}</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="13">No players found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tournoi-list" class="content-list" style="display: none;">
|
|
<h1>Tournois</h1>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Nbr_players</th>
|
|
<th>Date</th>
|
|
<th>Winner</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for tournoi in tournois %}
|
|
<tr>
|
|
<td>{{ tournoi.id }}</td>
|
|
<td>{{ tournoi.name }}</td>
|
|
<td>{{ tournoi.nbr_player }}</td>
|
|
<td>{{ tournoi.date }}</td>
|
|
<td>{{ tournoi.winner.name }}</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="14">No tournois found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script src="{% static 'game.js' %}"></script>
|
|
<script>
|
|
const translations = {
|
|
fr: {
|
|
welcome: "BIENVENUE DANS LE PONG 42",
|
|
labelNickname: "Entrez votre surnom:",
|
|
labelPassword: "Entrez votre mot de passe:",
|
|
labelConfirmPassword: "Confirmez votre mot de passe:",
|
|
labelLoginPassword: "Entrez votre mot de passe:"
|
|
},
|
|
en: {
|
|
welcome: "WELCOME TO PONG 42",
|
|
labelNickname: "Enter your nickname:",
|
|
labelPassword: "Enter your password:",
|
|
labelConfirmPassword: "Confirm your password:",
|
|
labelLoginPassword: "Enter your password:"
|
|
},
|
|
it: {
|
|
welcome: "BENVENUTO A PONG 42",
|
|
labelNickname: "Inserisci il tuo soprannome:",
|
|
labelPassword: "Inserisci la tua password:",
|
|
labelConfirmPassword: "Conferma la tua password:",
|
|
labelLoginPassword: "Inserisci la tua password:"
|
|
},
|
|
es: {
|
|
welcome: "BIENVENIDO A PONG 42",
|
|
labelNickname: "Introduce tu apodo:",
|
|
labelPassword: "Introduce tu contraseña:",
|
|
labelConfirmPassword: "Confirma tu contraseña:",
|
|
labelLoginPassword: "Introduce tu contraseña:"
|
|
},
|
|
de: {
|
|
welcome: "WILLKOMMEN BEI PONG 42",
|
|
labelNickname: "Geben Sie Ihren Spitznamen ein:",
|
|
labelPassword: "Geben Sie Ihr Passwort ein:",
|
|
labelConfirmPassword: "Bestätigen Sie Ihr Passwort:",
|
|
labelLoginPassword: "Geben Sie Ihr Passwort ein:"
|
|
}
|
|
};
|
|
|
|
function changeLanguage(lang) {
|
|
document.getElementById('welcome').innerText = translations[lang].welcome;
|
|
document.getElementById('label-nickname').innerText = translations[lang].labelNickname;
|
|
document.getElementById('label-password').innerText = translations[lang].labelPassword;
|
|
document.getElementById('label-confirm-password').innerText = translations[lang].labelConfirmPassword;
|
|
document.getElementById('label-login-password').innerText = translations[lang].labelLoginPassword;
|
|
}
|
|
|
|
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);
|
|
}
|
|
</script>
|
|
<script>
|
|
function setCookie(name, value, days) {
|
|
const d = new Date();
|
|
d.setTime(d.getTime() + (days*24*60*60*1000));
|
|
const expires = "expires=" + d.toUTCString();
|
|
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
|
}
|
|
|
|
function getCookie(name) {
|
|
const cname = name + "=";
|
|
const decodedCookie = decodeURIComponent(document.cookie);
|
|
const ca = decodedCookie.split(';');
|
|
for(let i = 0; i < ca.length; i++) {
|
|
let c = ca[i];
|
|
while (c.charAt(0) === ' ') {
|
|
c = c.substring(1);
|
|
}
|
|
if (c.indexOf(cname) === 0) {
|
|
return c.substring(cname.length, c.length);
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
|
|
function changeLanguage(lang) {
|
|
setCookie('preferredLanguage', lang, 365); // Store the language preference for 1 year
|
|
document.getElementById('welcome').innerText = translations[lang].welcome;
|
|
document.getElementById('label-nickname').innerText = translations[lang].labelNickname;
|
|
document.getElementById('label-password').innerText = translations[lang].labelPassword;
|
|
document.getElementById('label-confirm-password').innerText = translations[lang].labelConfirmPassword;
|
|
document.getElementById('label-login-password').innerText = translations[lang].labelLoginPassword;
|
|
}
|
|
|
|
// Function to set the language based on the cookie
|
|
function setLanguageFromCookie() {
|
|
const preferredLanguage = getCookie('preferredLanguage');
|
|
if (preferredLanguage && translations[preferredLanguage]) {
|
|
changeLanguage(preferredLanguage);
|
|
} else {
|
|
changeLanguage('fr'); // Default to French if no cookie is found
|
|
}
|
|
}
|
|
|
|
// Set the language when the page loads
|
|
window.onload = setLanguageFromCookie;
|
|
</script>
|
|
<script>
|
|
document.getElementById('settings-btn').addEventListener('click', function() {
|
|
document.getElementById('settings-menu').style.display = 'block';
|
|
});
|
|
|
|
document.getElementById('close-settings').addEventListener('click', function() {
|
|
document.getElementById('settings-menu').style.display = 'none';
|
|
});
|
|
|
|
// Change the color of the text
|
|
document.getElementById('color-picker').addEventListener('input', function() {
|
|
document.body.style.color = this.value;
|
|
document.querySelectorAll('button').forEach(function(button) {
|
|
button.style.backgroundColor = this.value; // Change la couleur de fond des boutons
|
|
}, this);
|
|
});
|
|
|
|
document.getElementById('font-selector').addEventListener('change', function() {
|
|
document.body.style.fontFamily = this.value;
|
|
});
|
|
|
|
document.getElementById('font-size-slider').addEventListener('input', function() {
|
|
document.body.style.fontSize = this.value + 'px';
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|