merge with Xamora

frontend/static/css/index.css

@@ -7,11 +7,30 @@
 body {
 }
 
-#app #avatar
-{
+#app #avatar {
 	max-height: 10em;
 	max-width: 10em;
 	min-height: 6em;
 	min-width: 6em;
 }
 
+
+#popup {
+	position: fixed;
+	font-size: 1.2em;
+	z-index: 1; /* foreground */
+
+	top:calc(1% + 0.1em);
+	left:50%;
+	transform: translate(-50%, 50%);
+
+	border: 1em	solid #1a1a1a;
+	color: #1a1a1a;
+	background-color: #cccccc;
+
+	padding: 5px;
+	border-width: 0.1em;
+
+	opacity: 0;
+	transition: opacity 0.25s; 
+}

frontend/static/js/api/chat/notice.js

@@ -1,7 +1,16 @@
+import {create_popup} from "../../utils/noticeUtils.js";
+
 class Notice {
 	constructor(client) {
 		this.client = client;
-		this.online_users = {};
+		this.data = {};
+
+		// users online, invited by, asked friend by, 
+		let data_variable = ["online", "invited", "asked"];
+		for (let i in data_variable) {
+			this.data[data_variable[i]] = [];
+		}
+
 		this.connect();
 
 	}
@@ -19,7 +28,6 @@ class Notice {
 				this.receiveOnlineUser(data);
 		}
 	    this.chatSocket.onopen = (event) => {
-			this.online_users = {};
 			this.getOnlineUser();
 		}
 	}
@@ -47,14 +55,22 @@ class Notice {
 	async receiveInvite(data) {
 		
 		if (data.content === "notice return") {
-			if (data.status == 200)
-				return
-				// Notification pour dire que la notif a été bien envoyé
+			if (data.status == 200) {
+				for (let target in data.targets)
+					this.data["invited"].push(target);
+				return create_popup("Invitation send");
+			}
 			else if (data.status == 404)
-				return
-				// Pas connecté
+				return create_popup("User not connected");
+			else if (data.status == 409)
+				return create_popup("Already invited");
 		}
 		else {
+			let sender = await this.client.profiles.getProfile(data.author_id);
+
+			this.inviter.push(data.author_id);
+			create_popup("Invitation received by " + sender.username);
+
 			// Géré la reception de l'invitation
 		}
 	}
@@ -75,7 +91,19 @@ class Notice {
 
 	async receiveOnlineUser(data) {
 		if (data.content !== undefined) {
-			this.online_users = data.content;
+
+			if (this.online_users.length > 0) {
+				// get all disconnect user
+				let disconnects = this.online_users.filter(id => !Object.keys(data.content).includes(id));
+
+				// delete invite
+				this.data["invited"] = this.data["invited"].filter(id => !disconnects.includes(id));
+
+				//console.log(this.data["invited"]);
+			}
+
+			this.data["online"] = Object.keys(data.content);
+
 			if (this.rewrite_usernames !== undefined)
 				this.rewrite_usernames();
 		}

frontend/static/js/index.js

@@ -19,8 +19,6 @@ import TournamentPageView from "./views/tournament/TournamentPageView.js";
 import TournamentsView from "./views/tournament/TournamentsListView.js";
 import TournamentCreateView from "./views/tournament/TournamentCreateView.js";
 
-import {manage_popup} from "./utils/noticeUtils.js";
-
 let client = new Client(location.protocol + "//" + location.host)
 
 let lastView = undefined
@@ -118,8 +116,6 @@ const router = async(uri) => {
     if (await renderView(view))
         return 1;
 
-	manage_popup(client)
-    
     return 0;
 };
 

frontend/static/js/utils/noticeUtils.js

@@ -1,4 +1,28 @@
-function manage_popup(client) {
+// timer in milliseconds
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-export {manage_popup}
+async function create_popup(text = undefined, timer = undefined) {
+
+	if (text == undefined)
+		text = "notice undefined";
+
+	let popup = document.getElementById("popup");
+	popup.textContent = "Notice: " + text;
+	popup.style.opacity = 0.95;
+	popup.onclick = async () => {
+		popup.style.opacity = 0;
+		return ;
+	}
+
+	if (timer == undefined)
+		timer = 5000;
+	await sleep(timer);
+
+	popup.style.opacity = 0;
+	//popup.style.visibility = "hidden"
+
+}
+
+export {create_popup}

frontend/static/js/views/Search.js

@@ -10,7 +10,8 @@ export default class extends AbstractView {
 	async wait_get_online_users() {
 		return new Promise((resolve) => {
 			const checkInterval = setInterval(() => {
-				if (Object.keys(client.notice.online_users).length > 0) {
+				//console.log(client.notice.data["online"].length);
+				if (client.notice.data["online"].length > 0) {
 					clearInterval(checkInterval);
 					resolve();
 				}
@@ -23,10 +24,11 @@ export default class extends AbstractView {
 		let logged = await client.isAuthentificate();
 		let profiles = await client.profiles.all();
 
-		if (client.notice == undefined || client.notice.online_users == undefined)
+		//console.log(client.notice.data);
+		if (client.notice.data == undefined || client.notice.data["online"] == undefined)
 			return console.log("Error");
 
-		await client.notice.getOnlineUser();
+		//await client.notice.getOnlineUser();
 		await this.wait_get_online_users();
 		client.notice.rewrite_usernames = this.rewrite_usernames;
 
@@ -64,7 +66,7 @@ export default class extends AbstractView {
 			username.setAttribute('data-link', '');
 			username.id = `username${user.id}`
 			username.href = `/profiles/${user.id}`;
-			username.style.color = client.notice.online_users[user.id] !== undefined ? "green" : "red";
+			username.style.color = client.notice.data["online"].includes(user.id.toString()) ? "green" : "red";
 			username.appendChild(document.createTextNode(user.username));
 			new_user.appendChild(username);
 
@@ -134,7 +136,7 @@ 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.online_users[user.id] !== undefined ? "green" : "red";
+				username.style.color = client.notice.data["online"].includes(user.id.toString()) ? "green" : "red";
 		});
 
 	}
@@ -194,15 +196,7 @@ export default class extends AbstractView {
 		// Scroll to the bottom of messages
 		messages.scrollTop = messages.scrollHeight;
 
-		// Button to send invite to play
-		let invite = document.getElementById("invite") || document.createElement("button");
-		invite.id = "invite";
-		invite.innerText = "invite";
-		invite.onclick = async () => {
-			await client.notice.sendInvite(client.me.id, 
-				client.channels.channel.members_id.filter(id => id !== client.me.id));
-		};
-		chat.appendChild(invite);
+		this.display_invite(chat);
 
 	}
 
@@ -264,6 +258,20 @@ export default class extends AbstractView {
 		return members
 	}
 
+	async display_invite(chat, profiles) {
+
+		// Button to send invite to play
+		let invite = document.getElementById("invite") || document.createElement("button");
+		invite.id = "invite";
+		invite.innerText = "invite";
+		invite.onclick = async () => {
+			await client.notice.sendInvite(client.me.id, 
+				client.channels.channel.members_id.filter(id => id !== client.me.id));
+		};
+		chat.appendChild(invite);
+
+	}
+
 	async hide_chat() {
 
 		let closes = ["chat", "invite"]

frontend/templates/index.html

@@ -24,7 +24,7 @@
 	</div>
 	</nav>
 	<div class="notice">
-		<span id="popup">Test</span>
+		<span id="popup"></span>
 	</div>
 	<div id="app" class="m-3"></div>
 	<script type="module" src="{% static 'js/index.js' %}"></script>