diff --git a/manage.py b/manage.py index d01a08d..252b26c 100644 --- a/manage.py +++ b/manage.py @@ -1,5 +1,4 @@ #!/usr/bin/env python -"""Django's command-line utility for administrative tasks.""" import os import sys diff --git a/pong/asgi.py b/pong/asgi.py index b47b355..3a8dc68 100644 --- a/pong/asgi.py +++ b/pong/asgi.py @@ -18,7 +18,7 @@ django.setup() from django.core.asgi import get_asgi_application from channels.routing import ProtocolTypeRouter, URLRouter from channels.auth import AuthMiddlewareStack -import pong.game.routing # Import your routing module +import pong.game.routing application = ProtocolTypeRouter({ "http": get_asgi_application(), diff --git a/pong/game/game.py b/pong/game/game.py index 7bd34d7..515dccd 100644 --- a/pong/game/game.py +++ b/pong/game/game.py @@ -4,7 +4,7 @@ import json import asyncio import random from datetime import datetime -from .utils import endfortheouche +from .utils import handle_game_data from asgiref.sync import sync_to_async @@ -75,9 +75,9 @@ class Game: target_y = future_ball_position['y'] player2_position = self.game_state['player2_position'] - # Ajuste la position du bot en fonction de la position prévue de la balle + # Adjusts bot position based on expected ball position if player2_position < target_y < player2_position + 80: - pass # Pas besoin de bouger, le bot est déjà bien placé + pass #bot already placed elif player2_position < target_y: self.game_state['player2_position'] = min(player2_position + (50 * self.speed), 300) elif player2_position + 80 > target_y: @@ -94,9 +94,9 @@ class Game: future_x += velocity_x future_y += velocity_y - # Gérer les rebonds sur les murs + # Dealing with bounces off walls if future_y <= 0 or future_y >= 300: - velocity_y = -velocity_y # Inverser la direction du mouvement vertical + velocity_y = -velocity_y # Reverse the direction of vertical movement return {'x': future_x, 'y': future_y} @@ -206,9 +206,7 @@ class Game: self.game_state['player2_position'] = min(self.game_state['player2_position'] + (5 * self.speed), 300) async def end_game(self, disconnected_player=None): - print("end GAME CALLED") if not self.ended: - print("Game ended !!!!! ") self.ended = True if self.game_loop_task: self.game_loop_task.cancel() @@ -237,7 +235,6 @@ class Game: if not self.botgame: if not self.localgame: await self.player2.send(end_message) - print("save data") - await sync_to_async(endfortheouche)(self.game_state['player1_name'], self.game_state['player2_name'], + await sync_to_async(handle_game_data)(self.game_state['player1_name'], self.game_state['player2_name'], self.game_state['player1_score'], self.game_state['player2_score'], self.bt1, self.bt2, duration, False, None) diff --git a/pong/game/models.py b/pong/game/models.py index 2586446..d72178f 100644 --- a/pong/game/models.py +++ b/pong/game/models.py @@ -4,7 +4,6 @@ from django.db import models from django.contrib.auth.models import User User.add_to_class('auth_token', models.CharField(max_length=100, null=True, blank=True, unique=True)) -# Create your models here. class Player(models.Model): name = models.CharField(max_length=100) @@ -55,7 +54,7 @@ class Match(models.Model): super().clean() def save(self, *args, **kwargs): - self.clean() # Appel de la méthode clean() avant d'enregistrer + self.clean() super().save(*args, **kwargs) def __str__(self): diff --git a/pong/game/utils.py b/pong/game/utils.py index 099ced4..d30ae3f 100644 --- a/pong/game/utils.py +++ b/pong/game/utils.py @@ -4,34 +4,22 @@ from django.shortcuts import get_object_or_404 from django.db.models import Max, Sum, F from datetime import timedelta from channels.db import database_sync_to_async -#from asgiref.sync import database_sync_to_async -######## try synchrone version ######## -def endfortheouche(p1, p2, s_p1, s_p2, bt_p1, bt_2, dur, is_tournoi, name_tournament): +def handle_game_data(p1, p2, s_p1, s_p2, bt_p1, bt_2, dur, is_tournoi, name_tournament): try: - print("Debut de endfortheouche") - print(f"Paramètres : p1={p1}, p2={p2}, s_p1={s_p1}, s_p2={s_p2}") - # Vérification de l'existence des joueurs et création si nécessaire player_1 = get_or_create_player(p1) player_2 = get_or_create_player(p2) - print("ok") - - print("############# BEFORE MATCH") create_match(player_1, player_2, s_p1, s_p2, bt_p1, bt_2, dur, is_tournoi, name_tournament) - print("############# AFTER DONE") update_player_statistics(p1) - print("############# END STAT P1") update_player_statistics(p2) except Exception as e: print(f"Error in endfortheouche: {e}") def get_player_by_name(name): - print(f"Checking if player '{name}' exists") exists = Player.objects.filter(name=name).exists() - print(f"Player exists: {exists}") return exists @@ -40,19 +28,12 @@ def get_player(name): def get_or_create_player(name): - print("here !!") - print(f"Checking existence for player: {name}") player_exists = get_player_by_name(name) - print(f"END search in database!! (Player exists: {player_exists})") if not player_exists: - print("Player does not exist, creating player...") player = create_player(name) - print(f"Player created: {player}") return player else: - print("Player exists, fetching player...") player = get_player(name) - print(f"Player fetched: {player}") return player @@ -70,7 +51,6 @@ def create_player( num_participated_tournaments=0, num_won_tournaments=0 ): - print("create player !!!") player = Player( name=name, @@ -118,20 +98,15 @@ def create_match(player1, player2, score_player1, score_player2, nbr_ball_touch_ return match def update_player_statistics(player_name): - print("############# BEG STAT P") player = get_object_or_404(Player, name=player_name) - # Filtrer les matchs où le joueur est joueur 1 ou joueur 2 - print("############# HERE") matches_as_player1 = Match.objects.filter(player1=player) matches_as_player2 = Match.objects.filter(player2=player) - print("############# ACTUALLY, IT'S GOOD") - # Calculer les statistiques total_match = matches_as_player1.count() + matches_as_player2.count() + # avoid dividing by 0 if total_match == 0: - # Eviter la division par zéro player.total_match = total_match player.total_win = 0 player.p_win = 0 @@ -179,7 +154,6 @@ def update_player_statistics(player_name): best_score_as_player2 = matches_as_player2.aggregate(Max('score_player2'))['score_player2__max'] or 0 best_score = max(best_score_as_player1, best_score_as_player2) - # Mettre à jour les champs du joueur player.total_match = total_match player.total_win = total_win player.p_win = p_win @@ -193,11 +167,8 @@ def update_player_statistics(player_name): #player.num_won_tournaments = total_win_tourn player.save() - print("CHAKU IS THE BEST") def get_player_p_win(player_name): - # Rechercher le joueur par son nom player = get_object_or_404(Player, name=player_name) - # Retourner la valeur de p_win return player.p_win diff --git a/pong/game/views.py b/pong/game/views.py index 8bd8097..8ff352e 100644 --- a/pong/game/views.py +++ b/pong/game/views.py @@ -1,10 +1,6 @@ # /pong/game/views.py from django.shortcuts import render - -def index(request): - return render(request, 'index.html') - from django.core.exceptions import ObjectDoesNotExist from .models import Player, Tournoi, Match from .utils import create_player, create_tournoi, create_match @@ -12,12 +8,14 @@ from django.http import JsonResponse from django.contrib.auth.models import User from django.contrib.auth import authenticate from django.views.decorators.csrf import csrf_exempt -""" from .serializers import MatchSerializer """ from rest_framework import viewsets import json import uuid +def index(request): + return render(request, 'index.html') + @csrf_exempt def check_user_exists(request): if request.method == 'POST': @@ -69,11 +67,6 @@ def get_or_create_token(user): break return user.auth_token - -####################### THEOUCHE PART ############################ - -from django.http import JsonResponse - def match_list_json(request): matches = Match.objects.all() data = { @@ -86,10 +79,8 @@ def match_list_json(request): return JsonResponse(data) def player_list_json(request): - # Récupère tous les joueurs players = Player.objects.all() - # Crée un dictionnaire avec les informations des joueurs data = { 'players': list(players.values( 'id', 'name', 'total_match', 'total_win', 'p_win', @@ -98,31 +89,19 @@ def player_list_json(request): 'num_participated_tournaments', 'num_won_tournaments' )) } - - # Renvoie les données en JSON return JsonResponse(data) def tournoi_list_json(request): - # Récupère tous les joueurs tournois = Tournoi.objects.all() - # Crée un dictionnaire avec les informations des joueurs data = { 'tournois': list(tournois.values( 'id', 'name', 'nbr_player', 'date', 'winner' )) } - - # Renvoie les données en JSON return JsonResponse(data) -####################### THEOUCHE PART ############################ - - - -####################### jcheca PART ############################ - from web3 import Web3 provider = Web3.HTTPProvider("https://sepolia.infura.io/v3/60e51df7c97c4f4c8ab41605a4eb9907") diff --git a/pong/settings.py b/pong/settings.py index 1f8d1ce..b44ccdf 100644 --- a/pong/settings.py +++ b/pong/settings.py @@ -35,8 +35,8 @@ INSTALLED_APPS = [ 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', - 'channels', # Add Django Channels - 'pong.game', # Your game app + 'channels', + 'pong.game', 'rest_framework' ] @@ -68,7 +68,7 @@ TEMPLATES = [ }, ] -ASGI_APPLICATION = 'pong.asgi.application' # Add ASGI application +ASGI_APPLICATION = 'pong.asgi.application' # Database # https://docs.djangoproject.com/en/3.2/ref/settings/#databases diff --git a/pong/static/burger.js b/pong/static/burger.js new file mode 100644 index 0000000..a17b66f --- /dev/null +++ b/pong/static/burger.js @@ -0,0 +1,244 @@ +document.addEventListener('DOMContentLoaded', () => { + + const menuButton = document.querySelector('.burger-menu'); + const dropdownMenu = document.getElementById('dropdown-menu'); + + const playerList = document.getElementById('player-list'); + const matchList = document.getElementById('match-list'); + const tournoiList = document.getElementById('tournoi-list'); + const blockchainList = document.getElementById('blockchain-list'); + + menuButton.addEventListener('click', toggleMenu); + + function toggleMenu() { + console.log('Menu toggled'); + if (dropdownMenu.style.display === "block") { + dropdownMenu.style.display = "none"; + hideAllTables(); + } else { + dropdownMenu.style.display = "block"; + } + } + + function hideAllTables(){ + if (playerList) playerList.style.display = 'none'; + if (matchList) matchList.style.display = 'none'; + if (tournoiList) tournoiList.style.display = 'none'; + if (blockchainList) blockchainList.style.display = 'none'; + } + + const links = document.querySelectorAll('#dropdown-menu a'); + + links.forEach(link => { + link.addEventListener('click', (event) => { + event.preventDefault(); + const tableId = link.getAttribute('data-table'); + showTable(tableId); + }); + }); + + function showTable(tableId) { + hideAllTables(); + + + if (tableId === 'player-list') { + playerList.style.display = 'block'; + fetchPlayers(); + } else if (tableId === 'match-list') { + matchList.style.display = 'block'; + fetchMatches(); + } else if (tableId === 'tournoi-list') { + tournoiList.style.display = 'block'; + fetchTournois(); + } else if (tableId === 'blockchain-list') { + console.log('Opening external page in a new tab'); + window.open('https://sepolia.etherscan.io/address/0x078d04eb6fb97cd863361fc86000647dc876441b', '_blank'); + } + + if (dropdownMenu) { + dropdownMenu.style.display = 'none'; + } + } + + function fetchMatches() { + console.log('Fetching matches...'); + fetch('/api/match_list/') + .then(response => response.json()) + .then(data => { + if (data.matches) { + displayMatches(data.matches); + } + }) + .catch(error => console.error('Error fetching match data:', error)); + } + + function fetchPlayers(){ + console.log('Fetching players...'); + fetch('/api/player_list/') + .then(response => response.json()) + .then(data => { + if (data.players) { + displayPlayers(data.players); + } + }) + .catch(error => console.error('Error fetching match data:', error)); + } + + function fetchTournois(){ + console.log('Fetching tournois...'); + fetch('/api/tournoi_list/') + .then(response => response.json()) + .then(data => { + if (data.tournois) { + displayTournois(data.tournois); + } + }) + .catch(error => console.error('Error fetching match data:', error)); + } + + function displayMatches(matches) { + console.log('Displaying matches:'); + const matchListBody = document.querySelector('#match-list tbody'); + matchListBody.innerHTML = ''; + + if (matches.length != 0) { + matches.forEach(match => { + const row = document.createElement('tr'); + row.innerHTML = ` + ${match.id} + ${match.player1__name} + ${match.player2__name} + ${match.score_player1} + ${match.score_player2} + ${match.winner__name} + ${match.nbr_ball_touch_p1} + ${match.nbr_ball_touch_p2} + ${match.duration} + ${match.date} + ${match.is_tournoi} + ${match.tournoi__name} + `; + matchListBody.appendChild(row); + }); + } else { + row.innerHTML = ` + No matches found. + `; + matchListBody.appendChild(row); + } + } + + function displayPlayers(players) { + console.log('Displaying players:'); + const playersListBody = document.querySelector('#player-list tbody'); + playersListBody.innerHTML = ''; + + if (players.length != 0) { + players.forEach(player => { + const row = document.createElement('tr'); + row.innerHTML = ` + ${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} + `; + playersListBody.appendChild(row); + }); + } else { + row.innerHTML = ` + No matches found. + ` + playersListBody.appendChild(row); + } + } + + function displayTournois(tournois) { + console.log('Displaying tournois:'); + const tournoisListBody = document.querySelector('#tournoi-list tbody'); + tournoisListBody.innerHTML = ''; + + if (tournois.length != 0) { + tournois.forEach(tournoi => { + const row = document.createElement('tr'); + row.innerHTML = ` + ${tournoi.id} + ${tournoi.name} + ${tournoi.nbr_player} + ${tournoi.date} + ${tournoi.winner.name} + `; + tournoisListBody.appendChild(row); + }); + } else { + row.innerHTML = ` + No matches found. + ` + tournoisListBody.appendChild(row); + } + + } + + document.getElementById('search-player').addEventListener('input', filterPlayers); + document.getElementById('search-match-player').addEventListener('input', filterMatches); + document.getElementById('search-match-date').addEventListener('input', filterMatches); + + function filterPlayers() { + const searchValue = document.getElementById('search-player').value.toLowerCase(); + const playersListBody = document.querySelector('#player-list tbody'); + const rows = playersListBody.getElementsByTagName('tr'); + + for (let i = 0; i < rows.length; i++) { + const nameCell = rows[i].getElementsByTagName('td')[1]; + if (nameCell) { + const nameValue = nameCell.textContent || nameCell.innerText; + if (nameValue.toLowerCase().indexof(searchValue) > -1 ) { + rows[i].style.display = ''; + } else { + rows[i].style.display = 'none'; + } + } + } + } + + function filterMatches() { + const playerSearchValue = document.getElementById('search-match-player').value.toLowerCase(); + const dateSearchValue = document.getElementById('search-match-date').value; + const matchListBody = document.querySelector('#match-list tbody'); + const rows = matchListBody.getElementsByTagName('tr'); + + for (let i = 0; i < rows.length; i++) { + const player1Cell = rows[i].getElementsByTagName('td')[1]; + const player2Cell = rows[i].getElementsByTagName('td')[2]; + const dateCell = rows[i].getElementsByTagName('td')[9]; + + let playerMatch = true; + if (playerSearchValue) { + const player1Value = player1Cell.textContent || player1Cell.innerText; + const player2Value = player2Cell.textContent || player2Cell.innerText; + playerMatch = player1Value.toLowerCase().indexOf(playerSearchValue) > -1 || + player2Value.toLowerCase().indexOf(playerSearchValue) > -1; + } + + let dateMatch = true; + if (dateSearchValue) { + const dateValue = dateCell.textContent || dateCell.innerText; + dateMatch = dateValue.startsWith(dateSearchValue); + } + + if (playerMatch && dateMatch) { + rows[i].style.display = ''; + } else { + rows[i].style.display = 'none'; + } + } + } +}); \ No newline at end of file diff --git a/pong/static/game.js b/pong/static/game.js index df93785..0d6fe1b 100644 --- a/pong/static/game.js +++ b/pong/static/game.js @@ -30,14 +30,6 @@ document.addEventListener('DOMContentLoaded', () => { const gameContainer = document.getElementById('game1'); const tournamentContainer = document.getElementById('tournament-bracket'); - const menuButton = document.querySelector('.burger-menu'); - const dropdownMenu = document.getElementById('dropdown-menu'); - - const playerList = document.getElementById('player-list'); - const matchList = document.getElementById('match-list'); - const tournoiList = document.getElementById('tournoi-list'); - const blockchainList = document.getElementById('blockchain-list'); - const pongElements = document.getElementById('pong-elements'); const logo = document.querySelector('.logo'); @@ -79,7 +71,6 @@ document.addEventListener('DOMContentLoaded', () => { if (exists) { authForm.style.display = 'none'; loginForm.style.display = 'block'; - // Auto-focus and key handling for LOGIN-FORM loginPasswordInput.focus(); loginPasswordInput.addEventListener('keypress', function (event) { if (event.key === 'Enter') { @@ -90,7 +81,6 @@ document.addEventListener('DOMContentLoaded', () => { } else { authForm.style.display = 'none'; registerForm.style.display = 'block'; - // Auto-focus and key handling for REGISTER-FORM passwordInput.focus(); passwordInput.addEventListener('keypress', function (event) { if (event.key === 'Enter') { @@ -192,7 +182,6 @@ document.addEventListener('DOMContentLoaded', () => { return data.authenticated; } - // functions to handle the second player async function handleCheckNickname2() { const nickname2 = nicknameInput2.value.trim(); @@ -202,7 +191,6 @@ document.addEventListener('DOMContentLoaded', () => { if (exists) { authForm2.style.display = 'none'; loginForm2.style.display = 'block'; - // Auto-focus and key handling for LOGIN-FORM2 loginPasswordInput2.focus(); loginPasswordInput2.addEventListener('keypress', function (event) { if (event.key === 'Enter') { @@ -213,7 +201,6 @@ document.addEventListener('DOMContentLoaded', () => { } else { authForm2.style.display = 'none'; registerForm2.style.display = 'block'; - // Auto-focus and key handling for REGISTER-FORM2 passwordInput2.focus(); passwordInput2.addEventListener('keypress', function (event) { if (event.key === 'Enter') { @@ -332,7 +319,6 @@ document.addEventListener('DOMContentLoaded', () => { gameContainer.style.display = 'flex'; logo.style.display = 'none'; pongElements.style.display = 'none'; - //menuButton.style.display = 'none'; formBlock.style.display = 'none'; startWebSocketConnection(token, 2); } @@ -341,7 +327,6 @@ document.addEventListener('DOMContentLoaded', () => { gameContainer.style.display = 'flex'; logo.style.display = 'none'; pongElements.style.display = 'none'; - //menuButton.style.display = 'none'; formBlock.style.display = 'none'; startWebSocketConnection(token, 1); } @@ -350,7 +335,6 @@ document.addEventListener('DOMContentLoaded', () => { tournamentContainer.style.display = 'flex'; logo.style.display = 'none'; pongElements.style.display = 'none'; - //menuButton.style.display = 'none'; formBlock.style.display = 'none'; startWebSocketConnection(token, 42); } @@ -407,14 +391,12 @@ document.addEventListener('DOMContentLoaded', () => { function handleKeyDown(event) { if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'w' || event.key === 's') { - //console.log('Key press: ', event.key); sendKeyPress(event.key.toLowerCase()); } } function sendKeyPress(key) { if (socket.readyState === WebSocket.OPEN) { - //console.log('Key sent: ', key); socket.send(JSON.stringify({ type: 'key_press', key })); } } @@ -440,270 +422,6 @@ document.addEventListener('DOMContentLoaded', () => { document.getElementById('game-text').textContent = gameState.game_text; } - ////////////////////////////// BEG BURGER BUTTON //////////////////////////////// - - menuButton.addEventListener('click', toggleMenu); - - function toggleMenu() { - console.log('Menu toggled'); - if (dropdownMenu.style.display === "block") { - dropdownMenu.style.display = "none"; - hideAllTables(); - } else { - dropdownMenu.style.display = "block"; - } - } - - function hideAllTables(){ - if (playerList) playerList.style.display = 'none'; - if (matchList) matchList.style.display = 'none'; - if (tournoiList) tournoiList.style.display = 'none'; - if (blockchainList) blockchainList.style.display = 'none'; - } - - const links = document.querySelectorAll('#dropdown-menu a'); - - links.forEach(link => { - link.addEventListener('click', (event) => { - event.preventDefault(); // Empêche le comportement par défaut du lien - const tableId = link.getAttribute('data-table'); - //console.log("Here !!!!!!!!!!!! NNNNNNNN"); - showTable(tableId); - }); - }); - - function showTable(tableId) { - // Masquer tous les tableaux - console.log('Entering showTable', tableId); - hideAllTables(); - - // Afficher le tableau sélectionné - if (tableId === 'player-list') { - console.log('Showing player list 2'); - //if (playerList) { - playerList.style.display = 'block'; - fetchPlayers(); - //} - } else if (tableId === 'match-list') { - console.log('Showing match list 2'); - //if (matchList) - matchList.style.display = 'block'; - fetchMatches(); - } else if (tableId === 'tournoi-list') { - console.log('Showing tournoi list 2'); - //if (tournoiList) - tournoiList.style.display = 'block'; - fetchTournois(); - } else if (tableId === 'blockchain-list') { - console.log('Opening external page in a new tab'); - window.open('https://sepolia.etherscan.io/address/0x078d04eb6fb97cd863361fc86000647dc876441b', '_blank'); - /* fetch('/web3/') - .then(response => response.json()) - .then(data => { - console.log('ok here !!'); - jsonContent.textContent = JSON.stringify(data, null, 2); - }); */ - } - - // Masquer le menu après la sélection - if (dropdownMenu) { - dropdownMenu.style.display = 'none'; - } - } - - function fetchMatches() { - console.log('Fetching matches...'); - fetch('/api/match_list/') - .then(response => response.json()) - .then(data => { - if (data.matches) { - displayMatches(data.matches); - } - }) - .catch(error => console.error('Error fetching match data:', error)); - } - - function fetchPlayers(){ - console.log('Fetching players...'); - fetch('/api/player_list/') - .then(response => response.json()) - .then(data => { - if (data.players) { - displayPlayers(data.players); - } - }) - .catch(error => console.error('Error fetching match data:', error)); - } - - function fetchTournois(){ - console.log('Fetching tournois...'); - fetch('/api/tournoi_list/') - .then(response => response.json()) - .then(data => { - if (data.tournois) { - displayTournois(data.tournois); - } - }) - .catch(error => console.error('Error fetching match data:', error)); - } - - function displayMatches(matches) { - console.log('Displaying matches:'); - const matchListBody = document.querySelector('#match-list tbody'); - matchListBody.innerHTML = ''; - - if (matches.length != 0) { - matches.forEach(match => { - const row = document.createElement('tr'); - row.innerHTML = ` - ${match.id} - ${match.player1__name} - ${match.player2__name} - ${match.score_player1} - ${match.score_player2} - ${match.winner__name} - ${match.nbr_ball_touch_p1} - ${match.nbr_ball_touch_p2} - ${match.duration} - ${match.date} - ${match.is_tournoi} - ${match.tournoi__name} - `; - matchListBody.appendChild(row); - }); - } else { - row.innerHTML = ` - No matches found. - `; - matchListBody.appendChild(row); - } - } - - function displayPlayers(players) { - console.log('Displaying players:'); - const playersListBody = document.querySelector('#player-list tbody'); - playersListBody.innerHTML = ''; - - if (players.length != 0) { - players.forEach(player => { - const row = document.createElement('tr'); - row.innerHTML = ` - ${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} - `; - playersListBody.appendChild(row); - }); - } else { - row.innerHTML = ` - No matches found. - ` - playersListBody.appendChild(row); - } - } - - function displayTournois(tournois) { - console.log('Displaying tournois:'); - const tournoisListBody = document.querySelector('#tournoi-list tbody'); - tournoisListBody.innerHTML = ''; - - if (tournois.length != 0) { - tournois.forEach(tournoi => { - const row = document.createElement('tr'); - row.innerHTML = ` - ${tournoi.id} - ${tournoi.name} - ${tournoi.nbr_player} - ${tournoi.date} - ${tournoi.winner.name} - `; - tournoisListBody.appendChild(row); - }); - } else { - row.innerHTML = ` - No matches found. - ` - tournoisListBody.appendChild(row); - } - - } - - ////////////////////////////// END BURGER BUTTON //////////////////////////////// - - - ////////////////////////////// BEG STAT SPE //////////////////////////////// - - document.getElementById('search-player').addEventListener('input', filterPlayers); - document.getElementById('search-match-player').addEventListener('input', filterMatches); - document.getElementById('search-match-date').addEventListener('input', filterMatches); - - function filterPlayers() { - const searchValue = document.getElementById('search-player').value.toLowerCase(); - const playersListBody = document.querySelector('#player-list tbody'); - const rows = playersListBody.getElementsByTagName('tr'); - - for (let i = 0; i < rows.length; i++) { - const nameCell = rows[i].getElementsByTagName('td')[1]; // The 'Name' column - if (nameCell) { - const nameValue = nameCell.textContent || nameCell.innerText; - if (nameValue.toLowerCase().indexof(searchValue) > -1 ) { - rows[i].style.display = ''; - } else { - rows[i].style.display = 'none'; - } - } - } - } - - function filterMatches() { - const playerSearchValue = document.getElementById('search-match-player').value.toLowerCase(); - const dateSearchValue = document.getElementById('search-match-date').value; - const matchListBody = document.querySelector('#match-list tbody'); - const rows = matchListBody.getElementsByTagName('tr'); - - for (let i = 0; i < rows.length; i++) { - const player1Cell = rows[i].getElementsByTagName('td')[1]; // The 'Player 1' column - const player2Cell = rows[i].getElementsByTagName('td')[2]; // The 'Player 2' column - const dateCell = rows[i].getElementsByTagName('td')[9]; // The 'Date' column - - let playerMatch = true; - if (playerSearchValue) { - const player1Value = player1Cell.textContent || player1Cell.innerText; - const player2Value = player2Cell.textContent || player2Cell.innerText; - playerMatch = player1Value.toLowerCase().indexOf(playerSearchValue) > -1 || - player2Value.toLowerCase().indexOf(playerSearchValue) > -1; - } - - let dateMatch = true; - if (dateSearchValue) { - const dateValue = dateCell.textContent || dateCell.innerText; - dateMatch = dateValue.startsWith(dateSearchValue); - } - - if (playerMatch && dateMatch) { - rows[i].style.display = ''; - } else { - rows[i].style.display = 'none'; - } - } - } - - ////////////////////////////// END STAT SPE //////////////////////////////// - - - - ////////////////////////////// BEG STARS //////////////////////////////// - const starsContainer = document.getElementById('stars'); for (let i = 0; i < 500; i++) { const star = document.createElement('div'); @@ -716,129 +434,4 @@ document.addEventListener('DOMContentLoaded', () => { starsContainer.appendChild(star); } - ////////////////////////////// END STARS //////////////////////////////// - - - ////////////////////////////// BEG LANGAGE //////////////////////////////// - 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); // 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 - } - } - - 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'; - }); - - 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'; - }); - - ////////////////////////////// END SETTING //////////////////////////////// - }); diff --git a/pong/static/index.html b/pong/static/index.html index ed10b9d..d225c4f 100644 --- a/pong/static/index.html +++ b/pong/static/index.html @@ -9,16 +9,7 @@ - - - +
@@ -196,6 +187,8 @@
+ + 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 61748ff..6e601bc 100644 --- a/pong/static/styles.css +++ b/pong/static/styles.css @@ -1,5 +1,4 @@ /* General styles */ -body, html { font-family: Arial, sans-serif; @@ -434,4 +433,10 @@ pre { .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; } \ No newline at end of file