starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat finish; add invitation; friend; see online users if he is your friend

Browse Source
This commit is contained in:
Xamora
2024-01-24 16:03:50 +01:00
parent fe47a4d633
commit 0f7953b2f3
12 changed files with 532 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/static/css/profile.css
View File

@ -3,12 +3,20 @@
font-size: 0.8em;
}
#app #block {
#app #block, #app #friend {
cursor: pointer;
font-size: 0.7em;
text-decoration: underline;
}
#app {
margin-top: 20px;
margin-top: 1em;
background-color: red;
}
#app #yes, #app #no {
display:inline;
cursor: pointer;
font-size: 0.7em;
text-decoration: underline;
}

188
frontend/static/js/api/chat/notice.js
View File

@ -6,8 +6,8 @@ class Notice {
this.client = client;
this.data = {};
// users online, invited by, asked friend by,
let data_variable = ["online", "invited", "asked"];
// users online, invited by ..., asked by ..., asker to ...
let data_variable = ["online", "invited", "asked", "asker"];
for (let i in data_variable)
this.data[data_variable[i]] = [];
@ -21,16 +21,19 @@ class Notice {
this.chatSocket = new WebSocket(url);
this.chatSocket.onmessage = (event) =>{
let send = JSON.parse(event.data);
console.log("notice: ", send);
if (send.type == "invite")
this.receiveInvite(send);
else if (send.type == "online_users" || send.type == "disconnect")
this.receiveOnlineUser(send);
else if (send.type == "accept_invite")
this.receiveAcceptInvite(send);
//console.log("notice: ", send);
try {
this["receive_" + send.type](send);
}
catch (error) {
console.log("receive_" + send.type + ": Function not found");
}
}
this.chatSocket.onopen = (event) => {
this.getOnlineUser();
this.ask_friend();
}
}
@ -42,7 +45,7 @@ class Notice {
}
async acceptInvite(invitedBy) {
async accept_invite(invitedBy) {
this.sendRequest({
type: "accept_invite",
@ -51,14 +54,15 @@ class Notice {
}
async receiveAcceptInvite(send) {
async receive_accept_invite(send) {
let id_game = send["result"];
this.data["invited"] = send.invites;
let id_game = send["id_game"];
navigateTo("/game/" + id_game);
}
async refuseInvite(invitedBy) {
async refuse_invite(invitedBy) {
this.sendRequest({
type: "refuse_invite",
@ -67,8 +71,23 @@ class Notice {
}
async receive_refuse_invite(send) {
async sendInvite(id_inviteds) {
this.data["invited"] = send.invites;
if (send.author_id == this.client.me.id) {
if (this.rewrite_invite !== undefined)
this.rewrite_invite();
}
else {
let sender = await this.client.profiles.getProfile(send.author_id);
create_popup(sender.username + " refuse your invitation");
}
}
async send_invite(id_inviteds) {
this.sendRequest({
type: "invite",
@ -78,25 +97,27 @@ class Notice {
}
async receiveInvite(send) {
async receive_invite(send) {
if (this.client.me == undefined)
return ;
let content = send.content;
let content = send.invites;
if (send.author_id == this.client.me.id) {
if (send.status == 200) {
for (let target in send.targets)
return create_popup("Invitation send");
}
else if (send.status == 404)
else if (send.status == 444)
return create_popup("User not connected");
else if (send.status == 409)
return create_popup("Already invited");
}
else {
// Regarder qu'il est bien invité par l'auteur
// Et qu'il n'est pas déjà invité
if (!content.includes(send.author_id) ||
this.data["invited"].includes(send.author_id))
return;
@ -108,8 +129,6 @@ class Notice {
if (this.rewrite_invite !== undefined)
this.rewrite_invite();
// Géré la reception de l'invitation
}
}
@ -125,13 +144,20 @@ class Notice {
}
async receiveOnlineUser(send) {
async receive_online_users(send) {
let content = send.content;
if (content !== undefined) {
if (this.data["online"].length > 0) {
// get all disconnect user
let disconnects = this.data["online"].filter(id => !Object.keys(content).includes(id));
//let disconnects = this.data["online"].filter(id => !Object.keys(content).includes(id));
let disconnects = [];
for (const [key, value] of Object.entries(this.data["online"])) {
if (content[key] == "red" && value == "green")
disconnects.push(key);
}
// delete invite
this.data["invited"] = this.data["invited"].filter(id => !disconnects.includes(id));
@ -139,13 +165,131 @@ class Notice {
//console.log(this.data["invited"]);
}
this.data["online"] = Object.keys(content);
this.data["online"] = content;
if (this.rewrite_usernames !== undefined)
this.rewrite_usernames();
}
}
async ask_friend(user_id=undefined) {
this.sendRequest({
type: "ask_friend",
targets: [user_id],
time: new Date().getTime(),
});
}
async receive_ask_friend(send) {
let my_id = (this.client.me && this.client.me.id) || send.author_id;
if (send.author_id == my_id) {
if (send.status == 400)
create_popup("Friend ask error");
else if (send.status == 409)
create_popup("Already asked friend or already friend");
}
//if (!send.asked.includes(send.author_id) ||
//this.data["asked"].includes(send.author_id))
//return;
//if (!send.asker.includes(send.author_id) ||
//this.data["asker"].includes(send.author_id))
//return;
this.data["asked"] = send.asked;
this.data["asker"] = send.asker;
if (send.author_id != my_id) {
let sender = await this.client.profiles.getProfile(send.author_id);
if (this.data["asker"].includes(send.author_id))
create_popup(sender.username + " ask you as friend");
if (this.rewrite_profile !== undefined)
await this.rewrite_profile();
}
}
async remove_friend(user_id) {
this.sendRequest({
type: "remove_friend",
targets: [user_id],
time: new Date().getTime(),
});
}
async receive_remove_friend(send) {
this.data["asked"] = send.asked;
this.data["asker"] = send.asker;
if (send.author_id == this.client.me.id) {
if (send.status == 400)
create_popup("Error remove Friend");
else if (send.status == 409)
create_popup("Not friend, wtf");
}
if (this.rewrite_profile !== undefined)
await this.rewrite_profile();
}
async accept_friend(user_id) {
this.sendRequest({
type: "accept_friend",
targets: [user_id],
time: new Date().getTime(),
});
}
async receive_accept_friend(send) {
this.data["asked"] = send.asked;
this.data["asker"] = send.asker;
let sender = await this.client.profiles.getProfile(send.author_id);
if (send.author_id == this.client.me.id) {
if (send.status == 400)
create_popup("Error accept Friend");
else if (send.status == 404)
create_popup("Not found request Friend");
else if (send.status == 409)
create_popup("Already Friend, wtf");
}
else {
create_popup(sender.username + " accept your friend request");
}
if (this.rewrite_profile !== undefined)
await this.rewrite_profile();
}
async refuse_friend(user_id) {
this.sendRequest({
type: "refuse_friend",
targets: [user_id],
time: new Date().getTime(),
});
}
async receive_refuse_friend(send) {
this.data["asked"] = send.asked;
this.data["asker"] = send.asker;
let sender = await this.client.profiles.getProfile(send.author_id);
if (send.author_id == this.client.me.id) {
if (send.status == 400)
create_popup("Error refuse Friend");
else if (send.status == 404)
create_popup("Not found request Friend");
else if (send.status == 409)
create_popup("Already Friend, WTF");
}
if (this.rewrite_profile !== undefined)
await this.rewrite_profile();
}
async sendRequest(content) {
if (this.chatSocket == undefined)
return;

2
frontend/static/js/api/client.js
View File

@ -79,7 +79,7 @@ class Client
async _patch_json(uri, data)
{
let response = await fetch(this._url + uri, {
method: "PATCH",
ethod: "PATCH",
headers: {
"X-CSRFToken": getCookie("csrftoken"),
"Content-Type": "application/json",

36
frontend/static/js/api/profile.js
View File

@ -15,6 +15,7 @@ class Profile
this.username = username;
this.avatar_url = avatar_url;
this.isBlocked = false;
this.isFriend = false;
}
async init()
@ -29,24 +30,47 @@ class Profile
this.username = response_data.username;
this.avatar_url = response_data.avatar_url;
if (this.client.me == undefined)
return;
await this.getBlock();
await this.getFriend();
}
async getBlock() {
let block_response = await this.client._get("/api/profiles/block");
if (block_response.status != 200)
return
let block_data = await block_response.json();
let block_list = JSON.parse(block_data);
let block_list = JSON.parse(block_data["blockeds"]);
let client_id = block_data["user_id"];
block_list.forEach(block => {
let blocker = block.fields.blocker;
let blocked = block.fields.blocked;
if (blocker == this.client.me.id && blocked == this.id)
if (blocker == client_id && blocked == this.id)
return this.isBlocked = true;
});
}
async getFriend() {
let friend_response = await this.client._get("/api/profiles/friend");
this.isFriend = false;
if (friend_response.status != 200)
return this.isFriend;
let friend_data = await friend_response.json();
let friends_list = friend_data["friends"];
let client_id = friend_data["user_id"];
friends_list.forEach(friend => {
if (friend == this.id) {
this.isFriend = true;
return this.isFriend;
}
});
return this.isFriend;
}
}
export {Profile}

1
frontend/static/js/index.js
View File

@ -58,6 +58,7 @@ async function renderView(view)
let error_code = await view.postInit();
if (error_code === 404)
renderView(new PageNotFoundView());
else if (error_code === 403)

93
frontend/static/js/views/ProfilePageView.js
View File

@ -4,17 +4,16 @@ import { client } from "../index.js"
export default class extends AbstractView {
constructor(params) {
super(params, "Profile ");
this.user_id = params.id;
this.id = Number(params.id);
}
async postInit()
{
let profile = await client.profiles.getProfile(this.user_id);
this.profile = await client.profiles.getProfile(this.id);
if (profile === null)
if (this.profile === null)
return 404;
this.profile = await client.profiles.getProfile(this.user_id);
this.info = document.getElementById("info");
// Username
@ -32,6 +31,14 @@ export default class extends AbstractView {
this.info.appendChild(avatar);
await this.blockButton();
await this.friendButton();
client.notice.rewrite_profile = async () => {
let result = await this.profile.getFriend();
await this.profile.getBlock()
await this.friendButton();
}
}
async blockButton() {
@ -39,23 +46,81 @@ export default class extends AbstractView {
if (await client.isAuthentificate() === false)
return;
if (client.me.id != this.user_id) {
let block = document.getElementById("block") || document.createElement("a");
if (client.me.id != this.id) {
let block = document.getElementById("block");
if (block == undefined) {
block = document.createElement("p");
this.info.appendChild(block);
}
block.id = "block";
block.innerText = "";
block.onclick = async () => {
if (!this.profile.isBlocked)
await client.profiles.block(this.user_id);
if (this.profile.isBlocked)
await client.profiles.deblock(this.id);
else
await client.profiles.deblock(this.user_id);
this.profile = await client.profiles.getProfile(this.user_id);
await client.profiles.block(this.id);
this.profile = await client.profiles.getProfile(this.id);
this.blockButton();
};
if (this.profile.isBlocked)
block.appendChild(document.createTextNode("Deblock"));
block.textContent = "Deblock";
else
block.appendChild(document.createTextNode("Block"));
this.info.appendChild(block);
block.textContent = "Block";
}
}
async friendButton() {
if (await client.isAuthentificate() === false)
return;
if (client.me.id != this.id) {
let yes = document.getElementById("yes") || document.createElement("p");
let no = document.getElementById("no") || document.createElement("p");
let friend = document.getElementById("friend") || document.createElement("p");
if (client.notice.data["asker"].includes(this.id)) {
if (friend)
friend.remove();
yes.id = "yes";
yes.textContent = "Accept Friend";
yes.onclick = async () => {
client.notice.accept_friend(this.id);
}
no.id = "no";
no.textContent = "Refuse Friend";
no.onclick = async () => {
client.notice.refuse_friend(this.id);
}
this.info.appendChild(yes);
this.info.appendChild(document.createTextNode(" "));
this.info.appendChild(no);
}
else {
if (yes && no)
yes.remove(); no.remove();
friend.id = "friend"
friend.onclick = async () => {
if (this.profile.isFriend)
await client.notice.remove_friend(this.id);
else
await client.notice.ask_friend(this.id);
this.profile = await client.profiles.getProfile(this.id);
this.friendButton();
};
if (this.profile.isFriend)
friend.textContent = "Remove Friend";
else {
friend.textContent = "Ask Friend";
}
this.info.appendChild(friend);
}
}
}

36
frontend/static/js/views/Search.js
View File

@ -10,12 +10,12 @@ export default class extends AbstractView {
async wait_get_online_users() {
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
//console.log(client.notice.data["online"].length);
if (client.notice.data["online"].length > 0) {
console.log(client.notice.data["online"]);
if (Object.keys(client.notice.data["online"]).length > 0) {
clearInterval(checkInterval);
resolve();
}
}, 100);
}, 1);
});
}
@ -29,7 +29,7 @@ export default class extends AbstractView {
return console.log("Error");
//await client.notice.getOnlineUser();
await this.wait_get_online_users();
//await this.wait_get_online_users();
client.notice.rewrite_usernames = this.rewrite_usernames;
client.notice.rewrite_invite = this.display_invite;
@ -68,7 +68,14 @@ export default class extends AbstractView {
username.setAttribute('data-link', '');
username.id = `username${user.id}`
username.href = `/profiles/${user.id}`;
username.style.color = client.notice.data["online"].includes(user.id.toString()) ? "green" : "red";
if (user.id == client.me.id)
username.style.color = "green";
else {
let online = client.notice.data["online"][user.id];
username.style.color = online !== undefined ? online : "gray";
}
username.appendChild(document.createTextNode(user.username));
new_user.appendChild(username);
@ -137,8 +144,14 @@ export default class extends AbstractView {
profiles.filter(user => user.username.toLowerCase().startsWith(search) == true).forEach((user) => {
let username = document.getElementById(`username${user.id}`);
if (username !== null)
username.style.color = client.notice.data["online"].includes(user.id.toString()) ? "green" : "red";
if (username !== null) {
if (user.id == client.me.id)
username.style.color = "green";
else {
let online = client.notice.data["online"][user.id];
username.style.color = online !== undefined ? online : "gray";
}
}
});
}
@ -259,9 +272,10 @@ export default class extends AbstractView {
usernames += (profiles.filter(user => user.id == member_id)[0].username);
}
});
members.appendChild(document.createTextNode(usernames));
members.textContent = usernames;
chat.appendChild(members);
return members
}
@ -299,7 +313,7 @@ export default class extends AbstractView {
invite.innerText = "invite";
invite.title = "Invite to play a game"
invite.onclick = async () => {
await client.notice.sendInvite(others);
await client.notice.send_invite(others);
};
chat.appendChild(invite);
}
@ -312,14 +326,14 @@ export default class extends AbstractView {
yes.style.background = "green";
yes.title = "Accept to play a game"
yes.onclick = async () => {
await client.notice.acceptInvite(invitedBy);
await client.notice.accept_invite(invitedBy);
};
no.id = "no";
no.style.background = "red";
no.title = "Refuse to play a game"
no.onclick = async () => {
await client.notice.refuseInvite(invitedBy);
await client.notice.refuse_invite(invitedBy);
};
chat.appendChild(yes);