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

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);
};
}