- Add notif for new message
    - remove buttons "private" and "game" in chat
    - add function on button newConv in profilPage
    - fix camera who change position (2 to 1.5 in z axe) when a goal is scored
    - fix some bug in responses functions
    - add button chat in profil page and lobby page
This commit is contained in:
Kum1ta
2024-09-21 23:14:27 +02:00
parent 696447a0d1
commit d29c58ae42
17 changed files with 161 additions and 167 deletions

View File

@ -11,7 +11,6 @@ class User(models.Model):
mail_verified = models.BooleanField(default=False)
github_link = models.CharField(max_length=1024, null=True, blank=True, default=None)
discord_username = models.CharField(max_length=1024, null=True, blank=True, default=None)
elo = models.DecimalField(max_digits=10, decimal_places=0, default=1000)
class Message(models.Model):

View File

@ -75,7 +75,9 @@
<h1>Chat</h1>
<div id="topChatCross"><span>&times;</span></div>
</div>
<p id="infoChat">You are not connected to the chat</p>
<div id="messageListChatHome">
<p id="infoChat">You are not connected to the chat</p>
</div>
</div>
<section class="homeSection">
</section>

View File

@ -14,6 +14,19 @@
<p>Logout</p>
</div>
</div>
<div id="chatButton">
<span class="notification-badge"></span>
<img src="/static/img/homePage/bulle.png">
</div>
<div id="chatDiv">
<div id="topChatHome">
<h1>Chat</h1>
<div id="topChatCross"><span>&times;</span></div>
</div>
<div id="messageListChatHome">
<p id="infoChat">You are not connected to the chat</p>
</div>
</div>
<div class="main">
<div id="loginPopup" class="popup">
<div class="popup-content">
@ -63,4 +76,6 @@
<div class="buttonStartGame">
<p>Start</p>
</div>
</div>
<div id="divNotification">
</div>

View File

@ -9,9 +9,9 @@
<p>150 Elo</p>
</div>
<div class="rightButtonDiv">
<img src="/static/img/profilPage/github.png">
<img src="/static/img/profilPage/discord.webp">
<img src="/static/img/profilPage/addConv.png">
<img id="github" src="/static/img/profilPage/github.png">
<img id="discord" src="/static/img/profilPage/discord.webp">
<img id="newConv" src="/static/img/profilPage/addConv.png">
</div>
</div>
@ -25,4 +25,19 @@
</div>
</div>
</div>
</div>
<div id="chatButton">
<span class="notification-badge"></span>
<img src="/static/img/homePage/bulle.png">
</div>
<div id="chatDiv">
<div id="topChatHome">
<h1>Chat</h1>
<div id="topChatCross"><span>&times;</span></div>
</div>
<div id="messageListChatHome">
<p id="infoChat">You are not connected to the chat</p>
</div>
</div>
<div id="divNotification">
</div>

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:19:10 by edbernar #+# #+# */
/* Updated: 2024/09/17 23:10:22 by edbernar ### ########.fr */
/* Updated: 2024/09/21 22:41:48 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -15,13 +15,6 @@ import { showActualGameMessage } from "/static/javascript/liveChat/showActualGam
import { showListUser } from "/static/javascript/liveChat/showUserList.js";
import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
/*
Todo (Eddy) :
- add a function to "New conversation +"
- game message when game will be implemented
*/
let chatContent = null;
let chatButton = null;
let topChatHomeCross = null;
@ -46,66 +39,19 @@ class LiveChat
}
function addDefaultButton()
{
const newDiv = document.createElement("div");
const newPrivateButton = document.createElement("h2");
const newGameButton = document.createElement("h2");
const divMessageListChatHome = document.createElement("div");
newDiv.setAttribute("id", "buttonTypeChatHome");
newPrivateButton.textContent = "Private";
newGameButton.textContent = "Game";
newPrivateButton.setAttribute("id", "selected");
newDiv.appendChild(newPrivateButton);
newDiv.appendChild(newGameButton);
document.getElementById("chatDiv").appendChild(newDiv);
divMessageListChatHome.setAttribute("id", "messageListChatHome");
document.getElementById("chatDiv").appendChild(divMessageListChatHome);
newPrivateButton.addEventListener("click", async () => {
newGameButton.removeAttribute("id");
newPrivateButton.setAttribute("id", "selected");
await showListUser();
});
newGameButton.addEventListener("click", () => {
newPrivateButton.removeAttribute("id");
newGameButton.setAttribute("id", "selected");
showActualGameMessage();
});
}
function removeButtonIfExist()
{
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
if (divButtonTypeChatHome)
{
divButtonTypeChatHome.remove();
document.getElementById("messageListChatHome").remove();
}
}
async function showChatMenu()
function showChatMenu()
{
const infoChat = document.getElementById("infoChat");
chatDiv.style.display = "flex";
if (userMeInfo.id !== -1)
{
if (infoChat)
infoChat.remove();
removeButtonIfExist();
addDefaultButton();
await showListUser();
}
showListUser();
}
function hideChatMenu()
{
console.log("hideChatMenu");
chatDiv.style.display = "none";
infoPanel.isOpen = false;
}
export { LiveChat };
export { LiveChat, showChatMenu };

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:17:54 by edbernar #+# #+# */
/* Updated: 2024/08/26 00:40:11 by edbernar ### ########.fr */
/* Updated: 2024/09/21 17:14:15 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -17,62 +17,46 @@ import { sendRequest } from "/static/javascript/websocket.js";
let savedButtons = [];
async function showPrivateChat(user)
function showPrivateChat(user)
{
const divMessageListChatHome = document.getElementById("messageListChatHome");
sendRequest("get_private_list_message", {id: user.id});
await waitForMessageList();
infoPanel.id = user.id;
infoPanel.isOpen = true;
infoPanel.divMessage = divMessageListChatHome;
await changeButton(user);
await displayAllMessage(divMessageListChatHome);
await displayInputBar(divMessageListChatHome, user);
waitForMessageList().then(() => {
infoPanel.id = user.id;
infoPanel.isOpen = true;
infoPanel.divMessage = divMessageListChatHome;
changeButton(user);
displayAllMessage(divMessageListChatHome);
displayInputBar(divMessageListChatHome, user);
})
}
async function restoreButton()
function changeButton(user)
{
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
divButtonTypeChatHome.innerHTML = '';
savedButtons.forEach(element => {
divButtonTypeChatHome.appendChild(element);
});
}
async function changeButton(user)
{
const divButtonTypeChatHome = document.getElementById("buttonTypeChatHome");
const divMessageListChatHome = document.getElementById("messageListChatHome");
const h2Username = document.createElement("h2");
const h2UsernameNode = document.createTextNode(user.name);
const div = document.createElement('div');
let returnButton = null;
let h2Button = null;
let lenh2Button = 0;
h2Button = divButtonTypeChatHome.getElementsByTagName("h2");
lenh2Button = h2Button.length;
savedButtons.splice(0, savedButtons.length);
for (let i = 0; i < lenh2Button; i++) {
savedButtons.push(h2Button[0]);
h2Button[0].remove();
}
h2Username.appendChild(h2UsernameNode);
divButtonTypeChatHome.appendChild(h2Username);
divButtonTypeChatHome .innerHTML += `
divMessageListChatHome.before(div);
div.innerHTML += `
<p id="returnButton" style="margin: 8px 10px 0 0; text-align: right;">Return</p>
`;
h2Button[0].style.cursor = "default";
div.setAttribute('id', 'buttonTypeChatHome');
h2Username.appendChild(h2UsernameNode);
returnButton = document.getElementById("returnButton");
returnButton.before(h2Username);
returnButton.style.cursor = "pointer";
returnButton.addEventListener("click", () => {
restoreButton();
infoPanel.isOpen = false;
showListUser();
});
}
async function displayAllMessage(divMessageListChatHome)
function displayAllMessage(divMessageListChatHome)
{
let newDiv = null;
let contentNode = null;
@ -100,7 +84,7 @@ async function displayAllMessage(divMessageListChatHome)
divMessageListChatHome.scrollTop = divMessageListChatHome.scrollHeight;
}
async function displayInputBar(divMessageListChatHome, user)
function displayInputBar(divMessageListChatHome, user)
{
let sendButton;
let inputMessage;

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:21:10 by edbernar #+# #+# */
/* Updated: 2024/08/30 16:36:37 by edbernar ### ########.fr */
/* Updated: 2024/09/21 17:15:11 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -16,45 +16,28 @@ import { userList } from "/static/javascript/typeResponse/typePrivateListUser.js
import { showPrivateChat } from "/static/javascript/liveChat/showPrivateChat.js";
import { sendRequest } from "/static/javascript/websocket.js";
async function showListUser() {
function showListUser() {
const buttons = document.getElementById('buttonTypeChatHome');
const infoChat = document.getElementById("infoChat");
const divMessageListChatHome = document.getElementById("messageListChatHome");
let divUser;
let userList;
sendRequest("get_private_list_user", {});
await waitForUserList();
divMessageListChatHome.style.height = "100%";
divMessageListChatHome.style.paddingBottom = "10px";
divMessageListChatHome.innerHTML = '';
divMessageListChatHome.scrollTop = 0;
if (JSON.stringify(userList) !== "{}")
{
userList.forEach(element => {
let user = document.createElement("div");
user.classList.add("user");
user.innerHTML = `
<div class="status ${element.status}">
<img>
</div>
<h3></h3>
`
user.querySelector("img").src = element.pfp;
user.querySelector("h3").innerText = element.name;
divMessageListChatHome.appendChild(user);
});
}
divMessageListChatHome.innerHTML += "<p id='newConversation' style='text-align: center; margin-top: 20px; cursor: pointer;'>New conversation +</p>";
divUser = document.getElementsByClassName("user");
for (let i = 0; i < divUser.length; i++) {
divUser[i].addEventListener("click", async () => {
await showPrivateChat(userList[i]);
});
}
document.getElementById('newConversation').addEventListener('mouseup', () => {
divMessageListChatHome.innerText = 'Loading...';
sendRequest("get_all_list_user", {});
waitForallListUser().then((listUser) => {
divMessageListChatHome.innerText = 'User list :\n';
listUser.forEach(element => {
waitForUserList().then((userList) => {
if (!userList.length)
infoChat.innerText = "No conversation"
else
{
divMessageListChatHome.style.height = "100%";
divMessageListChatHome.style.paddingBottom = "10px";
divMessageListChatHome.innerHTML = '';
divMessageListChatHome.scrollTop = 0;
if (infoChat)
infoChat.remove();
if (buttons)
buttons.remove();
userList.forEach(element => {
let user = document.createElement("div");
user.classList.add("user");
user.innerHTML = `
@ -63,12 +46,17 @@ async function showListUser() {
</div>
<h3></h3>
`
user.querySelector("img").src = element.pfp;
user.querySelector("h3").innerText = element.name;
divMessageListChatHome.appendChild(user);
})
})
});
divUser = divMessageListChatHome.children;
for (let i = 0; i < divUser.length; i++) {
divUser[i].addEventListener("click", async () => {
showPrivateChat(userList[i]);
});
}
}
});
}

View File

@ -6,12 +6,13 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/20 14:19:33 by edbernar ### ########.fr */
/* Updated: 2024/09/21 17:27:24 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { userMeInfo, waitForLogin } from '/static/javascript/typeResponse/typeLogin.js';
import { barSelecter, goalSelecter } from '/static/javascript/lobbyPage/3d.js';
import { LiveChat } from "/static/javascript/liveChat/main.js";
import { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js'
@ -43,13 +44,13 @@ class LobbyPage
waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username);
else
usernameP.innerHTML = userMeInfo.username;
LiveChat.create();
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);
@ -79,7 +80,8 @@ class LobbyPage
document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
window.removeEventListener('resize', ajustSearchUserList);
LiveChat.dispose();
listSelectCard[0].removeEventListener('click', selectGameModeOne);
listSelectCard[1].removeEventListener('click', selectGameModeTwo);
listSelectCard[2].removeEventListener('click', selectGameModeThree);

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/09/20 21:59:24 by edbernar ### ########.fr */
/* Updated: 2024/09/21 23:07:39 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -113,6 +113,10 @@ class Player
makeAnimation(isOpponent)
{
this.mapVar.putVideoOnCanvas(3, 'goal');
setTimeout(() => {
this.mapVar.putVideoOnCanvas(0, null);
}, 4000);
if (isOpponent)
{
this.mapVar.reCreate("opponent");
@ -166,7 +170,7 @@ class Player
this.setCameraPosition(
this.object.position.x,
this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
this.object.position.z + 2
this.object.position.z + 1.5
);
}
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
@ -217,7 +221,7 @@ class Player
this.setCameraPosition(
this.object.position.x,
this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
this.object.position.z + 2
this.object.position.z + 1.5
);
}
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/20 22:32:09 by edbernar ### ########.fr */
/* Updated: 2024/09/21 22:59:04 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 23:32:52 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:41:57 by edbernar ### ########.fr */
/* Updated: 2024/09/21 22:25:12 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -126,6 +126,11 @@ function newNotification(title, message, img, action, timer, actionText)
let timeoutInTimout = null;
console.log("New notification: " + message);
if (divNotification == null)
{
console.warn("No div for display notification here. Add div in html template for display it.");
return ;
}
newNotification.classList.add("notification");
newNotification.style.width = "100%";
newNotification.appendChild(header);

View File

@ -6,26 +6,33 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/09/20 14:17:56 by edbernar ### ########.fr */
/* Updated: 2024/09/21 21:51:43 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { waitForUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { waitForUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { showPrivateChat } from "/static/javascript/liveChat/showPrivateChat.js";
import { LiveChat, showChatMenu } from "/static/javascript/liveChat/main.js";
import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
import { sendRequest } from "/static/javascript/websocket.js";
class ProfilPage
{
static create(userId)
{
const username = document.getElementsByTagName('h2')[0];
const pfp = document.getElementsByClassName('profile-image')[0];
const banner = document.getElementsByClassName('background-card')[0];
const username = document.getElementsByTagName('h2')[0];
const pfp = document.getElementsByClassName('profile-image')[0];
const banner = document.getElementsByClassName('background-card')[0];
const githubButton = document.getElementById('github');
const discordButton = document.getElementById('discord');
const convButton = document.getElementById('newConv');
let usernameText = null;
LiveChat.create();
sendRequest("get_user_info", {id: userId});
waitForUserInfo().then((userInfo) => {
usernameText = userInfo.username;
username.innerText = userInfo.username + ' (status not implemented)';
pfp.style.backgroundImage = `url("${userInfo.pfp}")`
pfp.style.backgroundSize = "cover";
@ -39,11 +46,15 @@ class ProfilPage
banner.innerHTML = `<img class='editPen' src='/static/img/profilPage/editPen.png'/>`
}
});
convButton.addEventListener('click', () => {
showChatMenu();
showPrivateChat({id: userId, name: usernameText});
});
}
static dispose()
{
LiveChat.dispose();
}
}

View File

@ -6,11 +6,11 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */
/* Updated: 2024/09/20 22:49:59 by edbernar ### ########.fr */
/* Updated: 2024/09/21 22:52:13 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { MultiOnlineGamePage, opponent, ball, player } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
import { MultiOnlineGamePage, opponent, ball, player, map } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
import { pageRenderer } from '/static/javascript/main.js'

View File

@ -6,20 +6,21 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 15:15:49 by edbernar #+# #+# */
/* Updated: 2024/08/30 15:47:44 by edbernar ### ########.fr */
/* Updated: 2024/09/21 22:19:26 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { sendRequest } from "/static/javascript/websocket.js";
import { messageList, infoPanel } from "/static/javascript/typeResponse/typePrivateListMessage.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { waitForUserInfo } from '/static/javascript/typeResponse/typeUserInfo.js'
import { userMeInfo } from "/static/javascript/typeResponse/typeLogin.js";
import { sendRequest } from "/static/javascript/websocket.js";
function typeNewPrivateMessage(content)
{
console.log(content);
messageList.push(content);
if (infoPanel.isOpen && infoPanel.id === content.channel)
{
messageList.push(content);
infoPanel.divMessage.insertAdjacentHTML('beforeend', `
<div class="${content.from === userMeInfo.id ? "meMessage" : "opponentMessage"}">
<p class="content">${content.content}</p>
@ -28,6 +29,13 @@ function typeNewPrivateMessage(content)
`);
infoPanel.divMessage.scrollTop = infoPanel.divMessage.scrollHeight;
}
else if (content.from != userMeInfo.id)
{
sendRequest("get_user_info", {id: content.from});
waitForUserInfo().then((userInfo) => {
CN.new("Message", "New message from " + userInfo.username);
});
}
}
export { typeNewPrivateMessage };

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/02 01:56:15 by edbernar #+# #+# */
/* Updated: 2024/08/30 16:34:29 by edbernar ### ########.fr */
/* Updated: 2024/09/21 16:32:42 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -17,7 +17,10 @@ let userListResolve = null;
function waitForUserList() {
return new Promise((resolve) => {
if (userListAvailable)
resolve();
{
userListAvailable = false;
resolve(userList);
}
else
userListResolve = resolve;
});
@ -30,6 +33,7 @@ function typePrivateListUser(list) {
{
userListResolve(userList);
userListResolve = null;
userListAvailable = false;
}
}

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/20 00:42:04 by edbernar #+# #+# */
/* Updated: 2024/09/20 00:48:17 by edbernar ### ########.fr */
/* Updated: 2024/09/21 21:57:45 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -17,7 +17,10 @@ let userInfoResolve = null;
function waitForUserInfo() {
return new Promise((resolve) => {
if (userInfoAvailable)
{
userInfoAvailable = false;
resolve(userInfo);
}
else
userInfoResolve = resolve;
});
@ -31,6 +34,7 @@ function typeUserInfo(list)
{
userInfoResolve(userInfo);
userInfoResolve = null;
userInfoAvailable = false;
}
}

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/14 21:20:45 by edbernar #+# #+# */
/* Updated: 2024/09/15 14:53:22 by edbernar ### ########.fr */
/* Updated: 2024/09/21 22:35:05 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -38,7 +38,8 @@ class WaitingGamePage
sentence.innerText = text + points;
}, 500);
timeout = setTimeout(() => {
sendRequest("game", {action: 0})
sendRequest("game", {action: 0});
timeout = null;
}, 1500);
returnButton.addEventListener('click', returnToLobby);
}
@ -83,7 +84,13 @@ class WaitingGamePage
function returnToLobby()
{
sendRequest("game", {action: 2});
if (timeout)
{
clearTimeout(timeout);
timeout = null;
}
else
sendRequest("game", {action: 2});
for (let i = 0; i < document.body.children.length; i++)
{
document.body.children[i].style.animation = "anim3 0.6s";