+
Players
+
@@ -131,45 +172,36 @@
- {% for player in players %}
-
- {{ player.id }}
- {{ player.name }}
- {{ player.total_match }}
- {{ player.total_win }}
- {{ player.p_win }}
- {{ player.m_score_match }}
- {{ player.m_score_adv_match }}
- {{ player.best_score }}
- {{ player.m_nbr_ball_touch }}
- {{ player.total_duration }}
- {{ player.m_duration }}
- {{ player.num_participated_tournaments }}
- {{ player.num_won_tournaments }}
-
- {% empty %}
-
- No players found.
-
- {% endfor %}
-
+
+
Générer le graphique
+
+
+
Tournois
+
+
+
+ ID
+ Name
+ Nbr_players
+ Date
+ Winner
+
+
+
+
+
+
+
+
+
+
+
-
+
+
diff --git a/pong/static/language.js b/pong/static/language.js
new file mode 100644
index 0000000..dd5b518
--- /dev/null
+++ b/pong/static/language.js
@@ -0,0 +1,113 @@
+document.addEventListener('DOMContentLoaded', () => {
+ 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 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);
+ 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 setLanguageFromCookie() {
+ const preferredLanguage = getCookie('preferredLanguage');
+ if (preferredLanguage && translations[preferredLanguage]) {
+ changeLanguage(preferredLanguage);
+ } else {
+ changeLanguage('fr'); // Default to French if no cookie is found
+ }
+ }
+
+ 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'));
+
+ window.onload = setLanguageFromCookie;
+
+ 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';
+ });
+
+
+ document.getElementById('color-picker').addEventListener('input', function() {
+ document.body.style.color = this.value;
+ document.querySelectorAll('button').forEach(function(button) {
+ button.style.backgroundColor = this.value;
+ }, 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';
+ });
+
+});
\ No newline at end of file
diff --git a/pong/static/styles.css b/pong/static/styles.css
index 19a2666..38d78f0 100644
--- a/pong/static/styles.css
+++ b/pong/static/styles.css
@@ -1,5 +1,4 @@
/* General styles */
-body,
html {
font-family: Arial, sans-serif;
@@ -12,10 +11,10 @@ html {
align-items: center;
justify-content: center;
height: 100%;
- overflow: hidden;
-
+ overflow: auto;
}
+
label {
margin: 10px 0 5px;
}
@@ -59,20 +58,10 @@ button:hover {
align-items: center;
}
-.game-code {
- font-size: 24px;
- position: absolute;
- top: 10px;
-}
-
-#gameCode {
- left: 10px;
-}
-
.name {
font-size: 24px;
position: absolute;
- top: 30px;
+ top: 20px;
}
#player1-name {
@@ -144,6 +133,13 @@ button:hover {
position: absolute;
}
+#game-text {
+ font-size: 64px;
+ color: #00ffff;
+ position: absolute;
+ top: 150px;
+}
+
.logo {
position: absolute;
top: 20px;
@@ -259,12 +255,14 @@ button:hover {
position: relative;
z-index: 10;
max-width: 80%;
+ overflow: auto;
}
+
.navbar {
position: absolute;
- top: 0;
- right: 0;
+ top: 30px;
+ right: 10px;
padding: 10px;
}
@@ -272,28 +270,203 @@ button:hover {
font-size: 24px;
background: none;
border: none;
- color: white;
+ color: #00ffff;
cursor: pointer;
+ transition: color 0.3s ease;
+}
+
+.burger-menu:hover {
+ color: #ffffff;
}
.dropdown-content {
display: none;
position: absolute;
+ top: 100%;
right: 0;
- background-color: #f9f9f9;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ margin-top: 10px;
+ background-color: #1a1a2e;
+ color: #ffffff;
+ box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
z-index: 1;
+ width: max-content;
}
-.dropdown-content a {
- color: black;
- padding: 12px 16px;
- text-decoration: none;
+.dropdown-content.show {
display: block;
}
-.dropdown-content a:hover {
- background-color: #f1f1f1;
+.dropdown-content a {
+ color: #ffffff;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: background-color 0.3s ease;
}
-.show {display: block;}
\ No newline at end of file
+.dropdown-content a:hover {
+ background-color: #333;
+ color: #00ffff;
+}
+
+.language-switcher {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ display: flex;
+ gap: 10px;
+}
+
+.language-switcher img {
+ width: 30px;
+ height: 20px;
+ cursor: pointer;
+}
+
+#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;
+}
+
+.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;
+}
+/*
+.tournament-waiting-room {
+ background-color: rgba(0, 0, 0, 0.6);
+ padding: 20px;
+ border-radius: 15px;
+ color: #00ffff;
+ width: 50%;
+ margin: auto;
+ text-align: center;
+ box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
+
+}
+
+.tournament-waiting-room h2 {
+ font-family: 'Arial', sans-serif;
+ font-size: 2em;
+ margin-bottom: 15px;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+}
+
+.tournament-waiting-room p {
+ font-family: 'Verdana', sans-serif;
+ font-size: 1.2em;
+ margin-bottom: 20px;
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.tournament-waiting-room ul {
+ list-style-type: none;
+ padding: 0;
+}
+*/
+body {
+ color: rgb(0, 255, 255); /* Valeur par défaut */
+ font-family: Arial, sans-serif;
+ font-size: 16px;
+}
+
+canvas {
+ max-width: 100%;
+ height: auto;
+ margin-top: 20px;
+}
+
+#game-controls {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ margin-bottom: 10px;
+}
+
+#game-controls button {
+ background-color: #00ffff;
+ color: #000033;
+ border: none;
+ padding: 1rem 2rem;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border-radius: 10px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+#game-controls button:hover {
+ background-color: #000033;
+ color: #00ffff;
+ box-shadow: 0 0 20px #00ffff;
+}
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index 3c23d90..15069d9 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,8 @@
-Django
+django
psycopg2
python-dotenv
channels
daphne
-djangorestframework
\ No newline at end of file
+djangorestframework
+web3
+python-json-logger==2.0.7
- 
+ 
+ 
+ 
+ 
+