mirror of
https://github.com/AudebertAdrien/ft_transcendence.git
synced 2026-11-09 18:17:07 +01:00
01
This commit is contained in:
@@ -103,7 +103,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Displaying matches:');
|
||||
const matchListBody = document.querySelector('#match-list tbody');
|
||||
matchListBody.innerHTML = '';
|
||||
|
||||
|
||||
if (matches.length != 0) {
|
||||
matches.forEach(match => {
|
||||
@@ -125,7 +124,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
matchListBody.appendChild(row);
|
||||
});
|
||||
} else {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td colspan="12">No matches found.</td>
|
||||
`;
|
||||
@@ -137,7 +135,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Displaying players:');
|
||||
const playersListBody = document.querySelector('#player-list tbody');
|
||||
playersListBody.innerHTML = '';
|
||||
|
||||
|
||||
if (players.length != 0) {
|
||||
players.forEach(player => {
|
||||
@@ -160,9 +157,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
playersListBody.appendChild(row);
|
||||
});
|
||||
} else {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td colspan="12">No player found.</td>
|
||||
<td colspan="12">No matches found.</td>
|
||||
`
|
||||
playersListBody.appendChild(row);
|
||||
}
|
||||
@@ -175,22 +171,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
if (tournois.length != 0) {
|
||||
tournois.forEach(tournoi => {
|
||||
console.log('Winner:', tournoi.winner); //debug !!!!!!!!!!!!!!!!!
|
||||
console.log('Winner:', tournoi.winner__name); //debug !!!!!!!!!!!!!!!!!
|
||||
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 ? tournoi.winner.name : 'No one yet ...'}</td>
|
||||
<td>${tournoi.winner.name}</td>
|
||||
`;
|
||||
tournoisListBody.appendChild(row);
|
||||
});
|
||||
} else {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td colspan="12">No tournoi found.</td>
|
||||
<td colspan="12">No matches found.</td>
|
||||
`
|
||||
tournoisListBody.appendChild(row);
|
||||
}
|
||||
|
||||
0
pong/static/flags/de.svg
Executable file → Normal file
0
pong/static/flags/de.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
0
pong/static/flags/es.svg
Executable file → Normal file
0
pong/static/flags/es.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 415 KiB After Width: | Height: | Size: 415 KiB |
0
pong/static/flags/fr.svg
Executable file → Normal file
0
pong/static/flags/fr.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 946 B After Width: | Height: | Size: 946 B |
0
pong/static/flags/it.svg
Executable file → Normal file
0
pong/static/flags/it.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 959 B After Width: | Height: | Size: 959 B |
0
pong/static/flags/us.svg
Executable file → Normal file
0
pong/static/flags/us.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
1327
pong/static/game.js
1327
pong/static/game.js
File diff suppressed because it is too large
Load Diff
@@ -3,205 +3,279 @@
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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="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 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="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">Player 1</div>
|
||||
<div id="player2-name" class="name">Player 2</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="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>
|
||||
<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>
|
||||
</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>
|
||||
</table>
|
||||
<button id="generate-match-chart">Générer le graphique</button>
|
||||
<canvas id="match-chart" style="display:none;"></canvas>
|
||||
</div>
|
||||
|
||||
<script src="{% static 'game.js' %}"></script>
|
||||
<script src="{% static 'burger.js' %}"></script>
|
||||
<script src="{% static 'language.js' %}"></script>
|
||||
<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 'game.js' %}"></script>
|
||||
<script src="{% static 'burger.js' %}"></script>
|
||||
<script src="{% static 'language.js' %}"></script>
|
||||
|
||||
<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">
|
||||
<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" 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>
|
||||
|
||||
<!-- Ajout du script JavaScript pour la gestion dynamique -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabs = document.querySelectorAll('.room-tab');
|
||||
const chatLogs = document.querySelectorAll('.chat-log');
|
||||
const chatInputs = document.querySelectorAll('.chat-input');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
const roomId = this.dataset.room;
|
||||
|
||||
// Afficher le journal de chat correspondant
|
||||
chatLogs.forEach(log => {
|
||||
log.style.display = log.id === `chat-log-${roomId}` ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Afficher l'entrée de texte correspondante
|
||||
chatInputs.forEach(input => {
|
||||
input.classList.remove('active');
|
||||
if (input.id === `chat-input-${roomId}`) {
|
||||
input.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Mettre à jour l'onglet actif
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
this.classList.add('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>
|
||||
</html>
|
||||
@@ -1,472 +1,601 @@
|
||||
/* 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;
|
||||
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;
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
margin: 5px 0 20px;
|
||||
width: 200px;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#player1-name {
|
||||
left: 10px;
|
||||
/* Adjust player score position */
|
||||
left: 10px;
|
||||
/* Adjust player score position */
|
||||
}
|
||||
|
||||
#player2-name {
|
||||
right: 10px;
|
||||
/* Adjust bot score position */
|
||||
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;
|
||||
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;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#player1-score {
|
||||
left: 50px;
|
||||
/* Adjust player score position */
|
||||
left: 50px;
|
||||
/* Adjust player score position */
|
||||
}
|
||||
|
||||
#player2-score {
|
||||
right: 50px;
|
||||
/* Adjust bot score position */
|
||||
right: 50px;
|
||||
/* Adjust bot score position */
|
||||
}
|
||||
|
||||
.pad {
|
||||
width: 10px;
|
||||
height: 100px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #00ffff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#game-text {
|
||||
font-size: 64px;
|
||||
color: #00ffff;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
font-size: 64px;
|
||||
color: #00ffff;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 2s infinite alternate;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
left: 50px;
|
||||
animation: paddleMove 5s infinite alternate ease-in-out;
|
||||
}
|
||||
|
||||
.paddle-right {
|
||||
right: 50px;
|
||||
animation: paddleMove 4s infinite alternate-reverse ease-in-out;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
0% {
|
||||
transform: translateY(10vh);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(70vh);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(70vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ballMove {
|
||||
0% {
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
0% {
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateZ(-500px) scale(0.5);
|
||||
}
|
||||
50% {
|
||||
transform: translateZ(-500px) scale(0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin-bottom: 2rem;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
font-size: 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #00ffff;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.burger-menu:hover {
|
||||
color: #ffffff;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
background-color: #333;
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
.language-switcher {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.language-switcher img {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
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;
|
||||
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);
|
||||
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);
|
||||
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;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
body {
|
||||
color: rgb(0, 255, 255); /* Valeur par défaut */
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
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;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#game-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
background-color: #000033;
|
||||
color: #00ffff;
|
||||
box-shadow: 0 0 20px #00ffff;
|
||||
}
|
||||
|
||||
/* Styles pour le conteneur principal du chat */
|
||||
#chat-container {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 300px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
||||
z-index: 1000;
|
||||
box-sizing: border-box; /* Ajouté */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Styles pour le conteneur du chat log */
|
||||
#chat-log-container {
|
||||
width: 100%;
|
||||
background-color: transparent; /* Fond transparent */
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
max-height: 150px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box; /* Ajouté */
|
||||
flex: 1; /* Permet au conteneur de prendre tout l'espace disponible */
|
||||
}
|
||||
|
||||
.chat-log {
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box; /* Ajouté */
|
||||
background-color: transparent; /* Fond transparent */
|
||||
}
|
||||
|
||||
/* Styles pour l'entrée de texte du chat */
|
||||
#chat-input-container {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
display: flex;
|
||||
flex-direction: column; /* Aligner les chat-inputs verticalement */
|
||||
background-color: transparent; /* Fond transparent */
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box; /* Ajouté */
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin-right: 5px;
|
||||
height: 28px;
|
||||
box-sizing: border-box; /* Ajouté */
|
||||
display: none; /* Masquer par défaut */
|
||||
}
|
||||
|
||||
.chat-input.active {
|
||||
display: flex; /* Afficher lorsque actif */
|
||||
}
|
||||
|
||||
.chat-input input[type="text"] {
|
||||
flex: 1; /* Permet à l'input de prendre tout l'espace disponible */
|
||||
padding: 5px;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box; /* Ajouté */
|
||||
height: 28px; /* Augmenter la hauteur de l'input */
|
||||
}
|
||||
|
||||
.chat-button {
|
||||
height: 28px;
|
||||
width: 150px; /* Réduire la largeur du bouton */
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #00ffff;
|
||||
color: #000033;
|
||||
cursor: pointer;
|
||||
margin-left: 100px; /* Espace entre l'input et le bouton */
|
||||
display: flex; /* Utiliser flexbox pour centrer le contenu */
|
||||
align-items: center; /* Centrer verticalement */
|
||||
justify-content: center; /* Centrer horizontalement */
|
||||
text-align: center; /* Assurer que le texte est centré */
|
||||
font-size: 13px; /* Ajuster la taille de la police */
|
||||
padding: 0; /* Supprimer le padding interne */
|
||||
}
|
||||
|
||||
/* Styles pour les onglets de room */
|
||||
#room-tabs-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Styles pour les onglets de room */
|
||||
.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; /* Ajouté */
|
||||
opacity: 0.1; /* Onglets inactifs grisés */
|
||||
}
|
||||
|
||||
.room-tab:hover {
|
||||
background-color: #00ffff;
|
||||
color: #000033;
|
||||
}
|
||||
|
||||
.room-tab.active {
|
||||
background-color: #00ffff;
|
||||
color: #000033;
|
||||
opacity: 1; /* Onglets actifs non grisés */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user