Ladebeze66/ft_transcendence
1
0
Fork 0
mirror of https://github.com/AudebertAdrien/ft_transcendence.git synced 2026-02-04 11:40:25 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
logs/172.20.2.60-1726141292617.log
View File

@ -1,56 +0,0 @@
:8080/:1 The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
game.js:2 DOM fully loaded and parsed
game.js:48 DOM elements initialized
game.js:71 Event listeners added
game.js:186 checkUserExists called with username: didi
game.js:203 User existence check response: {exists: false}
game.js:212 handleRegister called
game.js:225 Attempting to register user: didi
game.js:250 registerUser called with username: didi
game.js:273 Registration response data: {registered: true, token: '391a5261-4dac-4555-9c5f-7d1000557dc0'}
game.js:275 User registered successfully: {registered: true, token: '391a5261-4dac-4555-9c5f-7d1000557dc0'}
game.js:229 Token stored: 391a5261-4dac-4555-9c5f-7d1000557dc0
game.js:230 User registered successfully
game.js:964 Joining room: main_room with username: didi and token: 391a5261-4dac-4555-9c5f-7d1000557dc0
game.js:971 Joining new room: main_room
game.js:888 createRoomTab: main_room with username: didi and token: 391a5261-4dac-4555-9c5f-7d1000557dc0
game.js:898 Tab for room main_room already exists.
game.js:912 Showing tab for room: main_room
game.js:807 Initializing chat WebSocket...
game.js:808 Initializing chat WebSocket for room: main_room with username: didi
game.js:811 startChatWebSocket: main_room with username: didi and token: 391a5261-4dac-4555-9c5f-7d1000557dc0
game.js:875 WebSocket connection stored for room: main_room
game.js:919 switchRoom: main_room with username: didi and token: 391a5261-4dac-4555-9c5f-7d1000557dc0
game.js:925 Attempting to switch to room: main_room
game.js:931 Switching from room null to room main_room
game.js:816 Chat WebSocket connection established in room: main_room
game.js:825 Authentication message sent for room: main_room with username: didi
game.js:831 Message received from server in room main_room: {type: 'authenticated', username: 'didi'}
game.js:835 User authenticated successfully in room: main_room
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'didi: a rejoint le chat main_room', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'didi: kikou', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'didi: /b', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'success', message: 'You have blocked dd'}
game.js:855 Unhandled message type: {type: 'success', message: 'You have blocked dd'}
chatSocket.onmessage @ game.js:855
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'fifi: a rejoint le chat main_room', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'fifi: hello', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'didi: hello', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'didi: tu veux jouer', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'fifi: oui', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room
game.js:831 Message received from server in room main_room: {type: 'error', message: 'Erreur interne du serveur'}
game.js:852 Error message received: Erreur interne du serveur
chatSocket.onmessage @ game.js:852
game.js:831 Message received from server in room main_room: {type: 'success', message: 'You have blocked fifi'}
game.js:855 Unhandled message type: {type: 'success', message: 'You have blocked fifi'}
chatSocket.onmessage @ game.js:855
game.js:831 Message received from server in room main_room: {type: 'chat_message', message: 'fifi: conard', room: 'main_room'}
game.js:846 Message displayed in chat log for room: main_room

72
logs/172.20.2.60-1726142931992.log
View File

@ -1,72 +0,0 @@
:8080/:1 The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
game.js:2 DOM fully loaded and parsed
game.js:48 DOM elements initialized
game.js:71 Event listeners added
game.js:186 checkUserExists called with username: dudu
game.js:203 User existence check response: {exists: false}
game.js:212 handleRegister called
game.js:225 Attempting to register user: dudu
game.js:250 registerUser called with username: dudu
game.js:273 Registration response data: {registered: true, token: '5265ee4d-d0f3-4d7e-a465-e152d90f43f3'}
game.js:275 User registered successfully: {registered: true, token: '5265ee4d-d0f3-4d7e-a465-e152d90f43f3'}
game.js:229 Token stored: 5265ee4d-d0f3-4d7e-a465-e152d90f43f3
game.js:230 User registered successfully
game.js:973 Joining room: main_room with username: dudu and token: 5265ee4d-d0f3-4d7e-a465-e152d90f43f3
game.js:980 Joining new room: main_room
game.js:897 createRoomTab: main_room with username: dudu and token: 5265ee4d-d0f3-4d7e-a465-e152d90f43f3
game.js:907 Tab for room main_room already exists.
game.js:921 Showing tab for room: main_room
game.js:818 Initializing chat WebSocket...
game.js:819 Initializing chat WebSocket for room: main_room with username: dudu
game.js:822 startChatWebSocket: main_room with username: dudu and token: 5265ee4d-d0f3-4d7e-a465-e152d90f43f3
game.js:886 WebSocket connection stored for room: main_room
game.js:734 ChatInput initialized for room: main_room, username: dudu
game.js:928 switchRoom: main_room with username: dudu and token: 5265ee4d-d0f3-4d7e-a465-e152d90f43f3
game.js:934 Attempting to switch to room: main_room
game.js:940 Switching from room null to room main_room
game.js:827 Chat WebSocket connection established in room: main_room
game.js:836 Authentication message sent for room: main_room with username: dudu
game.js:842 Message received from server in room main_room: {type: 'authenticated', username: 'dudu'}
game.js:846 User authenticated successfully in room: main_room
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'dudu: a rejoint le chat main_room', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:749 Send button clicked, attempting to send message...
game.js:756 Attempting to send message: frfrfr
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'dudu: frfrfr', room: 'main_room'}message: "dudu: frfrfr"room: "main_room"type: "chat_message"[[Prototype]]: Object
game.js:857 Message displayed in chat log for room: main_room
game.js:749 Send button clicked, attempting to send message...
game.js:756 Attempting to send message: frfr
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'dudu: frfr', room: 'main_room'}message: "dudu: frfr"room: "main_room"type: "chat_message"[[Prototype]]: Object
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /b
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'dudu: /b', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /b b
game.js:761 Detected block command for user: b
game.js:784 Sending block command to WebSocket for user: b
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'success', message: 'You have blocked b'}
game.js:866 Unhandled message type: {type: 'success', message: 'You have blocked b'}
chatSocket.onmessage @ game.js:866
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /i
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'dudu: /i', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /i hhuhhihi hihi
game.js:765 Detected invite command for user: hhuhhihi hihi
game.js:794 Sending invite command to WebSocket for user: hhuhhihi hihi
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'error', message: 'Erreur interne du serveur'}message: "Erreur interne du serveur"type: "error"[[Prototype]]: Object
game.js:863 Error message received: Erreur interne du serveur
chatSocket.onmessage @ game.js:863

126
logs/172.20.2.60-1726144089884.log
View File

@ -1,126 +0,0 @@
:8080/:1 The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
game.js:2 DOM fully loaded and parsed
game.js:48 DOM elements initialized
game.js:71 Event listeners added
game.js:186 checkUserExists called with username: rere
game.js:203 User existence check response: {exists: false}
game.js:212 handleRegister called
game.js:225 Attempting to register user: rere
game.js:250 registerUser called with username: rere
game.js:273 Registration response data: {registered: true, token: 'e07d4752-1960-43d2-a971-4cb24ae2486f'}
game.js:275 User registered successfully: {registered: true, token: 'e07d4752-1960-43d2-a971-4cb24ae2486f'}
game.js:229 Token stored: e07d4752-1960-43d2-a971-4cb24ae2486f
game.js:230 User registered successfully
game.js:978 Joining room: main_room with username: rere and token: e07d4752-1960-43d2-a971-4cb24ae2486f
game.js:985 Joining new room: main_room
game.js:902 createRoomTab: main_room with username: rere and token: e07d4752-1960-43d2-a971-4cb24ae2486f
game.js:912 Tab for room main_room already exists.
game.js:926 Showing tab for room: main_room
game.js:818 Initializing chat WebSocket...
game.js:819 Initializing chat WebSocket for room: main_room with username: rere
game.js:822 startChatWebSocket: main_room with username: rere and token: e07d4752-1960-43d2-a971-4cb24ae2486f
game.js:891 WebSocket connection stored for room: main_room
game.js:734 ChatInput initialized for room: main_room, username: rere
game.js:933 switchRoom: main_room with username: rere and token: e07d4752-1960-43d2-a971-4cb24ae2486f
game.js:939 Attempting to switch to room: main_room
game.js:945 Switching from room null to room main_room
game.js:827 Chat WebSocket connection established in room: main_room
game.js:836 Authentication message sent for room: main_room with username: rere
game.js:842 Message received from server in room main_room: {type: 'authenticated', username: 'rere'}
game.js:846 User authenticated successfully in room: main_room
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: a rejoint le chat main_room', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcd
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcd', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdcd
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdcd', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcd
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcd', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: ccccc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: ccccc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdcd
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdcd', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdcdcd
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdcdcd', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'aaaa: a rejoint le chat main_room', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'aaaa: cdcdcdcdc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'aaaa: ccddcdcd', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: cdcdcdc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'chat_message', message: 'rere: cdcdcdc', room: 'main_room'}
game.js:857 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /b aaaa
game.js:761 Detected block command for user: aaaa
game.js:784 Sending block command to WebSocket for user: aaaa
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'error', message: 'Target user aaaa not found in room'}
game.js:867 Error message received: Target user aaaa not found in room
chatSocket.onmessage @ game.js:867
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /i aaaa
game.js:765 Detected invite command for user: aaaa
game.js:794 Sending invite command to WebSocket for user: aaaa
game.js:777 Message input cleared.
game.js:842 Message received from server in room main_room: {type: 'error', message: 'Erreur interne du serveur'}
game.js:867 Error message received: Erreur interne du serveur
chatSocket.onmessage @ game.js:867

78
logs/172.20.2.60-1726150242355.log
View File

@ -1,78 +0,0 @@
172.20.2.60/:1 The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
game.js:2 DOM fully loaded and parsed
game.js:48 DOM elements initialized
game.js:71 Event listeners added
game.js:186 checkUserExists called with username: vivi
game.js:203 User existence check response: Object
game.js:212 handleRegister called
game.js:225 Attempting to register user: vivi
game.js:250 registerUser called with username: vivi
game.js:273 Registration response data: Object
game.js:275 User registered successfully: Object
game.js:229 Token stored: 66ce0c1a-dfbc-4f0f-9ec9-a4a9d4b990fe
game.js:230 User registered successfully
game.js:980 Joining room: main_room with username: vivi and token: 66ce0c1a-dfbc-4f0f-9ec9-a4a9d4b990fe
game.js:987 Joining new room: main_room
game.js:904 createRoomTab: main_room with username: vivi and token: 66ce0c1a-dfbc-4f0f-9ec9-a4a9d4b990fe
game.js:914 Tab for room main_room already exists.
game.js:928 Showing tab for room: main_room
game.js:820 Initializing chat WebSocket...
game.js:821 Initializing chat WebSocket for room: main_room with username: vivi
game.js:824 startChatWebSocket: main_room with username: vivi and token: 66ce0c1a-dfbc-4f0f-9ec9-a4a9d4b990fe
game.js:893 WebSocket connection stored for room: main_room
game.js:734 ChatInput initialized for room: main_room, username: vivi
game.js:935 switchRoom: main_room with username: vivi and token: 66ce0c1a-dfbc-4f0f-9ec9-a4a9d4b990fe
game.js:941 Attempting to switch to room: main_room
game.js:947 Switching from room null to room main_room
game.js:829 Chat WebSocket connection established in room: main_room
game.js:838 Authentication message sent for room: main_room with username: vivi
game.js:844 Message received from server in room main_room: Object
game.js:848 User authenticated successfully in room: main_room
game.js:844 Message received from server in room main_room: Object
game.js:859 Message displayed in chat log for room: main_room
game.js:749 Send button clicked, attempting to send message...
game.js:756 Attempting to send message: cscscsc
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:844 Message received from server in room main_room: Object
game.js:859 Message displayed in chat log for room: main_room
game.js:749 Send button clicked, attempting to send message...
game.js:756 Attempting to send message: cscscs
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:844 Message received from server in room main_room: Object
game.js:859 Message displayed in chat log for room: main_room
game.js:844 Message received from server in room main_room: Object
game.js:859 Message displayed in chat log for room: main_room
game.js:844 Message received from server in room main_room: Object
game.js:859 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /b sasa
game.js:761 Detected block command for user: sasa
game.js:784 Sending block command to WebSocket for user: sasa
game.js:777 Message input cleared.
game.js:844 Message received from server in room main_room: Object
game.js:869 Error message received: Target user sasa not found in room main_room
chatSocket.onmessage @ game.js:869
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /isasa
game.js:768 Sending chat message to WebSocket...
game.js:777 Message input cleared.
game.js:844 Message received from server in room main_room: {type: 'chat_message', message: 'vivi: /isasa', room: 'main_room'}
game.js:859 Message displayed in chat log for room: main_room
game.js:742 Enter key pressed, attempting to send message...
game.js:756 Attempting to send message: /i sas
game.js:765 Detected invite command for user: sas
game.js:794 Sending invite command to WebSocket for user: sas
game.js:777 Message input cleared.
game.js:844 Message received from server in room main_room: {type: 'error', message: 'Target user sas not found in room main_room'}
game.js:869 Error message received: Target user sas not found in room main_room
chatSocket.onmessage @ game.js:869
game.js:749 Send button clicked, attempting to send message...
game.js:756 Attempting to send message: /i sasa
game.js:765 Detected invite command for user: sasa
game.js:794 Sending invite command to WebSocket for user: sasa
game.js:777 Message input cleared.
game.js:844 Message received from server in room main_room: {type: 'error', message: 'Target user sasa not found in room main_room'}
game.js:869 Error message received: Target user sasa not found in room main_room
chatSocket.onmessage @ game.js:869

402
pong/game/consumers.py
View File

@ -145,235 +145,321 @@ class GameConsumer(AsyncWebsocketConsumer):
async def set_game(self, game): async def set_game(self, game):
logger.info(f"Setting game: {game}") logger.info(f"Setting game: {game}")
self.game = game self.game = game
###############################CHAT############################################
class ChatConsumer(AsyncWebsocketConsumer):
groups = {}
###################################################################CHAT###################################################################
class ChatConsumer(AsyncWebsocketConsumer):
async def connect(self): async def connect(self):
try: try:
# Récupérer le nom de la room # Récupérer le nom de la room à partir de l'URL
self.room_group_name = self.scope['url_route']['kwargs']['room_name'] self.room_group_name = self.scope['url_route']['kwargs']['room_name']
# Accepter la connexion WebSocket # Accepter la connexion WebSocket
await self.accept() await self.accept()
# Ajouter l'utilisateur au groupe (room)
await self.channel_layer.group_add(
self.room_group_name,
self.channel_name
)
logger.info(f"Connexion au WebSocket de chat dans la room {self.room_group_name}") self.username = self.scope['user'].username # Assurez-vous d'avoir un utilisateur lié à la connexion
logger.info(f"Connexion de l'utilisateur {self.username} à la room {self.room_group_name}")
# Ajouter l'utilisateur à son propre groupe personnel (pour messages directs)
# Ajouter l'utilisateur au groupe en mémoire
if self.room_group_name not in self.groups:
self.groups[self.room_group_name] = []
self.groups[self.room_group_name].append(self.channel_name)
logger.info(f"User {self.channel_name} added to group {self.room_group_name}")
except Exception as e: except Exception as e:
logger.error(f"Erreur lors de la connexion WebSocket: {str(e)}") logger.error(f"Erreur lors de la connexion WebSocket: {str(e)}")
async def disconnect(self, close_code): async def disconnect(self, close_code):
try: try:
# Retirer l'utilisateur du groupe en mémoire # Retirer l'utilisateur du groupe (room)
if self.room_group_name in self.groups: await self.channel_layer.group_discard(
self.groups[self.room_group_name].remove(self.channel_name)
if not self.groups[self.room_group_name]:
del self.groups[self.room_group_name]
await self.send_group_message(
self.room_group_name, self.room_group_name,
{ self.channel_name
'type': 'chat_message',
'message': f'{self.user.username if hasattr(self, "user") else "Unknown"} a quitté le chat',
'username': self.user.username if hasattr(self, "user") else "Unknown",
'room': self.room_group_name
}
) )
logger.info(f"{self.user.username if hasattr(self, 'user') else 'Unknown'} déconnecté du WebSocket de chat dans la room {self.room_group_name}")
# Retirer l'utilisateur de son groupe personnel
await self.channel_layer.group_discard(
f"user_{self.username}",
self.channel_name
)
# Envoyer un message indiquant que l'utilisateur a quitté la room
await self.chat_message(
'chat_message',
self.user.username if hasattr(self, "user") else "Unknown",
f'{self.user.username if hasattr(self, "user") else "Unknown"} a quitté le chat',
self.room_group_name
)
logger.info(f"{self.user.username if hasattr(self, 'user') else 'Unknown'} déconnecté de la room {self.room_group_name}")
except Exception as e: except Exception as e:
logger.error(f"Erreur lors de la déconnexion WebSocket du chat: {str(e)}") logger.error(f"Erreur lors de la déconnexion WebSocket: {str(e)}")
async def receive(self, text_data): async def receive(self, text_data):
try: try:
# Convertir les données JSON reçues en dictionnaire Python
data = json.loads(text_data) data = json.loads(text_data)
message_type = data.get('type') message_type = data.get('type')
username = data.get('username').strip().lower() # Normalisation du nom d'utilisateur username = data.get('username')
message = data.get('message', None)
target_user = data.get('target_user', None)
logger.info(f"Message reçu: {data}")
# Log pour vérifier que le username est bien reçu
logger.info(f"Message reçu avec username: {username}")
if not username: if not username:
logger.error(f"Username missing in message: {data}") logger.error(f"Username manquant dans le message: {data}")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Username is missing'})) await self.chat_message('error', 'server', 'Username is missing', self.room_group_name)
return return
# Gestion des types de messages # Gestion des différents types de messages
if message_type == 'authenticate': if message_type == 'authenticate':
logger.info(f"Authentification demandée pour {username}")
await self.authenticate(data.get('token'), username) await self.authenticate(data.get('token'), username)
return
elif message_type == 'chat_message': elif message_type == 'chat_message':
if 'message' not in data: logger.info(f"Message de chat envoyé par {username}: {message}")
logger.error(f"Format de message incorrect : {data}") await self.chat_message('chat_message', username, message, self.room_group_name)
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Format de message incorrect'}))
return
message = data['message']
# Envoyer le message à tous les autres utilisateurs de la room
await self.send_group_message(
self.room_group_name,
{
'type': 'chat_message',
'message': message,
'username': username,
'room': self.room_group_name
}
)
# Gestion de la commande /b pour bloquer un utilisateur
elif message_type == 'block_user': elif message_type == 'block_user':
target_user = data.get('target_user').strip().lower() logger.info(f"{username} tente de bloquer {target_user}")
if target_user == username: await self.handle_block_user(data)
await self.send(text_data=json.dumps({'type': 'error', 'message': 'You cannot block yourself'}))
else:
await self.handle_block_user(data)
# Gestion de la commande /i pour inviter un utilisateur elif message_type == 'invite':
elif message_type == 'invite_user': await self.handle_invite_user(data)
target_user = data.get('target_user').strip().lower()
if target_user == username: elif message_type == 'invite_response':
await self.send(text_data=json.dumps({'type': 'error', 'message': 'You cannot invite yourself'})) await self.handle_invite_response(data)
else:
await self.handle_invite_user(data)
else: else:
logger.warning(f"Unhandled message type: {message_type}") logger.warning(f"Type de message non géré: {message_type}")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Unhandled message type'})) await self.chat_message('error', 'server', f"Unhandled message type: {message_type}", self.room_group_name)
except json.JSONDecodeError as e: except json.JSONDecodeError as e:
logger.error(f"Erreur de décodage JSON : {str(e)} - Données reçues : {text_data}") logger.error(f"Erreur de décodage JSON : {str(e)} - Données reçues : {text_data}")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Format JSON invalide'})) await self.chat_message('error', 'server', 'Invalid JSON format', self.room_group_name)
except Exception as e: except Exception as e:
logger.error(f"Erreur lors de la réception du message du chat: {str(e)}") logger.error(f"Erreur lors de la réception du message: {str(e)}")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Erreur interne du serveur'})) await self.chat_message('error', 'server', 'Internal server error', self.room_group_name)
async def chat_message(self, message_type, username, message, room):
"""
Fonction générale pour envoyer tout type de message via WebSocket à tous les utilisateurs dans la room.
"""
logger.info(f"Envoi d'un message de type {message_type} de {username} dans la room {room}")
# Utilisation de channel_layer pour envoyer le message à tout le groupe (room)
await self.channel_layer.group_send(
room,
{
'type': 'send_group_message', # Nom de la méthode qui va gérer ce message
'username': username,
'message': message,
'room': room
}
)
async def send_group_message(self, event):
"""
Cette fonction est appelée par channel_layer pour envoyer des messages à tous les utilisateurs dans une room.
"""
message = event['message']
username = event.get('username', 'Anonyme')
room = event.get('room', 'unknown')
logger.info(f"Diffusion d'un message de {username} à la room {room}: {message}")
# Envoi du message à chaque utilisateur dans la room via WebSocket
await self.send(text_data=json.dumps({
'type': 'chat_message', # Le type de message qui sera renvoyé au client
'username': username,
'message': message,
'room': room
}))
async def handle_block_user(self, data): async def handle_block_user(self, data):
username = data['username'].strip().lower() # Normalisation du nom d'utilisateur username = data['username']
target_user = data['target_user'].strip().lower() target_user = data['target_user']
# Utiliser self.room_group_name pour vérifier que l'utilisateur ciblé est bien dans la bonne room logger.info(f"handle_block_user appelé avec : {data}")
if target_user not in self.groups.get(self.room_group_name, []):
logger.error(f"Target user {target_user} does not exist in room {self.room_group_name}")
await self.send(text_data=json.dumps({'type': 'error', 'message': f'Target user {target_user} not found in room {self.room_group_name}'}))
return
logger.info(f"Block request: {username} wants to block {target_user} in room {self.room_group_name}")
if target_user == username: if target_user == username:
logger.warning(f"Block attempt failed: {username} tried to block themselves") logger.warning(f"{username} a tenté de se bloquer lui-même.")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'You cannot block yourself'})) await self.send(text_data=json.dumps({'type': 'error', 'message': 'You cannot block yourself'}))
else: return
logger.info(f"{username} successfully blocked {target_user}")
await self.send(text_data=json.dumps({'type': 'success', 'message': f'You have blocked {target_user} in room {self.room_group_name}'})) logger.info(f"{username} a bloqué {target_user}")
# Utilisation correcte de l' f-string pour inclure la valeur de target_user
await self.send(text_data=json.dumps({
'type': 'block_user',
'message': f'Vous avez bloqué les messages de {target_user}'
}))
async def handle_invite_user(self, data): async def handle_invite_user(self, data):
username = data['username'].strip().lower() # Récupération des informations de l'invitation
target_user = data['target_user'].strip().lower() inviter = data.get('username')
target_user = data.get('target_user')
room = data.get('room')
# Utiliser self.room_group_name pour inviter l'utilisateur dans la room active # Validation des paramètres
room = self.room_group_name if not inviter:
logger.error("Invitant manquant dans le message d'invitation")
# Vérification que le joueur à inviter est dans la room await self.chat_message('error', 'server', 'Invitant manquant', self.room_group_name)
if target_user not in self.groups.get(room, []):
logger.error(f"Target user {target_user} does not exist in room {room}")
await self.send(text_data=json.dumps({'type': 'error', 'message': f'Target user {target_user} not found in room {room}'}))
return return
logger.info(f"Invitation request: {username} wants to invite {target_user} to a quick match in room {room}") if not target_user:
logger.error("Utilisateur cible manquant dans le message d'invitation")
await self.chat_message('error', 'server', 'Utilisateur cible manquant', self.room_group_name)
return
if target_user == username: if not room:
logger.warning(f"Invite attempt failed: {username} tried to invite themselves") logger.error("Room manquante dans le message d'invitation")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'You cannot invite yourself'})) await self.chat_message('error', 'server', 'Room manquante', self.room_group_name)
else: return
logger.info(f"{username} successfully sent an invitation to {target_user} in room {room}")
await self.send_group_message(room, { logger.info(f"Invitation envoyée de {inviter} à {target_user} dans la room {room}")
await self.chat_message('chat_message', 'server', f'{inviter} a invité {target_user} à rejoindre une partie {room}', room)
# Envoi de l'invitation
await self.channel_layer.group_send(
room,
{
'type': 'invite', 'type': 'invite',
'message': f'{username} invited {target_user} to a quick match', 'inviter': inviter,
'username': username, 'target_user': target_user,
'target_user': target_user 'room': room,
}) 'message': f'{inviter} vous a invité à rejoindre la room {room}.'
await self.send(text_data=json.dumps({'type': 'success', 'message': f'Invitation sent to {target_user} in room {room}'})) }
)
async def handle_invite_response(self, data):
inviter = data.get('inviter')
username = data.get('username') # L'utilisateur invité qui répond
response = data.get('response')
room = data.get('room')
logger.info(f"{username} a répondu '{response}' à l'invitation de {inviter}")
await self.chat_message('chat_message', 'server', f'{username} a répondu {response} à l\'invitation.', room)
# Si la réponse est 'yes', informer l'invitant que l'invité a accepté
if response.lower() == 'yes':
try:
# Informer l'invitant que l'invitation a été acceptée
await self.channel_layer.group_send(
room,
{
'type': 'invite_response',
'inviter': inviter,
'username': username,
'response': response,
'room': room,
'message': f'{username} a accepté l\'invitation.'
}
)
# Informer à la fois l'invité et l'invitant que le jeu va commencer
await self.channel_layer.group_send(
room,
{
'type': 'start_quick_match',
'inviter': inviter,
'username': username,
'message': 'La partie va démarrer pour vous deux.',
}
)
except Exception as e:
logger.error(f"Error while sending invite response: {str(e)}")
await self.chat_message('error', 'server', f'Internal server error: {str(e)}', room)
# Méthode appelée pour envoyer l'invitation à l'utilisateur invité (target_user)
async def invite(self, event):
inviter = event['inviter']
message = event['message']
room = event['room']
target_user = event['target_user']
logger.info(f"invite: Envoi de l'invitation à l'utilisateur via WebSocket. Inviter={inviter}, Room={room}, Message={message}")
# Envoyer le message d'invitation via WebSocket
await self.send(text_data=json.dumps({
'type': 'invite',
'inviter': inviter,
'target_user': target_user,
'message': message,
'room': room
}))
async def handle_invite_response(self, data):
inviter = data.get('inviter')
username = data.get('username') # L'utilisateur invité qui répond
response = data.get('response')
room = data.get('room')
logger.info(f"{username} a répondu '{response}' à l'invitation de {inviter}")
await self.chat_message('chat_message', 'server', f'{username} a répondu {response} à l\'invitation.', room)
# Envoi de la réponse directement à l'invitant dans la room
await self.channel_layer.group_send(
room,
{
'type': 'invite_response', # Type de message 'invite_response'
'inviter': inviter,
'username': username,
'room': room,
'message': f'{username} a répondu {response} à l\'invitation.',
'response': response # Ajout de la réponse 'yes' ou 'no'
}
)
async def invite_response(self, event):
message = event['message']
response = event.get('response')
inviter = event.get('inviter') # Récupérer l'inviteur
logger.info(f"invite_response: Envoi de la réponse à l'invitation via WebSocket. Message={message}, Response={response}, Inviter={inviter}")
# Envoyer la réponse à l'invitation via WebSocket à l'invitant
await self.send(text_data=json.dumps({
'type': 'invite_response',
'message': message,
'response': response,
'inviter': inviter
}))
async def authenticate(self, token, username): async def authenticate(self, token, username):
if not token: if not token:
logger.error("Token is None, authentication cannot proceed") logger.error("Token est manquant, l'authentification ne peut pas se poursuivre.")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Token is missing'})) await self.chat_message('error', 'server', 'Token is missing', self.room_group_name)
return return
logger.info(f"Tentative d'authentification avec le token: {token} pour l'utilisateur: {username}")
try: try:
user = await self.get_user_from_token(token) user = await self.get_user_from_token(token)
if user: if user:
self.user = user self.user = user
logger.info(f"User {username} authenticated successfully with token: {token}") logger.info(f"Utilisateur {username} authentifié avec succès")
await self.chat_message('authenticated', username, 'Authentication successful', self.room_group_name)
# Envoyer un message d'authentification réussie au client await self.channel_layer.group_add(
await self.send(text_data=json.dumps({'type': 'authenticated', 'username': username})) f"user_{self.username}", # Group name unique pour cet utilisateur
self.channel_name
# Envoyer le message de bienvenue après l'authentification réussie
await self.send_group_message(
self.room_group_name,
{
'username': username,
'room': self.room_group_name,
'type': 'chat_message',
'message': f' a rejoint le chat {self.room_group_name}',
}
) )
logger.info(f"Connexion de l'utilisateur {self.username} à son groupe personnel")
else: else:
logger.warning(f"Authentication failed for token: {token}") logger.warning(f"Échec de l'authentification pour le token: {token}")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Authentication failed'})) await self.chat_message('error', username, 'Authentication failed', self.room_group_name)
except Exception as e: except Exception as e:
logger.error(f"Error during authentication: {str(e)}") logger.error(f"Erreur lors de l'authentification : {str(e)}")
await self.send(text_data=json.dumps({'type': 'error', 'message': 'Internal server error'})) await self.chat_message('error', 'server', 'Internal server error', self.room_group_name)
@sync_to_async @sync_to_async
def get_user_from_token(self, token): def get_user_from_token(self, token):
try: try:
user = User.objects.filter(auth_token=token).first() user = User.objects.filter(auth_token=token).first()
logger.debug(f"User found: {user} for token: {token}") logger.debug(f"Utilisateur trouvé : {user} pour le token : {token}")
return user return user
except User.DoesNotExist: except User.DoesNotExist:
logger.warning(f"User not found for token: {token}") logger.warning(f"Utilisateur non trouvé pour le token : {token}")
return None return None
async def send_group_message(self, group_name, message):
# Utilisation de self.room_group_name pour s'assurer que la bonne room est utilisée
group_name = self.room_group_name # Utilisation explicite de self.room_group_name
if group_name in self.groups:
logger.debug(f"Sending message to group {group_name}: {message}")
for channel_name in self.groups[group_name]:
try:
await self.channel_layer.send(channel_name, {
'type': 'chat_message',
'message': message['message'],
'username': message['username'],
'room': message['room']
})
logger.debug(f"Message sent to {channel_name} in room {message['room']}: {message}")
except Exception as e:
logger.error(f"Failed to send message to {channel_name} in room {group_name}: {str(e)}")
else:
logger.error(f"Group {group_name} does not exist, unable to send message")
async def chat_message(self, event):
message = event['message']
username = event.get('username', 'Anonyme')
room = event.get('room', 'unknown')
# Log pour vérifier le username avant envoi
logger.info(f"Sending chat message from username: {username} in room: {room}")
# Envoyer le message au WebSocket
await self.send(text_data=json.dumps({
'type': 'chat_message',
'message': f'{username}: {message}',
'room': room
}))

0
pong/game/migrations/0001_initial.py:Zone.Identifier
View File

0
pong/game/migrations/0002_alter_match_winner.py:Zone.Identifier
View File

669
pong/static/game.js
View File

@ -39,11 +39,12 @@ document.addEventListener('DOMContentLoaded', () => {
const tournamentButton = document.getElementById('tournament'); const tournamentButton = document.getElementById('tournament');
let socket; let socket;
let token;
let gameState; let gameState;
let activeRoom = null; // Stocker la room active let activeRoom = null; // Stocker la room active
let roomSockets = {}; // Stocker les connexions WebSocket par room let roomSockets = {}; // Stocker les connexions WebSocket par room
let username; // Ajouter cette variable pour stocker le nom d'utilisateur let chatManager = null;
let username = null;
let token = null;
console.log("DOM elements initialized"); console.log("DOM elements initialized");
@ -84,104 +85,44 @@ document.addEventListener('DOMContentLoaded', () => {
} }
async function handleCheckNickname() { async function handleCheckNickname() {
const nickname = nicknameInput.value.trim();
if (nickname) {
try {
const exists = await checkUserExists(nickname);
if (exists) {
authForm.style.display = 'none';
loginForm.style.display = 'block';
loginPasswordInput.focus();
loginPasswordInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
loginButton.click();
}
});
} else {
authForm.style.display = 'none';
registerForm.style.display = 'block';
passwordInput.focus();
passwordInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
confirmPasswordInput.focus();
confirmPasswordInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
registerButton.click();
}
});
}
});
}
} catch (error) {
console.error('Error checking user existence:', error);
}
} else {
alert('Please enter a nickname.');
}
}
async function handleRegister() {
console.log("handleRegister called");
const nickname = nicknameInput.value.trim(); const nickname = nicknameInput.value.trim();
const password = passwordInput.value.trim(); if (nickname) {
const confirmPassword = confirmPasswordInput.value.trim(); try {
const exists = await checkUserExists(nickname);
// Validation du nom d'utilisateur if (exists) {
if (!nickname || nickname.length < 3) { authForm.style.display = 'none';
console.error("Invalid username. It must be at least 3 characters long."); loginForm.style.display = 'block';
alert("Invalid username. It must be at least 3 characters long."); loginPasswordInput.focus();
return; loginPasswordInput.addEventListener('keypress', function (event) {
} if (event.key === 'Enter') {
event.preventDefault();
// Validation des mots de passe loginButton.click();
if (password !== confirmPassword) { }
alert('Passwords do not match.'); });
console.error('Passwords do not match.');
return;
}
// Tentative d'inscription
try {
console.log("Attempting to register user:", nickname);
const result = await registerUser(nickname, password);
// Vérification du résultat de l'inscription
if (result && result.token) {
token = result.token; // Stocker le token de l'utilisateur
console.log("Token stored successfully:", token);
console.log("User registered successfully");
// Mise à jour de l'interface après inscription réussie
registerForm.style.display = 'none';
document.getElementById("post-form-buttons").style.display = 'block';
username = nickname; // Stocker le nom d'utilisateur
// Définir le nom de la room principale
roomName = "main_room";
// Sécuriser l'appel à `joinRoom` (initialiser le chat WebSocket)
if (token && roomName) {
console.log(`Joining room: ${roomName} with token: ${token}`);
joinRoom(token, roomName, username); // Initialiser le chat WebSocket
} else { } else {
console.error("Token or roomName is undefined. Cannot join room."); authForm.style.display = 'none';
alert("Error joining the chat room. Please try again."); registerForm.style.display = 'block';
passwordInput.focus();
passwordInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
confirmPasswordInput.focus();
confirmPasswordInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
event.preventDefault();
registerButton.click();
}
});
}
});
} }
} catch (error) {
} else { console.error('Error checking user existence:', error);
console.error('Registration failed. Invalid response from server.');
alert('Registration failed. Please try again.');
} }
} else {
} catch (error) { alert('Please enter a nickname.');
console.error('Error registering user:', error);
alert('An error occurred during registration. Please try again.');
} }
} }
async function checkUserExists(username) { async function checkUserExists(username) {
console.log("checkUserExists called with username:", username); console.log("checkUserExists called with username:", username);
try { try {
@ -230,9 +171,10 @@ document.addEventListener('DOMContentLoaded', () => {
console.log("User registered successfully"); console.log("User registered successfully");
registerForm.style.display = 'none'; registerForm.style.display = 'none';
document.getElementById("post-form-buttons").style.display = 'block'; document.getElementById("post-form-buttons").style.display = 'block';
username = nickname; // Stocker le nom d'utilisateur après l'inscription username = nickname;
roomName = "main_room"; // Nom de la room principale roomName = 'main_room'; // Nom de la room principale
joinRoom(token,roomName, username); // Initialiser le chat WebSocket chatManager = new ChatManager(username, token); // Initialiser ChatManager
chatManager.joinRoom(roomName); // Utilisez ChatManager pour rejoindre la room
} else { } else {
console.error('Registration failed.'); console.error('Registration failed.');
alert('Registration failed. Please try again.'); alert('Registration failed. Please try again.');
@ -588,15 +530,15 @@ document.addEventListener('DOMContentLoaded', () => {
console.warn("WebSocket for quick_match already open."); console.warn("WebSocket for quick_match already open.");
return; return;
} }
// Rejoindre la room "quick_match" roomName = "quick_match"; // Nom de la room principale
roomName = 'quick_match'; chatManager = new ChatManager(username, token); // Initialiser ChatManager
joinRoom(token, roomName, username); chatManager.joinRoom(roomName); // Utilisez ChatManager pour rejoindre la room
console.log("Starting WebSocket connection for quick match..."); console.log("Starting WebSocket connection for quick match...");
startWebSocketConnection(token, 1); // Le "1" pourrait être un identifiant pour le mode Quick Match startWebSocketConnection(token, 1); // Le "1" pourrait être un identifiant pour le mode Quick Match
} }
function startTournament() { function startTournament() {
// Masquer les éléments inutiles et afficher le conteneur du tournoi // Masquer les éléments inutiles et afficher le conteneur du tournoi
tournamentContainer.style.display = 'flex'; tournamentContainer.style.display = 'flex';
logo.style.display = 'none'; logo.style.display = 'none';
@ -616,9 +558,8 @@ document.addEventListener('DOMContentLoaded', () => {
console.warn("WebSocket for tournament already open."); console.warn("WebSocket for tournament already open.");
return; return;
} }
// Rejoindre la room "tournament" chatManager = new ChatManager(username, token); // Initialiser ChatManager
roomName = 'tournament'; chatManager.joinRoom('tournament'); // Utilisez ChatManager pour rejoindre la room
joinRoom(token, roomName, username);
console.log("Starting WebSocket connection for tournament..."); console.log("Starting WebSocket connection for tournament...");
startWebSocketConnection(token, 42); // Le "42" pourrait être un identifiant pour le mode tournoi startWebSocketConnection(token, 42); // Le "42" pourrait être un identifiant pour le mode tournoi
} }
@ -723,20 +664,307 @@ document.addEventListener('DOMContentLoaded', () => {
} }
////////////////////////////CHAT//////////////////////////////////// ////////////////////////////CHAT////////////////////////////////////
class ChatManager {
constructor(username, token) {
this.username = username;
this.token = token;
this.roomSockets = {}; // Stockage des WebSockets par room
this.blockedUsers = []; // Liste des utilisateurs bloqués
this.activeRoom = null; // La room actuellement active
console.log(`ChatManager initialized for user: ${username}`);
}
startChatWebSocket(roomName) {
if (!this.username || this.username.trim() === '') {
console.error("Username is not defined or empty. WebSocket connection aborted.");
alert("Username is required to join the chat. Please log in.");
return;
}
if (this.roomSockets[roomName] && this.roomSockets[roomName].readyState === WebSocket.OPEN) {
console.warn(`WebSocket for room ${roomName} already open.`);
return;
}
console.log("Initializing chat WebSocket...");
console.log(`Initializing chat WebSocket for room: ${roomName} with username: ${this.username}`);
try {
const chatSocket = new WebSocket(`ws://${window.location.host}/ws/chat/${roomName}/`);
this.roomSockets[roomName] = chatSocket; // Stockage du WebSocket
console.log(`startChatWebSocket: ${roomName} with username: ${this.username} and token: ${this.token}`);
const chatInputInstance = new ChatInput(roomName, this.username, chatSocket, this); // On passe l'instance du manager
// Gestion de l'ouverture du WebSocket
chatSocket.onopen = () => {
console.log(`WebSocket ouvert pour l'utilisateur ${this.username} dans la room ${roomName}`);
chatSocket.send(JSON.stringify({
'type': 'authenticate',
'username': this.username,
'token': this.token,
'room': roomName,
}));
console.log(`Authentication message sent for room: ${roomName} with username: ${this.username}`);
};
// Gestion des messages WebSocket
chatSocket.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(`Message received from server in room ${roomName}:`, data);
const receivedUsername = data.username || this.username;
// Assurez-vous que le chat log est bien trouvé pour la room active
let chatLog = document.getElementById(`chat-log-${roomName}`);
if (!chatLog) {
console.error(`Chat log element for room ${roomName} not found.`);
return;
}
switch (data.type) {
case 'authenticated':
console.log(`User authenticated successfully in room: ${roomName}`);
break;
case 'chat_message':
const message = data.message;
const receivedUsername = data.username;
const roomName = data.room;
// Si l'utilisateur n'est pas bloqué, afficher le message
if (!this.blockedUsers.includes(receivedUsername)) {
const messageElement = document.createElement('div');
messageElement.textContent = `${receivedUsername}: ${message}`;
chatLog.appendChild(messageElement);
console.log(`Message displayed in chat log for room: ${roomName}`);
} else {
console.log(`Message from blocked user ${receivedUsername} was filtered out.`);
}
break;
case 'block_user':
if (data.message) {
const messageElement = document.createElement('div');
messageElement.textContent = data.message;
chatLog.appendChild(messageElement); // Ajoute le message au chat-log
} else {
console.error(`Failed to block user: ${data.message}`);
alert(`Error: Failed to block user. ${data.message}`);
}
break;
case 'invite_confirmation':
console.log(`Confirmation de l'invitation reçue: ${data.message}`);
if (data.message) {
const messageElement = document.createElement('div');
messageElement.textContent = data.message;
chatLog.appendChild(messageElement);
console.log(`Invitation confirmation message displayed in chat log: ${data.message}`);
} else {
console.error(`Échec de l'envoi de l'invitation: ${data.message}`);
alert(`Error: Failed to invite user. ${data.message}`);
}
break;
case 'invite':
// Vérifie si l'invitation est destinée à cet utilisateur (invité)
if (data.target_user === this.username) {
console.log(`Invitation reçue de ${data.inviter}`);
const messageElement = document.createElement('div');
messageElement.textContent = data.message;
chatLog.appendChild(messageElement); // Affiche le message dans le chat-log
// Demande à l'utilisateur s'il accepte ou refuse l'invitation
const inviteResponse = confirm(`${data.inviter} vous a invité dans la room ${data.room}. Accepter? yes/no.`);
const response = inviteResponse ? 'yes' : 'no';
console.log(`Réponse à l'invitation: ${response}`);
// Envoie la réponse (oui ou non) au serveur
chatSocket.send(JSON.stringify({
'type': 'invite_response',
'username': this.username, // Utilisateur invité
'response': response,
'inviter': data.inviter, // Le nom de l'invitant
'room': data.room
}));
if (response === 'yes') {
// Si l'invitation est acceptée, lancer QuickMatch pour l'invité
console.log(`L'invité ${this.username} va démarrer le QuickMatch...`);
// Si l'invitation est acceptée, lancer QuickMatch pour l'invité après un délai
console.log("Invitation acceptée, démarrage du QuickMatch pour l'invité après un délai...");
setTimeout(() => {
startQuickMatch(); // Lancer le jeu après 2 secondes
}, 2000); // 2000 millisecondes = 2 secondes
}
}
break;
case 'invite_response':
// Vérifie si l'invitation concerne cet utilisateur (l'invitant)
if (data.inviter === this.username) {
const messageElement = document.createElement('div');
messageElement.textContent = data.message;
chatLog.appendChild(messageElement); // Affiche la réponse dans le chat-log
console.log(`Réponse à l'invitation: ${data.message}`);
if (data.response && data.response.toLowerCase() === 'yes') {
console.log("Invitation acceptée, démarrage du QuickMatch pour l'invitant...");
startQuickMatch();
}
}
break;
case 'success':
console.log(`Success message received: ${data.message}`);
alert('Success: ' + data.message);
break;
case 'error':
console.error('Error message received:', data.message);
alert('Error: ' + data.message);
break;
default:
console.warn('Unhandled message type:', data);
}
};
// Gestion de la fermeture du WebSocket
chatSocket.onclose = (event) => {
if (event.wasClean) {
console.log(`Chat WebSocket closed cleanly for room ${roomName}, code=${event.code}, reason=${event.reason}`);
} else {
console.error(`Chat WebSocket closed unexpectedly for room ${roomName}`);
}
};
// Gestion des erreurs WebSocket
chatSocket.onerror = (error) => {
console.error(`Chat WebSocket error in room ${roomName}:`, error);
};
} catch (error) {
console.error(`Error initializing chat WebSocket for room ${roomName}:`, error);
}
}
blockUser(targetUser) {
this.blockedUsers.push(targetUser);
console.log(`User ${targetUser} added to blocked list.`);
}
createRoomTab(roomName) {
console.log(`createRoomTab: ${roomName} with username: ${username} and token: ${token}`);
const tabContainer = document.getElementById('room-tabs-container');
if (!tabContainer) {
console.error('Room tabs container not found.');
return;
}
const existingTab = Array.from(tabContainer.children).find(tab => tab.dataset.room === roomName);
if (existingTab) {
console.log(`Tab for room ${roomName} already exists.`);
// Vous pouvez ajouter une classe pour indiquer que l'onglet est inactif
existingTab.classList.remove('active');
} else {
console.warn(`Tab for room ${roomName} not found in the HTML.`);
}
}
showRoomTab(roomName) {
const tabContainer = document.getElementById('room-tabs-container');
const tab = Array.from(tabContainer.children).find(tab => tab.dataset.room === roomName);
if (tab) {
tab.classList.add('active');
console.log(`Showing tab for room: ${roomName}`);
} else {
console.warn(`Tab for room ${roomName} not found.`);
}
}
switchRoom(roomName) {
if (!roomName) {
console.error('Room name is undefined.');
return;
}
console.log(`Attempting to switch to room: ${roomName}`);
if (activeRoom === roomName) {
console.log(`Already in room: ${roomName}`);
return;
}
console.log(`Switching from room ${activeRoom} to room ${roomName}`);
const previousRoom = activeRoom;
activeRoom = roomName;
if (previousRoom && document.getElementById(`chat-log-${previousRoom}`)) {
console.log(`Hiding chat log for previous room: ${previousRoom}`);
document.getElementById(`chat-log-${previousRoom}`).style.display = 'none';
}
const chatLog = document.getElementById(`chat-log-${roomName}`);
if (chatLog) {
chatLog.style.display = 'block';
} else {
console.warn(`No chat log found for room: ${roomName}`);
}
// Mettre à jour l'affichage des inputs
document.querySelectorAll('.chat-input').forEach(input => {
input.style.display = 'none';
});
document.getElementById(`chat-input-${roomName}`).style.display = 'block';
// Mettre à jour l'onglet actif
const tabs = document.querySelectorAll('.room-tab');
tabs.forEach(t => t.classList.remove('active'));
const activeTab = Array.from(tabs).find(tab => tab.dataset.room === roomName);
if (activeTab) {
activeTab.classList.add('active');
}
}
joinRoom(roomName) {
console.log(`Joining room: ${roomName} with username: ${chatManager.username} and token: ${chatManager.token}`);
if (activeRoom === roomName) {
console.log(`Already in room: ${roomName}`);
return;
}
// Si la room n'a pas de WebSocket actif, on le crée
if (!chatManager.roomSockets[roomName]) {
console.log(`Joining new room: ${roomName}`);
this.createRoomTab(roomName);
this.showRoomTab(roomName);
this.startChatWebSocket(roomName); // Utilisation du ChatManager pour démarrer le WebSocket
}
this.switchRoom(roomName);
}
}
class ChatInput { class ChatInput {
constructor(roomName, username, chatSocket) { constructor(roomName, username, chatSocket, chatManager) {
this.roomName = roomName; this.roomName = roomName;
this.username = username.toLowerCase().trim(); // Normalisation du nom d'utilisateur this.username = username;
this.chatSocket = chatSocket; this.chatSocket = chatSocket;
this.chatManager = chatManager;
this.messageInput = document.querySelector(`#chat-input-${roomName} input`); this.messageInput = document.querySelector(`#chat-input-${roomName} input`);
this.chatButton = document.querySelector(`#chat-input-${roomName} button`); this.chatButton = document.querySelector(`#chat-input-${roomName} button`);
console.log(`ChatInput initialized for room: ${roomName}, username: ${this.username}`); console.log(`ChatInput initialized for room: ${roomName}, username: ${username}`);
this.initEventListeners(); this.initEventListeners();
} }
initEventListeners() { initEventListeners() {
// Envoi de message en appuyant sur "Entrée"
this.messageInput.addEventListener('keypress', (event) => { this.messageInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
console.log("Enter key pressed, attempting to send message..."); console.log("Enter key pressed, attempting to send message...");
@ -744,7 +972,6 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}); });
// Envoi de message en cliquant sur le bouton d'envoi
this.chatButton.addEventListener('click', () => { this.chatButton.addEventListener('click', () => {
console.log("Send button clicked, attempting to send message..."); console.log("Send button clicked, attempting to send message...");
this.sendMessage(); this.sendMessage();
@ -757,23 +984,23 @@ document.addEventListener('DOMContentLoaded', () => {
if (message) { if (message) {
if (message.startsWith('/b ')) { if (message.startsWith('/b ')) {
const targetUser = message.slice(3).trim().toLowerCase() const targetUser = message.slice(3).trim();
console.log(`Detected block command for user: ${targetUser}`); console.log(`Detected block command for user: ${targetUser}`);
this.sendBlockCommand(targetUser); this.sendBlockCommand(targetUser);
} else if (message.startsWith('/i ')) { } else if (message.startsWith('/i ')) {
const targetUser = message.slice(3).trim().toLowerCase(); const targetUser = message.slice(3).trim();
console.log(`Detected invite command for user: ${targetUser}`); console.log(`Detected invite command for user: ${targetUser}`);
this.sendInviteCommand(targetUser); this.sendInviteCommand(targetUser);
} else { } else {
console.log("Sending chat message to WebSocket..."); console.log(`Sending chat message to WebSocket...`);
this.chatSocket.send(JSON.stringify({ this.chatSocket.send(JSON.stringify({
'type': 'chat_message', 'type': 'chat_message',
'message': message,
'username': this.username, 'username': this.username,
'message': message,
'room': this.roomName 'room': this.roomName
})); }));
} }
this.messageInput.value = ''; // Effacer le champ de saisie this.messageInput.value = '';
console.log("Message input cleared."); console.log("Message input cleared.");
} else { } else {
console.warn('Cannot send an empty message.'); console.warn('Cannot send an empty message.');
@ -781,215 +1008,39 @@ document.addEventListener('DOMContentLoaded', () => {
} }
sendBlockCommand(targetUser) { sendBlockCommand(targetUser) {
this.chatManager.blockUser(targetUser); // Met à jour la liste des utilisateurs bloqués via ChatManager
console.log(`Sending block command to WebSocket for user: ${targetUser}`); console.log(`Sending block command to WebSocket for user: ${targetUser}`);
this.chatSocket.send(JSON.stringify({ this.chatSocket.send(JSON.stringify({
'type': 'block_user', 'type': 'block_user',
'target_user': targetUser,
'username': this.username, 'username': this.username,
'target_user': targetUser,
'room': this.roomName 'room': this.roomName
})); }));
} }
sendInviteCommand(targetUser) { sendInviteCommand(targetUser) {
if (!targetUser) {
console.error("Target user is not defined. Cannot send invite.");
return;
}
if (!this.username) {
console.error("Username is not defined. Cannot send invite.");
return;
}
if (!this.roomName) {
console.error("Room name is not defined. Cannot send invite.");
return;
}
console.log(`Sending invite command to WebSocket for user: ${targetUser}`); console.log(`Sending invite command to WebSocket for user: ${targetUser}`);
this.chatSocket.send(JSON.stringify({ this.chatSocket.send(JSON.stringify({
'type': 'invite_user', 'type': 'invite',
'target_user': targetUser, 'username': this.username, // Utilisateur qui envoie l'invitation
'username': this.username, 'target_user': targetUser, // Utilisateur qui reçoit l'invitation
'room': this.roomName 'room': this.roomName // Room où l'invitation est faite
})); }));
} }
} }
function startChatWebSocket(token, roomName, username) {
// Vérification de la validité du username
if (!username || username.trim() === '') {
console.error("Username is not defined or empty. WebSocket connection aborted.");
alert("Username is required to join the chat. Please log in.");
return;
}
username = username.toLowerCase().trim(); // Normalisation du nom d'utilisateur
// Vérification si un WebSocket est déjà ouvert pour la room
if (roomSockets[roomName] && roomSockets[roomName].readyState === WebSocket.OPEN) {
console.warn(`WebSocket for room ${roomName} already open.`);
return;
}
console.log("Initializing chat WebSocket...");
console.log(`Initializing chat WebSocket for room: ${roomName} with username: ${username}`);
try {
console.log(`startChatWebSocket: ${roomName} with username: ${username} and token: ${token}`);
const chatSocket = new WebSocket(`ws://${window.location.host}/ws/chat/${roomName}/`);
// Événement déclenché lorsque la connexion WebSocket est ouverte
chatSocket.onopen = function () {
console.log(`Chat WebSocket connection established in room: ${roomName}`);
// Envoi d'un message d'authentification avec le token et le username
chatSocket.send(JSON.stringify({
'type': 'authenticate',
'token': token,
'room': roomName,
'username': username
}));
console.log(`Authentication message sent for room: ${roomName} with username: ${username}`);
};
// Gestion des messages reçus du serveur WebSocket
chatSocket.onmessage = function (event) {
const data = JSON.parse(event.data);
console.log(`Message received from server in room ${roomName}:`, data);
switch (data.type) {
case 'authenticated':
console.log(`User authenticated successfully in room: ${roomName}`);
break;
case 'chat_message':
const message = data.message;
const chatLog = document.getElementById(`chat-log-${roomName}`);
const receivedUsername = data.username || 'Anonymous'; // Utiliser un fallback si le username est manquant
if (chatLog) {
const messageElement = document.createElement('div');
messageElement.textContent = `${receivedUsername}: ${message}`;
chatLog.appendChild(messageElement);
console.log(`Message displayed in chat log for room: ${roomName}`);
} else {
console.error('Chat log element not found');
}
break;
case 'success': // Nouveau cas pour traiter les messages de succès
console.log(`Success message received: ${data.message}`);
alert(`Success: ${data.message}`); // Vous pouvez remplacer l'alerte par une notification visuelle plus adaptée
break;
case 'error':
console.error(`Error message received: ${data.message}`);
alert(`Error: ${data.message}`); // Afficher une alerte ou un message d'erreur à l'utilisateur
break;
default:
console.warn('Unhandled message type:', data);
}
};
// Gestion de la fermeture du WebSocket
chatSocket.onclose = function (event) {
if (event.wasClean) {
console.log(`Chat WebSocket closed cleanly for room ${roomName}, code=${event.code}, reason=${event.reason}`);
} else {
console.error(`Chat WebSocket closed unexpectedly for room ${roomName}`);
}
};
// Gestion des erreurs WebSocket
chatSocket.onerror = function (error) {
console.error(`Chat WebSocket error in room ${roomName}:`, error);
};
// Stocker la connexion WebSocket dans roomSockets
roomSockets[roomName] = chatSocket;
console.log(`WebSocket connection stored for room: ${roomName}`);
// Initialiser l'interface de chat pour cette room
new ChatInput(roomName, username, chatSocket);
} catch (error) {
console.error(`Error initializing chat WebSocket for room ${roomName}:`, error);
}
}
function createRoomTab(token, roomName, username) {
console.log(`createRoomTab: ${roomName} with username: ${username} and token: ${token}`);
const tabContainer = document.getElementById('room-tabs-container');
if (!tabContainer) {
console.error('Room tabs container not found.');
return;
}
const existingTab = Array.from(tabContainer.children).find(tab => tab.dataset.room === roomName);
if (existingTab) {
console.log(`Tab for room ${roomName} already exists.`);
// Vous pouvez ajouter une classe pour indiquer que l'onglet est inactif
existingTab.classList.remove('active');
} else {
console.warn(`Tab for room ${roomName} not found in the HTML.`);
}
}
function showRoomTab(roomName) {
const tabContainer = document.getElementById('room-tabs-container');
const tab = Array.from(tabContainer.children).find(tab => tab.dataset.room === roomName);
if (tab) {
// Vous pouvez ajouter une classe pour indiquer que l'onglet est actif
tab.classList.add('active');
console.log(`Showing tab for room: ${roomName}`);
} else {
console.warn(`Tab for room ${roomName} not found.`);
}
}
function switchRoom(token, roomName, username) {
console.log(`switchRoom: ${roomName} with username: ${username} and token: ${token}`);
if (!roomName) {
console.error('Room name is undefined.');
return;
}
console.log(`Attempting to switch to room: ${roomName}`);
if (activeRoom === roomName) {
console.log(`Already in room: ${roomName}`);
return;
}
console.log(`Switching from room ${activeRoom} to room ${roomName}`);
const previousRoom = activeRoom;
activeRoom = roomName;
if (previousRoom && document.getElementById(`chat-log-${previousRoom}`)) {
console.log(`Hiding chat log for previous room: ${previousRoom}`);
document.getElementById(`chat-log-${previousRoom}`).style.display = 'none';
}
const chatLog = document.getElementById(`chat-log-${roomName}`);
if (chatLog) {
chatLog.style.display = 'block';
} else {
console.warn(`No chat log found for room: ${roomName}`);
}
// Mettre à jour l'affichage des inputs
document.querySelectorAll('.chat-input').forEach(input => {
input.style.display = 'none';
});
document.getElementById(`chat-input-${roomName}`).style.display = 'block';
// Mettre à jour l'onglet actif
const tabs = document.querySelectorAll('.room-tab');
tabs.forEach(t => t.classList.remove('active'));
const activeTab = Array.from(tabs).find(tab => tab.dataset.room === roomName);
if (activeTab) {
activeTab.classList.add('active');
}
}
function joinRoom(token, roomName, username) {
// Vérifier si la room est déjà active
console.log(`Joining room: ${roomName} with username: ${username} and token: ${token}`);
if (activeRoom === roomName) {
console.log(`Already in room: ${roomName}`);
return;
}
if (!roomSockets[roomName]) {
console.log(`Joining new room: ${roomName}`);
createRoomTab(token, roomName, username);
showRoomTab(roomName);
startChatWebSocket(token, roomName, username);
}
switchRoom(token, roomName, username);
}
}); });

20
pong/static/index.html
View File

@ -208,7 +208,7 @@
<!-- Entrées de texte et boutons d'envoi pour chaque room --> <!-- Entrées de texte et boutons d'envoi pour chaque room -->
<div id="chat-input-container"> <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..."> <input type="text" placeholder="Tapez votre message...">
<button id="chat-button-main_room" class="chat-button">➤</button> <button id="chat-button-main_room" class="chat-button">➤</button>
</div> </div>
@ -224,13 +224,12 @@
<!-- Conteneur des onglets de room --> <!-- Conteneur des onglets de room -->
<div id="room-tabs-container"> <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="tournament">Tournament</div>
<div class="room-tab" data-room="quick_match">Quick Match</div> <div class="room-tab" data-room="quick_match">Quick Match</div>
</div> </div>
</div> </div>
<!-- Ajout du script JavaScript pour la gestion dynamique -->
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.room-tab'); const tabs = document.querySelectorAll('.room-tab');
@ -241,28 +240,37 @@
tab.addEventListener('click', function() { tab.addEventListener('click', function() {
const roomId = this.dataset.room; const roomId = this.dataset.room;
console.log(`Switching to room: ${roomId}`);
// Afficher le journal de chat correspondant // Afficher le journal de chat correspondant
chatLogs.forEach(log => { chatLogs.forEach(log => {
log.style.display = log.id === `chat-log-${roomId}` ? 'block' : 'none'; 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 // Afficher l'entrée de texte correspondante
chatInputs.forEach(input => { chatInputs.forEach(input => {
input.classList.remove('active');
if (input.id === `chat-input-${roomId}`) { if (input.id === `chat-input-${roomId}`) {
input.classList.add('active'); input.classList.add('active');
console.log(`Displaying chat input for: ${roomId}`);
} else {
input.classList.remove('active');
} }
}); });
// Mettre à jour l'onglet actif // Mettre à jour l'onglet actif
tabs.forEach(t => t.classList.remove('active')); tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active'); this.classList.add('active');
console.log(`Tab for ${roomId} is now active`);
}); });
}); });
}); });
</script> </script>
<script> <script>
const starsContainer = document.getElementById('stars'); const starsContainer = document.getElementById('stars');
for (let i = 0; i < 500; i++) { for (let i = 0; i < 500; i++) {

221
pong/static/styles.css
View File

@ -474,128 +474,183 @@ canvas {
box-shadow: 0 0 20px #00ffff; box-shadow: 0 0 20px #00ffff;
} }
/**************************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 {
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;
}
}
/* Styles pour le conteneur principal du chat */ /* Styles pour le conteneur principal du chat */
#chat-container { #chat-container {
position: fixed; position: fixed;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
width: 300px; width: 300px;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff; box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
z-index: 1000; z-index: 1000;
box-sizing: border-box; /* Ajouté */ box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: borderGlow 3s infinite; /* Ajouter l'animation */
transition: background-color 0.3s, transform 0.3s; /* Ajouter des transitions */
} }
/* Styles pour le conteneur du chat log */ /* Styles pour le conteneur du chat log */
#chat-log-container { #chat-log-container {
width: 100%; width: 100%;
background-color: transparent; /* Fond transparent */ background-color: transparent;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
max-height: 150px; max-height: 150px;
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: border-box; /* Ajouté */ box-sizing: border-box;
flex: 1; /* Permet au conteneur de prendre tout l'espace disponible */ 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; /* Ajouté */ box-sizing: border-box;
background-color: transparent; /* Fond transparent */ background-color: transparent;
display: none;
} }
/* Styles pour l'entrée de texte du chat */ /* Styles pour l'entrée de texte du chat */
#chat-input-container { #chat-input-container {
width: 100%; width: 100%;
height: 25%; display: flex;
display: flex; flex-direction: column;
flex-direction: column; /* Aligner les chat-inputs verticalement */ background-color: transparent;
background-color: transparent; /* Fond transparent */ padding: 5px;
padding: 5px; border-radius: 10px;
border-radius: 10px; box-sizing: border-box;
box-sizing: border-box; /* Ajouté */ margin-bottom: 5px;
} }
.chat-input { .chat-input {
flex: 1; display: flex;
padding: 5px; flex-direction: row;
font-size: 13px; align-items: center;
border: none; justify-content: center;
border-radius: 5px; margin-bottom: 5px;
margin-right: 5px; display: none; /* Masquer par défaut */
height: 28px;
box-sizing: border-box; /* Ajouté */
display: none; /* Masquer par défaut */
} }
.chat-input.active { .chat-input.active {
display: flex; /* Afficher lorsque actif */ display: flex; /* Afficher uniquement l'élément actif */
} }
.chat-input input[type="text"] { .chat-input input[type="text"] {
flex: 1; /* Permet à l'input de prendre tout l'espace disponible */ flex: 1;
padding: 5px; padding: 5px;
font-size: 13px; font-size: 13px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; /* Ajouté */ box-sizing: border-box;
height: 28px; /* Augmenter la hauteur de l'input */ height: 28px;
align-items: center;
justify-content: center;
} }
.chat-button { .chat-button {
height: 28px; height: 50px;
width: 150px; /* Réduire la largeur du bouton */ width: 225px;
border: none; border: none;
border-radius: 5px; border-radius: 50%;
background-color: #00ffff; background: linear-gradient(45deg, #00ffff, #0099ff);
color: #000033; color: #000033;
cursor: pointer; cursor: pointer;
margin-left: 100px; /* Espace entre l'input et le bouton */ margin-left: 15px;
display: flex; /* Utiliser flexbox pour centrer le contenu */ display: flex;
align-items: center; /* Centrer verticalement */ align-items: center;
justify-content: center; /* Centrer horizontalement */ justify-content: center;
text-align: center; /* Assurer que le texte est centré */ text-align: center;
font-size: 13px; /* Ajuster la taille de la police */ font-size: 20px;
padding: 0; /* Supprimer le padding interne */ 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: scale(1.1);
}
.chat-button:active {
transform: scale(0.95);
} }
/* Styles pour les onglets de room */ /* 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: 10px; margin-top: 5px;
} }
/* Styles pour les onglets de room */
.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; /* Ajouté */ box-sizing: border-box;
opacity: 0.1; /* Onglets inactifs grisés */ opacity: 0.1;
transition: background 0.3s, transform 0.3s; /* Ajouter des transitions */
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 */
}
.room-tab:active {
transform: scale(0.95); /* Réduire légèrement à l'activation */
} }
.room-tab.active { .room-tab.active {
background-color: #00ffff; background-color: #00ffff;
color: #000033; color: #000033;
opacity: 1; /* Onglets actifs non grisés */ opacity: 1;
} }