public_html/css/game.css

@@ -28,6 +28,12 @@ html, body{
 	user-select: none;
 }
 
+#phoneContainer.notification{
+	position: absolute;
+	right: 20px;
+	top: calc(100% - 40px);
+}
+
 #phoneDiv{
 	position: relative;
 }

public_html/js/global.js

@@ -4,6 +4,7 @@ let renderer = new Render("canvas");
 let LB = new LeaderBoard("canvas");
 let bulletSound = new Sound("./assets/sounds/shoot.mp3");
 let driftSound = new Sound("./assets/sounds/drift.mp3");
+let notificationSound = new Sound("./assets/sounds/notification.mp3");
 let net = new Network("wss://ws.gta6.insat.fr:8080?name=" + getCookie("pseudo"));
 let inp = new Input("canvas");
 let phone = new Phone();

public_html/js/phone.js

@@ -1,6 +1,6 @@
 class Phone{
 	constructor(){
-		this.position = 0;
+		this.position = 0; //0: hidden 1: visible 2: notification
 		this.messages = [];
 		this.name = document.getElementById("TitlePage");
 
@@ -99,10 +99,20 @@ class Phone{
 
 		this.contentmsg.appendChild(msg);
 		this.contentmsg.scrollTop = this.contentmsg.scrollHeight;
+
+		//notification
+		if(message.playerId!=player.id){
+			notificationSound.play();
+			if(this.position == 0){
+				this.position = 2;
+				document.getElementById("phoneContainer").className = "notification";
+			}
+		}
 	}
 
 	sendMessage(title, content){
 		let message = {
+			playerId: player.id,
 			title: player.name,
 			content: content
 		}
@@ -122,7 +132,7 @@ class Phone{
 
 	changePosition(){
 		if(!document.getElementById("phoneContainer").contains(document.activeElement)){
-			if(this.position == 0){
+			if(this.position == 0 || this.position == 2){
 				document.getElementById("phoneContainer").className = "visible";
 				this.position = 1;
 			}else{