mirror of
https://github.com/AudebertAdrien/ft_transcendence.git
synced 2026-02-04 03:30:26 +01:00
chatf
This commit is contained in:
parent
984c8a2a82
commit
91a856e2fd
19
pong/game/migrations/0002_alter_match_winner.py
Normal file
19
pong/game/migrations/0002_alter_match_winner.py
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
# Generated by Django 5.1.1 on 2024-09-15 16:40
|
||||||
|
|
||||||
|
import django.db.models.deletion
|
||||||
|
from django.db import migrations, models
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('game', '0001_initial'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.AlterField(
|
||||||
|
model_name='match',
|
||||||
|
name='winner',
|
||||||
|
field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='won_matches', to='game.player'),
|
||||||
|
),
|
||||||
|
]
|
||||||
@ -948,6 +948,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.switchRoom(roomName);
|
this.switchRoom(roomName);
|
||||||
|
// Activer l'affichage du conteneur de chat
|
||||||
|
document.getElementById('chat-container').style.display = 'flex';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -198,78 +198,108 @@
|
|||||||
<script src="{% static 'burger.js' %}"></script>
|
<script src="{% static 'burger.js' %}"></script>
|
||||||
<script src="{% static 'language.js' %}"></script>
|
<script src="{% static 'language.js' %}"></script>
|
||||||
|
|
||||||
<div id="chat-container">
|
<div id="chat-controls">
|
||||||
<!-- Conteneur des journaux de chat -->
|
<button id="show-chat">Afficher le Chat</button>
|
||||||
<div id="chat-log-container">
|
<button id="hide-chat">Masquer le Chat</button>
|
||||||
<div id="chat-log-main_room" class="chat-log" style="display:block;"></div>
|
</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 id="chat-container">
|
||||||
</div>
|
<!-- Conteneur des journaux de chat -->
|
||||||
|
<div id="chat-log-container">
|
||||||
<!-- Entrées de texte et boutons d'envoi pour chaque room -->
|
<div id="chat-log-main_room" class="chat-log" style="display:block;"></div>
|
||||||
<div id="chat-input-container">
|
<div id="chat-log-tournament" class="chat-log" style="display:none;"></div>
|
||||||
<div id="chat-input-main_room" class="chat-input active">
|
<div id="chat-log-quick_match" class="chat-log" style="display:none;"></div>
|
||||||
<input type="text" placeholder="Tapez votre message...">
|
</div>
|
||||||
<button id="chat-button-main_room" class="chat-button">➤</button>
|
|
||||||
</div>
|
<!-- Entrées de texte et boutons d'envoi pour chaque room -->
|
||||||
<div id="chat-input-tournament" class="chat-input">
|
<div id="chat-input-container">
|
||||||
<input type="text" placeholder="Tapez votre message...">
|
<div id="chat-input-main_room" class="chat-input active">
|
||||||
<button id="chat-button-tournament" class="chat-button">➤</button>
|
<input type="text" placeholder="Tapez votre message...">
|
||||||
</div>
|
<button id="chat-button-main_room" class="chat-button">➤</button>
|
||||||
<div id="chat-input-quick_match" class="chat-input">
|
</div>
|
||||||
<input type="text" placeholder="Tapez votre message...">
|
<div id="chat-input-tournament" class="chat-input">
|
||||||
<button id="chat-button-quick_match" class="chat-button">➤</button>
|
<input type="text" placeholder="Tapez votre message...">
|
||||||
</div>
|
<button id="chat-button-tournament" class="chat-button">➤</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="chat-input-quick_match" class="chat-input">
|
||||||
<!-- Conteneur des onglets de room -->
|
<input type="text" placeholder="Tapez votre message...">
|
||||||
<div id="room-tabs-container">
|
<button id="chat-button-quick_match" class="chat-button">➤</button>
|
||||||
<div class="room-tab active" data-room="main_room">Main Room</div>
|
</div>
|
||||||
<div class="room-tab" data-room="tournament">Tournament</div>
|
</div>
|
||||||
<div class="room-tab" data-room="quick_match">Quick Match</div>
|
|
||||||
</div>
|
<!-- Conteneur des onglets de room -->
|
||||||
</div>
|
<div id="room-tabs-container">
|
||||||
|
<div class="room-tab active" data-room="main_room">Main Room</div>
|
||||||
<script>
|
<div class="room-tab" data-room="tournament">Tournament</div>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
<div class="room-tab" data-room="quick_match">Quick Match</div>
|
||||||
const tabs = document.querySelectorAll('.room-tab');
|
</div>
|
||||||
const chatLogs = document.querySelectorAll('.chat-log');
|
</div>
|
||||||
const chatInputs = document.querySelectorAll('.chat-input');
|
|
||||||
|
<script>
|
||||||
tabs.forEach(tab => {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
tab.addEventListener('click', function() {
|
const chatContainer = document.getElementById('chat-container');
|
||||||
const roomId = this.dataset.room;
|
const showChatButton = document.getElementById('show-chat');
|
||||||
|
const hideChatButton = document.getElementById('hide-chat');
|
||||||
console.log(`Switching to room: ${roomId}`);
|
|
||||||
|
showChatButton.addEventListener('click', function() {
|
||||||
// Afficher le journal de chat correspondant
|
chatContainer.style.display = 'flex'; // Afficher le conteneur de chat
|
||||||
chatLogs.forEach(log => {
|
});
|
||||||
if (log.id === `chat-log-${roomId}`) {
|
|
||||||
log.style.display = 'block';
|
hideChatButton.addEventListener('click', function() {
|
||||||
console.log(`Displaying chat log for: ${roomId}`);
|
chatContainer.style.display = 'none'; // Masquer le conteneur de chat
|
||||||
} else {
|
});
|
||||||
log.style.display = 'none';
|
|
||||||
}
|
const tabs = document.querySelectorAll('.room-tab');
|
||||||
});
|
const chatLogs = document.querySelectorAll('.chat-log');
|
||||||
|
const chatInputs = document.querySelectorAll('.chat-input');
|
||||||
// Afficher l'entrée de texte correspondante
|
const chatButtons = document.querySelectorAll('.chat-button');
|
||||||
chatInputs.forEach(input => {
|
|
||||||
if (input.id === `chat-input-${roomId}`) {
|
tabs.forEach(tab => {
|
||||||
input.classList.add('active');
|
tab.addEventListener('click', function() {
|
||||||
console.log(`Displaying chat input for: ${roomId}`);
|
const roomId = this.dataset.room;
|
||||||
} else {
|
|
||||||
input.classList.remove('active');
|
console.log(`Switching to room: ${roomId}`);
|
||||||
}
|
|
||||||
});
|
// Afficher le journal de chat correspondant
|
||||||
|
chatLogs.forEach(log => {
|
||||||
// Mettre à jour l'onglet actif
|
if (log.id === `chat-log-${roomId}`) {
|
||||||
tabs.forEach(t => t.classList.remove('active'));
|
log.style.display = 'block';
|
||||||
this.classList.add('active');
|
console.log(`Displaying chat log for: ${roomId}`);
|
||||||
console.log(`Tab for ${roomId} is now active`);
|
} else {
|
||||||
});
|
log.style.display = 'none';
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
|
// 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>
|
<script>
|
||||||
const starsContainer = document.getElementById('stars');
|
const starsContainer = document.getElementById('stars');
|
||||||
|
|||||||
@ -475,105 +475,60 @@ canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**************************CHAT*************************************/
|
/**************************CHAT*************************************/
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes borderGlow {
|
@keyframes borderGlow {
|
||||||
0% {
|
0% {
|
||||||
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
box-shadow: 0 0 60px #0099ff, inset 0 0 40px #0099ff;
|
box-shadow: 0 0 60px #0099ff, inset 0 0 40px #0099ff;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Styles pour le conteneur principal du chat */
|
|
||||||
#chat-container {
|
#chat-container {
|
||||||
position: fixed;
|
display: none; /* Masquer par défaut */
|
||||||
bottom: 10px;
|
position: fixed;
|
||||||
left: 10px;
|
bottom: 10px;
|
||||||
width: 300px;
|
left: 10px;
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
width: 300px;
|
||||||
border-radius: 10px;
|
background-color: rgba(0, 0, 0, 0.7); /* Couleur de fond semi-transparente par défaut */
|
||||||
padding: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
padding: 10px;
|
||||||
z-index: 1000;
|
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
|
||||||
box-sizing: border-box;
|
z-index: 1000;
|
||||||
display: flex;
|
box-sizing: border-box;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
animation: borderGlow 3s infinite; /* Ajouter l'animation */
|
animation: borderGlow 3s infinite; /* Ajouter l'animation */
|
||||||
transition: background-color 0.3s, transform 0.3s; /* Ajouter des transitions */
|
transition: background-color 0.3s, transform 0.3s; /* Ajouter des transitions */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styles pour le conteneur du chat log */
|
#chat-container:hover {
|
||||||
#chat-log-container {
|
background-color: rgba(0, 0, 0, 1); /* Couleur de fond opaque au survol */
|
||||||
width: 100%;
|
transform: scale(1.05); /* Agrandir légèrement au survol */
|
||||||
background-color: transparent;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
max-height: 150px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-log {
|
.chat-log {
|
||||||
max-height: 150px;
|
max-height: 150px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
/* Styles pour l'entrée de texte du chat */
|
|
||||||
#chat-input-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input {
|
.chat-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
display: none; /* Masquer par défaut */
|
position: relative; /* Assurez-vous que le conteneur parent est positionné */
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input.active {
|
.chat-input.active {
|
||||||
display: flex; /* Afficher uniquement l'élément actif */
|
display: flex; /* Afficher uniquement l'élément actif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input input[type="text"] {
|
.chat-input input[type="text"] {
|
||||||
@ -584,73 +539,144 @@ canvas {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
align-items: center;
|
width: 250px; /* Réduire la largeur */
|
||||||
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-button {
|
.chat-button {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 225px;
|
width: 50px; /* Réduire la taille du bouton */
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(45deg, #00ffff, #0099ff);
|
background: linear-gradient(45deg, #00ffff, #0099ff);
|
||||||
color: #000033;
|
color: #000033;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-left: 15px;
|
position: absolute; /* Positionner le bouton de manière absolue */
|
||||||
display: flex;
|
right: 10px; /* Ajuster la position à droite */
|
||||||
align-items: center;
|
top: 10%; /* Centrer verticalement */
|
||||||
justify-content: center;
|
transform: translateY(-50%); /* Centrer verticalement */
|
||||||
text-align: center;
|
display: flex;
|
||||||
font-size: 20px;
|
align-items: center;
|
||||||
padding: 0;
|
justify-content: center;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
text-align: center;
|
||||||
transition: background 0.3s, transform 0.3s;
|
font-size: 20px;
|
||||||
animation: buttonGlow 3s infinite; /* Ajouter l'animation */
|
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 {
|
.chat-button:hover {
|
||||||
background: linear-gradient(45deg, #0099ff, #00ffff);
|
background: linear-gradient(45deg, #0099ff, #00ffff);
|
||||||
transform: scale(1.1);
|
transform: translateY(-50%) scale(1.1); /* Agrandir légèrement au survol */
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-button:active {
|
.chat-button:active {
|
||||||
transform: scale(0.95);
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styles pour les onglets de room */
|
|
||||||
#room-tabs-container {
|
#room-tabs-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-tab {
|
.room-tab {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid #00ffff;
|
border: 1px solid #00ffff;
|
||||||
background-color: #000033;
|
background-color: #000033;
|
||||||
color: #00ffff;
|
color: #00ffff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
transition: background 0.3s, transform 0.3s; /* Ajouter des transitions */
|
transition: background 0.3s, transform 0.3s; /* Ajouter des transitions */
|
||||||
animation: tabGlow 3s infinite; /* Ajouter l'animation */
|
animation: tabGlow 3s infinite; /* Ajouter l'animation */
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-tab:hover {
|
.room-tab:hover {
|
||||||
background-color: #00ffff;
|
background-color: #00ffff;
|
||||||
color: #000033;
|
color: #000033;
|
||||||
transform: scale(1.1); /* Agrandir légèrement au survol */
|
transform: scale(1.1); /* Agrandir légèrement au survol */
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-tab:active {
|
.room-tab:active {
|
||||||
transform: scale(0.95); /* Réduire légèrement à l'activation */
|
transform: scale(0.95); /* Réduire légèrement à l'activation */
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-tab.active {
|
.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; /* Ajuster la position à côté du conteneur de chat */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px; /* Espacement entre les boutons */
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat-controls button {
|
||||||
|
width: 100px; /* Réduire la taille des boutons */
|
||||||
|
height: 30px; /* Réduire la taille des boutons */
|
||||||
|
font-size: 12px; /* Ajuster la taille de la police */
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
background-color: #00ffff;
|
background-color: #00ffff;
|
||||||
color: #000033;
|
color: #000033;
|
||||||
opacity: 1;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user