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

548
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";
}
}
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') { if (tableId === 'player-list') {
playerList.style.display = 'block'; playerList.style.display = 'block';
fetchPlayers(); fetchPlayers();
} else if (tableId === 'match-list') { } else if (tableId === 'match-list') {
matchList.style.display = 'block'; matchList.style.display = 'block';
fetchMatches(); fetchMatches();
} else if (tableId === 'tournoi-list') { } else if (tableId === 'tournoi-list') {
tournoiList.style.display = 'block'; tournoiList.style.display = 'block';
fetchTournois(); fetchTournois();
} else if (tableId === 'blockchain-list') { } else if (tableId === 'blockchain-list') {
console.log('Opening external page in a new tab'); console.log('Opening external page in a new tab');
window.open('https://sepolia.etherscan.io/address/0x078d04eb6fb97cd863361fc86000647dc876441b', '_blank'); window.open('https://sepolia.etherscan.io/address/0x078d04eb6fb97cd863361fc86000647dc876441b', '_blank');
}
if (dropdownMenu) {
dropdownMenu.style.display = 'none';
}
} }
function fetchMatches() { if (dropdownMenu) {
console.log('Fetching matches...'); dropdownMenu.style.display = 'none';
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(){ function fetchMatches() {
console.log('Fetching players...'); console.log('Fetching matches...');
fetch('/api/player_list/') fetch('/api/match_list/')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.players) { if (data.matches) {
displayPlayers(data.players); displayMatches(data.matches);
} }
}) })
.catch(error => console.error('Error fetching match data:', error)); .catch(error => console.error('Error fetching match data:', error));
} }
function fetchTournois(){ function fetchPlayers(){
console.log('Fetching tournois...'); console.log('Fetching players...');
fetch('/api/tournoi_list/') fetch('/api/player_list/')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.tournois) { if (data.players) {
displayTournois(data.tournois); displayPlayers(data.players);
} }
}) })
.catch(error => console.error('Error fetching match data:', error)); .catch(error => console.error('Error fetching match data:', error));
} }
function displayMatches(matches) { function fetchTournois(){
console.log('Displaying matches:'); console.log('Fetching tournois...');
const matchListBody = document.querySelector('#match-list tbody'); fetch('/api/tournoi_list/')
matchListBody.innerHTML = ''; .then(response => response.json())
.then(data => {
if (data.tournois) {
displayTournois(data.tournois);
}
})
.catch(error => console.error('Error fetching match data:', error));
}
if (matches.length != 0) { function displayMatches(matches) {
matches.forEach(match => { console.log('Displaying matches:');
const row = document.createElement('tr'); const matchListBody = document.querySelector('#match-list tbody');
row.innerHTML = ` matchListBody.innerHTML = '';
<td>${match.id}</td>
<td>${match.player1__name}</td> if (matches.length != 0) {
<td>${match.player2__name}</td> matches.forEach(match => {
<td>${match.score_player1}</td> const row = document.createElement('tr');
<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 = ` row.innerHTML = `
<td colspan="12">No matches found.</td> <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); matchListBody.appendChild(row);
} });
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`;
matchListBody.appendChild(row);
} }
}
function displayPlayers(players) { function displayPlayers(players) {
console.log('Displaying players:'); console.log('Displaying players:');
const playersListBody = document.querySelector('#player-list tbody'); const playersListBody = document.querySelector('#player-list tbody');
playersListBody.innerHTML = ''; playersListBody.innerHTML = '';
if (players.length != 0) { if (players.length != 0) {
players.forEach(player => { players.forEach(player => {
const row = document.createElement('tr'); 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 = ` row.innerHTML = `
<td colspan="12">No matches found.</td> <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); playersListBody.appendChild(row);
} });
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`
playersListBody.appendChild(row);
} }
}
function displayTournois(tournois) { function displayTournois(tournois) {
console.log('Displaying tournois:'); console.log('Displaying tournois:');
const tournoisListBody = document.querySelector('#tournoi-list tbody'); const tournoisListBody = document.querySelector('#tournoi-list tbody');
tournoisListBody.innerHTML = ''; tournoisListBody.innerHTML = '';
if (tournois.length != 0) { if (tournois.length != 0) {
tournois.forEach(tournoi => { tournois.forEach(tournoi => {
const row = document.createElement('tr'); 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 = ` row.innerHTML = `
<td colspan="12">No matches found.</td> <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); tournoisListBody.appendChild(row);
} });
} else {
row.innerHTML = `
<td colspan="12">No matches found.</td>
`
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() { document.getElementById('search-player').addEventListener('input', filterPlayers);
const searchValue = document.getElementById('search-player').value.toLowerCase(); document.getElementById('search-match-player').addEventListener('input', filterMatches);
const playersListBody = document.querySelector('#player-list tbody'); document.getElementById('search-match-date').addEventListener('input', filterMatches);
const rows = playersListBody.getElementsByTagName('tr');
for (let i = 0; i < rows.length; i++) { function filterPlayers() {
const nameCell = rows[i].getElementsByTagName('td')[1]; const searchValue = document.getElementById('search-player').value.toLowerCase();
if (nameCell) { const playersListBody = document.querySelector('#player-list tbody');
const nameValue = nameCell.textContent || nameCell.innerText; const rows = playersListBody.getElementsByTagName('tr');
if (nameValue.toLowerCase().indexof(searchValue) > -1 ) {
rows[i].style.display = '';
} else {
rows[i].style.display = 'none';
}
}
}
}
function filterMatches() { for (let i = 0; i < rows.length; i++) {
const playerSearchValue = document.getElementById('search-match-player').value.toLowerCase(); const nameCell = rows[i].getElementsByTagName('td')[1];
const dateSearchValue = document.getElementById('search-match-date').value; if (nameCell) {
const matchListBody = document.querySelector('#match-list tbody'); const nameValue = nameCell.textContent || nameCell.innerText;
const rows = matchListBody.getElementsByTagName('tr'); if (nameValue.toLowerCase().indexOf(searchValue) > -1 ) {
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 = ''; 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;">
@ -186,6 +190,10 @@
</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>
<script src="{% static 'language.js' %}"></script> <script src="{% static 'language.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;
} }
@ -440,3 +441,9 @@ body {
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;
}