diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html index 21c5672..873d73e 100644 --- a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html +++ b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html @@ -1,9 +1,11 @@

PTME

- +
+
+

diff --git a/docker-compose/requirements/djangoserver/file/server/server/typeRequests/createAccount.py b/docker-compose/requirements/djangoserver/file/server/server/typeRequests/createAccount.py index 202c810..34bfb73 100644 --- a/docker-compose/requirements/djangoserver/file/server/server/typeRequests/createAccount.py +++ b/docker-compose/requirements/djangoserver/file/server/server/typeRequests/createAccount.py @@ -6,7 +6,7 @@ # By: edbernar = 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 \ No newline at end of file diff --git a/docker-compose/requirements/djangoserver/file/server/server/websocket.py b/docker-compose/requirements/djangoserver/file/server/server/websocket.py index c870051..51b18a5 100644 --- a/docker-compose/requirements/djangoserver/file/server/server/websocket.py +++ b/docker-compose/requirements/djangoserver/file/server/server/websocket.py @@ -3,10 +3,10 @@ # ::: :::::::: # # websocket.py :+: :+: :+: # # +:+ +:+ +:+ # -# By: tomoron +#+ +:+ +#+ # +# By: edbernar +#+ +:+ +#+ */ +/* By: edbernar 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() { diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js new file mode 100644 index 0000000..a5866b8 --- /dev/null +++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js @@ -0,0 +1,52 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* typeSearchUser.js :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: edbernar { + const div = document.createElement('div'); + + div.setAttribute('class', 'searchResultLine'); + div.innerHTML = '

' + user[0] + '

' + '' + 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 }; \ No newline at end of file diff --git a/docker-compose/requirements/nginx/static/javascript/websocket.js b/docker-compose/requirements/nginx/static/javascript/websocket.js index 769ba38..59a4655 100644 --- a/docker-compose/requirements/nginx/static/javascript/websocket.js +++ b/docker-compose/requirements/nginx/static/javascript/websocket.js @@ -6,7 +6,7 @@ /* By: edbernar { status = 0; console.log('Disconnected'); + setTimeout(() => { + launchSocket(); + }, 500); }; } diff --git a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css index faabb00..19c6e4a 100644 --- a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css +++ b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css @@ -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; +} \ No newline at end of file