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

chatf

Browse Source
This commit is contained in:
Ladebeze66
2024-09-15 19:51:33 +02:00
parent 984c8a2a82
commit 91a856e2fd
4 changed files with 273 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
pong/static/index.html
View File

@@ -198,78 +198,108 @@
<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 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 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 => {
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>
<div id="chat-controls">
<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');