diff --git a/pong/static/burger.js b/pong/static/burger.js
index a17b66f..fc66d94 100644
--- a/pong/static/burger.js
+++ b/pong/static/burger.js
@@ -8,237 +8,389 @@ document.addEventListener('DOMContentLoaded', () => {
const tournoiList = document.getElementById('tournoi-list');
const blockchainList = document.getElementById('blockchain-list');
+ const logo = document.querySelector('.logo');
+
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) {
+ function toggleMenu() {
+ console.log('Menu toggled');
+ if (dropdownMenu.style.display === "block") {
+ dropdownMenu.style.display = "none";
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';
- }
+ } else {
+ dropdownMenu.style.display = "block";
}
+ }
- 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 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';
+ }
- 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));
- }
+ const links = document.querySelectorAll('#dropdown-menu a');
- 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);
- }
+ 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');
}
- document.getElementById('search-player').addEventListener('input', filterPlayers);
- document.getElementById('search-match-player').addEventListener('input', filterMatches);
- document.getElementById('search-match-date').addEventListener('input', filterMatches);
+ if (dropdownMenu) {
+ dropdownMenu.style.display = 'none';
+ }
+ }
- 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 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);
}
- 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;
- }
+ document.getElementById('search-player').addEventListener('input', filterPlayers);
+ document.getElementById('search-match-player').addEventListener('input', filterMatches);
+ document.getElementById('search-match-date').addEventListener('input', filterMatches);
- let dateMatch = true;
- if (dateSearchValue) {
- const dateValue = dateCell.textContent || dateCell.innerText;
- dateMatch = dateValue.startsWith(dateSearchValue);
- }
+ function filterPlayers() {
+ const searchValue = document.getElementById('search-player').value.toLowerCase();
+ const playersListBody = document.querySelector('#player-list tbody');
+ const rows = playersListBody.getElementsByTagName('tr');
- if (playerMatch && dateMatch) {
+ 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';
+ }
+ }
+ }
+
+ document.getElementById('generate-player-chart').addEventListener('click', generatePlayerChart);
+ document.getElementById('generate-match-chart').addEventListener('click', generateMatchLinePlot);
+
+ function generatePlayerChart() {
+
+ if (document.getElementById('player-chart').style.display === 'block'){
+ document.getElementById('player-chart').style.display = 'none';
+ return ;
+ }
+
+ if (logo.style.display === 'block'){
+ logo.style.display = 'none';
+ }
+ const rows = document.querySelectorAll('#player-list tbody tr');
+ const playerNames = [];
+ const totalMatches = [];
+ const totalWins = [];
+
+ rows.forEach(row => {
+ const cells = row.getElementsByTagName('td');
+ playerNames.push(cells[1].innerText);
+ totalMatches.push(parseInt(cells[2].innerText));
+ totalWins.push(parseInt(cells[3].innerText));
+ });
+
+ const ctx = document.getElementById('player-chart').getContext('2d');
+ document.getElementById('player-chart').style.display = 'block';
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: playerNames,
+ datasets: [
+ { label: 'Total Matches', data: totalMatches, backgroundColor: 'rgba(75, 192, 192, 0.6)' },
+ { label: 'Total Wins', data: totalWins, backgroundColor: 'rgba(54, 162, 235, 0.6)' },
+ ]
+ },
+ options: {
+ scales: {
+ x: {
+ ticks: {
+ color: '#00ffff'
+ }
+ },
+ y: {
+ beginAtZero: true,
+ ticks: {
+ color: '#00ffff'
+ }
+ }
+ }
+ }
+ });
+ }
+
+ function generateMatchLinePlot() {
+
+ if (document.getElementById('match-chart').style.display === 'block'){
+ document.getElementById('match-chart').style.display = 'none';
+ return ;
+ }
+
+ const rows = document.querySelectorAll('#match-list tbody tr');
+ const playerWins = {};
+ const dates = [];
+
+ rows.forEach(row => {
+ const cells = row.getElementsByTagName('td');
+ const winner = cells[5].innerText;
+ const date = cells[9].innerText;
+
+ if (!dates.includes(date)) {
+ dates.push(date);
+ }
+
+ if (!playerWins[winner]) {
+ playerWins[winner] = [];
+ }
+
+ let existingEntry = playerWins[winner].find(entry => entry.date === date);
+
+ if (existingEntry) {
+ existingEntry.wins += 1;
+ }
+
+ else {
+ let lastWinCount = playerWins[winner].length > 0 ? playerWins[winner][playerWins[winner].length - 1].wins : 0;
+ playerWins[winner].push({ date: date, wins: lastWinCount + 1 });
+ }
+ });
+
+ const datasets = Object.keys(playerWins).map(player => {
+ return {
+ label: player,
+ data: playerWins[player].map(entry => ({ x: entry.date, y: entry.wins })),
+ fill: false,
+ borderColor: getRandomColor(),
+ tension: 0.1
+ };
+ });
+
+ const ctx = document.getElementById('match-chart').getContext('2d');
+ document.getElementById('match-chart').style.display = 'block';
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: dates.sort(),
+ datasets: datasets
+ },
+ options: {
+ scales: {
+ x: {
+ type: 'time',
+ time: {
+ parser: 'YYYY-MM-DD',
+ unit: 'day',
+ tooltipFormat: 'll'
+ },
+ title: {
+ display: true,
+ text: 'Date'
+ },
+ ticks: {
+ color: '#00ffff'
+ }
+ },
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Nombre de Victoires Cumulées'
+ },
+ ticks: {
+ color: '#00ffff'
+ }
+ }
+ }
+ }
+ });
+ }
+
+ function getRandomColor() {
+ const letters = '0123456789ABCDEF';
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+ }
+
});
\ No newline at end of file
diff --git a/pong/static/index.html b/pong/static/index.html
index d225c4f..763222e 100644
--- a/pong/static/index.html
+++ b/pong/static/index.html
@@ -141,6 +141,8 @@
+
+
@@ -167,6 +169,8 @@
+
+
@@ -185,6 +189,10 @@
+
+
+
+
diff --git a/pong/static/styles.css b/pong/static/styles.css
index 6e601bc..36bd2dd 100644
--- a/pong/static/styles.css
+++ b/pong/static/styles.css
@@ -11,7 +11,7 @@ html {
align-items: center;
justify-content: center;
height: 100%;
- overflow: hidden;
+ overflow: auto;
}
@@ -255,6 +255,7 @@ button:hover {
position: relative;
z-index: 10;
max-width: 80%;
+ overflow: auto;
}
@@ -439,4 +440,10 @@ 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;
}
\ No newline at end of file