Ladebeze66/ft_transcendence
1
0
Fork 0
mirror of https://github.com/AudebertAdrien/ft_transcendence.git synced 2026-02-04 11:40:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

add graphique

Browse Source
This commit is contained in:
Theouche 2024-08-29 17:27:36 +02:00
parent a8103c122d
commit a578b79092
3 changed files with 378 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

572
pong/static/burger.js
View File

@ -8,237 +8,389 @@ document.addEventListener('DOMContentLoaded', () => {
const tournoiList = document.getElementById('tournoi-list'); const tournoiList = document.getElementById('tournoi-list');
const blockchainList = document.getElementById('blockchain-list'); const blockchainList = document.getElementById('blockchain-list');
const logo = document.querySelector('.logo');
menuButton.addEventListener('click', toggleMenu); menuButton.addEventListener('click', toggleMenu);
function toggleMenu() { function toggleMenu() {
console.log('Menu toggled'); console.log('Menu toggled');
if (dropdownMenu.style.display === "block") { if (dropdownMenu.style.display === "block") {
dropdownMenu.style.display = "none"; 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(); hideAllTables();
} else {
dropdownMenu.style.display = "block";
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() { function hideAllTables(){
console.log('Fetching matches...'); if (playerList) playerList.style.display = 'none';
fetch('/api/match_list/') if (matchList) matchList.style.display = 'none';
.then(response => response.json()) if (tournoiList) tournoiList.style.display = 'none';
.then(data => { if (blockchainList) blockchainList.style.display = 'none';
if (data.matches) { }
displayMatches(data.matches);
}
})
.catch(error => console.error('Error fetching match data:', error));
}
function fetchPlayers(){ const links = document.querySelectorAll('#dropdown-menu a');
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(){ links.forEach(link => {
console.log('Fetching tournois...'); link.addEventListener('click', (event) => {
fetch('/api/tournoi_list/') event.preventDefault();
.then(response => response.json()) const tableId = link.getAttribute('data-table');
.then(data => { showTable(tableId);
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 = `
<td>${match.id}</td>
<td>${match.player1__name}</td>
<td>${match.player2__name}</td>
<td>${match.score_player1}</td>
<td>${match.score_player2}</td>
<td>${match.winner__name}</td>
<td>${match.nbr_ball_touch_p1}</td>
<td>${match.nbr_ball_touch_p2}</td>
<td>${match.duration}</td>
<td>${match.date}</td>
<td>${match.is_tournoi}</td>
<td>${match.tournoi__name}</td>
`;
matchListBody.appendChild(row);
});
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`;
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 = `
<td>${player.id}</td>
<td>${player.name}</td>
<td>${player.total_match}</td>
<td>${player.total_win}</td>
<td>${player.p_win}</td>
<td>${player.m_score_match}</td>
<td>${player.m_score_adv_match}</td>
<td>${player.best_score}</td>
<td>${player.m_nbr_ball_touch}</td>
<td>${player.total_duration}</td>
<td>${player.m_duration}</td>
<td>${player.num_participated_tournaments}</td>
<td>${player.num_won_tournaments}</td>
`;
playersListBody.appendChild(row);
});
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`
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 = `
<td>${tournoi.id}</td>
<td>${tournoi.name}</td>
<td>${tournoi.nbr_player}</td>
<td>${tournoi.date}</td>
<td>${tournoi.winner.name}</td>
`;
tournoisListBody.appendChild(row);
});
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`
tournoisListBody.appendChild(row);
}
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); if (dropdownMenu) {
document.getElementById('search-match-player').addEventListener('input', filterMatches); dropdownMenu.style.display = 'none';
document.getElementById('search-match-date').addEventListener('input', filterMatches); }
}
function filterPlayers() { function fetchMatches() {
const searchValue = document.getElementById('search-player').value.toLowerCase(); console.log('Fetching matches...');
const playersListBody = document.querySelector('#player-list tbody'); fetch('/api/match_list/')
const rows = playersListBody.getElementsByTagName('tr'); .then(response => response.json())
.then(data => {
for (let i = 0; i < rows.length; i++) { if (data.matches) {
const nameCell = rows[i].getElementsByTagName('td')[1]; displayMatches(data.matches);
if (nameCell) {
const nameValue = nameCell.textContent || nameCell.innerText;
if (nameValue.toLowerCase().indexof(searchValue) > -1 ) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
} }
} })
.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 = `
<td>${match.id}</td>
<td>${match.player1__name}</td>
<td>${match.player2__name}</td>
<td>${match.score_player1}</td>
<td>${match.score_player2}</td>
<td>${match.winner__name}</td>
<td>${match.nbr_ball_touch_p1}</td>
<td>${match.nbr_ball_touch_p2}</td>
<td>${match.duration}</td>
<td>${match.date}</td>
<td>${match.is_tournoi}</td>
<td>${match.tournoi__name}</td>
`;
matchListBody.appendChild(row);
});
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`;
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 = `
<td>${player.id}</td>
<td>${player.name}</td>
<td>${player.total_match}</td>
<td>${player.total_win}</td>
<td>${player.p_win}</td>
<td>${player.m_score_match}</td>
<td>${player.m_score_adv_match}</td>
<td>${player.best_score}</td>
<td>${player.m_nbr_ball_touch}</td>
<td>${player.total_duration}</td>
<td>${player.m_duration}</td>
<td>${player.num_participated_tournaments}</td>
<td>${player.num_won_tournaments}</td>
`;
playersListBody.appendChild(row);
});
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`
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 = `
<td>${tournoi.id}</td>
<td>${tournoi.name}</td>
<td>${tournoi.nbr_player}</td>
<td>${tournoi.date}</td>
<td>${tournoi.winner.name}</td>
`;
tournoisListBody.appendChild(row);
});
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`
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++) { document.getElementById('search-player').addEventListener('input', filterPlayers);
const player1Cell = rows[i].getElementsByTagName('td')[1]; document.getElementById('search-match-player').addEventListener('input', filterMatches);
const player2Cell = rows[i].getElementsByTagName('td')[2]; document.getElementById('search-match-date').addEventListener('input', filterMatches);
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; function filterPlayers() {
if (dateSearchValue) { const searchValue = document.getElementById('search-player').value.toLowerCase();
const dateValue = dateCell.textContent || dateCell.innerText; const playersListBody = document.querySelector('#player-list tbody');
dateMatch = dateValue.startsWith(dateSearchValue); 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 = ''; rows[i].style.display = '';
} else { } else {
rows[i].style.display = 'none'; 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;
}
}); });

8
pong/static/index.html
View File

@ -141,6 +141,8 @@
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
<button id="generate-match-chart">Générer le graphique</button>
<canvas id="match-chart" style="display:none;"></canvas>
</div> </div>
<div id="player-list" class="content-list" style="display: none;"> <div id="player-list" class="content-list" style="display: none;">
@ -167,6 +169,8 @@
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
<button id="generate-player-chart">Générer le graphique</button>
<canvas id="player-chart" style="display:none;"></canvas>
</div> </div>
<div id="tournoi-list" class="content-list" style="display: none;"> <div id="tournoi-list" class="content-list" style="display: none;">
@ -185,6 +189,10 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<script src="{% static 'game.js' %}"></script> <script src="{% static 'game.js' %}"></script>
<script src="{% static 'burger.js' %}"></script> <script src="{% static 'burger.js' %}"></script>

9
pong/static/styles.css
View File

@ -11,7 +11,7 @@ html {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
overflow: hidden; overflow: auto;
} }
@ -255,6 +255,7 @@ button:hover {
position: relative; position: relative;
z-index: 10; z-index: 10;
max-width: 80%; max-width: 80%;
overflow: auto;
} }
@ -439,4 +440,10 @@ body {
color: rgb(0, 255, 255); /* Valeur par défaut */ color: rgb(0, 255, 255); /* Valeur par défaut */
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 16px; font-size: 16px;
}
canvas {
max-width: 100%;
height: auto;
margin-top: 20px;
} }