mirror of
https://github.com/AudebertAdrien/ft_transcendence.git
synced 2025-12-16 14:07:49 +01:00
add bouton pour quick match et tournament
This commit is contained in:
Theouche
parent
e0aa8ea3e8
commit
ad97ba7cb0
@ -12,9 +12,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const loginForm = document.getElementById('login-form');
|
||||
const registerForm = document.getElementById('register-form');
|
||||
const formBlock = document.getElementById('block-form');
|
||||
//const viewSelector = document.getElementById('view-selector');
|
||||
//const viewPlayersButton = document.getElementById('view-players');
|
||||
//const viewMatchesButton = document.getElementById('view-matches');
|
||||
const menuButton = document.querySelector('.burger-menu');
|
||||
const playerList = document.getElementById('player-list');
|
||||
const matchList = document.getElementById('match-list');
|
||||
@ -24,6 +21,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const pongElements = document.getElementById('pong-elements');
|
||||
const logo = document.querySelector('.logo');
|
||||
|
||||
const quickMatchButton = document.getElementById('quick-match');
|
||||
const tournamentButton = document.getElementById('tournament');
|
||||
|
||||
let socket;
|
||||
let token;
|
||||
let gameState;
|
||||
@ -41,6 +41,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
registerButton.addEventListener('click', handleRegister);
|
||||
loginButton.addEventListener('click', handleLogin);
|
||||
|
||||
quickMatchButton.addEventListener('click', startQuickMatch);
|
||||
tournamentButton.addEventListener('click', startTournament);
|
||||
|
||||
|
||||
|
||||
async function handleCheckNickname() {
|
||||
const nickname = nicknameInput.value.trim();
|
||||
if (nickname) {
|
||||
@ -104,11 +109,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const result = await registerUser(nickname, password);
|
||||
if (result) {
|
||||
registerForm.style.display = 'none';
|
||||
gameContainer.style.display = 'flex';
|
||||
formBlock.style.display = 'none';
|
||||
logo.style.display = 'none';
|
||||
//gameContainer.style.display = 'flex';
|
||||
//formBlock.style.display = 'none';
|
||||
//logo.style.display = 'none';
|
||||
pongElements.style.display = 'none';
|
||||
startWebSocketConnection(token);
|
||||
console.log("new button must appear !");
|
||||
document.getElementById("post-form-buttons").style.display = 'block';
|
||||
//startWebSocketConnection(token);
|
||||
} else {
|
||||
alert('Registration failed. Please try again.');
|
||||
}
|
||||
@ -133,7 +140,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
token = data.token;
|
||||
}
|
||||
return data.registered;
|
||||
}
|
||||
}quickMatchButton.style.display = 'block';
|
||||
tournamentButton.style.display = 'block';
|
||||
|
||||
async function handleLogin() {
|
||||
const nickname = nicknameInput.value.trim();
|
||||
@ -142,11 +150,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const result = await authenticateUser(nickname, password);
|
||||
if (result) {
|
||||
loginForm.style.display = 'none';
|
||||
gameContainer.style.display = 'flex';
|
||||
formBlock.style.display = 'none';
|
||||
logo.style.display = 'none';
|
||||
pongElements.style.display = 'none';
|
||||
startWebSocketConnection(token);
|
||||
//gameContainer.style.display = 'flex';
|
||||
//formBlock.style.display = 'none';
|
||||
//logo.style.display = 'none';
|
||||
//pongElements.style.display = 'none';
|
||||
console.log("new button must appear !");
|
||||
document.getElementById("post-form-buttons").style.display = 'block';
|
||||
//startWebSocketConnection(token);
|
||||
} else {
|
||||
alert('Authentication failed. Please try again.');
|
||||
}
|
||||
@ -155,6 +165,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
function startQuickMatch() {
|
||||
gameContainer.style.display = 'flex';
|
||||
logo.style.display = 'none';
|
||||
menuButton.style.display = 'none';
|
||||
formBlock.style.display = 'none';
|
||||
startWebSocketConnection(token);
|
||||
}
|
||||
|
||||
function startTournament() {
|
||||
console.log("For now, do nothing, hurry up and work Senor chaku !!!!")
|
||||
}
|
||||
|
||||
async function authenticateUser(username, password) {
|
||||
const response = await fetch('/authenticate_user/', {
|
||||
method: 'POST',
|
||||
@ -254,27 +276,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
player2Score.textContent = gameState.player2_score;
|
||||
}
|
||||
|
||||
// viewSelector.addEventListener('change', function() {
|
||||
// const selectedView = this.value;
|
||||
|
||||
// Masquer les deux listes par défaut
|
||||
// playerList.style.display = 'none';
|
||||
// matchList.style.display = 'none';
|
||||
|
||||
// Afficher la liste sélectionnée
|
||||
// if (selectedView === 'player-list') {
|
||||
// playerList.style.display = 'block';
|
||||
// fetchPlayers();
|
||||
//} else if (selectedView === 'match-list') {
|
||||
// matchList.style.display = 'block';
|
||||
// fetchMatches();
|
||||
//}
|
||||
//})
|
||||
|
||||
//if (menuButton) {
|
||||
//console.log("menu bouton ok")
|
||||
menuButton.addEventListener('click', toggleMenu);
|
||||
//}
|
||||
|
||||
function toggleMenu() {
|
||||
console.log('Menu toggled');
|
||||
|
||||
@ -10,117 +10,9 @@
|
||||
<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>
|
||||
@ -129,57 +21,6 @@
|
||||
<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">
|
||||
@ -200,6 +41,10 @@
|
||||
<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>
|
||||
|
||||
@ -347,136 +192,6 @@
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user