Ladebeze66/ft_transcendence
1
0
Fork 0
mirror of https://github.com/AudebertAdrien/ft_transcendence.git synced 2026-11-09 18:07:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

fernand2

Browse Source
This commit is contained in:
Ladebeze66
2024-09-17 12:16:31 +02:00
parent 00cccbfa86
commit dd907cd184
99 changed files with 7854 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
pong/static/burger.js Normal file
View File

@@ -0,0 +1,409 @@
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');
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';
logo.style.display = 'block';
}
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();
logo.style.display = 'none';
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...');
// Retourner la promesse pour permettre l'utilisation de .then() plus tard
return fetch('/api/player_list/')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.players) {
displayPlayers(data.players); // Affiche les joueurs récupérés
return data.players; // Retourne les joueurs pour permettre de les traiter dans un .then
} else {
throw new Error('No players found.');
}
})
.catch(error => {
console.error('Error fetching match data:', error);
return null; // En cas d'erreur, retourne null
});
}
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 = '';
const row = document.createElement('tr');
if (matches.length != 0) {
matches.forEach(match => {
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 = '';
const row = document.createElement('tr');
if (players.length != 0) {
players.forEach(player => {
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 = '';
const row = document.createElement('tr');
if (tournois.length != 0) {
tournois.forEach(tournoi => {
row.innerHTML = `
<td>${tournoi.id}</td>
<td>${tournoi.name}</td>
<td>${tournoi.nbr_player}</td>
<td>${tournoi.date}</td>
<td>${tournoi.winner ? tournoi.winner.name : 'None'}</td>
`;
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() {
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';
}
}
}
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;
}
});

0
pong/static/burger.js:Zone.Identifier Normal file
View File

7
pong/static/flags/de.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path id="black_stripe" fill="#000" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path id="red_stripe" fill="#D00" d="M8,419.25 C178.83,334.03 349.03,364.83 521.26,391.28 C676.47,415.12 833.42,435.85 992,356.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,419.25"/>
<path id="gold_stripe" fill="#FFCE00" d="M8,643.25 C178.83,558.03 349.03,588.83 521.26,615.28 C676.47,639.12 833.42,659.85 992,580.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,643.25"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

0
pong/static/flags/de.svg:Zone.Identifier Normal file
View File

712
pong/static/flags/es.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 415 KiB

0
pong/static/flags/es.svg:Zone.Identifier Normal file
View File

7
pong/static/flags/fr.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path fill="#ED2939" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path fill="#fff" d="M8,195.25 C225.32,86.83 440.27,166.96 664,185.41 L664,857.41 C448.6,839.65 229.72,756.65 8,867.25 L8,195.25"/>
<path fill="#002395" d="M8,195.25 C116.32,141.21 224.41,133.48 336,142.59 L336,814.59 C227.91,805.77 119.34,811.71 8,867.25 L8,195.25"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 946 B

0
pong/static/flags/fr.svg:Zone.Identifier Normal file
View File

7
pong/static/flags/it.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path fill="#009246" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path fill="#fff" d="M336,142.59 C551.4,160.35 770.28,243.35 992,132.75 L992,804.75 C774.68,913.17 559.73,833.04 336,814.59 L336,142.59"/>
<path fill="#ce2b37" d="M664,185.41 C772.09,194.23 880.66,188.29 992,132.75 L992,804.75 C883.68,858.79 775.59,866.52 664,857.41 L664,185.41"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 959 B

0
pong/static/flags/it.svg:Zone.Identifier Normal file
View File

57
pong/static/flags/us.svg Normal file
View File

@@ -0,0 +1,57 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<defs/>
<path fill="#b22234" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
<path fill="#fff" d="M8,246.94 C178.83,161.72 349.03,192.52 521.26,218.97 C676.47,242.82 833.42,263.54 992,184.44 L992,236.13 C821.17,321.36 650.97,290.56 478.74,264.1 C323.53,240.26 166.58,219.53 8,298.63 L8,246.94 M992,339.52 C821.17,424.74 650.97,393.94 478.74,367.49 C323.53,343.65 166.58,322.92 8,402.02 L8,350.33 C178.83,265.1 349.03,295.91 521.26,322.36 C676.47,346.2 833.42,366.93 992,287.83 L992,339.52 M8,453.71 C178.83,368.49 349.03,399.29 521.26,425.74 C676.47,449.58 833.42,470.31 992,391.21 L992,442.9 C821.17,528.13 650.97,497.32 478.74,470.87 C323.53,447.03 166.58,426.3 8,505.4 L8,453.71 M992,546.29 C821.17,631.51 650.97,600.71 478.74,574.26 C323.53,550.42 166.58,529.69 8,608.79 L8,557.1 C178.83,471.87 349.03,502.68 521.26,529.13 C676.47,552.97 833.42,573.7 992,494.6 L992,546.29 M8,660.48 C178.83,575.26 349.03,606.06 521.26,632.51 C676.47,656.35 833.42,677.08 992,597.98 L992,649.67 C821.17,734.9 650.97,704.09 478.74,677.64 C323.53,653.8 166.58,633.07 8,712.17 L8,660.48 M992,753.06 C821.17,838.28 650.97,807.48 478.74,781.03 C323.53,757.18 166.58,736.46 8,815.56 L8,763.87 C178.83,678.64 349.03,709.44 521.26,735.9 C676.47,759.74 833.42,780.47 992,701.37 L992,753.06"/>
<path fill="#3c3b6e" d="M8,195.25 C138.03,130.38 267.66,132.43 401.6,149.63 L401.6,511.47 C272,494.84 141.49,490.5 8,557.1 L8,195.25"/>
<path id="s" fill="#fff" d="M40.8,195.75 L50.17,229.37 C42.07,224.93 33.98,220.71 25.64,216.63 C35.65,212.1 45.65,207.94 55.96,204.02 L31.43,237.16 L40.8,195.75"/>
<path fill="#fff" d="M40.8,268.12 L50.17,301.74 C42.07,297.29 33.98,293.08 25.64,289 C35.65,284.47 45.65,280.3 55.96,276.39 L31.43,309.53 L40.8,268.12"/>
<path fill="#fff" d="M40.8,340.49 L50.17,374.11 C42.07,369.66 33.98,365.45 25.64,361.37 C35.65,356.84 45.65,352.67 55.96,348.76 L31.43,381.9 L40.8,340.49"/>
<path fill="#fff" d="M40.8,412.86 L50.17,446.48 C42.07,442.03 33.98,437.82 25.64,433.74 C35.65,429.2 45.65,425.04 55.96,421.13 L31.43,454.27 L40.8,412.86"/>
<path fill="#fff" d="M40.8,485.23 L50.17,518.85 C42.07,514.4 33.98,510.19 25.64,506.11 C35.65,501.57 45.65,497.41 55.96,493.5 L31.43,526.64 L40.8,485.23"/>
<path fill="#fff" d="M73.6,219.6 L82.97,253.95 C74.87,248.88 66.78,244.03 58.44,239.27 C68.45,235.55 78.45,232.18 88.76,229.04 L64.23,260.27 L73.6,219.6"/>
<path fill="#fff" d="M73.6,291.97 L82.97,326.32 C74.87,321.25 66.78,316.4 58.44,311.64 C68.45,307.92 78.45,304.54 88.76,301.41 L64.23,332.64 L73.6,291.97"/>
<path fill="#fff" d="M73.6,364.34 L82.97,398.69 C74.87,393.62 66.78,388.77 58.44,384.01 C68.45,380.29 78.45,376.91 88.76,373.78 L64.23,405.01 L73.6,364.34"/>
<path fill="#fff" d="M73.6,436.71 L82.97,471.06 C74.87,465.99 66.78,461.14 58.44,456.38 C68.45,452.66 78.45,449.28 88.76,446.15 L64.23,477.38 L73.6,436.71"/>
<path fill="#fff" d="M106.4,173.57 L115.77,208.59 C107.67,202.95 99.58,197.5 91.24,192.11 C101.25,189.15 111.25,186.5 121.56,184.09 L97.03,213.55 L106.4,173.57"/>
<path fill="#fff" d="M106.4,245.94 L115.77,280.96 C107.67,275.32 99.58,269.87 91.24,264.48 C101.25,261.52 111.25,258.87 121.56,256.46 L97.03,285.91 L106.4,245.94"/>
<path fill="#fff" d="M106.4,318.31 L115.77,353.33 C107.67,347.69 99.58,342.24 91.24,336.85 C101.25,333.89 111.25,331.24 121.56,328.83 L97.03,358.28 L106.4,318.31"/>
<path fill="#fff" d="M106.4,390.68 L115.77,425.7 C107.67,420.05 99.58,414.61 91.24,409.22 C101.25,406.26 111.25,403.61 121.56,401.2 L97.03,430.65 L106.4,390.68"/>
<path fill="#fff" d="M106.4,463.05 L115.77,498.07 C107.67,492.42 99.58,486.98 91.24,481.59 C101.25,478.63 111.25,475.98 121.56,473.57 L97.03,503.02 L106.4,463.05"/>
<path fill="#fff" d="M139.2,202.2 L148.57,237.84 L124.04,219.7 C134.05,217.44 144.05,215.46 154.36,213.71 L129.83,241.54 L139.2,202.2"/>
<path fill="#fff" d="M139.2,274.57 L148.57,310.21 L124.04,292.07 C134.05,289.81 144.05,287.83 154.36,286.08 L129.83,313.91 L139.2,274.57"/>
<path fill="#fff" d="M139.2,346.94 L148.57,382.58 L124.04,364.44 C134.05,362.17 144.05,360.2 154.36,358.45 L129.83,386.28 L139.2,346.94"/>
<path fill="#fff" d="M139.2,419.3 L148.57,454.95 L124.04,436.81 C134.05,434.54 144.05,432.57 154.36,430.82 L129.83,458.65 L139.2,419.3"/>
<path fill="#fff" d="M172,160.56 L181.37,196.76 L156.84,177.12 C166.85,175.49 176.85,174.12 187.16,172.98 L162.63,199.32 L172,160.56"/>
<path fill="#fff" d="M172,232.92 L181.37,269.13 L156.84,249.48 C166.85,247.85 176.85,246.49 187.16,245.35 L162.63,271.68 L172,232.92"/>
<path fill="#fff" d="M172,305.29 L181.37,341.5 L156.84,321.85 C166.85,320.22 176.85,318.86 187.16,317.72 L162.63,344.05 L172,305.29"/>
<path fill="#fff" d="M172,377.66 L181.37,413.87 L156.84,394.22 C166.85,392.59 176.85,391.23 187.16,390.09 L162.63,416.42 L172,377.66"/>
<path fill="#fff" d="M172,450.03 L181.37,486.24 L156.84,466.59 C166.85,464.96 176.85,463.6 187.16,462.45 L162.63,488.79 L172,450.03"/>
<path fill="#fff" d="M204.8,193.19 L214.17,229.91 L189.64,208.89 C199.65,207.84 209.65,207.03 219.96,206.43 L195.43,231.43 L204.8,193.19"/>
<path fill="#fff" d="M204.8,265.56 L214.17,302.28 L189.64,281.26 C199.65,280.21 209.65,279.4 219.96,278.8 L195.43,303.8 L204.8,265.56"/>
<path fill="#fff" d="M204.8,337.93 L214.17,374.65 L189.64,353.63 C199.65,352.58 209.65,351.77 219.96,351.17 L195.43,376.17 L204.8,337.93"/>
<path fill="#fff" d="M204.8,410.3 L214.17,447.02 L189.64,426 C199.65,424.95 209.65,424.14 219.96,423.54 L195.43,448.53 L204.8,410.3"/>
<path fill="#fff" d="M237.6,155.18 L246.97,192.35 L222.44,170.11 C232.45,169.58 242.45,169.27 252.76,169.15 L228.23,192.94 L237.6,155.18"/>
<path fill="#fff" d="M237.6,227.55 L246.97,264.72 L222.44,242.48 C232.45,241.95 242.45,241.63 252.76,241.52 L228.23,265.31 L237.6,227.55"/>
<path fill="#fff" d="M237.6,299.92 L246.97,337.09 L222.44,314.85 C232.45,314.32 242.45,314 252.76,313.89 L228.23,337.68 L237.6,299.92"/>
<path fill="#fff" d="M237.6,372.29 L246.97,409.46 L222.44,387.22 C232.45,386.69 242.45,386.37 252.76,386.26 L228.23,410.05 L237.6,372.29"/>
<path fill="#fff" d="M237.6,444.66 L246.97,481.83 L222.44,459.59 C232.45,459.06 242.45,458.74 252.76,458.63 L228.23,482.42 L237.6,444.66"/>
<path fill="#fff" d="M270.4,191.06 L279.77,228.64 L255.24,205.31 C265.25,205.25 275.25,205.37 285.56,205.67 L261.03,228.41 L270.4,191.06"/>
<path fill="#fff" d="M270.4,263.43 L279.77,301 L255.24,277.68 C265.25,277.61 275.25,277.74 285.56,278.04 L261.03,300.78 L270.4,263.43"/>
<path fill="#fff" d="M270.4,335.8 L279.77,373.37 L255.24,350.05 C265.25,349.98 275.25,350.11 285.56,350.41 L261.03,373.15 L270.4,335.8"/>
<path fill="#fff" d="M270.4,408.17 L279.77,445.74 L255.24,422.42 C265.25,422.35 275.25,422.47 285.56,422.78 L261.03,445.52 L270.4,408.17"/>
<path fill="#fff" d="M303.2,155.91 L312.57,193.83 L288.04,169.57 L318.36,171.08 L293.83,192.9 L303.2,155.91"/>
<path fill="#fff" d="M303.2,228.28 L312.57,266.2 L288.04,241.94 L318.36,243.45 L293.83,265.27 L303.2,228.28"/>
<path fill="#fff" d="M303.2,300.65 L312.57,338.57 L288.04,314.31 L318.36,315.82 L293.83,337.64 L303.2,300.65"/>
<path fill="#fff" d="M303.2,373.02 L312.57,410.94 L288.04,386.68 L318.36,388.19 L293.83,410.01 L303.2,373.02"/>
<path fill="#fff" d="M303.2,445.39 L312.57,483.31 L288.04,459.05 L318.36,460.56 L293.83,482.37 L303.2,445.39"/>
<path fill="#fff" d="M336,194.28 L345.37,232.49 L320.84,207.43 L351.16,209.91 L326.63,230.96 L336,194.28"/>
<path fill="#fff" d="M336,266.65 L345.37,304.86 L320.84,279.8 L351.16,282.28 L326.63,303.33 L336,266.65"/>
<path fill="#fff" d="M336,339.02 L345.37,377.23 L320.84,352.17 L351.16,354.65 L326.63,375.69 L336,339.02"/>
<path fill="#fff" d="M336,411.39 L345.37,449.6 L320.84,424.54 L351.16,427.02 L326.63,448.06 L336,411.39"/>
<path fill="#fff" d="M368.8,161.23 L378.17,199.68 L353.64,173.96 L383.96,177.24 L359.43,197.66 L368.8,161.23"/>
<path fill="#fff" d="M368.8,233.6 L378.17,272.05 L353.64,246.33 L383.96,249.61 L359.43,270.02 L368.8,233.6"/>
<path fill="#fff" d="M368.8,305.97 L378.17,344.42 L353.64,318.7 L383.96,321.98 L359.43,342.39 L368.8,305.97"/>
<path fill="#fff" d="M368.8,378.34 L378.17,416.79 L353.64,391.07 L383.96,394.35 L359.43,414.76 L368.8,378.34"/>
<path fill="#fff" d="M368.8,450.71 L378.17,489.16 L353.64,463.44 L383.96,466.72 L359.43,487.13 L368.8,450.71"/>
<path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

0
pong/static/flags/us.svg:Zone.Identifier Normal file
View File

1101
pong/static/game.js Normal file
View File

File diff suppressed because it is too large Load Diff

0
pong/static/game.js:Zone.Identifier Normal file
View File

339
pong/static/index.html Normal file
View File

@@ -0,0 +1,339 @@
{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong Game</title>
<link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}?v=3">
<div class="logo">
<img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
</div>
</head>
<body>
<div class="language-switcher">
<img id="lang-fr" src="{% static 'flags/fr.svg' %}" alt="Français">
<img id="lang-en" src="{% static 'flags/us.svg' %}" alt="English">
<img id="lang-it" src="{% static 'flags/it.svg' %}" alt="Italiano">
<img id="lang-es" src="{% static 'flags/es.svg' %}" alt="Español">
<img id="lang-de" src="{% static 'flags/de.svg' %}" alt="Deutsch">
</div>
<div class="background">
<div class="stars" id="stars"></div>
</div>
<div id="pong-elements" style="display: flex;">
<div class="paddle paddle-left"></div>
<div class="paddle paddle-right"></div>
<div class="ball_anim"></div>
</div>
<button id="settings-btn">⚙️ Réglages</button>
<div id="settings-menu" style="display: none;">
<button id="close-settings">✖️</button>
<h2>Reglages</h2>
<label for="color-picker">Couleur:</label>
<input type="color" id="color-picker">
<br>
<label for="font-selector">Police:</label>
<select id="font-selector">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
</select>
<br>
<label for="font-size-slider">Taille:</label>
<input type="range" id="font-size-slider" min="12" max="36" value="16">
</div>
<div class="container" id="block-form">
<h1 id="welcome">BIENVENUE DANS LE PONG 42</h1>
<div class="input-container">
<div id="auth-form">
<label for="nickname" id="label-nickname">Enter your nickname:</label>
<input type="text" id="nickname" name="nickname">
<button id="check-nickname">Check Nickname</button>
</div>
<div id="register-form" style="display: none;">
<label for="password" id="label-password">Enter your password:</label>
<input type="password" id="password" name="password">
<label for="confirm-password" id="label-confirm-password">Confirm your password:</label>
<input type="password" id="confirm-password" name="confirm-password">
<button id="register">Register</button>
</div>
<div id="login-form" style="display: none;">
<label for="login-password" id="label-login-password">Enter your password:</label>
<input type="password" id="login-password" name="login-password">
<button id="login">Login</button>
</div>
<div id="post-form-buttons" style="display: none;">
<button id="local-game">Local Game</button>
<button id="quick-match">Quick Match</button>
<button id="tournament">Tournament</button>
</div>
<div id="auth-form2" style="display: none;">
<label for="nickname" id="label-nickname2">Enter the second player's nickname:</label>
<input type="text" id="nickname2" name="nickname">
<button id="check-nickname2">Check Nickname</button>
</div>
<div id="register-form2" style="display: none;">
<label for="password" id="label-password2">Enter the second player's password:</label>
<input type="password" id="password2" name="password">
<label for="confirm-password" id="label-confirm-password2">Confirm the second player's password:</label>
<input type="password" id="confirm-password2" name="confirm-password">
<button id="register2">Register</button>
</div>
<div id="login-form2" style="display: none;">
<label for="login-password" id="label-login-password2">Enter the second player's password:</label>
<input type="password" id="login-password2" name="login-password">
<button id="login2">Login</button>
</div>
</div>
</div>
<div class="navbar">
<button class="burger-menu">☰</button>
<div id="dropdown-menu" class="dropdown-content">
<a href="#" data-table="player-list">Players</a>
<a href="#" data-table="match-list">Matches</a>
<a href="#" data-table="tournoi-list">Tournois</a>
<a href="#" data-table="blockchain-list">blockchain</a>
</div>
</div>
<div id="tournament-bracket" style="display: none;"></div>
<div id="game-controls" style="display: none;">
<button id="home">Home</button>
<button id="retry">Rejouer</button>
</div>
<div id="game1" style="display: none;">
<div id="player1-name" class="name"></div>
<div id="player2-name" class="name"></div>
<div id="game2">
<div id="player1-score" class="score">0</div>
<div id="player2-score" class="score">0</div>
<div id="player1-pad" class="pad"></div>
<div id="player2-pad" class="pad"></div>
<div id="ball"></div>
<div id="game-text" class="gameText"></div>
</div>
</div>
<div id="match-list" class="content-list" style="display: none;">
<h1>Matches</h1>
<input type="text" id="search-match-player" placeholder="Rechercher par nom de joueur">
<input type="date" id="search-match-date">
<table>
<thead>
<tr>
<th>ID</th>
<th>Player 1</th>
<th>Player 2</th>
<th>Score Player 1</th>
<th>Score Player 2</th>
<th>Winner</th>
<th>Ball Touches Player 1</th>
<th>Ball Touches Player 2</th>
<th>Duration</th>
<th>Date</th>
<th>Is Tournament</th>
<th>Tournament</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="generate-match-chart">Générer le graphique</button>
<canvas id="match-chart" style="display:none;"></canvas>
</div>
<div id="player-list" class="content-list" style="display: none;">
<h1>Players</h1>
<input type="text" id="search-player" placeholder="Rechercher par nom">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Total Matches</th>
<th>Total Wins</th>
<th>Win Percentage</th>
<th>Average Match Score</th>
<th>Average Opponent Score</th>
<th>Best Score</th>
<th>Average Ball Touches</th>
<th>Total Duration</th>
<th>Average Duration</th>
<th>Participated Tournaments</th>
<th>Won Tournaments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="generate-player-chart">Générer le graphique</button>
<canvas id="player-chart" style="display:none;"></canvas>
</div>
<div id="tournoi-list" class="content-list" style="display: none;">
<h1>Tournois</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Nbr_players</th>
<th>Date</th>
<th>Winner</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</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 'burger.js' %}"></script>
<script src="{% static 'game.js' %}"></script>
<script src="{% static 'language.js' %}"></script>
</body>
</html>
<div id="player-stats" class="player-stats-popup" style="display: none;">
<h3>Player Statistics</h3>
<p id="stats-username"></p>
<p id="stats-total-matches"></p>
<p id="stats-total-wins"></p>
<p id="stats-win-percentage"></p>
<p id="stats-best-score"></p>
</div>
<div id="chat-controls">
<!-- Autres éléments du chat -->
<button id="quit-room-btn">Quitter la room</button>
<button id="show-chat">Afficher le Chat</button>
<button id="hide-chat">Masquer le Chat</button>
</div>
<div id="chat-container">
<!-- Conteneur des journaux de chat -->
<div id="chat-log-container">
<div id="chat-log-main_room" class="chat-log" style="display:block;"></div>
<div id="chat-log-tournament" class="chat-log" style="display:none;"></div>
<div id="chat-log-quick_match" class="chat-log" style="display:none;"></div>
</div>
<!-- Entrées de texte et boutons d'envoi pour chaque room -->
<div id="chat-input-container">
<div id="chat-input-main_room" class="chat-input active">
<input type="text" placeholder="Tapez votre message...">
<button id="chat-button-main_room" class="chat-button">➤</button>
</div>
<div id="chat-input-tournament" class="chat-input">
<input type="text" placeholder="Tapez votre message...">
<button id="chat-button-tournament" class="chat-button">➤</button>
</div>
<div id="chat-input-quick_match" class="chat-input">
<input type="text" placeholder="Tapez votre message...">
<button id="chat-button-quick_match" class="chat-button">➤</button>
</div>
</div>
<!-- Conteneur des onglets de room -->
<div id="room-tabs-container">
<div class="room-tab active" data-room="main_room">Main Room</div>
<div class="room-tab" data-room="tournament">Tournament</div>
<div class="room-tab" data-room="quick_match">Quick Match</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const chatContainer = document.getElementById('chat-container');
const showChatButton = document.getElementById('show-chat');
const hideChatButton = document.getElementById('hide-chat');
showChatButton.addEventListener('click', function() {
chatContainer.style.display = 'flex'; // Afficher le conteneur de chat
});
hideChatButton.addEventListener('click', function() {
chatContainer.style.display = 'none'; // Masquer le conteneur de chat
});
const tabs = document.querySelectorAll('.room-tab');
const chatLogs = document.querySelectorAll('.chat-log');
const chatInputs = document.querySelectorAll('.chat-input');
const chatButtons = document.querySelectorAll('.chat-button');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const roomId = this.dataset.room;
console.log(`Switching to room: ${roomId}`);
// Afficher le journal de chat correspondant
chatLogs.forEach(log => {
if (log.id === `chat-log-${roomId}`) {
log.style.display = 'block';
console.log(`Displaying chat log for: ${roomId}`);
} else {
log.style.display = 'none';
}
});
// Afficher l'entrée de texte correspondante
chatInputs.forEach(input => {
if (input.id === `chat-input-${roomId}`) {
input.classList.add('active');
input.style.display = 'flex';
console.log(`Displaying chat input for: ${roomId}`);
} else {
input.classList.remove('active');
input.style.display = 'none';
}
});
// Afficher le bouton correspondant
chatButtons.forEach(button => {
if (button.id === `chat-button-${roomId}`) {
button.style.display = 'flex';
console.log(`Displaying chat button for: ${roomId}`);
} else {
button.style.display = 'none';
}
});
// Mettre à jour l'onglet actif
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
console.log(`Tab for ${roomId} is now active`);
});
});
});
</script>
<script>
const starsContainer = document.getElementById('stars');
for (let i = 0; i < 500; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.width = `${Math.random() * 3}px`;
star.style.height = star.style.width;
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.animationDuration = `${Math.random() * 2 + 1}s`;
starsContainer.appendChild(star);
}
</script>
</body>
</html>

0
pong/static/index.html:Zone.Identifier Normal file
View File

113
pong/static/language.js Normal file
View File

@@ -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';
});
});

0
pong/static/language.js:Zone.Identifier Normal file
View File

BIN
pong/static/logo-42-perpignan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

0
pong/static/logo-42-perpignan.png:Zone.Identifier Normal file
View File

721
pong/static/styles.css Normal file
View File

@@ -0,0 +1,721 @@
/* General styles */
html {
font-family: Arial, sans-serif;
color: #00ffff;
background-color: #0a0a2a;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
overflow: auto;
}
label {
margin: 10px 0 5px;
}
input {
padding: 10px;
margin: 5px 0 20px;
width: 200px;
}
button {
background-color: #00ffff;
color: #000033;
border: none;
padding: 1rem 2rem;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px;
margin-top: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
button:hover {
background-color: #000033;
color: #00ffff;
box-shadow: 0 0 20px #00ffff;
}
#game1 {
width: 810px;
height: 500px;
position: relative;
background-color: #000;
border: 3px solid #00ffff;
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.name {
font-size: 24px;
position: absolute;
top: 20px;
}
#player1-name {
left: 10px;
/* Adjust player score position */
}
#player2-name {
right: 10px;
/* Adjust bot score position */
}
#game2 {
top: 60px;
width: 800px;
height: 400px;
position: absolute;
background-color: #000;
overflow: hidden;
border: 2px solid white;
/* Add red border */
display: flex;
justify-content: center;
align-items: center;
}
.score {
font-size: 24px;
position: absolute;
top: 10px;
}
#player1-score {
left: 50px;
/* Adjust player score position */
}
#player2-score {
right: 50px;
/* Adjust bot score position */
}
.pad {
width: 10px;
height: 100px;
background-color: #ffffff;
position: absolute;
}
#player1-pad {
left: 10px;
background-color: #00ffff;
border-radius: 10px;
box-shadow: 0 0 15px #00ffff;
}
#player2-pad {
right: 10px;
background-color: #00ffff;
border-radius: 10px;
box-shadow: 0 0 15px #00ffff;
}
#ball {
width: 20px;
height: 20px;
background-color: #00ffff;
border-radius: 50%;
position: absolute;
}
#game-text {
font-size: 64px;
color: #00ffff;
position: absolute;
top: 150px;
}
.logo {
position: absolute;
top: 20px;
left: 20px;
z-index: 20;
}
.logo img {
max-width: 100%;
height: auto;
}
.stars {
position: absolute;
width: 100%;
height: 100%;
}
.star {
position: absolute;
background-color: #ffffff;
border-radius: 50%;
animation: twinkle 2s infinite alternate;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.pong-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
pointer-events: none;
}
.paddle {
position: absolute;
width: 20px;
height: 100px;
background-color: #00ffff;
border-radius: 10px;
box-shadow: 0 0 15px #00ffff;
}
.paddle-left {
left: 50px;
animation: paddleMove 5s infinite alternate ease-in-out;
}
.paddle-right {
right: 50px;
animation: paddleMove 4s infinite alternate-reverse ease-in-out;
}
.ball_anim {
position: absolute;
width: 30px;
height: 30px;
background-color: #00ffff;
border-radius: 50%;
box-shadow: 0 0 20px #00ffff;
left: 80px;
top: 50%;
transform-style: preserve-3d;
animation: ballMove 3s linear infinite;
}
@keyframes paddleMove {
0% {
transform: translateY(10vh);
}
100% {
transform: translateY(70vh);
}
}
@keyframes ballMove {
0% {
transform: translateZ(0) scale(1);
}
50% {
transform: translateZ(-500px) scale(0.5);
}
100% {
transform: translateZ(0) scale(1);
}
}
.input-container {
margin-bottom: 2rem;
}
.container {
text-align: center;
background-color: rgba(0, 0, 40, 0.8);
padding: 3rem;
border-radius: 15px;
border: 3px solid #00ffff;
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
position: relative;
z-index: 10;
max-width: 80%;
overflow: auto;
}
.navbar {
position: absolute;
top: 30px;
right: 10px;
padding: 10px;
}
.burger-menu {
font-size: 24px;
background: none;
border: none;
color: #00ffff;
cursor: pointer;
transition: color 0.3s ease;
}
.burger-menu:hover {
color: #ffffff;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
right: 0;
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.show {
display: block;
}
.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;
}
.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;
}
/**************************CHAT*************************************/
@keyframes borderGlow {
0% {
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
}
50% {
box-shadow: 0 0 60px #0099ff, inset 0 0 40px #0099ff;
}
100% {
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
}
}
#chat-container {
display: none; /* Masquer par défaut */
position: fixed;
bottom: 10px;
left: 10px;
width: 300px;
background-color: rgba(0, 0, 0, 0.7); /* Couleur de fond semi-transparente par défaut */
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
z-index: 1000;
box-sizing: border-box;
flex-direction: column;
animation: borderGlow 3s infinite; /* Ajouter l'animation */
transition: background-color 0.3s, transform 0.3s; /* Ajouter des transitions */
}
#chat-container:hover {
background-color: rgba(0, 0, 0, 1); /* Couleur de fond opaque au survol */
transform: scale(1.05); /* Agrandir légèrement au survol */
}
.chat-log {
max-height: 150px;
overflow-y: auto;
margin-bottom: 10px;
box-sizing: border-box;
background-color: transparent;
display: none;
}
.chat-input {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 5px;
position: relative; /* Assurez-vous que le conteneur parent est positionné */
}
.chat-input.active {
display: flex; /* Afficher uniquement l'élément actif */
}
.chat-input input[type="text"] {
flex: 1;
padding: 5px;
font-size: 13px;
border: none;
border-radius: 5px;
box-sizing: border-box;
height: 28px;
width: 250px; /* Réduire la largeur */
align-items: center;
justify-content: center;
}
.chat-button {
height: 50px;
width: 50px; /* Réduire la taille du bouton */
border: none;
border-radius: 50%;
background: linear-gradient(45deg, #00ffff, #0099ff);
color: #000033;
cursor: pointer;
position: absolute; /* Positionner le bouton de manière absolue */
right: 10px; /* Ajuster la position à droite */
top: 10%; /* Centrer verticalement */
transform: translateY(-50%); /* Centrer verticalement */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 20px;
padding: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background 0.3s, transform 0.3s;
animation: buttonGlow 3s infinite; /* Ajouter l'animation */
}
.chat-button:hover {
background: linear-gradient(45deg, #0099ff, #00ffff);
transform: translateY(-50%) scale(1.1); /* Agrandir légèrement au survol */
}
.chat-button:active {
transform: translateY(-50%) scale(0.95); /* Réduire légèrement à l'activation */
}
@keyframes buttonGlow {
0% {
box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
}
50% {
box-shadow: 0 0 20px #0099ff, inset 0 0 10px #0099ff;
}
100% {
box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
}
}
#room-tabs-container {
display: flex;
justify-content: space-between;
margin-top: 5px;
}
.room-tab {
font-size: 14px;
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
border: 1px solid #00ffff;
background-color: #000033;
color: #00ffff;
border-radius: 5px;
box-sizing: border-box;
opacity: 0.1;
transition: background 0.3s, transform 0.3s; /* Ajouter des transitions */
animation: tabGlow 3s infinite; /* Ajouter l'animation */
}
.room-tab:hover {
background-color: #00ffff;
color: #000033;
transform: scale(1.1); /* Agrandir légèrement au survol */
}
.room-tab:active {
transform: scale(0.95); /* Réduire légèrement à l'activation */
}
.room-tab.active {
background-color: #00ffff;
color: #000033;
opacity: 1;
}
@keyframes tabGlow {
0% {
box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
}
50% {
box-shadow: 0 0 20px #0099ff, inset 0 0 10px #0099ff;
}
100% {
box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
}
}
#chat-controls {
position: fixed;
bottom: 10px;
left: 320px; /* Correspondre à la position à côté du conteneur de chat */
display: flex;
flex-direction: column;
gap: 5px; /* Espacement entre les boutons */
}
#chat-controls button {
width: 100px; /* Correspondre à la taille des boutons */
height: 30px; /* Correspondre à la taille des boutons */
font-size: 12px; /* Correspondre à la taille de la police */
padding: 5px;
border-radius: 5px;
cursor: pointer;
background-color: #00ffff;
color: #000033;
border: none;
transition: background-color 0.3s, transform 0.3s;
animation: buttonGlow 3s infinite; /* Ajouter l'animation */
}
#chat-controls button:hover {
background-color: #0099ff;
transform: scale(1.05);
}
#chat-controls button:active {
transform: scale(0.95);
}
@keyframes buttonGlow {
0% {
box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
}
50% {
box-shadow: 0 0 20px #0099ff, inset 0 0 10px #0099ff;
}
100% {
box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
}
}
.player-stats-popup {
position: fixed;
bottom: 20px;
left: 320px; /* Adjust to appear above the chat */
width: 300px;
background-color: rgba(0, 0, 40, 0.9);
color: #00ffff;
border-radius: 10px;
padding: 15px;
box-shadow: 0 0 20px #00ffff, inset 0 0 10px #00ffff;
z-index: 2000;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.player-stats-popup.show {
display: block;
transform: translateY(0);
opacity: 1;
}
.player-stats-popup.hide {
transform: translateY(20px);
opacity: 0;
}
#quit-room-btn, #show-chat-btn {
display: inline-block;
padding: 5px 10px;
margin: 5px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
font-size: 14px;
}
#quit-room-btn:hover, #show-chat-btn:hover {
background-color: #0056b3;
}

0
pong/static/styles.css:Zone.Identifier Normal file
View File