Ladebeze66/ft_transcendence
1
0
Fork 0
mirror of https://github.com/AudebertAdrien/ft_transcendence.git synced 2025-12-16 14:07:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Flag resolved

Browse Source
This commit is contained in:
Theouche 2024-08-21 16:37:20 +02:00
parent 5433da77ed
commit 7670e6649e
3 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
pong/static/game.js
View File

@ -275,6 +275,9 @@ document.addEventListener('DOMContentLoaded', () => {
player2Score.textContent = gameState.player2_score;
}
////////////////////////////// BEG BURGER BUTTON ////////////////////////////////
menuButton.addEventListener('click', toggleMenu);
function toggleMenu() {
@ -287,7 +290,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
const links = document.querySelectorAll('#dropdown-menu a');
//console.log(links);
links.forEach(link => {
link.addEventListener('click', (event) => {
@ -447,6 +449,27 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
////////////////////////////// END BURGER BUTTON ////////////////////////////////
////////////////////////////// BEG STARS ////////////////////////////////
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);
}
////////////////////////////// END STARS ////////////////////////////////
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
@ -470,6 +493,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
////////////////////////////// BEG LANGAGE ////////////////////////////////
const translations = {
fr: {
welcome: "BIENVENUE DANS LE PONG 42",
@ -508,26 +532,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
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);
}
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days*24*60*60*1000));
@ -570,9 +574,21 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
document.getElementById('lang-fr').addEventListener('click', () => changeLanguage('fr'));
document.getElementById('lang-en').addEventListener('click', () => changeLanguage('en'));
document.getElementById('lang-it').addEventListener('click', () => changeLanguage('it'));
document.getElementById('lang-es').addEventListener('click', () => changeLanguage('es'));
document.getElementById('lang-de').addEventListener('click', () => changeLanguage('de'));
// Set the language when the page loads
window.onload = setLanguageFromCookie;
////////////////////////////// END LANGAGE ////////////////////////////////
////////////////////////////// BEG SETTING ////////////////////////////////
document.getElementById('settings-btn').addEventListener('click', function() {
document.getElementById('settings-menu').style.display = 'block';
});
@ -597,4 +613,6 @@ document.addEventListener('DOMContentLoaded', () => {
document.body.style.fontSize = this.value + 'px';
});
////////////////////////////// END SETTING ////////////////////////////////
});

12
pong/static/index.html
View File

@ -6,7 +6,7 @@
<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">
<link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}?v=2">
<div class="logo">
<img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
</div>
@ -22,11 +22,11 @@
</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')">
<img id="lang-fr" src="{% static 'flags/fr.svg' %}" alt="Français">
<img id="lang-en" src="{% static 'flags/us.svg' %}" alt="English">
<img id="lang-it" src="{% static 'flags/it.svg' %}" alt="Italiano">
<img id="lang-es" src="{% static 'flags/es.svg' %}" alt="Español">
<img id="lang-de" src="{% static 'flags/de.svg' %}" alt="Deutsch">
</div>
<div class="background">
<div class="stars" id="stars"></div>

2
pong/static/styles.css
View File

@ -264,7 +264,7 @@ button:hover {
.navbar {
position: absolute;
top: 10px;
top: 30px;
right: 10px;
padding: 10px;
}