tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- websocket try to reconnect when it disconnected
    - add function on search bar in lobby page for search user
Django
    - add request search user to find someone in database and return a list
This commit is contained in:
Kum1ta
2024-09-18 09:22:52 +02:00
parent d4e6c8e30e
commit 5275f8f033
9 changed files with 233 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
View File

@ -1,9 +1,11 @@
<div id="topBarLobby">
<h1>PTME</h1>
<div class="search-container">
<input type="text" placeholder="Search..." class="search-input">
<input type="text" placeholder="Search..." class="search-input" id="searchInputUser">
<button class="search-button">Search</button>
</div>
<div id="searchResult">
</div>
<div id="loginButton">
<p></p>
</div>

4
docker-compose/requirements/djangoserver/file/server/server/typeRequests/createAccount.py
View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/08/09 08:08:00 by edbernar #+# #+# #
# Updated: 2024/09/16 13:39:22 by tomoron ### ########.fr #
# Updated: 2024/09/18 07:24:47 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -73,7 +73,7 @@ def createAccount(socket, content):
socket.sync_send(json.dumps({"type": "create_account", "content": "Account created"}))
if(not sendVerifMail(verif_str, content["mail"], content["username"])):
print("mail error")
socket.sendError("An error occured while sending the email, glhf", 2026)
socket.sendError("An error occured while sending the email, glhf", 9026)
except Exception as e:
print("error")
socket.sendError("An error occured while creating the account", 9024, e)

30
docker-compose/requirements/djangoserver/file/server/server/typeRequests/searchUser.py Normal file
View File

@ -0,0 +1,30 @@
# **************************************************************************** #
# #
# ::: :::::::: #
# searchUser.py :+: :+: :+: #
# +:+ +:+ +:+ #
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/18 07:26:07 by edbernar #+# #+# #
# Updated: 2024/09/18 08:20:44 by edbernar ### ########.fr #
# #
# **************************************************************************** #
from asgiref.sync import sync_to_async
from ..models import User
import json
@sync_to_async
def searchUser(socket, content):
try:
users = User.objects.filter(username__contains=content["username"])
userList = []
for user in users:
if (user.id != socket.id and user.mail_verified):
userList.append((user.username, user.id, user.pfp))
if len(userList) >= 10:
break
socket.sync_send({"type":"search_user", "content":userList if userList else []})
except Exception as e:
socket.sendError("An unknown error occured", 9027, e)
return

13
docker-compose/requirements/djangoserver/file/server/server/websocket.py
View File

@ -3,10 +3,10 @@
# ::: :::::::: #
# websocket.py :+: :+: :+: #
# +:+ +:+ +:+ #
# By: tomoron <tomoron@student.42.fr> +#+ +:+ +#+ #
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/09 14:31:30 by tomoron #+# #+# #
# Updated: 2024/09/15 00:48:29 by tomoron ### ########.fr #
# Updated: 2024/09/18 07:33:08 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -22,15 +22,20 @@ django.setup()
from .typeRequests.getPrivateListMessage import getPrivateListMessage
from .typeRequests.getPrivateListUser import getPrivateListUser
from .typeRequests.sendPrivateMessage import sendPrivateMessage
from .typeRequests.searchUser import searchUser
from .typeRequests.createAccount import createAccount
from .typeRequests.login import login
from .typeRequests.getAllListUser import getAllListUser
from .typeRequests.gameRequest import gameRequest
typeRequest = ["login", "get_private_list_user", "get_private_list_message",
"send_private_message", "create_account", "get_all_list_user", "game"]
"send_private_message", "create_account", "get_all_list_user", "game",
"search_user"
]
functionRequest = [login, getPrivateListUser, getPrivateListMessage,
sendPrivateMessage, createAccount, getAllListUser, gameRequest]
sendPrivateMessage, createAccount, getAllListUser, gameRequest,
searchUser
]
from random import randint

55
docker-compose/requirements/djangoserver/file/server/test_data.sql
View File

@ -1,6 +1,55 @@
INSERT INTO "server_user" ("username", "mail", "password", "id42", "pfp") VALUES
('tomoron', 'a@a.com', 'a5f1efc32bcc4dc53e471f9620b78ca9', NULL, '/static/img/default_pfp.jpg'),
('patate', 'b@b.com', '5e547979d3f20f43c87e5e0e8406f267', NULL, '/static/img/default_pfp.jpg');
INSERT INTO "server_user" ("username", "mail", "password", "id42", "pfp", "mail_verified") VALUES
('tomoron', 'a@a.com', 'a5f1efc32bcc4dc53e471f9620b78ca9', NULL, '/static/img/default_pfp.jpg', True),
('patate', 'b@b.com', '5e547979d3f20f43c87e5e0e8406f267', NULL, '/static/img/default_pfp.jpg', True),
('skywalker42', 'skywalker42@domain.com', 'e3a57c2a6bfa5a6434de0d9d51f6f41a', NULL, '/static/img/default_pfp.jpg', True),
('lunarwhale', 'lunarwhale@domain.com', 'b8c6a95718d5c7b5e6d34b9b241d917e', NULL, '/static/img/default_pfp.jpg', True),
('pixelwizard', 'pixelwizard@domain.com', 'f9e8a7d6c4d3b2f1a1e9d7c8a5f6b7e9', NULL, '/static/img/default_pfp.jpg', True),
('thunderhawk', 'thunderhawk@domain.com', 'd1a5e3f7b9c6d4a8e7f2b5c3d1e9f7b6', NULL, '/static/img/default_pfp.jpg', True),
('cosmicfox', 'cosmicfox@domain.com', 'e6b5d7a8c4d1f7e3b2a9c6d5f7e4a2b3', NULL, '/static/img/default_pfp.jpg', True),
('solartitan', 'solartitan@domain.com', 'b2e8d7f9c6a3d5e7f4b9c6d8e5a7b3f4', NULL, '/static/img/default_pfp.jpg', True),
('nebularaven', 'nebularaven@domain.com', 'f3e8d7a6b9d5c4a8e2b7c6f1d9e7a8b4', NULL, '/static/img/default_pfp.jpg', True),
('vortexwolf', 'vortexwolf@domain.com', 'a7b9f3d2e6c5b4f1a8e7c9d6b5f3a8e1', NULL, '/static/img/default_pfp.jpg', True),
('starlight', 'starlight@domain.com', 'd6f8b2a7e3c9f5a4b1d7e6a9c3b4f1a5', NULL, '/static/img/default_pfp.jpg', True),
('phantomowl', 'phantomowl@domain.com', 'c9e7b5d6f8a3d4b7c6e1a9f3b7c5e6a2', NULL, '/static/img/default_pfp.jpg', True),
('galacticlion', 'galacticlion@domain.com', 'e2d8b7f9a6c5d3f4b1a7d6e5c9b2a8f4', NULL, '/static/img/default_pfp.jpg', True),
('cyberfalcon', 'cyberfalcon@domain.com', 'a9b6f4e2c7d5b3f8a1c6e7d9f2b5a4e3', NULL, '/static/img/default_pfp.jpg', True),
('silverdragon', 'silverdragon@domain.com', 'f8c6a7d3e9b5c2d1a7b9f3e6d4b1c5a8', NULL, '/static/img/default_pfp.jpg', True),
('shadowtiger', 'shadowtiger@domain.com', 'd3e8f7b6a5c4d2b1a9e7b5c3f8d9a4e6', NULL, '/static/img/default_pfp.jpg', True),
('redphoenix', 'redphoenix@domain.com', 'b6c9d3e7f8a5b4d2c1e9a7f3d5b6c8e1', NULL, '/static/img/default_pfp.jpg', True),
('stormfalcon', 'stormfalcon@domain.com', 'f1a8d9b5c6e7a2d3b9e6c5a8d4f7b2e3', NULL, '/static/img/default_pfp.jpg', True),
('frostfang', 'frostfang@domain.com', 'e7c9a6d4b5f3e2a1d9c7f8a6b4d3e5f7', NULL, '/static/img/default_pfp.jpg', True),
('celestialwolf', 'celestialwolf@domain.com', 'a5f3d7b9e8c6d2a7f4b9c3e5d7a1b4f9', NULL, '/static/img/default_pfp.jpg', True),
('ironhawk', 'ironhawk@domain.com', 'd9f8b6e7a3d5c4f2b1e7d6a9b5c3e9f2', NULL, '/static/img/default_pfp.jpg', True),
('obsidianraven', 'obsidianraven@domain.com', 'f6b9d4c8a7e2b3d5f1a8c7d9e5b2f6a3', NULL, '/static/img/default_pfp.jpg', True),
('emberfox', 'emberfox@domain.com', 'b1d9f7c8a5e6b3c7d4f1a9e3b6f5c8a7', NULL, '/static/img/default_pfp.jpg', True),
('blackstorm', 'blackstorm@domain.com', 'e5f7a9d3c8b4f1d2a6c9e7b5f3d4b9a1', NULL, '/static/img/default_pfp.jpg', True),
('quicksilver', 'quicksilver@domain.com', 'f3d6e9b7a5c4d2e7b1a9f8c3d5b6a9e4', NULL, '/static/img/default_pfp.jpg', True),
('auroraflame', 'auroraflame@domain.com', 'c6a9e5f7b3d4c8e9f1b7d2a5f3c9a7d6', NULL, '/static/img/default_pfp.jpg', True),
('crimsonblade', 'crimsonblade@domain.com', 'b8f3a6d5e7c9b4d2a7f9c6e3d4a1b7e5', NULL, '/static/img/default_pfp.jpg', True),
('silentshadow', 'silentshadow@domain.com', 'e9a5b6d3f8c7d4b1a6c9f7e5b2d8f3a1', NULL, '/static/img/default_pfp.jpg', True),
('wildfang', 'wildfang@domain.com', 'f4d8b7e6a9c5d2b3e7a6f9c8b3d4e1f7', NULL, '/static/img/default_pfp.jpg', True),
('venomtiger', 'venomtiger@domain.com', 'a6c9d8e7f3b5a4c2d1f9e6b3a7f5c4d8', NULL, '/static/img/default_pfp.jpg', True),
('nightwolf', 'nightwolf@domain.com', 'd7e9f4b8a6c3d1f2b5a9e7c6d3f8a5b4', NULL, '/static/img/default_pfp.jpg', True),
('silverfalcon', 'silverfalcon@domain.com', 'b9d8a7f6c3d4e2a5f7b1e9c6d5a8b3f2', NULL, '/static/img/default_pfp.jpg', True),
('starfall', 'starfall@domain.com', 'e4b7a9d5f3c6e8a2b9c5d7f4b1a3f6e9', NULL, '/static/img/default_pfp.jpg', True),
('thunderblade', 'thunderblade@domain.com', 'c7d9f8b5e3a1d4f6b2a9c6d7f3e5b4a8', NULL, '/static/img/default_pfp.jpg', True),
('novafox', 'novafox@domain.com', 'd5e3a9f7c4b1d6e8a7f2c9b3e5d8f4a6', NULL, '/static/img/default_pfp.jpg', True),
('ragingraven', 'ragingraven@domain.com', 'b9c7e5a8d6f4b2a3e7d9f1c6b4a9f3d2', NULL, '/static/img/default_pfp.jpg', True),
('obsidianwolf', 'obsidianwolf@domain.com', 'f7a9d3c6e8b5d4f1a9e7c3b2d5f8a4c9', NULL, '/static/img/default_pfp.jpg', True),
('crystalphoenix', 'crystalphoenix@domain.com', 'e5d7f4b9a6c8e3b1d9f5a3c7b6e8a2d1', NULL, '/static/img/default_pfp.jpg', True),
('shadowfang', 'shadowfang@domain.com', 'b8f7a6e5d9c3b1d4a7e9c6b5d3f8a1f4', NULL, '/static/img/default_pfp.jpg', True),
('stormrider', 'stormrider@domain.com', 'd1e9f7b5c4a3f6d8b9c7a5f2e4b8d3c9', NULL, '/static/img/default_pfp.jpg', True),
('lunarfalcon', 'lunarfalcon@domain.com', 'c6f8b7a9d3e2f5b1a7e9c4d5f3b6a8d4', NULL, '/static/img/default_pfp.jpg', True),
('ironraven', 'ironraven@domain.com', 'e7a9f8d5c4b1e3f6a7b9c2d3f5e8a1c4', NULL, '/static/img/default_pfp.jpg', True),
('volcaniclion', 'volcaniclion@domain.com', 'b5d9e8f7c3a1d6b2f7e9c4a3b5d2f8a6', NULL, '/static/img/default_pfp.jpg', True),
('blazewolf', 'blazewolf@domain.com', 'f3b8e7a9d5c4f1b9d6a7e5c3b9f4d8a1', NULL, '/static/img/default_pfp.jpg', True),
('phantomfox', 'phantomfox@domain.com', 'a7e9c6f8b5d2f3a9e4c1d7b3f6a8b9d4', NULL, '/static/img/default_pfp.jpg', True),
('emberlion', 'emberlion@domain.com', 'd4b9e7a6c3f8d5e9a7f2c1b6d3f5a9b2', NULL, '/static/img/default_pfp.jpg', True),
('frostwolf', 'frostwolf@domain.com', 'e6f9b8c7d4a5f3e2b7c9a3d1f4b5e9d6', NULL, '/static/img/default_pfp.jpg', True),
('tigerblade', 'tigerblade@domain.com', 'b7d3e8f4a6c9d1b5a9f2e7c3d6f5b8a2', NULL, '/static/img/default_pfp.jpg', True),
('midnightwolf', 'midnightwolf@domain.com', 'a5f8e7b9d6c4b3e2a9f1d7c5b3f6a8d9', NULL, '/static/img/default_pfp.jpg', True),
('radiantfalcon', 'radiantfalcon@domain.com', 'f3d7e9b6c8a5b4f1d9e7a3c2b5f6d8a9', NULL, '/static/img/default_pfp.jpg', True),
('shadowlion', 'shadowlion@domain.com', 'e9a3f6b7c8d5e4b1a7d9c3f5b6e8a9d2', NULL, '/static/img/default_pfp.jpg', True);
INSERT INTO "server_message" ("date", "sender_id", "to_id", "content") VALUES
('2024-08-25 18:10:54.27476+00', 1, 2, 'coucou'),

56
docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
View File

@ -3,15 +3,16 @@
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/18 01:48:32 by marvin ### ########.fr */
/* Updated: 2024/09/18 09:16:58 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { userMeInfo, waitForLogin } from '/static/javascript/typeResponse/typeLogin.js';
import { barSelecter, goalSelecter } from '/static/javascript/lobbyPage/3d.js';
import { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js'
/*
@ -26,24 +27,29 @@ let listSelectCard = null;
let gameMode = 0;
let barSelector = null;
let goalSelector = null;
let timeout = null;
class LobbyPage
{
static create()
{
const startButton = document.getElementsByClassName('buttonStartGame')[0];
const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0];
const loginButton = document.getElementById('loginButton');
const startButton = document.getElementsByClassName('buttonStartGame')[0];
const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0];
const loginButton = document.getElementById('loginButton');
const inputUser = document.getElementById('searchInputUser');
if (userMeInfo.id == -1)
waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username);
else
usernameP.innerHTML = userMeInfo.username;
inputUser.addEventListener('input', searchUser);
loginButton.addEventListener('click', showMenu);
window.addEventListener('resize', movePopMenuLoginButton);
window.addEventListener('resize', ajustSearchUserList);
movePopMenuLoginButton();
initButtonPopMenuLogin();
window.addEventListener('click', closePopUpWhenClickOutsite);
listSelectCard = document.getElementsByClassName('select-card');
document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
document.getElementById('closePopupBtn').addEventListener('click', hideGameMode);
@ -66,10 +72,12 @@ class LobbyPage
{
const startButton = document.getElementsByClassName('buttonStartGame')[0];
window.removeEventListener('click', closePopUpWhenClickOutsite);
window.removeEventListener('resize', movePopMenuLoginButton);
startButton.removeEventListener('click', startMode);
document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
window.removeEventListener('resize', ajustSearchUserList);
window.removeEventListener('click', closeClickOutsiteGameMode);
listSelectCard[0].removeEventListener('click', selectGameModeOne);
listSelectCard[1].removeEventListener('click', selectGameModeTwo);
@ -84,6 +92,33 @@ class LobbyPage
}
}
function searchUser(event)
{
const searchResult = document.getElementById('searchResult');
if (timeout)
clearTimeout(timeout);
if (event.target.value == '')
searchResult.innerHTML = '';
else
{
timeout = setTimeout(() => {
sendRequest("search_user", {username: event.target.value});
}, 300);
}
}
function ajustSearchUserList()
{
const searchInputUser = document.getElementById('searchInputUser');
const pos = searchInputUser.getBoundingClientRect();
const searchResult = document.getElementById('searchResult');
searchResult.style.width = pos.width + 'px';
searchResult.style.top = pos.top + pos.height + 'px';
searchResult.style.left = pos.left + 'px';
}
function startMode()
{
if (gameMode == 0)
@ -123,14 +158,11 @@ function showGameMode()
document.getElementById('loginPopup').style.display = 'flex';
}
// Pour EDDY : Je l'ai fait fonctionné comme ça mais change le comme tu le veux,
// La fonction sert a quitter la login popup si on clique en dehors de la zone. (Efface le commentaire quand tu fais les changements)
window.addEventListener('click', function(event) {
if (event.target == document.getElementById('loginPopup')) {
function closePopUpWhenClickOutsite (event)
{
if (event.target == document.getElementById('loginPopup'))
document.getElementById('loginPopup').style.display = 'none';
}
});
};
function hideGameMode()
{

52
docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js Normal file
View File

@ -0,0 +1,52 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* typeSearchUser.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/18 08:12:24 by edbernar #+# #+# */
/* Updated: 2024/09/18 09:19:40 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
import { pageRenderer } from '/static/javascript/main.js'
function typeSearchUser(userList)
{
const searchInputUser = document.getElementById('searchInputUser');
const searchResult = document.getElementById('searchResult');
let pos = null;
if (pageRenderer.actualPage !== LobbyPage)
return ;
document.body.addEventListener('click', removeAlluser)
pos = searchInputUser.getBoundingClientRect();
searchResult.style.width = pos.width + 'px';
searchResult.style.top = pos.top + pos.height + 'px';
searchResult.style.left = pos.left + 'px';
searchResult.innerHTML = '';
userList.forEach(user => {
const div = document.createElement('div');
div.setAttribute('class', 'searchResultLine');
div.innerHTML = '<p>' + user[0] + '</p>' + '<img src="' + user[2] + '">'
searchResult.appendChild(div);
div.addEventListener('click', () => {
console.log("Show profil " + user[0]);
})
});
}
function removeAlluser()
{
const searchInputUser = document.getElementById('searchInputUser');
const searchResult = document.getElementById('searchResult');
document.body.removeEventListener('click', removeAlluser);
searchResult.innerHTML = '';
searchInputUser.value = '';
}
export { typeSearchUser };

10
docker-compose/requirements/nginx/static/javascript/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/09/17 14:31:46 by edbernar ### ########.fr */
/* Updated: 2024/09/18 08:31:09 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -19,6 +19,7 @@ import { typePrivateListUser } from "/static/javascript/typeResponse/typePrivate
import { typeCreateAccount } from "/static/javascript/typeResponse/typeCreateAccount.js";
import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeSearchUser } from "/static/javascript/typeResponse/typeSearchUser.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
import { typeGame } from "/static/javascript/typeResponse/typeGame.js"
@ -30,8 +31,8 @@ function launchSocket()
{
socket = new WebSocket('/ws');
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame];
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser];
const errorCode = [9007, 9010, 9011];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];
@ -82,6 +83,9 @@ function launchSocket()
socket.onclose = () => {
status = 0;
console.log('Disconnected');
setTimeout(() => {
launchSocket();
}, 500);
};
}

34
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

@ -241,6 +241,7 @@ body {
border: 2px solid #ccc;
font-size: 16px;
outline: none;
min-width: 200px;
}
.search-input:focus {
@ -325,3 +326,36 @@ body {
color: white;
cursor: pointer;
}
#searchResult {
position: absolute;
display: flex;
flex-direction: column;
background-color: white;
color: black;
z-index: 999;
}
#searchResult .searchResultLine {
margin-bottom: 5px;
width: 100%;
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#searchResult .searchResultLine p {
margin-left: 10px;
}
#searchResult .searchResultLine:hover {
background-color: #f1f1f1;
}
#searchResult .searchResultLine img {
width: 50px;
height: 50px;
padding: 5px;
}