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

chat

Browse Source
This commit is contained in:
Ladebeze66
2024-09-15 18:39:45 +02:00
parent 21b73a37ae
commit 984c8a2a82
10 changed files with 774 additions and 906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
pong/static/index.html
View File

@@ -205,10 +205,10 @@
<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">
<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>
@@ -221,48 +221,56 @@
<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 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>
<!-- 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;
console.log(`Switching to room: ${roomId}`);
// 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');
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');
console.log(`Displaying chat input for: ${roomId}`);
} else {
input.classList.remove('active');
}
});
// 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++) {